New GUI for B2G viewer.

extensions/b2g/viewer.css

@@ -0,0 +1,282 @@
+/* Copyright 2012 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+* { -moz-box-sizing: border-box; }
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-size: 10px;
+}
+
+body {
+  background: url(images/document_bg.png);
+  color: #fff;
+  font-family: "MozTT", sans-serif;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 50px;
+}
+
+section {
+  overflow: hidden;
+  font-size: 10px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 20px;
+}
+
+footer {
+  background-image: url(images/toolbar_background.png);
+  height: 40px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  box-shadow: 0px -2px 5px rgba(50, 50, 50, 0.75);
+}
+
+
+.toolbarButton {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.toolbarButton.pageUp {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 0;
+  background-image: url(images/icon_previous_page.png);
+}
+
+.toolbarButton.pageDown {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 18%;
+  background-image: url(images/icon_next_page.png);
+}
+
+#pageNumber {
+  position: absolute;
+  width: 28%;
+  height: 100%;
+  left: 36%;
+  text-align: center;
+  border: 0;
+  background-color: transparent;
+  font-size: 9pt;
+  color: #FFF;
+  background-image: url(images/div_line_left.png), url(images/div_line_right.png);
+  background-repeat: no-repeat;
+  background-position: left, right;
+}
+
+.toolbarButton.zoomOut {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 64%;
+  background-image: url(images/icon_zoom_out.png);
+}
+
+.toolbarButton.zoomIn {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 82%;
+  background-image: url(images/icon_zoom_in.png);
+}
+
+.toolbarButton[disabled] {
+  opacity: .3;
+}
+
+.hidden {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+
+#viewerContainer {
+  position: absolute;
+  overflow: auto;
+  width: 100%;
+  top: 50px;
+  bottom: 40px;
+  left: 0;
+  right: 0;
+}
+
+canvas {
+  margin: auto;
+  display: block;
+}
+
+.page {
+  direction: ltr;
+  width: 816px;
+  height: 1056px;
+  margin: 10px auto;
+  position: relative;
+  overflow: hidden;
+  background-color: white;
+}
+
+.page > a {
+  display: block;
+  position: absolute;
+}
+
+.loadingIcon {
+  width: 2.9rem;
+  height: 2.9rem;
+  background: url("images/spinner.png") no-repeat scroll left top transparent;
+  border: medium none;
+  animation: 1s steps(10, end) 0s normal none infinite moveDefault;
+  display: block;
+  position: absolute;
+  top: calc((100% - 2.9rem) / 2);
+  left: calc((100% - 2.9rem) / 2);
+}
+
+@keyframes moveDefault {
+  from {
+    background-position: 0 top;
+  }
+
+  to {
+    background-position: -390px top;
+  }
+}
+
+#loadingBox {
+  position: absolute;
+  top: 50%;
+  margin-top: -25px;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: #ddd;
+  font-size: 14px;
+}
+
+#loadingBar {
+  display: inline-block;
+  clear: both;
+  margin: 0px;
+  margin-top: 5px;
+  line-height: 0;
+  border-radius: 2px;
+  width: 200px;
+  height: 25px;
+
+  background-color: hsla(0,0%,0%,.3);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  border: 1px solid #000;
+  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
+              0 0 1px hsla(0,0%,0%,.2) inset,
+              0 0 1px 1px rgba(255, 255, 255, 0.1);
+}
+
+#loadingBar .progress {
+  display: inline-block;
+  float: left;
+
+  background: #666;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
+  background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+  background: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+  background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+  background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+  background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
+
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+
+  width: 0%;
+  height: 100%;
+}
+
+#loadingBar .progress.full {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+#loadingBar .progress.indeterminate {
+  width: 100%;
+  height: 25px;
+  background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  background-size: 75px 25px;
+  -moz-animation: progressIndeterminate 1s linear infinite;
+  -webkit-animation: progressIndeterminate 1s linear infinite;
+}
+
+@-moz-keyframes progressIndeterminate {
+  from { background-position: 0px 0px; }
+  to { background-position: 75px 0px; }
+}
+
+#errorWrapper {
+  background: none repeat scroll 0 0 #FF5555;
+  color: white;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 32px;
+  z-index: 1000;
+  padding: 3px;
+  font-size: 0.8em;
+}
+
+#errorMessageLeft {
+  float: left;
+}
+
+#errorMessageRight {
+  float: right;
+}
+
+#errorMoreInfo {
+  background-color: #FFFFFF;
+  color: black;
+  padding: 3px;
+  margin: 3px;
+  width: 98%;
+}

extensions/b2g/viewer.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<!--
+Copyright 2012 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>PDF.js viewer</title>
+
+
+    <link rel="stylesheet" href="viewer.css"/>
+    <link rel="resource" type="application/l10n" href="locale.properties"/>
+    <link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
+    <link rel="stylesheet" href="viewer-b2g.css" type="text/css" />
+    <script type="text/javascript" src="l10n.js"></script>
+    <script type="text/javascript" src="../build/pdf.js"></script>
+    <script type="text/javascript" src="/shared/js/async_storage.js"></script>
+    <script type="text/javascript">
+      // This specifies the location of the pdf.js file.
+      PDFJS.workerSrc = "../build/pdf.js";
+      PDFJS.disableTextLayer = true;
+    </script>
+
+    <script type="text/javascript" src="viewer.js"></script>
+  </head>
+
+
+  <body>
+    <section role="region" id="activityHeader" class="skin-organic">
+      <header>
+        <button id="activityClose"><span class="icon icon-close"></span></button>
+        <h1 id="activityTitle"></h1>
+      </header>
+
+      <footer id="open-toolbar">
+        <button class="toolbarButton pageUp" title="Previous Page" id="previous" data-l10n-id="previous"></button>
+        <button class="toolbarButton pageDown" title="Next Page" id="next" data-l10n-id="next"></button>
+
+        <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
+
+        <button class="toolbarButton zoomOut" title="Zoom Out" data-l10n-id="zoom_out"></button>
+        <button class="toolbarButton zoomIn" title="Zoom In" data-l10n-id="zoom_in"></button>
+      </footer>
+    </section>
+
+    <div id="viewerContainer">
+      <div id="viewer"></div>
+    </div>
+
+    <div id="loadingBox">
+      <div id="loading"></div>
+      <div id="loadingBar"><div class="progress"></div></div>
+    </div>
+
+    <div id="errorWrapper" hidden='true'>
+      <div id="errorMessageLeft">
+        <span id="errorMessage"></span>
+        <button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
+          More Information
+        </button>
+        <button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
+          Less Information
+        </button>
+      </div>
+      <div id="errorMessageRight">
+        <button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close">
+          Close
+        </button>
+      </div>
+      <div class="clearBoth"></div>
+      <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+    </div>
+
+    <!-- BEGIN STUBS -->
+    <!--
+      Nothing below here is visible, the elements are just here
+      to prevent the viewer from breaking until we refactor it.
+    -->
+    <div id="stubs" style="display: none;">
+      <div id="outerContainer"></div>
+      <div id="sidebarContainer">
+        <div id="toolbarSidebar">
+          <button id="viewThumbnail"></button>
+          <button id="viewOutline"></button>
+        </div>
+        <div id="sidebarContent">
+          <div id="thumbnailView"></div>
+          <div id="outlineView"></div>
+        </div>
+      </div>  <!-- sidebarContainer -->
+
+      <div id="mainContainer">
+        <div id="findbar">
+          <input id="findInput">
+          <button id="findPrevious"></button>
+          <button id="findNext"></button>
+          <input type="checkbox" id="findHighlightAll">
+          <input type="checkbox" id="findMatchCase">
+          <span id="findMsg"></span>
+        </div>
+        <div id="toolbarContainer">
+          <div id="toolbarViewer">
+            <div id="toolbarViewerLeft">
+              <button id="sidebarToggle"></button>
+              <button id="viewFind"></button>
+              <span id="numPages"></span>
+            </div>
+            <div id="toolbarViewerRight">
+              <input id="fileInput" type="file" />
+              <button id="fullscreen"></button>
+              <button id="openFile"></button>
+              <button id="print"></button>
+              <button id="download"></button>
+              <!-- <div class="toolbarButtonSpacer"></div> -->
+              <a href="#" id="viewBookmark"></a>
+            </div>
+            <div id="toolbarViewerMiddle">
+              <span id="scaleSelectContainer">
+                 <select id="scaleSelect">
+                  <option id="pageAutoOption" value="auto" selected="selected">Automatic Zoom</option>
+                  <option id="pageActualOption" value="page-actual">Actual Size</option>
+                  <option id="pageFitOption" value="page-fit">Fit Page</option>
+                  <option id="pageWidthOption" value="page-width">Full Width</option>
+                  <option id="customScaleOption" value="custom"></option>
+                  <option value="0.5">50%</option>
+                  <option value="0.75">75%</option>
+                  <option value="1">100%</option>
+                  <option value="1.25">125%</option>
+                  <option value="1.5">150%</option>
+                  <option value="2">200%</option>
+                </select>
+              </span>
+            </div>
+          </div>
+        </div>
+        <menu type="context" id="viewerContextMenu">
+          <menuitem id="first_page"></menuitem>
+          <menuitem id="last_page"></menuitem>
+          <menuitem id="page_rotate_ccw"></menuitem>
+          <menuitem id="page_rotate_cw"></menuitem>
+        </menu>
+
+      </div> <!-- mainContainer -->
+      <div id="printContainer"></div>
+    </div>
+    <!-- END STUBS -->
+  </body>
+</html>
+

make.js

@@ -508,6 +508,8 @@ target.mozcentral = function() {
 };
 
 target.b2g = function() {
+  target.locale();
+  target.bundle();
   echo();
   echo('### Building B2G (Firefox OS App)');
   var B2G_BUILD_DIR = BUILD_DIR + '/b2g/',
@@ -525,13 +527,14 @@ target.b2g = function() {
   var setup = {
     defines: defines,
     copy: [
-      [COMMON_WEB_FILES, B2G_BUILD_CONTENT_DIR + '/web'],
+      ['extensions/b2g/images', B2G_BUILD_CONTENT_DIR + '/web'],
-      ['web/viewer-b2g.css', B2G_BUILD_CONTENT_DIR + '/web'],
+      ['extensions/b2g/viewer.html', B2G_BUILD_CONTENT_DIR + '/web'],
+      ['extensions/b2g/viewer.css', B2G_BUILD_CONTENT_DIR + '/web'],
       ['web/locale', B2G_BUILD_CONTENT_DIR + '/web'],
       ['external/webL10n/l10n.js', B2G_BUILD_CONTENT_DIR + '/web']
     ],
     preprocess: [
-      [COMMON_WEB_FILES_PREPROCESS, B2G_BUILD_CONTENT_DIR + '/web'],
+      ['web/viewer.js', B2G_BUILD_CONTENT_DIR + '/web'],
       [BUILD_TARGET, B2G_BUILD_CONTENT_DIR + BUILD_TARGET]
     ]
   };

web/viewer-b2g.css

@@ -1,8 +0,0 @@
-html {
-  /* Font size is needed to make the activity bar the corect size. */
-  font-size: 10px;
-}
-
-#outerContainer {
-  position: relative;
-}

