Merge pull request #3408 from brendandahl/fix-multiresolution

[B2G] UI tweak for multi-resolution devices support on B2G

extensions/b2g/viewer.css

@@ -35,30 +35,30 @@ body {
   height: 100%;
   width: 100%;
   overflow: hidden;
-  padding-bottom: 50px;
+  padding-bottom: 5rem;
 }
 
 section {
   overflow: hidden;
-  font-size: 10px;
+  font-size: 1rem;
   position: absolute;
-  top: 0px;
+  top: 0;
-  left: 0px;
+  left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  font-size: 20px;
+  font-size: 2rem;
 }
 
 footer {
   background-image: url(images/toolbar_background.png);
-  height: 40px;
+  height: 4rem;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1;
-  box-shadow: 0px -2px 5px rgba(50, 50, 50, 0.75);
+  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
 }
 
 
@@ -78,6 +78,7 @@ footer {
   height: 100%;
   left: 0;
   background-image: url(images/icon_previous_page.png);
+  background-size: 2rem;
 }
 
 .toolbarButton.pageDown {
@@ -86,6 +87,7 @@ footer {
   height: 100%;
   left: 18%;
   background-image: url(images/icon_next_page.png);
+  background-size: 2rem;
 }
 
 #pageNumber {
@@ -96,7 +98,7 @@ footer {
   text-align: center;
   border: 0;
   background-color: transparent;
-  font-size: 9pt;
+  font-size: 1.2rem;
   color: #FFF;
   background-image: url(images/div_line_left.png), url(images/div_line_right.png);
   background-repeat: no-repeat;
@@ -109,6 +111,7 @@ footer {
   height: 100%;
   left: 64%;
   background-image: url(images/icon_zoom_out.png);
+  background-size: 2.4rem;
 }
 
 .toolbarButton.zoomIn {
@@ -117,6 +120,7 @@ footer {
   height: 100%;
   left: 82%;
   background-image: url(images/icon_zoom_in.png);
+  background-size: 2.4rem;
 }
 
 .toolbarButton[disabled] {
@@ -134,8 +138,8 @@ footer {
   position: absolute;
   overflow: auto;
   width: 100%;
-  top: 50px;
+  top: 5rem;
-  bottom: 40px;
+  bottom: 4rem;
   left: 0;
   right: 0;
 }
@@ -147,9 +151,9 @@ canvas {
 
 .page {
   direction: ltr;
-  width: 816px;
+  width: 81.6rem;
-  height: 1056px;
+  height: 105.6rem;
-  margin: 10px auto;
+  margin: 1rem auto;
   position: relative;
   overflow: hidden;
   background-color: white;
@@ -163,7 +167,7 @@ canvas {
 .loadingIcon {
   width: 2.9rem;
   height: 2.9rem;
-  background: url("images/spinner.png") no-repeat scroll left top transparent;
+  background: url("images/spinner.png") no-repeat left top / 38rem ;
   border: medium none;
   animation: 1s steps(10, end) 0s normal none infinite moveDefault;
   display: block;
@@ -178,79 +182,75 @@ canvas {
   }
 
   to {
-    background-position: -390px top;
+    background-position: -39rem 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;
+  position: relative;
-  clear: both;
+  height: .6rem;
-  margin: 0px;
+  background-color: #333;
-  margin-top: 5px;
+  border-bottom: 1px solid #333;
-  line-height: 0;
+  margin-top: 5rem;
-  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;
+  position: absolute;
-  float: left;
+  left: 0;
-
-  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%;
+  background-color: #ddd;
+  overflow: hidden;
+  -moz-transition: width 200ms;
+  -ms-transition: width 200ms;
+  -webkit-transition: width 200ms;
+  transition: width 200ms;
 }
 
-#loadingBar .progress.full {
+@-moz-keyframes progressIndeterminate {
-  border-top-right-radius: 2px;
+  0% { left: 0%; }
-  border-bottom-right-radius: 2px;
+  50% { left: 100%; }
+  100% { left: 100%; }
+}
+@-ms-keyframes progressIndeterminate {
+  0% { left: 0%; }
+  50% { left: 100%; }
+  100% { left: 100%; }
+}
+
+@-webkit-keyframes progressIndeterminate {
+  0% { left: 0%; }
+  50% { left: 100%; }
+  100% { left: 100%; }
+}
+@keyframes progressIndeterminate {
+  0% { left: 0%; }
+  50% { left: 100%; }
+  100% { left: 100%; }
 }
 
 #loadingBar .progress.indeterminate {
-  width: 100%;
+  background-color: #999;
-  height: 25px;
+  -moz-transition: none;
-  background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  -ms-transition: none;
-  background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  -webkit-transition: none;
-  background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
+  transition: none;
-  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 {
+#loadingBar .indeterminate .glimmer {
-  from { background-position: 0px 0px; }
+  position: absolute;
-  to { background-position: 75px 0px; }
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 5rem;
+
+  background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
+  background-size: 100% 100% no-repeat;
+
+  -moz-animation: progressIndeterminate 2s linear infinite;
+  -ms-animation: progressIndeterminate 2s linear infinite;
+  -webkit-animation: progressIndeterminate 2s linear infinite;
+  animation: progressIndeterminate 2s linear infinite;
 }
 
 #errorWrapper {
@@ -259,9 +259,9 @@ canvas {
   left: 0;
   position: absolute;
   right: 0;
-  top: 32px;
+  top: 3.2rem;
   z-index: 1000;
-  padding: 3px;
+  padding: 0.3rem;
   font-size: 0.8em;
 }
 
@@ -276,7 +276,7 @@ canvas {
 #errorMoreInfo {
   background-color: #FFFFFF;
   color: black;
-  padding: 3px;
+  padding: 0.3rem;
-  margin: 3px;
+  margin: 0.3rem;
   width: 98%;
 }

extensions/b2g/viewer.html

@@ -25,6 +25,7 @@ limitations under the License.
     <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" />
+    <link rel="stylesheet" href="/shared/style/responsive.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>
@@ -51,8 +52,8 @@ limitations under the License.
 
         <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
 
-        <button class="toolbarButton zoomOut" title="Zoom Out" id="zoom_out" data-l10n-id="zoom_out"></button>
+        <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" data-l10n-id="zoom_out"></button>
-        <button class="toolbarButton zoomIn" title="Zoom In" id="zoom_in" data-l10n-id="zoom_in"></button>
+        <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" data-l10n-id="zoom_in"></button>
       </footer>
     </section>
 
@@ -60,9 +61,9 @@ limitations under the License.
       <div id="viewer"></div>
     </div>
 
-    <div id="loadingBox">
+    <div id="loadingBar">
-      <div id="loading"></div>
+      <div class="progress"></div>
-      <div id="loadingBar"><div class="progress"></div></div>
+      <div class="glimmer"></div>
     </div>
 
     <div id="errorWrapper" hidden='true'>
@@ -119,6 +120,7 @@ limitations under the License.
               <span id="numPages"></span>
             </div>
             <div id="toolbarViewerRight">
+              <button id="presentationMode"></button>
               <input id="fileInput" type="file" />
               <button id="fullscreen"></button>
               <button id="openFile"></button>
@@ -147,10 +149,10 @@ limitations under the License.
           </div>
         </div>
         <menu type="context" id="viewerContextMenu">
-          <menuitem id="first_page"></menuitem>
+          <menuitem id="firstPage"></menuitem>
-          <menuitem id="last_page"></menuitem>
+          <menuitem id="lastPage"></menuitem>
-          <menuitem id="page_rotate_ccw"></menuitem>
+          <menuitem id="pageRotateCcw"></menuitem>
-          <menuitem id="page_rotate_cw"></menuitem>
+          <menuitem id="pageRotateCw"></menuitem>
         </menu>
 
       </div> <!-- mainContainer -->

src/network.js

@@ -46,7 +46,11 @@ var NetworkManager = (function NetworkManagerClosure() {
     this.httpHeaders = args.httpHeaders || {};
     this.getXhr = args.getXhr ||
       function NetworkManager_getXhr() {
+//#if B2G
+//      return new XMLHttpRequest({ mozSystem: true });
+//#else
         return new XMLHttpRequest();
+//#endif
       };
 
     this.currXhrId = 0;