From: Artur Adib <arturadib@gmail.com>
Date: Tue, 8 May 2012 21:22:48 +0000 (-0400)
Subject: Merge branch 'refs/heads/master' into textsearch
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=2d3ed7fc7886b371525cba4a27c2c8e1f247fefd;p=pdf.js.git

Merge branch 'refs/heads/master' into textsearch

Conflicts:
	web/viewer.css
	web/viewer.html
	web/viewer.js
---

2d3ed7fc7886b371525cba4a27c2c8e1f247fefd
diff --cc src/api.js
index dee6c66,bbab680..e1991a0
--- a/src/api.js
+++ b/src/api.js
@@@ -329,18 -329,12 +329,18 @@@ var PDFPageProxy = (function PDFPagePro
        next();
      },
      /**
 -     * Stub for future feature.
 +     * @return {Promise} That is resolved with the a {string} that is the text
 +     * content from the page.
       */
-     getTextContent: function() {
+     getTextContent: function PDFPageProxy_getTextContent() {
        var promise = new PDFJS.Promise();
 -      var textContent = 'page text'; // not implemented
 -      promise.resolve(textContent);
 +      this.transport.messageHandler.send('GetTextContent', {
 +          pageIndex: this.pageNumber - 1
 +        },
 +        function textContentCallback(textContent) {
 +          promise.resolve(textContent);
 +        }
 +      );
        return promise;
      },
      /**
diff --cc web/viewer.css
index 6e770a7,7b0ce03..4fc426c
--- a/web/viewer.css
+++ b/web/viewer.css
@@@ -12,156 -21,631 +21,642 @@@ body 
    display: none !important;
  }
  
- /* === Toolbar === */
- #controls {
-   background-color: #eee;
-   background: -o-linear-gradient(bottom,#eee 0%,#fff 100%);
-   background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%);
-   background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #ddd), color-stop(1.0, #fff));
-   border-bottom: 1px solid #666;
-   padding: 3px;
-   position: fixed;
-   left: 0px;
-   top: 0px;
-   height: 24px;
+ /* outer/inner center provides horizontal center */
+ html[dir='ltr'] .outerCenter {
+   float: right;
+   position: relative;
+   right: 50%;
+ }
+ html[dir='rtl'] .outerCenter {
+   float: left;
+   position: relative;
+   left: 50%;
+ }
+ html[dir='ltr'] .innerCenter {
+   float: right;
+   position: relative;
+   right: -50%;
+ }
+ html[dir='rtl'] .innerCenter {
+   float: left;
+   position: relative;
+   left: -50%;
+ }
+ 
+ #outerContainer {
    width: 100%;
-   z-index: 1;
-   white-space:nowrap;
-   overflow: hidden;
+   height: 100%;
  }
  
- .separator {
-   display: inline;
-   border-left: 1px solid #d3d3d3;
-   border-right: 1px solid #fff;
-   height: 16px;
-   width:0px;
-   margin: 4px;
+ #sidebarContainer {
+   position: absolute;
+   top: 0;
+   bottom: 0;
+   width: 200px;
+   visibility: hidden;
+   -moz-transition-duration: 200ms;
+   -moz-transition-timing-function: ease;
+   -webkit-transition-duration: 200ms;
+   -webkit-transition-timing-function: ease;
+ }
+ html[dir='ltr'] #sidebarContainer {
+   -moz-transition-property: left;
+   -webkit-transition-property: left;
+   left: -200px;
+ }
+ html[dir='rtl'] #sidebarContainer {
+   -moz-transition-property: right;
+   -webkit-transition-property: right;
+   right: -200px;
  }
  
- #controls > a > img {
-     margin: 4px;
-     height: 16px;
+ #outerContainer.sidebarMoving > #sidebarContainer,
+ #outerContainer.sidebarOpen > #sidebarContainer {
+   visibility: visible;
+ }
+ html[dir='ltr'] #outerContainer.sidebarOpen > #sidebarContainer {
+   left: 0px;
+ }
+ html[dir='rtl'] #outerContainer.sidebarOpen > #sidebarContainer {
+   right: 0px;
  }
  
- #controls > button {
-   line-height: 16px;
+ #mainContainer {
+   position: absolute;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   left: 0;
+   -moz-transition-duration: 200ms;
+   -moz-transition-timing-function: ease;
+   -webkit-transition-duration: 200ms;
+   -webkit-transition-timing-function: ease;
  }
