Merge remote-tracking branch 'mozilla/master' into l10n-1

Conflicts:
	web/viewer.html

external/jpgjs/jpg.js

@@ -637,7 +637,10 @@ var JpegImage = (function jpegImage() {
                   tableData[z] = data[offset++];
                 }
               } else if ((quantizationTableSpec >> 4) === 1) { //16 bit
-                  tableData[j] = readUint16();
+                for (j = 0; j < 64; j++) {
+                  var z = dctZigZag[j];
+                  tableData[z] = readUint16();
+                }
               } else
                 throw "DQT: invalid table spec";
               quantizationTables[quantizationTableSpec & 15] = tableData;
@@ -652,7 +655,8 @@ var JpegImage = (function jpegImage() {
             frame.precision = data[offset++];
             frame.scanLines = readUint16();
             frame.samplesPerLine = readUint16();
-            frame.components = [];
+            frame.components = {};
+            frame.componentsOrder = [];
             var componentsCount = data[offset++], componentId;
             var maxH = 0, maxV = 0;
             for (i = 0; i < componentsCount; i++) {
@@ -660,6 +664,7 @@ var JpegImage = (function jpegImage() {
               var h = data[offset + 1] >> 4;
               var v = data[offset + 1] & 15;
               var qId = data[offset + 2];
+              frame.componentsOrder.push(componentId);
               frame.components[componentId] = {
                 h: h,
                 v: v,
@@ -728,15 +733,14 @@ var JpegImage = (function jpegImage() {
       this.jfif = jfif;
       this.adobe = adobe;
       this.components = [];
-      for (var id in frame.components) {
+      for (var i = 0; i < frame.componentsOrder.length; i++) {
-        if (frame.components.hasOwnProperty(id)) {
+        var component = frame.components[frame.componentsOrder[i]];
         this.components.push({
-            lines: buildComponentData(frame, frame.components[id]),
+          lines: buildComponentData(frame, component),
-            scaleX: frame.components[id].h / frame.maxH,
+          scaleX: component.h / frame.maxH,
-            scaleY: frame.components[id].v / frame.maxV
+          scaleY: component.v / frame.maxV
         });
       }
-      }
     },
     getData: function getData(width, height) {
       function clampTo8bit(a) {

web/debugger.js

@@ -423,8 +423,9 @@ var PDFBug = (function PDFBugClosure() {
       panels.setAttribute('class', 'panels');
       ui.appendChild(panels);
 
-      document.body.appendChild(ui);
+      var container = document.getElementById('viewerContainer');
-      document.body.style.paddingRight = panelWidth + 'px';
+      container.appendChild(ui);
+      container.style.right = panelWidth + 'px';
 
       // Initialize all the debugging tools.
       var tools = this.tools;

web/locale.properties

@@ -1,10 +1,9 @@
 [*]
 bookmark.title=Current view (copy or open in new window)
-bookmark_icon.alt=Bookmark
+previous.title=Previous
-previous_label=Previous
+next.title=Next
-next_label=Next
+print.title=Print
-print_label=Print
+download_label.title=Download
-download_label=Download
 zoom_out.title=Zoom Out
 zoom_in.title=Zoom In
 error_more_info=More Information
@@ -17,23 +16,24 @@ error_file=File: {{file}}
 error_line=Line: {{line}}
 page_scale_width=Page Width
 page_scale_fit=Page Fit
-page_scale_auto=Auto
+page_scale_auto=Automatic Zoom
+page_scale_actual=Actual Size
+toggle_slider.title=Toggle Slider
 thumbs.title=Show Thumbnails
-thumbs_icon.alt=Thumbs
 outline.title=Show Document Outline
-outline_icon.alt=Document Outline
 loading=Loading... {{percent}}%
 loading_error_indicator=Error
 loading_error=An error occurred while loading the PDF.
 rendering_error=An error occurred while rendering the page.
+page_label=Page:
+page_of=of {{pageCount}}
 
 [ru]
 bookmark.title=Ссылка на текущий вид (скопировать или открыть в новом окне) 
-bookmark_icon.alt=Закладка
+previous.title=Предыдущая
-previous_label=Предыдущая
+next.title=Следующая
-next_label=Следующая
+print.title=Печать
-print_label=Печать
+download.title=Загрузить
-download_label=Загрузить
 zoom_out.title=Уменьшить
 zoom_in.title=Увеличить
 error_more_info=Больше информации
@@ -47,43 +47,42 @@ error_line=Строка: {{line}}
 page_scale_width=Ширина страницы
 page_scale_fit=Вся страница
 page_scale_auto=Автоматически
+page_scale_actual=Настоящий размер
 thumbs.title=Показать уменьшенные изображения
-thumbs_icon.alt=Уменьшенные изображения
 outline.title=Показать содержание документа
-outline_icon.alt=Содержание документа
 loading=Загрузка... {{percent}}%
 loading_error_indicator=Ошибка
 loading_error=Произошла ошибка во время загрузки PDF.
 rendering_error=Произошла ошибка во время создания страницы.
-
+page_label=Страница:
-loading=Загрузка... {{percent}}%
+page_of=из {{pageCount}}
 
 [xx]
 bookmark.title=<<<_¢ȗггεпţ ṿiεẂ (¢OÞӳ Oг OÞεп iп пεẂ ẂiпÐOẂ)_>>>
-bookmark_icon.alt=<<<_ьOOқмãгқ_>>>
+previous.title=<<<_ÞгεṿiOȗ§_>>>
-previous_label=<<<_ÞгεṿiOȗ§_>>>
+next.title=<<<_пεӾţ_>>>
-next_label=<<<_пεӾţ_>>>
+print.title=<<<_Þгiпţ_>>>
-print_label=<<<_Þгiпţ_>>>
+download_label.title=<<<_ÐOẂпḻOãÐ_>>>
-download_label=<<<_ÐOẂпḻOãÐ_>>>
 zoom_out.title=<<<_ƩOOм Oȗţ_>>>
 zoom_in.title=<<<_ƩOOм iп_>>>
 error_more_info=<<<_мOгε iп£OгмãţiOп_>>>
 error_less_info=<<<_ḻ姧 iп£OгмãţiOп_>>>
 error_close=<<<_¢ḻO§ε_>>>
-error_build=<<<_ÞУ.ʃ§ ьȗiḻÐ: {{ьȗiḻÐ}}_>>>
+error_build=<<<_ÞУ.ʃ§ ьȗiḻÐ: {{build}}_>>>
-error_message=<<<_м姧ãģε: {{м姧ãģε}}_>>>
+error_message=<<<_м姧ãģε: {{message}}_>>>
-error_stack=<<<_§ţã¢қ: {{§ţã¢қ}}_>>>
+error_stack=<<<_§ţã¢қ: {{stack}}_>>>
-error_file=<<<_£iḻε: {{£iḻε}}_>>>
+error_file=<<<_£iḻε: {{file}}_>>>
-error_line=<<<_ḻiпε: {{ḻiпε}}_>>>
+error_line=<<<_ḻiпε: {{line}}_>>>
 page_scale_width=<<<_Þãģε ẂiÐţН_>>>
 page_scale_fit=<<<_Þãģε £iţ_>>>
-page_scale_auto=<<<_ãȗţO_>>>
+page_scale_auto=<<<_ãȗţOмãţi¢ ƩOOм_>>>
+page_scale_actual=<<<_ã¢ţȗãḻ §iƩε_>>>
+toggle_slider.title=<<<_ţOģģḻε §ḻiÐεг_>>>
 thumbs.title=<<<_§НOẂ ţНȗмьпãiḻ§_>>>
-thumbs_icon.alt=<<<_ţНȗмь§_>>>
 outline.title=<<<_§НOẂ ÐO¢ȗмεпţ Oȗţḻiпε_>>>
-outline_icon.alt=<<<_ÐO¢ȗмεпţ Oȗţḻiпε_>>>
+loading=<<<_ḻOãÐiпģ... {{percent}}%_>>>
-loading=<<<_ḻOãÐiпģ... {{Þεг¢εпţ}}%_>>>
 loading_error_indicator=<<<_εггOг_>>>
 loading_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε ḻOãÐiпģ ţНε ÞУ._>>>
 rendering_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε гεпÐεгiпģ ţНε Þãģε._>>>
-
+page_label=Þãģε:
+page_of=<<<_O£ {{pageCount}}_>>>

web/viewer.css

@@ -1,175 +1,558 @@
-/* -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- /
+* {
-/* vim: set shiftwidth=4 tabstop=8 autoindent cindent expandtab: */
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+}
 
 body {
-  background-color: #929292;
+  height: 100%;
-  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
+  background-color: #404040;
-  margin: 0px;
+  background-image: url(images/texture.png);
-  padding: 0px;
+  font-family: Segoe UI, Verdana, sans-serif;
 }
 
+.hidden {
+  display: none;
+}
 [hidden] {
   display: none !important;
 }
 
-/* === Toolbar === */
+/* outer/inner center provides horizontal center */
-#controls {
+.outerCenter {
-  background-color: #eee;
+  float: right;
-  background: -o-linear-gradient(bottom,#eee 0%,#fff 100%);
+  position: relative;
-  background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%);
+  right: 50%;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff));
+}
-  border-bottom: 1px solid #666;
+.innerCenter {
-  padding: 3px;
+  float: right;
-  position: fixed;
+  position: relative;
+  right: -50%;
+}
+
+#outerContainer {
+  width: 100%;
+  height: 100%;
+}
+
+#sidebarContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -200px;
+  width: 200px;
+  -moz-transition-property: left;
+  -moz-transition-duration: 200ms;
+  -moz-transition-timing-function: ease;
+  -webkit-transition-property: left;
+  -webkit-transition-duration: 200ms;
+  -webkit-transition-timing-function: ease;
+}
+#outerContainer.sidebarOpen > #sidebarContainer {
   left: 0px;
-  top: 0px;
+}
-  height: 24px;
+
+#mainContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -moz-transition-property: left;
+  -moz-transition-duration: 200ms;
+  -moz-transition-timing-function: ease;
+  -webkit-transition-property: left;
+  -webkit-transition-duration: 200ms;
+  -webkit-transition-timing-function: ease;
+}
+#outerContainer.sidebarOpen > #mainContainer {
+  left: 200px;
+}
+
+#sidebarContent {
+  top: 32px;
+  left: 0;
+  bottom: 0;
+  overflow: auto;
+  position: absolute;
+  width: 200px;
+
+  background-color: hsla(0,0%,0%,.1);
+  box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+}
+
+#viewerContainer {
+  overflow: auto;
+  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05);
+  padding-top: 30px;
+  position: absolute;
+  top: 32px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.toolbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 32px;
+  z-index: 9999;
+  cursor: default;
+}
+
+#toolbarContainer {
   width: 100%;
-  z-index: 1;
+}
-  white-space:nowrap;
+
+#toolbarSidebar {
+  width: 200px;
+  height: 32px;
+  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),
+                    -webkit-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95));
+  box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08),
+              inset 0 1px 1px hsla(0,0%,0%,.15),
+              inset 0 -1px 0 hsla(0,0%,100%,.05),
+              0 1px 0 hsla(0,0%,0%,.15),
+              0 1px 1px hsla(0,0%,0%,.1);
+}
+
+#toolbarViewer {
+  position: relative;
+  margin-left: -1px;
+  height: 32px;
+  background-image: url(images/texture.png),
+                    -moz-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
+  background-image: url(images/texture.png),
+                    -webkit-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
+  border-left: 1px solid hsla(0,0%,0%,.5);
+  box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08),
+              inset 0 1px 1px hsla(0,0%,0%,.15),
+              inset 0 -1px 0 hsla(0,0%,100%,.05),
+              0 1px 0 hsla(0,0%,0%,.15),
+              0 1px 1px hsla(0,0%,0%,.1);
+}
+
+#toolbarViewerLeft {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+#toolbarViewerRight {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+#toolbarViewerLeft > *,
+#toolbarViewerMiddle > *,
+#toolbarViewerRight > * {
+  float: left;
+}
+
+.splitToolbarButton {
+  margin: 3px 2px 4px 0;
+  display: inline-block;
+}
+.splitToolbarButton > .toolbarButton {
+  border-radius: 0;
+  float: left;
+}
+
+.toolbarButton {
+  border: 0 none;
+  background-color: rgba(0, 0, 0, 0);
+  width: 32px;
+  height: 25px;
+}
+
+.toolbarButton[disabled] {
+  opacity: .5;
+}
+
+.splitToolbarButton:hover > .toolbarButton,
+.splitToolbarButton.toggled > .toolbarButton {
+  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));
+  background-clip: padding-box;
+  border: 1px solid hsla(0,0%,0%,.35);
+  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+              0 0 1px hsla(0,0%,100%,.15) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 150ms;
+  -moz-transition-timing-function: ease;
+  -webkit-transition-property: background-color, border-color, box-shadow;
+  -webkit-transition-duration: 150ms;
+  -webkit-transition-timing-function: ease;
+}
+.splitToolbarButton > .toolbarButton:hover,
+.dropdownToolbarButton:hover {
+  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,
+              0 0 1px hsla(0,0%,0%,.05);
+  z-index: 199;
+}
+.splitToolbarButton > .toolbarButton:first-child  {
+  position: relative;
+  margin: 0;
+  margin-right: -1px;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  border-right-color: transparent;
+}
+.splitToolbarButton > .toolbarButton:last-child  {
+  position: relative;
+  margin: 0;
+  margin-left: -1px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  border-left-color: transparent;
+}
+.splitToolbarButtonSeparator {
+  padding: 8px 0;
+  width: 1px;
+  background-color: hsla(0,0%,00%,.5);
+  z-index: 99;
+  box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
+  display: inline-block;
+  margin: 5px 0;
+  float:left;
+}
+.splitToolbarButton:hover > .splitToolbarButtonSeparator,
+.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
+  padding: 12px 0;
+  margin: 0;
+  box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
+  -moz-transition-property: padding;
+  -moz-transition-duration: 10ms;
+  -moz-transition-timing-function: ease;
+  -webkit-transition-property: padding;
+  -webkit-transition-duration: 10ms;
+  -webkit-transition-timing-function: ease;
+}
+
+.toolbarButton,
+.dropdownToolbarButton {
+  min-width: 16px;
+  padding: 2px 6px 0;
+  margin: 3px 2px 4px 0;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  color: hsl(0,0%,95%);
+  font-size: 12px;
+  line-height: 14px;
+  -moz-user-select:none;
+  -webkit-user-select:none;
+  cursor: default;
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 150ms;
+  -moz-transition-timing-function: ease;
+  -webkit-transition-property: background-color, border-color, box-shadow;
+  -webkit-transition-duration: 150ms;
+  -webkit-transition-timing-function: ease;
+}
+
+.toolbarButton:hover,
+.dropdownToolbarButton {
+  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));
+  background-clip: padding-box;
+  border: 1px solid hsla(0,0%,0%,.35);
+  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+              0 0 1px hsla(0,0%,100%,.15) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+}
+
+.toolbarButton:hover:active,
+.dropdownToolbarButton:hover:active {
+  background-color: hsla(0,0%,0%,.2);
+  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-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
+  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
+              0 0 1px hsla(0,0%,0%,.2) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 10ms;
+  -moz-transition-timing-function: linear;
+  -webkit-transition-property: background-color, border-color, box-shadow;
+  -webkit-transition-duration: 10ms;
+  -webkit-transition-timing-function: linear;
+}
+
+.toolbarButton.toggled,
+.splitToolbarButton.toggled > .toolbarButton.toggled {
+  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-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
+  box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
+              0 0 1px hsla(0,0%,0%,.2) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 10ms;
+  -moz-transition-timing-function: linear;
+  -webkit-transition-property: background-color, border-color, box-shadow;
+  -webkit-transition-duration: 10ms;
+  -webkit-transition-timing-function: linear;
+}
+
+.toolbarButton.toggled:hover:active,
+.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active {
+  background-color: hsla(0,0%,0%,.4);
+  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
+  box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
+              0 0 1px hsla(0,0%,0%,.3) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+}
+
+.dropdownToolbarButton {
+  min-width: 120px;
+  max-width: 120px;
+  padding: 3px 2px 2px;
   overflow: hidden;
+  background: url(images/toolbarButton-menuArrows.png) no-repeat 95%;
+}
+
+.dropdownToolbarButton > select {
+  -moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
+  -webkit-appearance: none;
+  min-width: 140px;
+  font-size: 12px;
+  color: hsl(0,0%,95%);
+  margin:0;
+  padding:0;
+  border:none;
+  background: transparent;
+}
+
+#customScaleOption {
+  display: none;
+}
+
+#pageWidthOption {
+  border-bottom: 1px rgba(255, 255, 255, .5) solid;
+}
+
+.splitToolbarButton:first-child,
+.toolbarButton:first-child {
+  margin-left: 4px;
+}
+.splitToolbarButton:last-child,
+.toolbarButton:last-child {
+  margin-right: 4px;
+}
+
+.toolbarButtonSpacer {
+  width: 30px;
+  display: inline-block;
+  height: 1px;
+}
+
+.toolbarButtonFlexibleSpacer {
+  -moz-box-flex: 1;
+  -webkit-box-flex: 1;
+  min-width: 30px;
+}
+
+.toolbarButton#sidebarToggle::before {
+  display: inline-block;
+  content: url(images/toolbarButton-sidebarToggle.png);
+}
+    
+.toolbarButton.pageUp::before {
+  display: inline-block;
+  content: url(images/toolbarButton-pageUp.png);
+}
+    
+.toolbarButton.pageDown::before {
+  display: inline-block;
+  content: url(images/toolbarButton-pageDown.png);
+}
+
+.toolbarButton.zoomOut::before {
+  display: inline-block;
+  content: url(images/toolbarButton-zoomOut.png);
 }
     
