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,14 +733,13 @@ var JpegImage = (function jpegImage() {
       this.jfif = jfif;
       this.adobe = adobe;
       this.components = [];
-      for (var id in frame.components) {
-        if (frame.components.hasOwnProperty(id)) {
-          this.components.push({
-            lines: buildComponentData(frame, frame.components[id]),
-            scaleX: frame.components[id].h / frame.maxH,
-            scaleY: frame.components[id].v / frame.maxV
-          });
-        }
+      for (var i = 0; i < frame.componentsOrder.length; i++) {
+        var component = frame.components[frame.componentsOrder[i]];
+        this.components.push({
+          lines: buildComponentData(frame, component),
+          scaleX: component.h / frame.maxH,
+          scaleY: component.v / frame.maxV
+        });
       }
     },
     getData: function getData(width, height) {

web/debugger.js

@@ -423,8 +423,9 @@ var PDFBug = (function PDFBugClosure() {
       panels.setAttribute('class', 'panels');
       ui.appendChild(panels);
 
-      document.body.appendChild(ui);
-      document.body.style.paddingRight = panelWidth + 'px';
+      var container = document.getElementById('viewerContainer');
+      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_label=Previous
-next_label=Next
-print_label=Print
-download_label=Download
+previous.title=Previous
+next.title=Next
+print.title=Print
+download_label.title=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_label=Предыдущая
-next_label=Следующая
-print_label=Печать
-download_label=Загрузить
+previous.title=Предыдущая
+next.title=Следующая
+print.title=Печать
+download.title=Загрузить
 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=Произошла ошибка во время создания страницы.
-
-loading=Загрузка... {{percent}}%
+page_label=Страница:
+page_of=из {{pageCount}}
 
 [xx]
 bookmark.title=<<<_¢ȗггεпţ ṿiεẂ (¢OÞӳ Oг OÞεп iп пεẂ ẂiпÐOẂ)_>>>
-bookmark_icon.alt=<<<_ьOOқмãгқ_>>>
-previous_label=<<<_ÞгεṿiOȗ§_>>>
-next_label=<<<_пεӾţ_>>>
-print_label=<<<_Þгiпţ_>>>
-download_label=<<<_ÐOẂпḻOãÐ_>>>
+previous.title=<<<_ÞгεṿiOȗ§_>>>
+next.title=<<<_пεӾţ_>>>
+print.title=<<<_Þгiпţ_>>>
+download_label.title=<<<_Ð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_message=<<<_м姧ãģε: {{м姧ãģε}}_>>>
-error_stack=<<<_§ţã¢қ: {{§ţã¢қ}}_>>>
-error_file=<<<_£iḻε: {{£iḻε}}_>>>
-error_line=<<<_ḻiпε: {{ḻiпε}}_>>>
+error_build=<<<_ÞУ.ʃ§ ьȗiḻÐ: {{build}}_>>>
+error_message=<<<_м姧ãģε: {{message}}_>>>
+error_stack=<<<_§ţã¢қ: {{stack}}_>>>
+error_file=<<<_£iḻε: {{file}}_>>>
+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пģ... {{Þεг¢εпţ}}%_>>>
+loading=<<<_ḻOãÐiпģ... {{percent}}%_>>>
 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.html

@@ -1,153 +1,146 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Simple pdf.js page viewer</title>
-        <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
+  <head>
+    <title>PDF.js viewer</title>
+    <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
 
-        <link rel="stylesheet" href="viewer.css"/>
-        <link rel="resource" type="application/l10n" href="locale.properties"/>
+    <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="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 -->
-        <script type="text/javascript" src="../src/util.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/api.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/metadata.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/canvas.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/obj.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/charsets.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/cidmaps.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/colorspace.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/crypto.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/evaluator.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/fonts.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/glyphlist.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/image.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/metrics.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/parser.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/pattern.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/stream.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../src/worker.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <script type="text/javascript" src="../external/jpgjs/jpg.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
-        <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>
+    <!-- PDFJSSCRIPT_INCLUDE_BUILD -->
+    <script type="text/javascript" src="../src/core.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/util.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/api.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/metadata.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/canvas.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/obj.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/function.js"></script> <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/charsets.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/cidmaps.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/colorspace.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/crypto.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/evaluator.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/fonts.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/glyphlist.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/image.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/metrics.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/parser.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/pattern.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/stream.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../src/worker.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <script type="text/javascript" src="../external/jpgjs/jpg.js"></script>  <!-- PDFJSSCRIPT_REMOVE_CORE -->
+    <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="debugger.js"></script>
+    <script type="text/javascript" src="viewer.js"></script>
+  </head>
 
   <body>
-    <div id="controls">
-      <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>
+    <div id="outerContainer">
 
-      <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>
-      <span id="numPages">--</span>
-
-      <div class="separator"></div>
-
-      <button id="zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" oncontextmenu="return false;" data-l10n-id="zoom_out">
-        <img src="images/zoom-out.svg" align="top" height="16"/>
-      </button>
-      <button id="zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" oncontextmenu="return false;" data-l10n-id="zoom_in">
-        <img src="images/zoom-in.svg" align="top" height="16"/>
-      </button>
-
-      <div class="separator"></div>
-
-      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
-        <option id="customScaleOption" value="custom"></option>
-        <option value="0.5">50%</option>
-        <option value="0.75">75%</option>
-        <option value="1">100%</option>
-        <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>
-
-      <div class="separator"></div>
-
-      <button id="print" onclick="window.print();" oncontextmenu="return false;">
-        <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>
-    <div id="errorWrapper" hidden='true'>
-      <div id="errorMessageLeft">
-        <span id="errorMessage"></span>
-        <button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
-          More Information
-        </button>
-        <button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
-          Less Information
-        </button>
-      </div>
-      <div id="errorMessageRight">
-        <button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close">
-          Close
-        </button>
-      </div>
-      <div class="clearBoth"></div>
-      <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
-    </div>
-
-    <div id="sidebar">
-      <div id="sidebarBox">
-        <div id="pinIcon" onClick="PDFView.pinSidebar()"></div>
-        <div id="sidebarScrollView">
-          <div id="sidebarView"></div>
+      <div id="sidebarContainer">
+        <div id="toolbarSidebar">
+          <div class="splitToolbarButton toggled">
+            <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>
+          </div>
         </div>
-        <div id="outlineScrollView" hidden='true'>
-          <div id="outlineView"></div>
+        <div id="sidebarContent">
+          <div id="thumbnailView">
+          </div>
+          <div id="outlineView" class="hidden">
+          </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>  <!-- sidebarContainer -->
 
-    <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>
+      <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>
+                      <option value="1">100%</option>
+                      <option value="1.25">125%</option>
+                      <option value="1.5">150%</option>
+                      <option value="2">200%</option>
+                    </select>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="viewerContainer">
+          <div id="viewer"></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="errorWrapper" hidden='true'>
+          <div id="errorMessageLeft">
+            <span id="errorMessage"></span>
+            <button id="errorShowMore" onclick="" oncontextmenu="return false;" data-l10n-id="error_more_info">
+              More Information
+            </button>
+            <button id="errorShowLess" onclick="" oncontextmenu="return false;" data-l10n-id="error_less_info" hidden='true'>
+              Less Information
+            </button>
+          </div>
+          <div id="errorMessageRight">
+            <button id="errorClose" oncontextmenu="return false;" data-l10n-id="error_close">
+              Close
+            </button>
+          </div>
+          <div class="clearBoth"></div>
+          <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+        </div>
+      </div> <!-- mainContainer -->
+
+    </div> <!-- outerContainer -->
   </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)
-      this.setScale(pageWidthScale, resetAutoSettings);
-    if ('page-height' == value)
-      this.setScale(pageHeightScale, resetAutoSettings);
-    if ('page-fit' == value) {
-      this.setScale(
-        Math.min(pageWidthScale, pageHeightScale), resetAutoSettings);
+    switch (value) {
+      case 'page-actual':
+        this.setScale(1, resetAutoSettings);
+        break;
+      case 'page-width':
+        this.setScale(pageWidthScale, resetAutoSettings);
+        break;
+      case 'page-height':
+        this.setScale(pageHeightScale, resetAutoSettings);
+        break;
+      case 'page-fit':
+        this.setScale(
+            Math.min(pageWidthScale, pageHeightScale), resetAutoSettings);
+        break;
+      case 'auto':
+        this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
+        break;
     }
-    if ('auto' == value)
-      this.setScale(Math.min(1.0, pageWidthScale), resetAutoSettings);
 
     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');
-    sidebar.parentNode.scrollTop = 0;
+    var thumbsView = document.getElementById('thumbnailView');
+    thumbsView.parentNode.scrollTop = 0;
 
-    while (sidebar.hasChildNodes())
-      sidebar.removeChild(sidebar.lastChild);
+    while (thumbsView.hasChildNodes())
+      thumbsView.removeChild(thumbsView.lastChild);
 
-    if ('_loadingInterval' in sidebar)
-      clearInterval(sidebar._loadingInterval);
+    if ('_loadingInterval' in thumbsView)
+      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 outlineScrollView = document.getElementById('outlineScrollView');
-    var thumbsSwitchButton = document.getElementById('thumbsSwitch');
-    var outlineSwitchButton = document.getElementById('outlineSwitch');
+    var thumbsView = document.getElementById('thumbnailView');
+    var outlineView = document.getElementById('outlineView');
+    var thumbsSwitchButton = document.getElementById('viewThumbnail');
+    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 windowTop = window.pageYOffset;
+    var currentHeight = kTopPadding + kBottomMargin;
+    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;
-    for (; i <= pages.length && currentHeight < windowBottom; ++i) {
+    var containerBottom = containerTop + container.clientHeight;
+    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 pageHeight = viewport.height;
+  var pageWidth = this.width = viewport.width;
+  var pageHeight = this.height = viewport.height;
   var pageRatio = pageWidth / pageHeight;
   this.id = id;
 
-  var maxThumbSize = 134;
-  var canvasWidth = this.width = pageRatio >= 1 ? maxThumbSize :
-    maxThumbSize * pageRatio;
-  var canvasHeight = this.height = pageRatio <= 1 ? maxThumbSize :
-    maxThumbSize / pageRatio;
+  var canvasWidth = 98;
+  var canvasHeight = canvasWidth / this.width * this.height;
   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');
-  sidebarScrollView.addEventListener('scroll', updateThumbViewArea, true);
+  var thumbsView = document.getElementById('thumbnailView');
+  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,
-    window.pageYOffset - firstPage.y - kViewerTopMargin);
+  var topLeft = currentPage.getPagePoint(PDFView.container.scrollLeft,
+    (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);