Remove flex box. Add side animation. Add dashed line around unload thumbnails.

web/viewer.css

@@ -14,51 +14,95 @@ body {
   font-family: Segoe UI, Verdana, sans-serif;
 }
 
+/* outer/inner center provides horizontal center */
+.outerCenter {
+  float: right;
+  position: relative;
+  right: 50%;
+}
+.innerCenter {
+  float: right;
+  position: relative;
+  right: -50%;
+}
+
 #outerContainer {
-  display: -moz-box;
-  -moz-box-orient: horizontal;
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
   width: 100%;
   height: 100%;
 }
 
 #sidebarContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
   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;
+}
+#sidebarContainer.hidden {
+  left: -200px;
+}
+
+#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;
+}
+#mainContainer.sideBarOpen {
+  left: 200px;
+}
+
+#sidebarContent {
+  top: 0;
+  left: 0;
+  bottom: 0;
   height: 100%;
+  overflow: auto;
+  position: absolute;
+  width: 200px;
+
   background-color: hsla(0,0%,0%,.1);
   box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
-  overflow: auto;
-}
-#sidebarContainer.hidden {
-  display:none;
 }
 
 #viewerContainer {
-  -moz-box-flex: 1;
+  overflow: auto;
-  -webkit-box-flex: 1;
-  height: 100%;
   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: fixed;
+  position: absolute;
-  width: 100%;
+  left: 0;
+  right: 0;
   height: 32px;
   z-index: 9999;
   cursor: default;
 }
 
 #toolbarContainer {
-  display: -moz-box;
-  display: -webkit-box;
   width: 100%;
 }
 
 #toolbarSidebar {
-  display: -moz-box;
-  display: -webkit-box;
   width: 200px;
   height: 32px;
   background-image: url(images/texture.png),
@@ -71,15 +115,9 @@ body {
               0 1px 0 hsla(0,0%,0%,.15),
               0 1px 1px hsla(0,0%,0%,.1);
 }
-#toolbarSidebar.hidden {
-  display:none;
-}
 
 #toolbarViewer {
-  display: -moz-box;
+  position: relative;
-  -moz-box-flex: 1;
-  display: -webkit-box;
-  -webkit-box-flex: 1;
   margin-left: -1px;
   height: 32px;
   background-image: url(images/texture.png),
@@ -94,22 +132,34 @@ body {
               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: 4px 2px 4px 0;
+  margin: 3px 2px 4px 0;
-  display: -moz-box;
+  display: inline-block;
-  display: -webkit-box;
 }
 .splitToolbarButton > .toolbarButton {
-  position: relative;
-  margin: 0 -1px;
-  padding: 3px 6px;
   border-radius: 0;
+  float: left;
 }
 
 .toolbarButton {
-  margin: 4px 2px 4px 0;
+  border: 0 none;
-  display: -moz-box;
+  background-color: rgba(0, 0, 0, 0);
-  display: -webkit-box;
 }
 
 .splitToolbarButton:hover > .toolbarButton,