web/viewer-snippet-b2g.html

@@ -1,12 +0,0 @@
-<!-- This snippet is used in b2g, see Makefile -->
-<link rel="resource" type="application/l10n" href="locale.properties"/>
-<link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
-<link rel="stylesheet" href="viewer-b2g.css" type="text/css" />
-<script type="text/javascript" src="l10n.js"></script>
-<script type="text/javascript" src="../build/pdf.js"></script>
-<script type="text/javascript" src="/shared/js/async_storage.js"></script>
-<script type="text/javascript">
-  // This specifies the location of the pdf.js file.
-  PDFJS.workerSrc = "../build/pdf.js";
-  PDFJS.disableTextLayer = true;
-</script>

web/viewer.html

@@ -67,10 +67,6 @@ limitations under the License.
 
 <!--#if GENERIC || CHROME-->
 <!--#include viewer-snippet.html-->
-<!--#endif-->
-
-<!--#if B2G-->
-<!--#include viewer-snippet-b2g.html-->
 <!--#endif-->
 
     <script type="text/javascript" src="debugger.js"></script>
@@ -78,9 +74,6 @@ limitations under the License.
   </head>
 
   <body>
-<!--#if B2G-->
-<!--#include viewer-snippet-b2g-activity-header.html-->
-<!--#endif-->
     <div id="outerContainer">
 
       <div id="sidebarContainer">