-.separator {
+.toolbarButton.zoomIn::before {
-  display: inline;
+  display: inline-block;
-  border-left: 1px solid #d3d3d3;
+  content: url(images/toolbarButton-zoomIn.png);
-  border-right: 1px solid #fff;
-  height: 16px;
-  width:0px;
-  margin: 4px;
 }
 
-#controls > a > img {
+.toolbarButton.print::before {
-    margin: 4px;
+  display: inline-block;
-    height: 16px;
+  content: url(images/toolbarButton-print.png);
 }
 
-#controls > button {
+.toolbarButton.download::before {
-  line-height: 16px;
+  display: inline-block;
+  content: url(images/toolbarButton-download.png);
 }
 
-#controls > button > img {
+.toolbarButton.bookmark {
-  width: 16px;
+  -moz-box-sizing: border-box;
-  height: 16px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-top: 3px;
+  padding-top: 4px;
 }
 
-#controls > button[disabled] > img {
+.toolbarButton.bookmark::before {
-  opacity: 0.5;
+  content: url(images/toolbarButton-bookmark.png);
 }
     
-#pageNumber {
+#viewThumbnail.toolbarButton::before {
+  display: inline-block;
+  content: url(images/toolbarButton-viewThumbnail.png);
+}
+    
+#viewOutline.toolbarButton::before {
+  display: inline-block;
+  content: url(images/toolbarButton-viewOutline.png);
+}
+
+.toolbarField {
+  min-width: 16px;
+  width: 32px;
+  padding: 3px 6px;
+  margin: 4px 0 4px 0;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background-color: hsla(0,0%,100%,.09);
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+  background-clip: padding-box;
+  border: 1px solid hsla(0,0%,0%,.35);
+  border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
+  box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
+              0 1px 0 hsla(0,0%,100%,.05);
+  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;
+  -moz-transition-timing-function: ease;
 }
 
