From cebee4026d8add0ee6fbd054e92861708c4f6bd1 Mon Sep 17 00:00:00 2001
From: Brendan Dahl <brendan.dahl@gmail.com>
Date: Thu, 7 Jun 2012 13:51:29 -0700
Subject: [PATCH] UI update from shorlanders comments.

---
 l10n/en-US/viewer.properties          |   2 -
 web/images/toolbarButton-openFile.png | Bin 708 -> 417 bytes
 web/images/toolbarButton-search.png   | Bin 744 -> 503 bytes
 web/viewer.css                        | 122 +++++++++++++++-----------
 web/viewer.html                       |  10 +--
 web/viewer.js                         |  14 +--
 6 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties
index 66f4a43e8..de6fd95db 100644
--- a/l10n/en-US/viewer.properties
+++ b/l10n/en-US/viewer.properties
@@ -78,8 +78,6 @@ page_scale_auto=Automatic Zoom
 page_scale_actual=Actual Size
 
 # Loading indicator messages
-# LOCALIZATION NOTE (error_line): "{{percent}}" will be replaced with a percentage
-loading=Loading… {{percent}}%
 loading_error_indicator=Error
 loading_error=An error occurred while loading the PDF.
 
diff --git a/web/images/toolbarButton-openFile.png b/web/images/toolbarButton-openFile.png
index 12ce45f876b12eef3e5030b492d58d5fbb47ebbf..fc7023f2aafcdbb3b2412934c017225637c8bb9e 100644
GIT binary patch
delta 392
zcmV;30eAky1)&3wBYy#CNkl<Zc-p1XJxjwt7zgl^F4m=@tI(yT7>Y`u@r0Pg5(gIt
zKS4o}g1A}g%jhT};$T7OAPy;H>flra2St?bnbSZL$Y+TEgF85m2n7#*aQD1j5<>Dk
z{}-_qVGT5BavG17$sDU1MbRrJ{zyK9Ab6?OYC6B5c=6<(=YM%$j^lg_uIo;H-=9t<
zlSkxtp{YKd7+ej*aEu$@{_qYTs@ZHdX1zdk1V->IOVe~{S=O~}+x;xdhH4&0tQQEy
z;Yk+9@qki#irfZlnx@%Jl4PLPv0flMI6MgWnD@G_A0u9eGFNZ4S|=<g*RozQ;7%|M
z;}Wqptil4r_kV3X)s<W;54e>$;IdoA&%*aEIC8B#;6{bGAq_B!YUBYID#T6c70jX<
zF<={qb5*0!=peVnXqwh3s$soA*73KUA<$LypwIQxJnLb-KvsalAsjJ$e*iY@^Szp<
myqA<<2`aEWrwZ>W{Q@<`>KMYv%sl`A002ovPDHLkU;%=F`M78R

delta 685
zcmV;e0#f~<1H=W8BYyw{b3#c}2nYxWd<bNS00009a7bBm0000-0000-0Y?D!vH$=8
z8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10zpYcK~y-6jZ)8R6G0e#
zvpc&>T2_|?DW!B>L;_wc?Zu;_6+$X4AyT|~3gSQD&4XUWvwt`1MT#adDA|iAF$O&J
zW)IeYO?2C3X?|_U?q;)L$AgU|O^W?sm~S5Md-J`Sk1)n?TBK5`$2`wpsaC7^cXoDy
zX&f?5U~_Ym9}EUB7Zw)Mk|afHwOZNpyp3Y9*!r(PGMPL#Gc)r}Rn;4kB=G<ch9Roe
z>bGvUdso->AAhF`Boc|silV$#Rdt!?`7vR}7!1Ss={U~ALZR?+h;t);Z^^R!d47I=
znGiBzD-1)#VzEo2D85Oj(+`F?9VVhEMmdiAWSXWxDZRe9xOibyz_Ki(UavpmIL`Kc
zzcOYalgZqko11&Ky1Kdq0J&TavMi5vaCmrV3xe>R<A1mT05lqnSNVM2qyP|!MD8V%
z$)$<DM`Ct%_IxUpdP*rpv)M#8oBajgHE$TkmMDrh0Vs;1APht7?(Ra8B)F~%p63yU
zAqXMpbUHXVIDlnYV2o*nLg5;XMx$5P*VixZ?d_pdDuGf8K@boG0oK;mpeV{;uY_Ru
zxX1g-_J8)aO>Nu$-Rt#MG);r1X%j@x^CmDt2!bGhZQB*<IL_CjqoWO3mZuU&ZXCmE
zwc4QBZ02aI)q20bzyBm2kBet5CWN3;skD6G|3U$LH%-%3RaHD|F(Cx)cDt?Xy2t6d
z&Ro}Zdc7Wo%kw;po=;-kZWoT@SpO!`_x%s$awhrCiLalW=i^|Eas7V(1pxd3j6@W`
T;fL7Y00000NkvXXu0mjfw){J<

diff --git a/web/images/toolbarButton-search.png b/web/images/toolbarButton-search.png
index 78878b417d038c93cb5b3e6a1a4605659db98f9f..604e652e5ec48052efa7b342c41c33729dbd287c 100644
GIT binary patch
delta 478
zcmV<40U`eA1@{AxBYy$DNkl<Zc-obby-Px27{$$?$UZCyA`$~HWJC>7L`x76v;_%@
zmM9iB^r1sVf!&a+LRUjYsGy;SXlXDSqS4Xa%|ApGMeLk-iHe)y13!4)=bZC?+^cI*
zoxlhzV3LU5D72Q<MRPnJ-!GL)kJW1Rov`PO8a=H}9?#`+$$w_E`37FW3t`V0HG2NK
z$zUWBIbfh(uRq6Pv9!fv*)^NZ0rs3xqlaFt4Xnjt@eZb^Xf%3-^%58(>=TJZiW)sw
zOIjPumdoV_nC`7s>n7GF&?y+kY>OH_^lEJ|5AhnNTS<~Our_?t44hGe=Z0Rb4W<i)
zf(lbcRaKc!0)O2CDU-=uP@@OyDXl*+qbLeZYOPk|CZ{%=ZH2JMEKSYt_Xpt}{T&|h
z`Fwu-^Glc%feKPY^hz?B48uDIdVYkxUazN8sl;G9Z!{WV+~ho;&xi5ePuRQN?n8JN
z!4T;93VS@BErex+PY^zKI-N(DuYpytE?5ROFaY#AQCEF|Kwur=GlWA32OSPaNPJ-v
zbzl_qf-Z5gD44R@>^8#t2=CeL_CxW$eqsE#3}8W)<z1J{wbO2xr59J708+c*4>3Rq
Ufyij|od5s;07*qoM6N<$f}oq*$p8QV

delta 721
zcmV;?0xtdc1Ly^iBYyw{b3#c}2nYxWd<bNS00009a7bBm0000-0000-0Y?D!vH$=8
z8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10%b`=K~y-6osz#x8(|p7
zzwddMym{{~cU;URS%iR!f=HHv)eb?jG)o6Nbn4ti{|A>YE`J5-<WeY<F7^+|sG&-i
zF4|HWXwb!onjd)gzGvb+T{JW{UHYBghv)l#cz!V=0st&6ExpKOGEb$HFbo4h5XgGH
z{)#b{SY2IxV;Bazy}bqJ9PM`dL%m+#2LK&+avW!QeSQ7q`T0475ZK$>`*D{Nl}cr8
zW@g3@!w|V#4u4x)TfYG81AvBqh=?@Cm<zxmBK9vIyKkXXDm`&s_oL@|nK+IigrLR6
zMHR;}j*gCazuyM{wA=0G_4W1h!^6XGBLD!{*x2~Iva<3xiXvE+1<SHPL<oWaK@ebK
zVgd&T2cNdLx7S80s8*|AEXztOr3##LJ&t2=&U-=#ihtu6gTVk-S6AsoBEghWO4s$4
zlv1nJY707JOxxVtEX~i)8@*l+uInNULnx(0u~-BVq1)}E*=%BVb{3sZN9ellU0htC
zR;w*&0E*dcR{wJ_LI^0OhH)5%Fimr0c)ssrdV0F7O-)TzeBWme0aD6gETx1HVg%qg
z4syBNBY(Y6C@kByjc&I)OeT{_G#ZTnKtx3B^z>9Om&^9U6?&eR*Yo*&bKHJUPEKC$
z?CiV+z~<)Wo>i;WcZ0!T#4|ZL+0Z=C%Z>v$jsqg<5>Y3ePNyEW006dadzxvQ{y0D?
zl^XsKLYR#GeT=4QW;M?F*a|r3sr$EOS*dZJWJ)rb)sK&lzqVSfpHURCe!mYP1cVSc
zJ3IS+Z@js=Y3%OqzL!!`5CqUPjX39Yd3iZ{%KxL^o{ai{04ZY800000NkvXXu0mjf
D(X2-Q

diff --git a/web/viewer.css b/web/viewer.css
index 329bff2d5..7c7d4f684 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -146,7 +146,7 @@ html[dir='rtl'] #sidebarContent {
 
 #toolbarSidebar {
   width: 200px;
-  height: 32px;
+  height: 29px;
   background-image: url(images/texture.png),
                     -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
   background-image: url(images/texture.png),
@@ -242,9 +242,14 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
   margin-right:0;
 }
 
+.splitToolbarButton.toggled .toolbarButton {
+  margin: 0;
+}
+
 .splitToolbarButton:hover > .toolbarButton,
 .splitToolbarButton:focus > .toolbarButton,
-.splitToolbarButton.toggled > .toolbarButton {
+.splitToolbarButton.toggled > .toolbarButton,
+.toolbarButton.textButton {
   background-color: hsla(0,0%,0%,.12);
   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));
@@ -263,7 +268,9 @@ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
 }
 .splitToolbarButton > .toolbarButton:hover,
 .splitToolbarButton > .toolbarButton:focus,
-.dropdownToolbarButton:hover {
+.dropdownToolbarButton:hover,
+.toolbarButton.textButton:hover,
+.toolbarButton.textButton:focus {
   background-color: hsla(0,0%,0%,.2);
   box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
               0 0 1px hsla(0,0%,100%,.15) inset,
@@ -544,8 +551,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
 
 
 .toolbarField {
-  min-width: 16px;
-  width: 32px;
   padding: 3px 6px;
   margin: 4px 0 4px 0;
   border: 1px solid transparent;
@@ -560,7 +565,6 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
   color: hsl(0,0%,95%);
   font-size: 12px;
   line-height: 14px;
-  text-align: right;
   outline-style: none;
   -moz-transition-property: background-color, border-color, box-shadow;
   -moz-transition-duration: 150ms;
@@ -568,6 +572,8 @@ html[dir='rtl'] .toolbarButton.pageDown::before {
 }
 
 .toolbarField.pageNumber {
+  min-width: 16px;
+  text-align: right;
   width: 40px;
 }
 
@@ -682,9 +688,11 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   margin-left: 20px;
 }
 
-.outlineItem > a {
+.outlineItem > a,
+#searchResults > a {
   text-decoration: none;
-  display: block;
+  display: inline-block;
+  min-width: 95%;
   height: 20px;
   padding: 2px 0 0 10px;
   margin-bottom: 1px;
@@ -697,7 +705,8 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   white-space: nowrap;
 }
 
-.outlineItem > a:hover {
+.outlineItem > a:hover,
+#searchResults > a:hover {
   background-color: hsla(0,0%,100%,.02);
   background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
   background-clip: padding-box;
@@ -707,6 +716,23 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   color: hsla(0,0%,100%,.9);
 }
 
+.outlineItem.selected {
+  background-color: hsla(0,0%,100%,.08);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-clip: padding-box;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+              0 0 1px hsla(0,0%,100%,.1) inset,
+              0 0 1px hsla(0,0%,0%,.2);
+  color: hsla(0,0%,100%,1);
+}
+
+.noOutline,
+.noResults {
+  font-size: 12px;
+  color: hsla(0,0%,100%,.8);
+  font-style: italic;
+}
+
 #searchScrollView {
   position: absolute;
   top: 10px;
@@ -723,27 +749,26 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
 }
 
 #searchToolbar > input {
-  margin-left: 8px;
-  width: 130px;
+  margin-left: 4px;
+  width: 124px;
+}
+
+#searchToolbar button {
+  width: auto;
+  margin: 0;
+  padding: 0 6px;
+  height: 22px;
 }
 
 #searchResults {
   overflow: auto;
-  background-color: #fff;
   position: absolute;
   top: 30px;
   bottom: 0px;
   left: 0px;
   right: 0;
+  padding: 4px 4px 0;
   font-size: smaller;
-  opacity: 0.7;
-}
-
-#searchResults a {
-  display: block;
-  white-space: pre;
-  text-decoration: none;
-  color: black;
 }
 
 #sidebarControls {
@@ -754,24 +779,6 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
   bottom: 35px;
 }
 
-.outlineItem.selected {
-  background-color: hsla(0,0%,100%,.08);
-  background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
-  background-clip: padding-box;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 0 1px hsla(0,0%,100%,.1) inset,
-              0 0 1px hsla(0,0%,0%,.2);
-  color: hsla(0,0%,100%,1);
-}
-
-.noOutline {
-  font-size: 12px;
-  color: hsla(0,0%,100%,.8);
-  font-style: italic;
-}
-
-
-
 canvas {
   margin: auto;
   display: block;
@@ -814,23 +821,33 @@ canvas {
 }
 
 #loadingBox {
-  margin: 100px 0;
+  position: absolute;
+  top: 50%;
+  margin-top: -25px;
+  left: 0;
+  right: 0;
   text-align: center;
   color: #ddd;
   font-size: 14px;
 }
 
 #loadingBar {
-  background-color: #333;
   display: inline-block;
-  border: 1px solid black;
   clear: both;
   margin: 0px;
   margin-top: 5px;
   line-height: 0;
-  border-radius: 4px;
+  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 {
@@ -838,23 +855,22 @@ canvas {
   float: left;
 
   background: #666;
-  background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999));
-  background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: linear-gradient(top, #999 0%,#666 50%,#999 100%);    
-
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+  background: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%);
+  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: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
+  background: -ms-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: 3px;
-  border-bottom-right-radius: 3px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
 
 .textLayer {
diff --git a/web/viewer.html b/web/viewer.html
index f76c3665f..4edf6ce1a 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -45,7 +45,7 @@
     <div id="outerContainer">
 
       <div id="sidebarContainer">
-        <div id="toolbarSidebar">
+        <div id="toolbarSidebar" class="splitToolbarButton toggled">
           <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
              <span data-l10n-id="thumbs_label">Thumbnails</span>
           </button>
@@ -63,8 +63,8 @@
           </div>
           <div id="searchView" class="hidden">
             <div id="searchToolbar">
-              <input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
-              <button id="searchButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
+              <input id="searchTermsInput" class="toolbarField" onkeydown='if (event.keyCode == 13) PDFView.search()'>
+              <button id="searchButton" class="textButton toolbarButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
             </div>
             <div id="searchResults"></div>
           </div>
@@ -150,8 +150,8 @@
         </div>
 
         <div id="loadingBox">
-            <div id="loading" data-l10n-id="loading" data-l10n-args='{"percent": 0}'>Loading... 0%</div>
-            <div id="loadingBar"><div class="progress"></div></div>
+          <div id="loading"></div>
+          <div id="loadingBar"><div class="progress"></div></div>
         </div>
 
         <div id="errorWrapper" hidden='true'>
diff --git a/web/viewer.js b/web/viewer.js
index 751f2deff..2078175e7 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -394,7 +394,7 @@ var PDFView = {
         self.loading = false;
       },
       function getDocumentError(message, exception) {
-        if (exception.name === 'PasswordException') {
+        if (exception && exception.name === 'PasswordException') {
           if (exception.code === 'needpassword') {
             var promptString = mozL10n.get('request_password', null,
                                       'PDF is protected by a password:');
@@ -598,10 +598,6 @@ var PDFView = {
 
   progress: function pdfViewProgress(level) {
     var percent = Math.round(level * 100);
-    var loadingIndicator = document.getElementById('loading');
-    loadingIndicator.textContent = mozL10n.get('loading', {percent: percent},
-      'Loading... {{percent}}%');
-
     PDFView.loadingBar.percent = percent;
   },
 
@@ -621,6 +617,8 @@ var PDFView = {
 
     var loadingBox = document.getElementById('loadingBox');
     loadingBox.setAttribute('hidden', 'true');
+    var loadingIndicator = document.getElementById('loading');
+    loadingIndicator.textContent = '';
 
     var thumbsView = document.getElementById('thumbnailView');
     thumbsView.parentNode.scrollTop = 0;
@@ -792,8 +790,12 @@ var PDFView = {
       pageFound = true;
     }
     if (!pageFound) {
-      searchResults.textContent = mozL10n.get('search_terms_not_found', null,
+      searchResults.textContent = '';
+      var noResults = document.createElement('div');
+      noResults.classList.add('noResults');
+      noResults.textContent = mozL10n.get('search_terms_not_found', null,
                                               '(Not found)');
+      searchResults.appendChild(noResults);
     }
   },