UI update from shorlanders comments.

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.
 

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;
+  margin-left: 4px;
-  width: 130px;
+  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: -moz-linear-gradient(top, #b2b2b2 0%, #898989 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999));
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
-  background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
-  background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
-  background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
-  background: linear-gradient(top, #999 0%,#666 50%,#999 100%);    
+  background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
-
+  border-top-left-radius: 2px;
-  border-top-left-radius: 3px;
+  border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 3px;
 
   width: 0%;
   height: 100%;
 }
 
 #loadingBar .progress.full {
-  border-top-right-radius: 3px;
+  border-top-right-radius: 2px;
-  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 2px;
 }
 
 .textLayer {

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()'>
+              <input id="searchTermsInput" class="toolbarField" onkeydown='if (event.keyCode == 13) PDFView.search()'>
-              <button id="searchButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
+              <button id="searchButton" class="textButton toolbarButton" onclick='PDFView.search()' data-l10n-id="search">Find</button>
             </div>
             <div id="searchResults"></div>
           </div>
@@ -150,7 +150,7 @@
         </div>
 
         <div id="loadingBox">
-            <div id="loading" data-l10n-id="loading" data-l10n-args='{"percent": 0}'>Loading... 0%</div>
+          <div id="loading"></div>
           <div id="loadingBar"><div class="progress"></div></div>
         </div>
 

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);
     }
   },