+ html[dir='ltr'] #outerContainer.sidebarOpen > #mainContainer {
+   -moz-transition-property: left;
+   -webkit-transition-property: left;
+   left: 200px;
+ }
+ html[dir='rtl'] #outerContainer.sidebarOpen > #mainContainer {
+   -moz-transition-property: right;
+   -webkit-transition-property: right;
+   right: 200px;
+ }
+ 
+ #sidebarContent {
+   top: 32px;
+   bottom: 0;
+   overflow: auto;
+   position: absolute;
+   width: 200px;
  
- #controls > button > img {
-   width: 16px;
-   height: 16px;
+   background-color: hsla(0,0%,0%,.1);
+   box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25);
+ }
+ html[dir='ltr'] #sidebarContent {
+   left: 0;
+ }
+ html[dir='rtl'] #sidebarContent {
+   right: 0;
  }
  
- #controls > button[disabled] > img {
-   opacity: 0.5;
+ #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;
  }
  
- #pageNumber {
-   text-align: right;
+ .toolbar {
+   position: absolute;
+   left: 0;
+   right: 0;
+   height: 32px;
+   z-index: 9999;
+   cursor: default;
  }
  
- #fileInput {
-   line-height: 16px;
+ #toolbarContainer {
+   width: 100%;
  }
  
- /* === Sidebar === */
- #sidebar {
-   position: fixed;
-   width: 350px;
-   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;
+ #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;
+   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);
+ }
+ html[dir='ltr'] #toolbarViewerLeft {
+   margin-left: -1px;
+ }
+ html[dir='rtl'] #toolbarViewerRight {
+   margin-left: -1px;
  }
  
- #pinIcon {
+ 
+ html[dir='ltr'] #toolbarViewerLeft,
+ html[dir='rtl'] #toolbarViewerRight {
+   position: absolute;
+   top: 0;
+   left: 0;
+ }
+ html[dir='ltr'] #toolbarViewerRight,
+ html[dir='rtl'] #toolbarViewerLeft {
    position: absolute;
-   top: 4px;
-   right: 55px;
-   width: 15px;
-   height: 15px;
-   background: center no-repeat;
-   background-image: url('images/pin-up.svg');
-   background-size: 15px 15px;
+   top: 0;
+   right: 0;
+ }
+ html[dir='ltr'] #toolbarViewerLeft > *,
+ html[dir='ltr'] #toolbarViewerMiddle > *,
+ html[dir='ltr'] #toolbarViewerRight > * {
+   float: left;
+ }
+ html[dir='rtl'] #toolbarViewerLeft > *,
+ html[dir='rtl'] #toolbarViewerMiddle > *,
+ html[dir='rtl'] #toolbarViewerRight > * {
+   float: right;
  }
  
- #pinIcon:hover {
-   background-color: rgba(255,255,255,0.35);
+ html[dir='ltr'] .splitToolbarButton {
+   margin: 3px 2px 4px 0;
+   display: inline-block;
+ }
+ html[dir='rtl'] .splitToolbarButton {
+   margin: 3px 0 4px 2px;
+   display: inline-block;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton {
+   border-radius: 0;
+   float: left;
+ }
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton {
+   border-radius: 0;
+   float: right;
  }
  
- #sidebar.pinned #pinIcon {
-   background-image: url('images/pin-down.svg');
-   background-size: 15px 15px;
+ .toolbarButton {
+   border: 0 none;
+   background-color: rgba(0, 0, 0, 0);
+   width: 32px;
+   height: 25px;
  }
  
- #sidebarBox {
-   background-color: rgba(0, 0, 0, 0.7);
-   width: 300px;
-   height: 100%;
-   border-top-right-radius: 8px;
-   border-bottom-right-radius: 8px;
-   -moz-border-radius-topright: 8px;
-   -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;
+ .toolbarButton > span {
+   display: inline-block;
+   width: 0;
+   height: 0;
    overflow: hidden;
-   overflow-y: auto;
-   top: 20px;
-   bottom: 10px;
-   left: 10px;
-   width: 280px;
  }
  
- .thumbnail {
-   width: 134px;
-   height: 134px;
-   margin-top: 5px;
-   margin-bottom: 5px;
-   margin-left:auto;
-   margin-right:auto;
-   line-height: 134px;
-   text-align: center;
+ .toolbarButton[disabled] {
+   opacity: .5;
+ }
+ 
++.toolbarButton.group {
++  margin-right:0;
++}
++
+ .splitToolbarButton:hover > .toolbarButton,
+ .splitToolbarButton:focus > .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,
+ .splitToolbarButton > .toolbarButton:focus,
+ .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;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
+   position: relative;
+   margin: 0;
+   margin-right: -1px;
+   border-top-left-radius: 2px;
+   border-bottom-left-radius: 2px;
+   border-right-color: transparent;
+ }
+ html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
+ html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-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;
+ }
+ html[dir='ltr'] .splitToolbarButtonSeparator {
+   float:left;
+ }
+ html[dir='rtl'] .splitToolbarButtonSeparator {
+   float:right;
+ }
+ .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;
+   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;
+ }
+ 
+ html[dir='ltr'] .toolbarButton,
+ html[dir='ltr'] .dropdownToolbarButton {
+   margin: 3px 2px 4px 0;
+ }
+ html[dir='rtl'] .toolbarButton,
+ html[dir='rtl'] .dropdownToolbarButton {
+   margin: 3px 0 4px 2px;
+ }
+ 
+ .toolbarButton:hover,
+ .toolbarButton:focus,
+ .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;
+ }
+ html[dir='ltr'] .dropdownToolbarButton {
+   background-position: 95%;
+ }
+ html[dir='rtl'] .dropdownToolbarButton {
+   background-position: 5%;
  }
  