-#fileInput {
+.toolbarField.pageNumber {
-  line-height: 16px;
+  width: 40px;
 }
 
-/* === Sidebar === */
+.toolbarField.pageNumber::-webkit-inner-spin-button,
-#sidebar {
+.toolbarField.pageNumber::-webkit-outer-spin-button {
-  position: fixed;
+    -webkit-appearance: none;
-  width: 350px;
+    margin: 0;
-  top: 62px;
-  bottom: 18px;
-  left: -290px;
-  transition: left 0.25s ease-in-out 1s;
-  -o-transition: left 0.25s ease-in-out 1s;
-  -moz-transition: left 0.25s ease-in-out 1s;
-  -webkit-transition: left 0.25s ease-in-out 1s;
-  z-index: 1;
-}
-
-#sidebar:hover,
-#sidebar.pinned {
-  left: 0px;
-  transition: left 0.25s ease-in-out 0s;
-  -o-transition: left 0.25s ease-in-out 0s;
-  -moz-transition: left 0.25s ease-in-out 0s;
-  -webkit-transition: left 0.25s ease-in-out 0s;
 }
 
-#pinIcon {
+.toolbarField:hover {
-  position: absolute;
+  background-color: hsla(0,0%,100%,.11);
-  top: 4px;
+  border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
-  right: 55px;
-  width: 15px;
-  height: 15px;
-  background: center no-repeat;
-  background-image: url('images/pin-up.svg');
-  background-size: 15px 15px;
 }
 
