From 3e480f84a6c0aaaf17b5b311925349392b366b44 Mon Sep 17 00:00:00 2001
From: Rex Lee <rexboy@mozilla.com>
Date: Thu, 18 Apr 2013 11:13:01 +0200
Subject: [PATCH] [B2G] UI tweak for multi-resolution devices support on B2G

---
 extensions/b2g/images/div_line_left@2x.png  | Bin 0 -> 1185 bytes
 extensions/b2g/images/div_line_right@2x.png | Bin 0 -> 1193 bytes
 extensions/b2g/viewer.css                   | 164 +++++++++++---------
 extensions/b2g/viewer.html                  |  20 +--
 src/network.js                              |   4 +
 5 files changed, 102 insertions(+), 86 deletions(-)
 create mode 100644 extensions/b2g/images/div_line_left@2x.png
 create mode 100644 extensions/b2g/images/div_line_right@2x.png

diff --git a/extensions/b2g/images/div_line_left@2x.png b/extensions/b2g/images/div_line_left@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..ada3e74ca6d0dda0591bfd827961c4b8f8ded189
GIT binary patch
literal 1185
zcmeAS@N?(olHy`uVBq!ia0vp^EI{nS!3HFkt(+nRq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1Ffc1+hD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Keo`G(%fti7VnW3Jc
zv5C34xsHO7fuVuEfswwUk*=Y+m9dePfq?=PC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR
zmzV368|&p4rRy77T3Uk4Ff!5ws?aU2%qvN((9J7WhMC}!TAW;zSx}OhpQivaF)=B>
zw8T~k=u(Imatq+b<`qMO2^e7d6^RA<hI$4dFToW0`r=obn+sQ6ToROua4%Mai$f|4
zQuTvUi}Op1l7SJIrVO&Gz{<HOHL)bWC?r2W2NsF}8Tlpo#Toep3eLf%3ciWSnRy^S
zSiP^Wm1kaYNn&1ds;7&s63_&_%*+%kb5|#0M<ZuL6C+DQLqk_1Cvyu+XJbb*Cl_NU
z0|O@~m|mCs<kH;Kyb_q+6og(QoO(e?A-4c%vrB4GW?5>ATTy<l0@%w|nK<3z<c8Bc
zsNNLZZZW{AS0CsYeNe<AMKnwZn0i1=c(Mg@;0Zr95187EfXP~rHP4KJfl<`c#WAGf
zR?p<!>zE9ATs|i;o0!zx*!!p6pHWokd~HkVlTJ2n#-ka+&yOUhPmb^^tpC5eX4l>A
zi~DCknZvCm=`QIq_X?||PH5${=?=?<e@<H>9AL_zYjMHw;gy9?9eBNW7(ARAq5NR$
ztsbwL9100@btbOyPVemFEIc{wgkxt1o9;%gDEH!nVkNuNk{FrJUM=PgakmYhZKB-J
z7rf!DVc>sVVZmq{?v}^8J{D?octr%+)dC+}o!{|N_hQ)02`3dc9r-a)V!x2?fg^{7
z^ewB@)Ji3VSmi2;=WN;T@<2xa$cmQdy0&`u9oGN2%dH<|c^~TbtvdL5Ld*3?c9p4D
vZ?93#+i+uU`rB5&l$$YCzB*I+{2AF8PI{Dj>h`#<1{E5fu6{1-oD!M<E8L6(

literal 0
HcmV?d00001

diff --git a/extensions/b2g/images/div_line_right@2x.png b/extensions/b2g/images/div_line_right@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3177d7136b1da80f72ed5d5a176923f9d75d8162
GIT binary patch
literal 1193
zcmeAS@N?(olHy`uVBq!ia0vp^EI{nS!3HFkt(+nRq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1Ffc1+hD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Keo`G(%fti7VnW3Jc
zv5C34xsHO7fuVuEfswwUk*=Y+m9dePfq?=PC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR
zmzV368|&p4rRy77T3Uk4Ff!5ws?aU2%qvN((9J7WhMC}!TAW;zSx}OhpQivaF)=B>
zw8T~k=u(Imatq+b<`qMO2^e7d6^RA<hI$4dFToW0`r=obn+sQ6ToROua4%Mai$f|4
zQuTvUi}Op1l7SJIrVO&Gz{<HOHL)bWC?r2W2NsF}8Tlpo#Toep3eLf%3ciWSnRy^S
zSiP^Wm1kaYNn&1ds;7&s63_&_%*+%kGc!jwOG8656C(=)Lqk_1Cvyu+XJbb*Cl_NU
z0|O@~m|mCs<kH;Kyb_q+6rf&nS0`gfBPUlABcKV`^n#K?ZUN9{m(-%nveXo}qWoM1
zu$Qeeal6F?w_6~3Q?R%N>JL+#di8;h(Fa8=QbfaqfT;(>geO}d2cGa#^MI+n2$-z1
zljgo=U|^K>ba4!+xYaY+*YB`_K<iu2*)A~*ozf+dg|pth=;UrsV3ZEKU}kS7`Pw%7
z(S<1<`bF{kD(7ts-G1BNUN)|;fBE(8YR6ufom2hkxkyOw!@^6~#q6WnS-od@HpX9h
zk&%<Aa!V+E>6H~{w{cd_5ZNduR5<m*g$1!$Vx0j(%+_j-%D%UgmfzHyZIpa5GgL@0
zO|8cAbO%rTxk-1VmQUl{Hm^;%nD@}6V_V)W-64Jc!mVim_ojtR`w+J6h~?%Pf}7n9
zBDT0Sh`H?XY^fKVDKzJrgIB?$@12EH7fkGYx4wt<;&jQK;zDyxe;Jibosrrz?S*b(
ztDAMqys-R#w^^*EW(GZGZcP8T*}jljeCd@6_v4!0z4|G<Ds>4jwjEy2z|8QWyXneo
SMw?@x!o$<m&t;ucLK6VUf0<(d

literal 0
HcmV?d00001

diff --git a/extensions/b2g/viewer.css b/extensions/b2g/viewer.css
index 2c3c33bc6..aaabf25b9 100644
--- a/extensions/b2g/viewer.css
+++ b/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;
-  left: 0px;
+  top: 0;
+  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;
-  bottom: 40px;
+  top: 5rem;
+  bottom: 4rem;
   left: 0;
   right: 0;
 }
@@ -147,9 +151,9 @@ canvas {
 
 .page {
   direction: ltr;
-  width: 816px;
-  height: 1056px;
-  margin: 10px auto;
+  width: 81.6rem;
+  height: 105.6rem;
+  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,85 @@ canvas {
   }
 
   to {
-    background-position: -390px top;
+    background-position: -39rem top;
   }
 }
 
-#loadingBox {
+#loadingBar {
   position: absolute;
-  top: 50%;
-  margin-top: -25px;
+  top: 0;
+  margin-top: -2.5rem;
   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%;
+  font-size: 1.4rem;
   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;
+#loadingBar .progress {
+  position: absolute;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  background-color: #ddd;
+  overflow: hidden;
+  -moz-transition: width 200ms;
+  -ms-transition: width 200ms;
+  -webkit-transition: width 200ms;
+  transition: width 200ms;
 }
 
 @-moz-keyframes progressIndeterminate {
-  from { background-position: 0px 0px; }
-  to { background-position: 75px 0px; }
+  0% { left: 0%; }
+  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 .indeterminate .glimmer {
+  position: absolute;
+  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;
+}
+
+
+ #loadingBar .progress.indeterminate {
+   background-color: #999;
+   -moz-transition: none;
+   -ms-transition: none;
+   -webkit-transition: none;
+   transition: none;
+ }
+
+@-moz-keyframes progressIndeterminate {
+  from { background-position: 0 0; }
+  to { background-position: 7.5rem 0; }
 }
 
 #errorWrapper {
@@ -259,9 +269,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 +286,7 @@ canvas {
 #errorMoreInfo {
   background-color: #FFFFFF;
   color: black;
-  padding: 3px;
-  margin: 3px;
+  padding: 0.3rem;
+  margin: 0.3rem;
   width: 98%;
 }
diff --git a/extensions/b2g/viewer.html b/extensions/b2g/viewer.html
index 5a7867888..f3c6ea5a5 100644
--- a/extensions/b2g/viewer.html
+++ b/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 zoomIn" title="Zoom In" id="zoom_in" data-l10n-id="zoom_in"></button>
+        <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" data-l10n-id="zoom_out"></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="loading"></div>
-      <div id="loadingBar"><div class="progress"></div></div>
+    <div id="loadingBar">
+      <div class="progress"></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="last_page"></menuitem>
-          <menuitem id="page_rotate_ccw"></menuitem>
-          <menuitem id="page_rotate_cw"></menuitem>
+          <menuitem id="firstPage"></menuitem>
+          <menuitem id="lastPage"></menuitem>
+          <menuitem id="pageRotateCcw"></menuitem>
+          <menuitem id="pageRotateCw"></menuitem>
         </menu>
 
       </div> <!-- mainContainer -->
diff --git a/src/network.js b/src/network.js
index 248cc8a0d..a5c13f9d5 100644
--- a/src/network.js
+++ b/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;