- .thumbnail:not([data-loaded]) {
-   background-color: gray;
+ .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;
+ }
+ 
+ html[dir='ltr'] .splitToolbarButton:first-child,
+ html[dir='ltr'] .toolbarButton:first-child,
+ html[dir='rtl'] .splitToolbarButton:last-child,
+ html[dir='rtl'] .toolbarButton:last-child {
+   margin-left: 4px;
+ }
+ html[dir='ltr'] .splitToolbarButton:last-child,
+ html[dir='ltr'] .toolbarButton:last-child,
+ html[dir='rtl'] .splitToolbarButton:first-child,
+ html[dir='rtl'] .toolbarButton:first-child {
+   margin-right: 4px;
  }
  
- .thumbnail > canvas {
-   vertical-align: middle;
+ .toolbarButtonSpacer {
+   width: 30px;
    display: inline-block;
+   height: 1px;
  }
  
- #outlineScrollView {
-   position: absolute;
-   background-color: #fff;
+ .toolbarButtonFlexibleSpacer {
+   -moz-box-flex: 1;
+   -webkit-box-flex: 1;
+   min-width: 30px;
+ }
+ 
+ .toolbarButton#sidebarToggle::before {
+   display: inline-block;
+   content: url(images/toolbarButton-sidebarToggle.png);
+ }
+     
+ html[dir='ltr'] .toolbarButton.pageUp::before {
+   display: inline-block;
+   content: url(images/toolbarButton-pageUp.png);
+ }
+ 
+ html[dir='rtl'] .toolbarButton.pageUp::before {
+   display: inline-block;
+   content: url(images/toolbarButton-pageUp-rtl.png);
+ }
+     
+ html[dir='ltr'] .toolbarButton.pageDown::before {
+   display: inline-block;
+   content: url(images/toolbarButton-pageDown.png);
+ }
+ 
+ html[dir='rtl'] .toolbarButton.pageDown::before {
+   display: inline-block;
+   content: url(images/toolbarButton-pageDown-rtl.png);
+ }
+ 
+ .toolbarButton.zoomOut::before {
+   display: inline-block;
+   content: url(images/toolbarButton-zoomOut.png);
+ }
+     
+ .toolbarButton.zoomIn::before {
+   display: inline-block;
+   content: url(images/toolbarButton-zoomIn.png);
+ }
+ 
+ .toolbarButton.print::before {
+   display: inline-block;
+   content: url(images/toolbarButton-print.png);
+ }
+ 
+ .toolbarButton.download::before {
+   display: inline-block;
+   content: url(images/toolbarButton-download.png);
+ }
+ 
+ .toolbarButton.bookmark {
+   -moz-box-sizing: border-box;
+   -webkit-box-sizing: border-box;
+   box-sizing: border-box;
+   margin-top: 3px;
+   padding-top: 4px;
+ }
+ 
+ .toolbarButton.bookmark::before {
+   content: url(images/toolbarButton-bookmark.png);
+ }
+     
+ #viewThumbnail.toolbarButton::before {
+   display: inline-block;
+   content: url(images/toolbarButton-viewThumbnail.png);
+ }
+     
+ #viewOutline.toolbarButton::before {
+   display: inline-block;
+   content: url(images/toolbarButton-viewOutline.png);
+ }
+ 
++#viewSearch.toolbarButton::before {
++  display: inline-block;
++  font-size: 18px;
++  content: 'S';
++}
++
++
+ .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;
+ }
+ 
+ .toolbarField.pageNumber {
+   width: 40px;
+ }
+ 
+ .toolbarField.pageNumber::-webkit-inner-spin-button,
+ .toolbarField.pageNumber::-webkit-outer-spin-button {
+     -webkit-appearance: none;
+     margin: 0;
+ }
+ 
+ .toolbarField:hover {
+   background-color: hsla(0,0%,100%,.11);
+   border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
+ }
+ 
+ .toolbarField:focus {
+   background-color: hsla(0,0%,100%,.15);
+   border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
+ }
+ 
+ .toolbarLabel {
+   min-width: 16px;
+   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;
+ }
+ 
+ #thumbnailView {
+   position: fixed;
+   width: 120px;
+   top: 33px;
+   bottom: 0;
+   padding: 10px 40px 0;
    overflow: auto;