-#pinIcon:hover {
+.toolbarField:focus {
-  background-color: rgba(255,255,255,0.35);
+  background-color: hsla(0,0%,100%,.15);
+  border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
 }
 
-#sidebar.pinned #pinIcon {
+.toolbarLabel {
-  background-image: url('images/pin-down.svg');
+  min-width: 16px;
-  background-size: 15px 15px;
+  padding: 3px 6px 3px 2px;
+  margin: 4px 2px 4px 0;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  color: hsl(0,0%,85%);
+  font-size: 12px;
+  line-height: 14px;
+  text-align: left;
+  -moz-user-select:none;
+  -webkit-user-select:none;
+  cursor: default;
 }
 
-#sidebarBox {
+#thumbnailView {
-  background-color: rgba(0, 0, 0, 0.7);
+  position: fixed;
-  width: 300px;
+  width: 120px;
-  height: 100%;
+  top: 33px;
-  border-top-right-radius: 8px;
+  bottom: 0;
-  border-bottom-right-radius: 8px;
+  padding: 10px 40px 0;
-  -moz-border-radius-topright: 8px;
+  overflow: auto;
-  -moz-border-radius-bottomright: 8px;
-  -webkit-border-top-right-radius: 8px;
-  -webkit-border-bottom-right-radius: 8px;
-  box-shadow: 0px 2px 8px #000;
-  -moz-box-shadow: 0px 2px 8px #000;
-  -webkit-box-shadow: 0px 2px 8px #000;
-}
-
-#sidebarScrollView {
-  position: absolute;
-  overflow: hidden;
-  overflow-y: auto;
-  top: 20px;
-  bottom: 10px;
-  left: 10px;
-  width: 280px;
 }
 
 .thumbnail {
-  width: 134px;
+  margin-bottom: 15px;
-  height: 134px;
+  float: left;
-  margin-top: 5px;
+  width: 114px;
-  margin-bottom: 5px;
+  height: 142px;
-  margin-left:auto;
-  margin-right:auto;
-  line-height: 134px;
-  text-align: center;
-  overflow: hidden;
 }
 
 .thumbnail:not([data-loaded]) {
-  background-color: gray;
+  border: 1px dashed rgba(255, 255, 255, 0.5);
 }
 
-.thumbnail > canvas {
+.thumbnailImage {
-  vertical-align: middle;
+  -moz-transition-duration: 150ms;
-  display: inline-block;
+  border: 1px solid transparent;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
+  opacity: 0.8;
+  z-index: 99;
 }
 
-#outlineScrollView {
+.thumbnailSelectionRing {
-  position: absolute;
+  border-radius: 2px;
-  background-color: #fff;
+  padding: 7px;
-  overflow: auto;
+  -moz-transition-duration: 150ms;
-  top: 20px;
+}
-  bottom: 10px;
+    
-  left: 10px;
+.thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
-  width: 280px;
+  opacity: .9;
+}
+
+.thumbnail:hover > .thumbnailSelectionRing {
+  background-color: hsla(0,0%,100%,.15);
+  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%,.2) inset,
+              0 0 1px hsla(0,0%,0%,.2);
+  color: hsla(0,0%,100%,.9);
+}
+
+.thumbnail.selected > .thumbnailSelectionRing > .thumbnailImage {
+  box-shadow: 0 0 0 1px hsla(0,0%,0%,.5);
+  opacity: 1;
+}
+
+.thumbnail.selected > .thumbnailSelectionRing {
+  background-color: hsla(0,0%,100%,.3);
+  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);
 }
 
 #outlineView {
-  padding-top: 4px;
+  position: fixed;
-  padding-bottom: 100px;
+  width: 192px;
-  padding-left: 6px;
+  top: 33px;
-  padding-right: 6px;
+  bottom: 0;
-  font-size: smaller;
+  padding: 4px 4px 0;
+  overflow: auto;
+  -moz-user-select:none;
+  -webkit-user-select:none;
 }
 
 .outlineItem > .outlineItems {
@@ -178,44 +561,47 @@ body {
 
 .outlineItem > a {
   text-decoration: none;
-  color: black;
+  display: block;
+  height: 20px;
+  padding: 2px 0 0 10px;
+  margin-bottom: 1px;
+  border-radius: 2px;
+  color: hsla(0,0%,100%,.8);
+  font-size: 13px;
+  line-height: 15px;
+  -moz-user-select:none;
+  cursor: default;
+  white-space: nowrap;
 }
 
 .outlineItem > a:hover {
-  background: #ff0;
+  background-color: hsla(0,0%,100%,.02);
-  box-shadow: 0px 2px 10px #ff0;
+  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,
-#sidebarControls {
+              0 0 1px hsla(0,0%,100%,.2) inset,
-  position:absolute;
+              0 0 1px hsla(0,0%,0%,.2);
-  width: 120px;
+  color: hsla(0,0%,100%,.9);
-  height: 32px;
-  left: 15px;
-  bottom: 35px;
 }
 
-#sidebarControls > button {
+.outlineItem.selected {
-  box-shadow: 0px 4px 10px #000;
+  background-color: hsla(0,0%,100%,.08);
-  -moz-box-shadow: 0px 4px 10px #000;
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
-  -webkit-box-shadow: 0px 4px 10px #000;
+  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);
 }
 
-#sidebarControls > button > img {
+.noOutline {
-  width: 32px;
+  font-size: 12px;
-  height: 32px;
+  color: hsla(0,0%,100%,.8);
+  font-style: italic;
 }
 
-#sidebarControls > button[disabled] > img {
-  opacity: 0.5;
-}
 
-#sidebarControls > button[data-selected] {
-  box-shadow: 0px 4px 10px #ff0;
-  -moz-box-shadow: 0px 4px 10px #ff0;
-  -webkit-box-shadow: 0px 4px 10px #ff0;
-}
 
