Change the print preview UI to use the material design style buttons for zoom

chrome/browser/resources/pdf/pdf.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * @return {number} Width of a scrollbar in pixels
  */
 function getScrollbarWidth() {
@@ skipping 77 matching lines @@
  */
 PDFViewer.MIN_TOOLBAR_OFFSET = 15;
 
 /**
  * The height of the toolbar along the top of the page. The document will be
  * shifted down by this much in the viewport.
  */
 PDFViewer.MATERIAL_TOOLBAR_HEIGHT = 56;
 
 /**
+ * The light-gray background color used for print preview.
+ */
+PDFViewer.LIGHT_BACKGROUND_COLOR = '0xFFCCCCCC';
+
+/**
+ * The dark-gray background color used for the regular viewer.
+ */
+PDFViewer.DARK_BACKGROUND_COLOR = '0xFF525659';
+
+/**
  * Creates a new PDFViewer. There should only be one of these objects per
  * document.
  * @constructor
  * @param {!BrowserApi} browserApi An object providing an API to the browser.
  */
 function PDFViewer(browserApi) {
   this.browserApi_ = browserApi;
   this.loadState_ = LoadState.LOADING;
   this.parentWindow_ = null;
   this.parentOrigin_ = null;
 
   this.delayedScriptingMessages_ = [];
 
   this.isPrintPreview_ = this.browserApi_.getStreamInfo().originalUrl.indexOf(
                              'chrome://print') == 0;
   this.isMaterial_ = location.pathname.substring(1) === 'index-material.html';
 
   // The sizer element is placed behind the plugin element to cause scrollbars
   // to be displayed in the window. It is sized according to the document size
   // of the pdf and zoom level.
   this.sizer_ = $('sizer');
   this.toolbar_ = $('toolbar');
-  this.pageIndicator_ = $('page-indicator');
+  if (!this.isMaterial_ || this.isPrintPreview_)
+    this.pageIndicator_ = $('page-indicator');
   this.progressBar_ = $('progress-bar');
   this.passwordScreen_ = $('password-screen');
   this.passwordScreen_.addEventListener('password-submitted',
                                         this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
   if (chrome.tabs)
     this.errorScreen_.reloadFn = chrome.tabs.reload;
 
   // Create the viewport.
-  var topToolbarHeight =
-      this.isMaterial_ ? PDFViewer.MATERIAL_TOOLBAR_HEIGHT : 0;
+  this.topToolbarHeight =

[Sam McNally, 2015/09/16 06:29:38]

this.topToolbarHeight_

[raymes, 2015/09/16 06:57:17]

Hmm I'm not sure why I changed this to be an instance variable =\ I changed it
back.

+      (this.isMaterial_ && !this.isPrintPreview_) ?
+      PDFViewer.MATERIAL_TOOLBAR_HEIGHT : 0;
   this.viewport_ = new Viewport(window,
                                 this.sizer_,
                                 this.viewportChanged_.bind(this),
                                 this.beforeZoom_.bind(this),
                                 this.afterZoom_.bind(this),
                                 getScrollbarWidth(),
                                 this.browserApi_.getDefaultZoom(),
-                                topToolbarHeight);
+                                this.topToolbarHeight);
 
   // Create the plugin object dynamically so we can set its src. The plugin
   // element is sized to fill the entire window and is set to be fixed
   // positioning, acting as a viewport. The plugin renders into this viewport
   // according to the scroll position of the window.
   this.plugin_ = document.createElement('embed');
   // NOTE: The plugin's 'id' field must be set to 'plugin' since
   // chrome/renderer/printing/print_web_view_helper.cc actually references it.
   this.plugin_.id = 'plugin';
   this.plugin_.type = 'application/x-google-chrome-pdf';
@@ skipping 10 matching lines @@
                             this.browserApi_.getStreamInfo().originalUrl);
   this.plugin_.setAttribute('stream-url',
                             this.browserApi_.getStreamInfo().streamUrl);
   var headers = '';
   for (var header in this.browserApi_.getStreamInfo().responseHeaders) {
     headers += header + ': ' +
         this.browserApi_.getStreamInfo().responseHeaders[header] + '\n';
   }
   this.plugin_.setAttribute('headers', headers);
 
-  if (this.isMaterial_) {
-    this.plugin_.setAttribute('is-material', '');
-    this.plugin_.setAttribute('top-toolbar-height',
-                              PDFViewer.MATERIAL_TOOLBAR_HEIGHT);
-  }
+  var backgroundColor = PDFViewer.DARK_BACKGROUND_COLOR;
+  if (!this.isMaterial_ || this.isPrintPreview_)
+    backgroundColor = PDFViewer.LIGHT_BACKGROUND_COLOR;
+  this.plugin_.setAttribute('background-color', backgroundColor);
+  this.plugin_.setAttribute('top-toolbar-height', this.topToolbarHeight);
 
   if (!this.browserApi_.getStreamInfo().embedded)
     this.plugin_.setAttribute('full-frame', '');
   document.body.appendChild(this.plugin_);
 
   // Setup the button event listeners.
   if (!this.isMaterial_) {
     $('fit-to-width-button').addEventListener('click',
         this.viewport_.fitToWidth.bind(this.viewport_));
     $('fit-to-page-button').addEventListener('click',
@@ skipping 10 matching lines @@
     this.zoomToolbar_ = $('zoom-toolbar');
     this.zoomToolbar_.addEventListener('fit-to-width',
         this.viewport_.fitToWidth.bind(this.viewport_));
     this.zoomToolbar_.addEventListener('fit-to-page',
         this.fitToPage_.bind(this));
     this.zoomToolbar_.addEventListener('zoom-in',
         this.viewport_.zoomIn.bind(this.viewport_));
     this.zoomToolbar_.addEventListener('zoom-out',
         this.viewport_.zoomOut.bind(this.viewport_));
 
-    this.materialToolbar_ = $('material-toolbar');
-    this.materialToolbar_.addEventListener('save', this.save_.bind(this));
-    this.materialToolbar_.addEventListener('print', this.print_.bind(this));
-    this.materialToolbar_.addEventListener('rotate-right',
-        this.rotateClockwise_.bind(this));
-    this.materialToolbar_.addEventListener('rotate-left',
-        this.rotateCounterClockwise_.bind(this));
+    if (!this.isPrintPreview_) {
+      this.materialToolbar_ = $('material-toolbar');
+      this.materialToolbar_.addEventListener('save', this.save_.bind(this));
+      this.materialToolbar_.addEventListener('print', this.print_.bind(this));
+      this.materialToolbar_.addEventListener('rotate-right',
+          this.rotateClockwise_.bind(this));
+      this.materialToolbar_.addEventListener('rotate-left',
+          this.rotateCounterClockwise_.bind(this));
+      // Must attach to mouseup on the plugin element, since it eats mousedown
+      // and click events.
+      this.plugin_.addEventListener('mouseup',
+          this.materialToolbar_.hideDropdowns.bind(this.materialToolbar_));
+    }
 
     document.body.addEventListener('change-page', function(e) {
       this.viewport_.goToPage(e.detail.page);
     }.bind(this));
 
     this.toolbarManager_ =
         new ToolbarManager(window, this.materialToolbar_, this.zoomToolbar_);
-
-    // Must attach to mouseup on the plugin element, since it eats mousedown and
-    // click events.
-    this.plugin_.addEventListener(
-        'mouseup',
-        this.materialToolbar_.hideDropdowns.bind(this.materialToolbar_));
   }
 
   // Set up the ZoomManager.
   this.zoomManager_ = new ZoomManager(
       this.viewport_, this.browserApi_.setZoom.bind(this.browserApi_),
       this.browserApi_.getInitialZoom());
   this.browserApi_.addZoomEventListener(
       this.zoomManager_.onBrowserZoomChange.bind(this.zoomManager_));
 
   // Setup the keyboard event listener.
@@ skipping 111 matching lines @@
       case 65:  // a key.
         if (e.ctrlKey || e.metaKey) {
           this.plugin_.postMessage({
             type: 'selectAll'
           });
           // Since we do selection ourselves.
           e.preventDefault();
         }
         return;
       case 71: // g key.
-        if (this.isMaterial_ && (e.ctrlKey || e.metaKey)) {
+        if (this.isMaterial_ && this.materialToolbar_ &&
+            (e.ctrlKey || e.metaKey)) {
           this.toolbarManager_.showToolbars();
           this.materialToolbar_.selectPageNumber();
           // To prevent the default "find text" behaviour in Chrome.
           e.preventDefault();
         }
         return;
       case 219:  // left bracket.
         if (e.ctrlKey)
           this.rotateCounterClockwise_();
         return;
@@ skipping 114 matching lines @@
       this.viewport_.setZoom(viewportPosition.zoom);
   },
 
   /**
    * @private
    * Update the loading progress of the document in response to a progress
    * message being received from the plugin.
    * @param {number} progress the progress as a percentage.
    */
   updateProgress_: function(progress) {
-    if (this.isMaterial_)
-      this.materialToolbar_.loadProgress = progress;
-    else
+    if (this.isMaterial_) {
+      if (this.materialToolbar_)
+        this.materialToolbar_.loadProgress = progress;
+    } else {
       this.progressBar_.progress = progress;
+    }
 
     if (progress == -1) {
       // Document load failed.
       this.errorScreen_.show();
       this.sizer_.style.display = 'none';
       if (!this.isMaterial_)
         this.toolbar_.style.visibility = 'hidden';
       if (this.passwordScreen_.active) {
         this.passwordScreen_.deny();
         this.passwordScreen_.active = false;
@@ skipping 38 matching lines @@
   handlePluginMessage_: function(message) {
     switch (message.data.type.toString()) {
       case 'documentDimensions':
         this.documentDimensions_ = message.data;
         this.viewport_.setDocumentDimensions(this.documentDimensions_);
         // If we received the document dimensions, the password was good so we
         // can dismiss the password screen.
         if (this.passwordScreen_.active)
           this.passwordScreen_.accept();
 
+        if (this.pageIndicator_)
+          this.pageIndicator_.initialFadeIn();
+
         if (this.isMaterial_) {
-          this.materialToolbar_.docLength =
-              this.documentDimensions_.pageDimensions.length;
+          if (this.materialToolbar_) {
+            this.materialToolbar_.docLength =
+                this.documentDimensions_.pageDimensions.length;
+          }
           this.toolbarManager_.enableToolbars();
         } else {
-          this.pageIndicator_.initialFadeIn();
           this.toolbar_.initialFadeIn();
         }
         break;
       case 'email':
         var href = 'mailto:' + message.data.to + '?cc=' + message.data.cc +
             '&bcc=' + message.data.bcc + '&subject=' + message.data.subject +
             '&body=' + message.data.body;
         window.location.href = href;
         break;
       case 'getAccessibilityJSONReply':
@@ skipping 44 matching lines @@
         chrome.mimeHandlerPrivate.abortStream();
         break;
       case 'metadata':
         if (message.data.title) {
           document.title = message.data.title;
         } else {
           document.title =
               getFilenameFromURL(this.browserApi_.getStreamInfo().originalUrl);
         }
         this.bookmarks_ = message.data.bookmarks;
-        if (this.isMaterial_) {
+        if (this.isMaterial_ && this.materialToolbar_) {
           this.materialToolbar_.docTitle = document.title;
           this.materialToolbar_.bookmarks = this.bookmarks;
         }
         break;
       case 'setIsSelecting':
         this.viewportScroller_.setEnableScrolling(message.data.isSelecting);
         break;
       case 'getNamedDestinationReply':
         this.paramsParser_.onNamedDestinationReceived(
             message.data.pageNumber);
@@ skipping 64 matching lines @@
       this.toolbar_.style.bottom = toolbarBottom + 'px';
       // Hide the toolbar if it doesn't fit in the viewport.
       if (this.toolbar_.offsetLeft < 0 || this.toolbar_.offsetTop < 0)
         this.toolbar_.style.visibility = 'hidden';
       else
         this.toolbar_.style.visibility = 'visible';
     }
 
     // Update the page indicator.
     var visiblePage = this.viewport_.getMostVisiblePage();
-    if (this.isMaterial_) {
+
+    if (this.materialToolbar_)
       this.materialToolbar_.pageNo = visiblePage + 1;
-    } else {
+
+    // TODO(raymes): Give pageIndicator_ the same API as materialToolbar_.
+    if (this.pageIndicator_) {
       this.pageIndicator_.index = visiblePage;
       if (this.documentDimensions_.pageDimensions.length > 1 &&
           hasScrollbars.vertical) {
         this.pageIndicator_.style.visibility = 'visible';
       } else {
         this.pageIndicator_.style.visibility = 'hidden';
       }
     }
 
     var visiblePageDimensions = this.viewport_.getPageScreenRect(visiblePage);
@@ skipping 69 matching lines @@
         this.lastViewportPosition_ = this.viewport_.position;
 
         // TODO(raymes): Disable these properly in the plugin.
         var printButton = $('print-button');
         if (printButton)
           printButton.parentNode.removeChild(printButton);
         var saveButton = $('save-button');
         if (saveButton)
           saveButton.parentNode.removeChild(saveButton);
 
-        if (!this.isMaterial_)
-          this.pageIndicator_.pageLabels = message.data.pageNumbers;
+        this.pageIndicator_.pageLabels = message.data.pageNumbers;
 
         this.plugin_.postMessage({
           type: 'resetPrintPreviewMode',
           url: message.data.url,
           grayscale: message.data.grayscale,
           // If the PDF isn't modifiable we send 0 as the page count so that no
           // blank placeholder pages get appended to the PDF.
           pageCount: (message.data.modifiable ?
                       message.data.pageNumbers.length : 0)
         });
@@ skipping 40 matching lines @@
    * Each bookmark is an Object containing a:
    * - title
    * - page (optional)
    * - array of children (themselves bookmarks)
    * @type {Array} the top-level bookmarks of the PDF.
    */
   get bookmarks() {
     return this.bookmarks_;
   }
 };