-   top: 20px;
-   bottom: 10px;
-   left: 10px;
-   width: 280px;
+ }
+ 
+ .thumbnail {
+   margin-bottom: 15px;
+   float: left;
+   width: 114px;
+   height: 142px;
+ }
+ 
+ .thumbnail:not([data-loaded]) {
+   border: 1px dashed rgba(255, 255, 255, 0.5);
+ }
+ 
+ .thumbnailImage {
+   -moz-transition-duration: 150ms;
+   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;
+ }
+ 
+ .thumbnailSelectionRing {
+   border-radius: 2px;
+   padding: 7px;
+   -moz-transition-duration: 150ms;
+ }
+     
+ a:focus > .thumbnail > .thumbnailSelectionRing > .thumbnailImage,
+ .thumbnail:hover > .thumbnailSelectionRing > .thumbnailImage {
+   opacity: .9;
+ }
+ 
+ a:focus > .thumbnail > .thumbnailSelectionRing,
+ .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 {
@@@ -182,78 -679,33 +690,80 @@@
  }
  
  .outlineItem > a:hover {
-   background: #ff0;
-   box-shadow: 0px 2px 10px #ff0;
+   background-color: hsla(0,0%,100%,.02);
+   background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+   background-clip: padding-box;
+   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);
  }
  
 +#searchScrollView {
 +  position: absolute;
 +  top: 10px;
 +  bottom: 10px;
 +  left: 10px;
 +  width: 280px;
 +}
 +
 +#searchToolbar {
 +  padding-left: 0px;
 +  right: 0px;
 +  padding-top: 0px;
 +  padding-bottom: 5px;
 +}
 +
 +#searchToolbar > input {
-   width: 210px;
++  margin-left: 8px;
++  width: 130px;
 +}
 +
 +#searchResults {
 +  overflow: auto;
 +  background-color: #fff;
 +  position: absolute;
 +  top: 30px;
 +  bottom: 0px;
 +  left: 0px;
 +  right: 0;
 +  font-size: smaller;
 +  opacity: 0.7;
 +}
 +
 +#searchResults a {
 +  display: block;
 +  white-space: pre;
 +  text-decoration: none;
 +  color: black;
 +}
 +
 +#sidebarControls {
 +  position:absolute;
 +  width: 180px;
 +  height: 32px;
 +  left: 15px;
 +  bottom: 35px;
 +}
 +
- #sidebarControls > button {
-   box-shadow: 0px 4px 10px #000;
-   -moz-box-shadow: 0px 4px 10px #000;
-   -webkit-box-shadow: 0px 4px 10px #000;
+ .outlineItem.selected {
+   background-color: hsla(0,0%,100%,.08);
+   background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
+   background-clip: padding-box;
+   box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
+               0 0 1px hsla(0,0%,100%,.1) inset,
+               0 0 1px hsla(0,0%,0%,.2);
+   color: hsla(0,0%,100%,1);
  }
  