-/* === Content view === */
 canvas {
   margin: auto;
   display: block;
@@ -256,6 +642,50 @@ canvas {
   background: url('images/loading-icon.gif') center no-repeat;
 }
 
+#loadingBox {
+  margin: 100px 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;
+  width: 200px;
+  height: 25px;
+}
+
+#loadingBar .progress {
+  display: inline-block;
+  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;
+
+  width: 0%;
+  height: 100%;
+}
+
+#loadingBar .progress.full {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
 .textLayer {
   position: absolute;
   left: 0;
@@ -272,6 +702,12 @@ canvas {
   line-height:1.3;
 }
 
+/* TODO: file FF bug to support ::-moz-selection:window-inactive
+   so we can override the opaque grey background when the window is inactive;
+   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
+::selection { background:rgba(0,0,255,0.3); }
+::-moz-selection { background:rgba(0,0,255,0.3); }
+
 .annotComment > div {
   position: absolute;
 }
@@ -301,39 +737,13 @@ canvas {
   margin: 0px;
 }
 
-/* TODO: file FF bug to support ::-moz-selection:window-inactive
-   so we can override the opaque grey background when the window is inactive;
-   see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
-::selection { background:rgba(0,0,255,0.3); }
-::-moz-selection { background:rgba(0,0,255,0.3); }
-
-#viewer {
-  margin: 44px 0px 0px;
-  padding: 8px 0px;
-}
-
-#sidebarView canvas:hover {
-  background: #ff0;
-  box-shadow: 0px 2px 10px #ff0;
-  -moz-box-shadow: 0px 2px 10px #ff0;
-  -webkit-box-shadow: 0px 2px 10px #ff0;
-}
-
-#pageWidthOption {
-  border-top: 1px solid black;
-}
-
-#customScaleOption {
-  display: none;
-}
-
 #errorWrapper {
   background: none repeat scroll 0 0 #FF5555;
   color: white;
   left: 0;
-  position: fixed;
+  position: absolute;
   right: 0;
-  top: 30px;
+  top: 32px;
   z-index: 1000;
   padding: 3px;
   font-size: 0.8em;
@@ -359,116 +769,56 @@ canvas {
   clear: both;
 }
 
-/* === Printed media overrides === */
+.fileInput {
-@media print {
+  background: white;
-  #sidebar {
+  color: black;
-    display: none;
+  margin-top: 5px;
-  }
-
-  #controls {
-    display: none;
-  }
-
-  #viewer {
-    margin: 0;
-    padding: 0;
-  }
-
-  .page {
-    display: none;
-    margin: 0;
-  }
-
-  .page canvas {
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-  }
-
-  .page[data-loaded] {
-    display: block;
-    page-break-after: always;
-  }
-}
-
-#loadingBox {
-  margin: 100px 0;
-  text-align: center;
-}
-
-#loadingBar {
-  background-color: #333;
-  display: inline-block;
-  border: 1px solid black;
-  clear: both;
-  margin:0px;
-  line-height: 0;
-  border-radius: 4px;
-  width: 15em;
-  height: 1.5em;
-}
-
-#loadingBar .progress {
-  background-color: green;
-  display: inline-block;
-  float: left;
-
-  background: #b4e391;
-  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
-  background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);    
-
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-
-  width: 0%;
-  height: 100%;
 }
 
 #PDFBug {
-  font-size: 10px;
+  background: none repeat scroll 0 0 white;
+  border: 1px solid #666666;
   position: fixed;
-  top: 35px;
+  top: 32px;
-  bottom: 5px;
+  right: 0;
-  right: 2px;
+  bottom: 0;
-  width: 300px;
+  font-size: 10px;
-  background: white;
-  border: 1px solid #666;
   padding: 0;
+  width: 300px;
 }
 #PDFBug .controls {
-  border-bottom: 1px solid #666;
+    background:#EEEEEE;
+    border-bottom: 1px solid #666666;
     padding: 3px;
-  background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%);
 }
 #PDFBug .panels {
+  bottom: 0;
+  left: 0;
   overflow: auto;
   position: absolute;
-  top: 27px;
-  left: 0;
   right: 0;
-  bottom: 0;
+  top: 27px;
 }
 #PDFBug button.active {
   font-weight: bold;
 }
 .debuggerShowText {
-  background: yellow;
+  background: none repeat scroll 0 0 yellow;
   color: blue;
   opacity: 0.3;
 }
 .debuggerHideText:hover {
-  background: yellow;
+  background: none repeat scroll 0 0 yellow;
   opacity: 0.3;
 }
 #PDFBug .stats {
+  font-family: courier;
   font-size: 10px;
   white-space: pre;
-  font-family: courier;
 }
 #PDFBug .stats .title {
     font-weight: bold;
 }
+#PDFBug table {
+  font-size: 10px;
+}

web/viewer.html

@@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-        <title>Simple pdf.js page viewer</title>
+    <title>PDF.js viewer</title>
     <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
 
     <link rel="stylesheet" href="viewer.css"/>
     <link rel="resource" type="application/l10n" href="locale.properties"/>
 
     <script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION -->
+    <script type="text/javascript" src="../external/webL10n/l10n.js"></script><!-- PDFJSSCRIPT_REMOVE_CORE -->
 
     <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
     <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
@@ -34,42 +35,68 @@
     <script type="text/javascript" src="../src/jpx.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="../src/bidi.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript">PDFJS.workerSrc = '../src/worker_loader.js';</script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../external/webL10n/l10n.js"></script><!-- PDFJSSCRIPT_REMOVE_CORE -->
     <script type="text/javascript" src="debugger.js"></script>
     <script type="text/javascript" src="viewer.js"></script>
   </head>
 
   <body>
-    <div id="controls">
+    <div id="outerContainer">
-      <button id="previous" onclick="PDFView.page--;" oncontextmenu="return false;">
-        <img src="images/go-up.svg" align="top" height="16"/>
-        <span data-l10n-id="previous_label">Previous</span>
-      </button>
-
-      <button id="next" onclick="PDFView.page++;" oncontextmenu="return false;">
-        <img src="images/go-down.svg" align="top" height="16"/>
-        <span data-l10n-id="next_label">Next</span>
-      </button>
-
-      <div class="separator"></div>
-
-      <input type="number" id="pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" />
 
-      <span>/</span>
+      <div id="sidebarContainer">
-      <span id="numPages">--</span>
+        <div id="toolbarSidebar">
-
+          <div class="splitToolbarButton toggled">
-      <div class="separator"></div>
+            <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" data-l10n-id="thumbs"></button>
-
+            <button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" data-l10n-id="outline"></button>
-      <button id="zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" oncontextmenu="return false;" data-l10n-id="zoom_out">
+          </div>
-        <img src="images/zoom-out.svg" align="top" height="16"/>
+        </div>
-      </button>
+        <div id="sidebarContent">
-      <button id="zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" oncontextmenu="return false;" data-l10n-id="zoom_in">
+          <div id="thumbnailView">
-        <img src="images/zoom-in.svg" align="top" height="16"/>
+          </div>
-      </button>
+          <div id="outlineView" class="hidden">
-
+          </div>
-      <div class="separator"></div>
+        </div>
+      </div>  <!-- sidebarContainer -->
+
+      <div id="mainContainer">
+        <div class="toolbar">
+          <div id="toolbarContainer">
+
+            <div id="toolbarViewer">
+              <div id="toolbarViewerLeft">
+                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" data-l10n-id="toggle_slider"></button>
+                <div class="toolbarButtonSpacer"></div>
+                <div class="splitToolbarButton">
+                  <button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous" data-l10n-id="previous"></button>
+                  <div class="splitToolbarButtonSeparator"></div>
+                  <button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next" data-l10n-id="next"></button>
+                </div>
+                <div class="toolbarLabel" data-l10n-id="page_label">Page: </div>
+                <input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
+                </input>
+                <span id="numPages" class="toolbarLabel"></span>
+              </div>
+              <div id="toolbarViewerRight">
+                <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;"/>
 