@@ -155,31 +205,33 @@ body {
   border-left-color: transparent;
 }
 .splitToolbarButtonSeparator {
-  margin: 4px 0;
+  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 {
-  margin: 1px 0;
+  padding: 13px 0;
+  margin: 0;
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
-  -moz-transition-property: margin;
+  -moz-transition-property: padding;
   -moz-transition-duration: 10ms;
   -moz-transition-timing-function: ease;
-  -webkit-transition-property: margin;
+  -webkit-transition-property: padding;
   -webkit-transition-duration: 10ms;
   -webkit-transition-timing-function: ease;
 }
 
 .toolbarButton,
 .dropdownToolbarButton {
-  -moz-box-flex: 0;
-  -webkit-box-flex: 1;
   min-width: 16px;
-  padding: 3px 7px;
+  padding: 3px;
-  margin: 4px 2px 4px 0;
+  margin: 3px 2px 4px 0;
   border: 1px solid transparent;
   border-radius: 2px;
   color: hsl(0,0%,95%);
@@ -282,6 +334,8 @@ body {
 
 .toolbarButtonSpacer {
   width: 30px;
+  display: inline-block;
+  height: 1px;
 }
 
 .toolbarButtonFlexibleSpacer {
@@ -326,11 +380,9 @@ body {
 }
 
 .toolbarButton.bookmark {
-  display: block;
 }
 
 .toolbarButton.bookmark::before {
-  display: inline-block;
   content: url(images/toolbarButton-bookmark.png);
 }
     
@@ -412,6 +464,10 @@ body {
   height: 142px;
 }
 
+.thumbnail:not([data-loaded]) {
+  border: 1px dashed rgba(255, 255, 255, 0.5);
+}
+
 .thumbnailImage {
   -moz-transition-duration: 150ms;
   border: 1px solid transparent;

web/viewer.html

@@ -39,33 +39,56 @@
   <body>
     <div id="outerContainer">
 
-      <div class="toolbar">
+      <div id="sidebarContainer" class="hidden">
-        <div id="toolbarContainer">
+        <div id="toolbarSidebar">
-          <div id="toolbarSidebar" class="hidden">
           <div class="splitToolbarButton toggled">
-              <div id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></div>
+            <button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></button>
-              <div class="splitToolbarButtonSeparator"></div>
+            <button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled></button>
-              <div id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled></div>
+          </div>
+        </div>
+        <div id="sidebarContent">
+          <div id="thumbnailView">
+          </div>
+
+          <div id="outlineView" class="hidden">
           </div>
         </div>
+      </div>  <!-- sidebarContainer -->
+
+      <div id="mainContainer">
+        <div class="toolbar">
+          <div id="toolbarContainer">
+
             <div id="toolbarViewer">
-            <div id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></div>
+              <div id="toolbarViewerLeft">
+                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"></button>
                 <div class="toolbarButtonSpacer"></div>
                 <div class="splitToolbarButton">
-              <div class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--"></div>
+                  <button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous"></button>
                   <div class="splitToolbarButtonSeparator"></div>
-              <div class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++"></div>
+                  <button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next"></button>
                 </div>
                 <input type="number" id="pageNumber" class="toolbarField" onchange="PDFView.page = this.value;" value="1" size="4" min="1">
                 </input>
-            <div id="numPages" class="toolbarLabel"></div>
+                <span id="numPages" class="toolbarLabel"></span>
-            <div class="toolbarButtonFlexibleSpacer"></div>
+              </div>
+              <div id="toolbarViewerRight">
+                <input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;" style="display: none"/>
+
+                <!-- <div class="toolbarButton print" title="Print"></div> -->
+                <button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></button>
+                <div class="toolbarButtonSpacer"></div>
+                <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
+                </a>
+              </div>
+              <div class="outerCenter">
+                <div class="innerCenter" id="toolbarViewerMiddle">
                   <div class="splitToolbarButton">
-              <div class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();"></div>
+                    <button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();"></button>
                     <div class="splitToolbarButtonSeparator"></div>
-              <div class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();"></div>
+                    <button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();"></button>
                   </div>
-            <div class="dropdownToolbarButton">
+                  <span class="dropdownToolbarButton">
                      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" oncontextmenu="return false;">
                       <option id="customScaleOption" value="custom"></option>
                       <option value="0.5">50%</option>
@@ -78,27 +101,10 @@
                       <option id="pageFitOption" value="page-fit">Page Fit</option>
                       <option id="pageAutoOption" value="auto" selected="selected">Auto</option>
                     </select>
-            </div>
+                  </span>
-
-            <div class="toolbarButtonFlexibleSpacer"></div>
-
-            <input id="fileInput" class="toolbarButton fileInput" type="file" oncontextmenu="return false;"/>
-
-            <div class="toolbarButtonSpacer"></div>
-
-            <!-- <div class="toolbarButton print" title="Print"></div> -->
-            <div id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();"></div>
-            <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Bookmark (or copy) current location">
-            </a>
                 </div>
               </div>
             </div>
-
-      <div id="sidebarContainer" class="hidden">
-        <div id="thumbnailView">
-        </div>
-
-        <div id="outlineView" class="hidden">
           </div>
         </div>
 
@@ -110,6 +116,7 @@
             <div id="loading">Loading... 0%</div>
             <div id="loadingBar"><div class="progress"></div></div>
         </div>
+      </div> <!-- mainContainer -->
 
     </div> <!-- outerContainer -->
 

web/viewer.js

@@ -214,6 +214,11 @@ var PDFView = {
   currentScale: kUnknownScale,
   currentScaleValue: null,
   initialBookmark: document.location.hash.substring(1),
+  container: null,
+  // called once when the document is loaded
+  init: function pdfViewInit() {
+    this.container = document.getElementById('viewerContainer');
+  },
 
   setScale: function pdfViewSetScale(val, resetAutoSettings) {
     if (val == this.currentScale)
@@ -245,10 +250,11 @@ 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);
@@ -660,18 +666,19 @@ var PDFView = {
     var visiblePages = [];
 
     var currentHeight = kBottomMargin;
-    var windowTop = window.pageYOffset;
+    var container = this.container;
+    var containerTop = container.scrollTop;
     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 });
@@ -1288,6 +1295,7 @@ var TextLayerBuilder = function textLayerBuilder(textLayerDiv) {
 };
 
 window.addEventListener('load', function webViewerLoad(evt) {
+  PDFView.init();
   var params = PDFView.parseQueryString(document.location.search.substring(1));
 
   var file = PDFJS.isFirefoxExtension ?
@@ -1322,11 +1330,20 @@ window.addEventListener('load', function webViewerLoad(evt) {
   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('toolbarSidebar').classList.toggle('hidden');
       document.getElementById('sidebarContainer').classList.toggle('hidden');
+      mainContainer.classList.toggle('sideBarOpen');
       updateThumbViewArea();
     });