- #sidebarControls > button > img {
-   width: 32px;
-   height: 32px;
+ .noOutline {
+   font-size: 12px;
+   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;
diff --cc web/viewer.html
index 07817a8,0ec05e0..ff3a214
--- a/web/viewer.html
+++ b/web/viewer.html
@@@ -1,163 -1,174 +1,182 @@@
  <!DOCTYPE html>
- <html>
-     <head>
-         <title>Simple pdf.js page viewer</title>
-         <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
- 
-         <link rel="stylesheet" href="viewer.css"/>
- 
-         <script type="text/javascript" src="compatibility.js"></script> <!-- PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION -->
- 
-         <!-- 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>
+ <html dir="ltr">
+   <head>
+     <meta charset="utf-8">
+     <title>PDF.js viewer</title>
+     <!-- PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION -->
+ 
+     <link rel="stylesheet" href="viewer.css"/>
+     <link rel="resource" type="application/l10n" href="locale.properties"/><!-- PDFJSSCRIPT_REMOVE_CORE -->
+ 
+     <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="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"/>
-         Previous
-       </button>
- 
-       <button id="next" onclick="PDFView.page++;" oncontextmenu="return false;">
-         <img src="images/go-down.svg" align="top" height="16"/>
-         Next
-       </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;">
-         <img src="images/zoom-out.svg" align="top" height="16"/>
-       </button>
-       <button id="zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" oncontextmenu="return false;">
-         <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">Page Width</option>
-         <option id="pageFitOption" value="page-fit">Page Fit</option>
-         <option id="pageAutoOption" value="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"/>
-         Print
-       </button>
- 
-       <button id="download" title="Download" onclick="PDFView.download();" oncontextmenu="return false;">
-         <img src="images/download.svg" align="top" height="16"/>
-         Download
-       </button>
- 
-       <div class="separator"></div>
- 
-       <input id="fileInput" type="file" oncontextmenu="return false;"/>
- 
-       <div id="fileInputSeperator" class="separator"></div>
+     <div id="outerContainer">
  
-       <a href="#" id="viewBookmark" title="Bookmark (or copy) current location">
-         <img src="images/bookmark.svg" 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;">
-           More Information
-         </button>
-         <button id="errorShowLess" onclick="" oncontextmenu="return false;" hidden='true'>
-           Less Information
-         </button>
-       </div>
-       <div id="errorMessageRight">
-         <button id="errorClose" oncontextmenu="return false;">
-           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')" tabindex="1" data-l10n-id="thumbs">
 -               <span data-l10n-id="thumbs_label">Thumbnails</span>
 -            </button>
 -            <button id="viewOutline" class="toolbarButton" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline">
 -               <span data-l10n-id="outline_label">Document Outline</span>
 -            </button>
 -          </div>
++          <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" tabindex="1" data-l10n-id="thumbs">
++             <span data-l10n-id="thumbs_label">Thumbnails</span>
++          </button>
++          <button id="viewOutline" class="toolbarButton group" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" tabindex="2" data-l10n-id="outline">
++             <span data-l10n-id="outline_label">Document Outline</span>
++          </button>
++          <button id="viewSearch" class="toolbarButton group" title="Search Document" onclick="PDFView.switchSidebarView('search')" tabindex="3" data-l10n-id="search">
++             <span data-l10n-id="search_label">Search Document</span>
++          </button>
          </div>
-         <div id="outlineScrollView" hidden='true'>
-           <div id="outlineView"></div>
+         <div id="sidebarContent">
+           <div id="thumbnailView">
+           </div>
+           <div id="outlineView" class="hidden">
+           </div>
++          <div id="searchView" class="hidden">
++            <div id="searchToolbar">
++              <input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
++              <button id="searchButton" onclick='PDFView.search()'>Find</button>
++            </div>
++            <div id="searchResults"></div>
++          </div>
          </div>
-         <div id="searchScrollView" hidden='true'>
-           <div id="searchToolbar">
-             <input id="searchTermsInput" onkeydown='if (event.keyCode == 13) PDFView.search()'>
-             <button id="searchButton" onclick='PDFView.search()'>Find</button>
+       </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" tabindex="3" data-l10n-id="toggle_slider">
+                   <span data-l10n-id="toggle_slider_label">Toggle Sidebar</span>
+                 </button>
+                 <div class="toolbarButtonSpacer"></div>
+                 <div class="splitToolbarButton">
+                   <button class="toolbarButton pageUp" title="Previous Page" onclick="PDFView.page--" id="previous" tabindex="4" data-l10n-id="previous">
+                     <span data-l10n-id="previous_label">Previous</span>
+                   </button>
+                   <div class="splitToolbarButtonSeparator"></div>
+                   <button class="toolbarButton pageDown" title="Next Page" onclick="PDFView.page++" id="next" tabindex="5" data-l10n-id="next">
+                     <span data-l10n-id="next_label">Next</span>
+                   </button>
+                 </div>
+                 <label class="toolbarLabel" for="pageNumber" data-l10n-id="page_label">Page: </label>
+                 <input type="number" id="pageNumber" class="toolbarField pageNumber" onchange="PDFView.page = this.value;" value="1" size="4" min="1" tabindex="6">
+                 </input>
+                 <span id="numPages" class="toolbarLabel"></span>
+               </div>
+               <div id="toolbarViewerRight">
+                 <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" tabindex="10" />
+ 
+                 <!--
+                 <input id="fileInput" class="fileInput" type="file" oncontextmenu="return false;" style="visibility: hidden; position: fixed; right: 0; top: 0" />
+                 <button id="openFile" class="toolbarButton print" title="Open File" tabindex="10" data-l10n-id="open_file" onclick="document.getElementById('fileInput').click()">
+                    <span data-l10n-id="open_file_label">Open</span>
+                 </button>
+                 -->
+ 
+                 <!--
+                 <button id="print" class="toolbarButton print" title="Print" tabindex="11" data-l10n-id="print" onclick="window.print()">
+                   <span data-l10n-id="print_label">Print</span>
+                 </button>
+                 -->
+ 
+                 <button id="download" class="toolbarButton download" title="Download" onclick="PDFView.download();" tabindex="12" data-l10n-id="download">
+                   <span data-l10n-id="download_label">Download</span>
+                 </button>
+                 <!-- <div class="toolbarButtonSpacer"></div> -->
+                 <a href="#" id="viewBookmark" class="toolbarButton bookmark" title="Current view (copy or open in new window)" tabindex="13" data-l10n-id="bookmark"><span data-l10n-id="bookmark_label">Current View</span></a>
+               </div>
+               <div class="outerCenter">
+                 <div class="innerCenter" id="toolbarViewerMiddle">
+                   <div class="splitToolbarButton">
+                     <button class="toolbarButton zoomOut" title="Zoom Out" onclick="PDFView.zoomOut();" tabindex="7" data-l10n-id="zoom_out">
+                       <span data-l10n-id="zoom_out_label">Zoom Out</span>
+                     </button>
+                     <div class="splitToolbarButtonSeparator"></div>
+                     <button class="toolbarButton zoomIn" title="Zoom In" onclick="PDFView.zoomIn();" tabindex="8" data-l10n-id="zoom_in">
+                       <span data-l10n-id="zoom_in_label">Zoom In</span>
+                      </button>
+                   </div>
+                   <span class="dropdownToolbarButton">
+                      <select id="scaleSelect" onchange="PDFView.parseScale(this.value);" title="Zoom" oncontextmenu="return false;" tabindex="9" data-l10n-id="zoom">
+                       <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 id="searchResults"></div>
          </div>
-         <div id="sidebarControls">
-           <button id="thumbsSwitch" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')" data-selected>
-             <img src="images/nav-thumbs.svg" align="top" height="16" alt="Thumbs" />
-           </button>
-           <button id="outlineSwitch" title="Show Document Outline" onclick="PDFView.switchSidebarView('outline')" disabled>
-             <img src="images/nav-outline.svg" align="top" height="16" alt="Document Outline" />
-           </button>
-           <button id="searchSwitch" title="Show Search" onclick="PDFView.switchSidebarView('search')">
-             <img src="images/edit-find.svg" align="top" height="16" alt="Search Document" />
-           </button>
+ 
+         <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>
-     </div>
+       </div> <!-- mainContainer -->
  
-     <div id="loadingBox">
-         <div id="loading">Loading... 0%</div>
-         <div id="loadingBar"><div class="progress"></div></div>
-     </div>
-     <div id="viewer"></div>
+     </div> <!-- outerContainer -->
    </body>
  </html>
diff --cc web/viewer.js
index 6dc4aef,e8eb9ad..b1d4c2c
--- a/web/viewer.js
+++ b/web/viewer.js
@@@ -214,8 -219,13 +219,15 @@@ var PDFView = 
    currentScale: kUnknownScale,
    currentScaleValue: null,
    initialBookmark: document.location.hash.substring(1),
 +  startedTextExtraction: false,
 +  pageText: [],
+   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)
@@@ -697,65 -665,28 +730,72 @@@
    },
  
    switchSidebarView: function pdfViewSwitchSidebarView(view) {
-     var thumbsScrollView = document.getElementById('sidebarScrollView');
-     var thumbsSwitchButton = document.getElementById('thumbsSwitch');
-     if (view == 'thumbs') {
-       thumbsScrollView.removeAttribute('hidden');
-       thumbsSwitchButton.setAttribute('data-selected', true);
-     } else {
-       thumbsScrollView.setAttribute('hidden', 'true');
-       thumbsSwitchButton.removeAttribute('data-selected');
-     }
- 
-     var outlineScrollView = document.getElementById('outlineScrollView');
-     var outlineSwitchButton = document.getElementById('outlineSwitch');
-     if (view == 'outline') {
-       outlineScrollView.removeAttribute('hidden');
-       outlineSwitchButton.setAttribute('data-selected', true);
-     } else {
-       outlineScrollView.setAttribute('hidden', 'true');
-       outlineSwitchButton.removeAttribute('data-selected');
-     }
+     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');
++    var searchView = document.getElementById('searchView');
++    
++    var thumbsButton = document.getElementById('viewThumbnail');
++    var outlineButton = document.getElementById('viewOutline');
++    var searchButton = document.getElementById('viewSearch');
+ 
+     switch (view) {
+       case 'thumbs':
++        thumbsButton.classList.add('toggled');
++        outlineButton.classList.remove('toggled');
++        searchButton.classList.remove('toggled');
++        thumbsView.classList.remove('hidden');
++        outlineView.classList.add('hidden');
++        searchView.classList.add('hidden');
++
+         updateThumbViewArea();
+         break;
 +
-     var searchScrollView = document.getElementById('searchScrollView');
-     var searchSwitchButton = document.getElementById('searchSwitch');
-     if (view == 'search') {
-       searchScrollView.removeAttribute('hidden');
-       searchSwitchButton.setAttribute('data-selected', true);
+       case 'outline':
++        thumbsButton.classList.remove('toggled');
++        outlineButton.classList.add('toggled');
++        searchButton.classList.remove('toggled');
++        thumbsView.classList.add('hidden');
++        outlineView.classList.remove('hidden');
++        searchView.classList.add('hidden');
 +
-       var searchTermsInput = document.getElementById('searchTermsInput');
-       searchTermsInput.focus();
++        if (outlineButton.getAttribute('disabled'))
++          return;
++        break;
 +
-       // Start text extraction as soon as the search gets displayed.
-       this.extractText();
-     } else {
-       searchScrollView.setAttribute('hidden', 'true');
-       searchSwitchButton.removeAttribute('data-selected');
++      case 'search':
++        thumbsButton.classList.remove('toggled');
++        outlineButton.classList.remove('toggled');
++        searchButton.classList.add('toggled');
++        thumbsView.classList.add('hidden');
++        outlineView.classList.add('hidden');
++        searchView.classList.remove('hidden');
++
++        var searchTermsInput = document.getElementById('searchTermsInput');
++        searchTermsInput.focus();
++        // Start text extraction as soon as the search gets displayed.
++        this.extractText();
+         break;
      }
    },
  
 +  extractText: function() {
 +    if (this.startedTextExtraction)
 +      return;
 +    this.startedTextExtraction = true;
 +    var self = this;
 +    function extractPageText(pageIndex) {
 +      self.pages[pageIndex].pdfPage.getTextContent().then(
 +        function textContentResolved(textContent) {
 +          self.pageText[pageIndex] = textContent;
 +          self.search();
 +          if ((pageIndex + 1) < self.pages.length)
 +            extractPageText(pageIndex + 1);
 +        }
 +      );
 +    };
 +    extractPageText(0);
 +  },
 +
-   pinSidebar: function pdfViewPinSidebar() {
-     document.getElementById('sidebar').classList.toggle('pinned');
-   },
- 
    getVisiblePages: function pdfViewGetVisiblePages() {
      var pages = this.pages;
      var kBottomMargin = 10;