+                <!-- <button id="print" class="toolbarButton print" title="Print" onclick="window.print()"></button> -->
+                <button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();" data-l10n-id="download"></button>
+                <!-- <div class="toolbarButtonSpacer"></div> -->
+                <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location" data-l10n-id="bookmark">
+                </a>
+              </div>
+              <div class="outerCenter">
+                <div class="innerCenter" id="toolbarViewerMiddle">
+                  <div class="splitToolbarButton">
+                    <button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" data-l10n-id="zoom_out"></button>
+                    <div class="splitToolbarButtonSeparator"></div>
+                    <button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" data-l10n-id="zoom_in"></button>
+                  </div>
+                  <span class="dropdownToolbarButton">
                      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
+                      <option id="pageAutoOption" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
+                      <option id="pageActualOption" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
+                      <option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
+                      <option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">Full Width</option>
                       <option id="customScaleOption" value="custom"></option>
                       <option value="0.5">50%</option>
                       <option value="0.75">75%</option>
@@ -77,34 +104,23 @@
                       <option value="1.25">125%</option>
                       <option value="1.5">150%</option>
                       <option value="2">200%</option>
-        <option id="pageWidthOption" value="page-width" data-l10n-id="page_scale_width">Page Width</option>
-        <option id="pageFitOption" value="page-fit" data-l10n-id="page_scale_fit">Page Fit</option>
-        <option id="pageAutoOption" value="auto" data-l10n-id="page_scale_auto" selected="selected">Auto</option>
                     </select>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
 
-      <div class="separator"></div>
+        <div id="viewerContainer">
-
+          <div id="viewer"></div>
-      <button id="print" onclick="window.print();" oncontextmenu="return false;">
+        </div>
-        <img src="images/document-print.svg" align="top" height="16"/>
-        <span data-l10n-id="print_label">Print</span>
-      </button>
-
-      <button id="download" title="Download" onclick="PDFView.download();" oncontextmenu="return false;">
-        <img src="images/download.svg" align="top" height="16"/>
-        <span data-l10n-id="download_label">Download</span>
-      </button>
-
-      <div class="separator"></div>
-
-      <input id="fileInput" type="file" oncontextmenu="return false;"/>
-
-      <div id="fileInputSeperator" class="separator"></div>
-
-      <a href="#" id="viewBookmark" data-l10n-id="bookmark" title="Bookmark (or copy) current location">
-        <img src="images/bookmark.svg" data-l10n-id="bookmark_icon" alt="Bookmark" align="top" height="16"/>
-      </a>
 
+        <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>
+
         <div id="errorWrapper" hidden='true'>
           <div id="errorMessageLeft">
             <span id="errorMessage"></span>
@@ -123,31 +139,8 @@
           <div class="clearBoth"></div>
           <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
         </div>
+      </div> <!-- mainContainer -->
 
-    <div id="sidebar">
+    </div> <!-- outerContainer -->
-      <div id="sidebarBox">
-        <div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
-        <div id="sidebarScrollView">
-          <div id="sidebarView"></div>
-        </div>
-        <div id="outlineScrollView" hidden='true'>
-          <div id="outlineView"></div>
-        </div>
-        <div id="sidebarControls">
-          <button id="thumbsSwitch" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" data-l10n-id="thumbs" data-selected>
-            <img src="images/nav-thumbs.svg" align="top" height="16" alt="Thumbs" data-l10n-id="thumbs_icon"/>
-          </button>
-          <button id="outlineSwitch" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" data-l10n-id="outline" disabled>
-            <img src="images/nav-outline.svg" align="top" height="16" alt="Document Outline" data-l10n-id="outline_icon"/>
-          </button>
-        </div>
-      </div>
-    </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>
-    <div id="viewer"></div>
   </body>
 </html>

web/viewer.js

@@ -64,6 +64,9 @@ var ProgressBar = (function ProgressBarClosure() {
     updateBar: function ProgressBar_updateBar() {
       var progressSize = this.width * this._percent / 100;
 
+      if (this._percent > 95)
+        this.div.classList.add('full');
+
       this.div.style.width = progressSize + this.units;
     },
 
@@ -216,6 +219,13 @@ var PDFView = {
   currentScale: kUnknownScale,
   currentScaleValue: null,
   initialBookmark: document.location.hash.substring(1),
+  container: null,
+  initialized: false,
+  // called once when the document is loaded
+  initialize: function pdfViewInitialize() {
+    this.container = document.getElementById('viewerContainer');
+    this.initialized = true;
+  },
 
   setScale: function pdfViewSetScale(val, resetAutoSettings) {
     if (val == this.currentScale)
@@ -247,32 +257,43 @@ var PDFView = {
       return;
     }
 
+    var container = this.container;
     var currentPage = this.pages[this.page - 1];
-    var pageWidthScale = (window.innerWidth - kScrollbarPadding) /
+    var pageWidthScale = (container.clientWidth - kScrollbarPadding) /
                           currentPage.width * currentPage.scale / kCssUnits;
-    var pageHeightScale = (window.innerHeight - kScrollbarPadding) /
+    var pageHeightScale = (container.clientHeight - kScrollbarPadding) /
                            currentPage.height * currentPage.scale / kCssUnits;
-    if ('page-width' == value)
+    switch (value) {
+      case 'page-actual':
+        this.setScale(1, resetAutoSettings);
+        break;
+      case 'page-width':
         this.setScale(pageWidthScale, resetAutoSettings);
-    if ('page-height' == value)
+        break;
+      case 'page-height':
         this.setScale(pageHeightScale, resetAutoSettings);
-    if ('page-fit' == value) {
+        break;
+      case 'page-fit':
         this.setScale(
             Math.min(pageWidthScale, pageHeightScale), resetAutoSettings);
-    }
+        break;
-    if ('auto' == value)
+      case 'auto':
         this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
+        break;
+    }
 
     selectScaleOption(value);
   },
 
   zoomIn: function pdfViewZoomIn() {
-    var newScale = Math.min(kMaxScale, this.currentScale * kDefaultScaleDelta);
+    var newScale = (this.currentScale * kDefaultScaleDelta).toFixed(2);
+    newScale = Math.min(kMaxScale, newScale);
     this.parseScale(newScale, true);
   },
 
   zoomOut: function pdfViewZoomOut() {
-    var newScale = Math.max(kMinScale, this.currentScale / kDefaultScaleDelta);
+    var newScale = (this.currentScale / kDefaultScaleDelta).toFixed(2);
+    newScale = Math.max(kMinScale, newScale);
     this.parseScale(newScale, true);
   },
 
@@ -485,14 +506,14 @@ var PDFView = {
     var loadingBox = document.getElementById('loadingBox');
     loadingBox.setAttribute('hidden', 'true');
 
-    var sidebar = document.getElementById('sidebarView');
+    var thumbsView = document.getElementById('thumbnailView');
-    sidebar.parentNode.scrollTop = 0;
+    thumbsView.parentNode.scrollTop = 0;
 
-    while (sidebar.hasChildNodes())
+    while (thumbsView.hasChildNodes())
-      sidebar.removeChild(sidebar.lastChild);
+      thumbsView.removeChild(thumbsView.lastChild);
 
-    if ('_loadingInterval' in sidebar)
+    if ('_loadingInterval' in thumbsView)
-      clearInterval(sidebar._loadingInterval);
+      clearInterval(thumbsView._loadingInterval);
 
     var container = document.getElementById('viewer');
     while (container.hasChildNodes())
@@ -501,7 +522,8 @@ var PDFView = {
     var pagesCount = pdfDocument.numPages;
     var id = pdfDocument.fingerprint;
     var storedHash = null;
-    document.getElementById('numPages').textContent = pagesCount;
+    document.getElementById('numPages').textContent =
+      mozL10n.get('page_of', {pageCount: pagesCount});
     document.getElementById('pageNumber').max = pagesCount;
     PDFView.documentFingerprint = id;
     var store = PDFView.store = new Settings(id);
@@ -527,7 +549,7 @@ var PDFView = {
         var page = promisedPages[i - 1];
         var pageView = new PageView(container, page, i, scale,
                                     page.stats, self.navigateTo.bind(self));
-        var thumbnailView = new ThumbnailView(sidebar, page, i);
+        var thumbnailView = new ThumbnailView(thumbsView, page, i);
         bindOnAfterDraw(pageView, thumbnailView);
 
         pages.push(pageView);
@@ -547,13 +569,7 @@ var PDFView = {
     // outline and initial view depends on destinations and pagesRefMap
     PDFJS.Promise.all([pagesPromise, destinationsPromise]).then(function() {
       pdfDocument.getOutline().then(function(outline) {
-        if (!outline)
-          return;
-
         self.outline = new DocumentOutlineView(outline);
-        var outlineSwitchButton = document.getElementById('outlineSwitch');
-        outlineSwitchButton.removeAttribute('disabled');
-        self.switchSidebarView('outline');
       });
 
       self.setInitialView(storedHash, scale);
@@ -641,64 +657,67 @@ var PDFView = {
   },
 
   switchSidebarView: function pdfViewSwitchSidebarView(view) {
-    var thumbsScrollView = document.getElementById('sidebarScrollView');
+    var thumbsView = document.getElementById('thumbnailView');
-    var outlineScrollView = document.getElementById('outlineScrollView');
+    var outlineView = document.getElementById('outlineView');
-    var thumbsSwitchButton = document.getElementById('thumbsSwitch');
+    var thumbsSwitchButton = document.getElementById('viewThumbnail');
-    var outlineSwitchButton = document.getElementById('outlineSwitch');
+    var outlineSwitchButton = document.getElementById('viewOutline');
+
+    if (outlineSwitchButton.getAttribute('disabled'))
+      return;
+
+    thumbsView.classList.toggle('hidden');
+    outlineView.classList.toggle('hidden');
+    document.getElementById('viewThumbnail').classList.toggle('toggled');
+    document.getElementById('viewOutline').classList.toggle('toggled');
+
     switch (view) {
       case 'thumbs':
-        thumbsScrollView.removeAttribute('hidden');
-        outlineScrollView.setAttribute('hidden', 'true');
-        thumbsSwitchButton.setAttribute('data-selected', true);
-        outlineSwitchButton.removeAttribute('data-selected');
         updateThumbViewArea();
         break;
       case 'outline':
-        thumbsScrollView.setAttribute('hidden', 'true');
-        outlineScrollView.removeAttribute('hidden');
-        thumbsSwitchButton.removeAttribute('data-selected');
-        outlineSwitchButton.setAttribute('data-selected', true);
         break;
     }
   },
 
-  pinSidebar: function pdfViewPinSidebar() {
-    document.getElementById('sidebar').classList.toggle('pinned');
-  },
-
   getVisiblePages: function pdfViewGetVisiblePages() {
     var pages = this.pages;
     var kBottomMargin = 10;
+    var kTopPadding = 30;
     var visiblePages = [];
 
-    var currentHeight = kBottomMargin;
+    var currentHeight = kTopPadding + kBottomMargin;
-    var windowTop = window.pageYOffset;
+    var container = this.container;
+    // Add 1px to the scrolltop to give a little wiggle room if the math is off,
+    // this won't be needed if we calc current page number based off the middle
+    // of the screen instead of the top.
+    var containerTop = container.scrollTop + 1;
     for (var i = 1; i <= pages.length; ++i) {
       var page = pages[i - 1];
       var pageHeight = page.height + kBottomMargin;
-      if (currentHeight + pageHeight > windowTop)
+      if (currentHeight + pageHeight > containerTop)
         break;
 
       currentHeight += pageHeight;
     }
 
-    var windowBottom = window.pageYOffset + window.innerHeight;
+    var containerBottom = containerTop + container.clientHeight;
-    for (; i <= pages.length && currentHeight < windowBottom; ++i) {
+    for (; i <= pages.length && currentHeight < containerBottom; ++i) {
       var singlePage = pages[i - 1];
       visiblePages.push({ id: singlePage.id, y: currentHeight,
                           view: singlePage });
-      currentHeight += singlePage.height * singlePage.scale + kBottomMargin;
+      currentHeight += page.height + kBottomMargin;
     }
     return visiblePages;
   },
 
   getVisibleThumbs: function pdfViewGetVisibleThumbs() {
     var thumbs = this.thumbnails;
-    var kBottomMargin = 5;
+    var kBottomMargin = 15;
     var visibleThumbs = [];
 
-    var view = document.getElementById('sidebarScrollView');
+    var view = document.getElementById('thumbnailView');
     var currentHeight = kBottomMargin;
+
     var top = view.scrollTop;
     for (var i = 1; i <= thumbs.length; ++i) {
       var thumb = thumbs[i - 1];
@@ -915,9 +934,9 @@ var PageView = function pageView(container, pdfPage, id, scale,
           y = dest[3];
           width = dest[4] - x;
           height = dest[5] - y;
-          widthScale = (window.innerWidth - kScrollbarPadding) /
+          widthScale = (this.container.clientWidth - kScrollbarPadding) /
             width / kCssUnits;
-          heightScale = (window.innerHeight - kScrollbarPadding) /
+          heightScale = (this.container.clientHeight - kScrollbarPadding) /
             height / kCssUnits;
           scale = Math.min(widthScale, heightScale);
           break;
@@ -925,16 +944,15 @@ var PageView = function pageView(container, pdfPage, id, scale,
           return;
       }
 
-      var boundingRect = [
-        this.viewport.convertToViewportPoint(x, y),
-        this.viewport.convertToViewportPoint(x + width, y + height)
-      ];
-
       if (scale && scale !== PDFView.currentScale)
         PDFView.parseScale(scale, true);
       else if (PDFView.currentScale === kUnknownScale)
         PDFView.parseScale(kDefaultScale, true);
 
+      var boundingRect = [
+        this.viewport.convertToViewportPoint(x, y),
+        this.viewport.convertToViewportPoint(x + width, y + height)
+      ];
       setTimeout(function pageViewScrollIntoViewRelayout() {
         // letting page to re-layout before scrolling
         var scale = PDFView.currentScale;
@@ -1047,16 +1065,13 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
   };
 
   var viewport = pdfPage.getViewport(1);
-  var pageWidth = viewport.width;
+  var pageWidth = this.width = viewport.width;
-  var pageHeight = viewport.height;
+  var pageHeight = this.height = viewport.height;
   var pageRatio = pageWidth / pageHeight;
   this.id = id;
 
-  var maxThumbSize = 134;
+  var canvasWidth = 98;
-  var canvasWidth = this.width = pageRatio >= 1 ? maxThumbSize :
+  var canvasHeight = canvasWidth / this.width * this.height;
-    maxThumbSize * pageRatio;
-  var canvasHeight = this.height = pageRatio <= 1 ? maxThumbSize :
-    maxThumbSize / pageRatio;
   var scaleX = this.scaleX = (canvasWidth / pageWidth);
   var scaleY = this.scaleY = (canvasHeight / pageHeight);
 
@@ -1076,9 +1091,14 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
 
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
+    canvas.className = 'thumbnailImage';
 
     div.setAttribute('data-loaded', true);
-    div.appendChild(canvas);
+
+    var ring = document.createElement('div');
+    ring.className = 'thumbnailSelectionRing';
+    ring.appendChild(canvas);
+    div.appendChild(ring);
 
     var ctx = canvas.getContext('2d');
     ctx.save();
@@ -1129,6 +1149,8 @@ var ThumbnailView = function thumbnailView(container, pdfPage, id) {
 
 var DocumentOutlineView = function documentOutlineView(outline) {
   var outlineView = document.getElementById('outlineView');
+  while (outlineView.firstChild)
+    outlineView.removeChild(outlineView.firstChild);
 
   function bindItemLink(domObj, item) {
     domObj.href = PDFView.getDestinationHash(item.dest);
@@ -1138,6 +1160,14 @@ var DocumentOutlineView = function documentOutlineView(outline) {
     };
   }
 
+  if (!outline) {
+    var noOutline = document.createElement('div');
+    noOutline.classList.add('noOutline');
+    noOutline.textContent = 'No Outline Available';
+    outlineView.appendChild(noOutline);
+    return;
+  }
+
   var queue = [{parent: outlineView, items: outline}];
   while (queue.length > 0) {
     var levelData = queue.shift();
@@ -1297,6 +1327,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
 };
 
 window.addEventListener('load', function webViewerLoad(evt) {
+  PDFView.initialize();
   var params = PDFView.parseQueryString(document.location.search.substring(1));
 
   var file = PDFJS.isFirefoxExtension ?
@@ -1305,8 +1336,6 @@ window.addEventListener('load', function webViewerLoad(evt) {
   if (PDFJS.isFirefoxExtension || !window.File || !window.FileReader ||
       !window.FileList || !window.Blob) {
     document.getElementById('fileInput').setAttribute('hidden', 'true');
-    document.getElementById('fileInputSeperator')
-                              .setAttribute('hidden', 'true');
   } else {
     document.getElementById('fileInput').value = null;
   }
@@ -1333,8 +1362,25 @@ window.addEventListener('load', function webViewerLoad(evt) {
     PDFBug.init();
   }
 
-  var sidebarScrollView = document.getElementById('sidebarScrollView');
+  var thumbsView = document.getElementById('thumbnailView');
-  sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
+  thumbsView.addEventListener('scroll', updateThumbViewArea, true);
+
+  var mainContainer = document.getElementById('mainContainer');
+  mainContainer.addEventListener('transitionend', function(e) {
+    if (e.target == mainContainer) {
+      var event = document.createEvent('UIEvents');
+      event.initUIEvent('resize', false, false, window, 0);
+      window.dispatchEvent(event);
+    }
+  }, true);
+
+  document.getElementById('sidebarToggle').addEventListener('click',
+    function() {
+      this.classList.toggle('toggled');
+      document.getElementById('outerContainer').classList.toggle('sidebarOpen');
+      updateThumbViewArea();
+    });
+
   PDFView.open(file, 0);
 }, true);
 
@@ -1362,6 +1408,8 @@ function preDraw() {
 }
 
 function updateViewarea() {
+  if (!PDFView.initialized)
+    return;
   var visiblePages = PDFView.getVisiblePages();
   var pageToDraw;
   for (var i = 0; i < visiblePages.length; i++) {
@@ -1392,13 +1440,12 @@ function updateViewarea() {
   var normalizedScaleValue = currentScaleValue == currentScale ?
     currentScale * 100 : currentScaleValue;
 
-  var kViewerTopMargin = 52;
   var pageNumber = firstPage.id;
   var pdfOpenParams = '#page=' + pageNumber;
   pdfOpenParams += '&zoom=' + normalizedScaleValue;
   var currentPage = PDFView.pages[pageNumber - 1];
-  var topLeft = currentPage.getPagePoint(window.pageXOffset,
+  var topLeft = currentPage.getPagePoint(PDFView.container.scrollLeft,
-    window.pageYOffset - firstPage.y - kViewerTopMargin);
+    (PDFView.container.scrollTop - firstPage.y));
   pdfOpenParams += ',' + Math.round(topLeft[0]) + ',' + Math.round(topLeft[1]);
 
   var store = PDFView.store;
@@ -1434,13 +1481,11 @@ function updateThumbViewArea() {
   }, delay);
 }
 
-window.addEventListener('transitionend', updateThumbViewArea, true);
-window.addEventListener('webkitTransitionEnd', updateThumbViewArea, true);
-
 window.addEventListener('resize', function webViewerResize(evt) {
-  if (document.getElementById('pageWidthOption').selected ||
+  if (PDFView.initialized &&
+      (document.getElementById('pageWidthOption').selected ||
       document.getElementById('pageFitOption').selected ||
-      document.getElementById('pageAutoOption').selected)
+      document.getElementById('pageAutoOption').selected))
       PDFView.parseScale(document.getElementById('scaleSelect').value);
   updateViewarea();
 });
@@ -1519,8 +1564,26 @@ window.addEventListener('scalechange', function scalechange(evt) {
 
 window.addEventListener('pagechange', function pagechange(evt) {
   var page = evt.pageNumber;
-  if (document.getElementById('pageNumber').value != page)
+  if (document.getElementById('pageNumber').value != page) {
     document.getElementById('pageNumber').value = page;
+    var selected = document.querySelector('.thumbnail.selected');
+    if (selected)
+      selected.classList.remove('selected');
+    var thumbnail = document.getElementById('thumbnailContainer' + page);
+    thumbnail.classList.add('selected');
+    var visibleThumbs = PDFView.getVisibleThumbs();
+    var numVisibleThumbs = visibleThumbs.length;
+    // If the thumbnail isn't currently visible scroll it into view.
+    if (numVisibleThumbs > 0) {
+      var first = visibleThumbs[0].id;
+      // Account for only one thumbnail being visible.
+      var last = numVisibleThumbs > 1 ?
+                  visibleThumbs[numVisibleThumbs - 1].id : first;
+      if (page <= first || page >= last)
+        thumbnail.scrollIntoView();
+    }
+
+  }
   document.getElementById('previous').disabled = (page <= 1);
   document.getElementById('next').disabled = (page >= PDFView.pages.length);
 }, true);