Refactor Material Design PDF Viewer toolbar into a single element

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 68 matching lines @@
   // 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');
   this.progressBar_ = $('progress-bar');
   this.passwordScreen_ = $('password-screen');
   this.passwordScreen_.addEventListener('password-submitted',
                                         this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
-  this.toolbarHeight_ = this.isMaterial_ ? $('pdf-toolbar').clientHeight : 0;
-  this.bookmarksPane = $('bookmarks-pane');
+  this.materialToolbar_ = $('material-toolbar');
+  this.toolbarHeight_ = this.isMaterial_ ?
+      this.materialToolbar_.clientHeight : 0;
+  this.bookmarksPane_ = $('bookmarks-pane');
 
   // Create the viewport.
   this.viewport_ = new Viewport(window,
                                 this.sizer_,
                                 this.viewportChanged_.bind(this),
                                 this.beforeZoom_.bind(this),
                                 this.afterZoom_.bind(this),
                                 getScrollbarWidth(),
                                 this.toolbarHeight_);
   // Create the plugin object dynamically so we can set its src. The plugin
@@ skipping 15 matching lines @@
     this.plugin_.setAttribute('is-material', '');
 
   // Handle scripting messages from outside the extension that wish to interact
   // with it. We also send a message indicating that extension has loaded and
   // is ready to receive messages.
   window.addEventListener('message', this.handleScriptingMessage.bind(this),
                           false);
 
   document.title = getFilenameFromURL(this.streamDetails_.originalUrl);
   if (this.isMaterial_)
-    $('title').textContent = document.title;
+    this.materialToolbar_.filename = document.title;
   this.plugin_.setAttribute('src', this.streamDetails_.originalUrl);
   this.plugin_.setAttribute('stream-url', this.streamDetails_.streamUrl);
   var headers = '';
   for (var header in this.streamDetails_.responseHeaders) {
     headers += header + ': ' +
         this.streamDetails_.responseHeaders[header] + '\n';
   }
   this.plugin_.setAttribute('headers', headers);
 
   if (!this.streamDetails_.embedded)
     this.plugin_.setAttribute('full-frame', '');
   document.body.appendChild(this.plugin_);
 
-  this.pageIndicator_.addEventListener('changePage', function(e) {
+  document.body.addEventListener('changePage', function(e) {

[raymes, 2015/02/04 00:54:25]

nit: should we just attach the event listener to the materialToolbar as well? We
can group this with the other event listeners below

[Alexandre Carlton, 2015/02/04 04:28:47]

The viewer-bookmarks-pane also fires 'change-page' as well, which will not be
caught by this.materialToolbar_. Should two event listeners be added for each
element or still have the body listen for the event?

     this.viewport_.goToPage(e.detail.page);
   }.bind(this));
 
-  if (this.isMaterial_) {
-    this.bookmarksPane.addEventListener('changePage', function(e) {
-      this.viewport_.goToPage(e.detail.page);
-    }.bind(this));
-  }
-
   // Setup the button event listeners.
   $('fit-to-width-button').addEventListener('click',
       this.viewport_.fitToWidth.bind(this.viewport_));
   $('fit-to-page-button').addEventListener('click',
       this.viewport_.fitToPage.bind(this.viewport_));
   $('zoom-in-button').addEventListener('click',
       this.viewport_.zoomIn.bind(this.viewport_));
   $('zoom-out-button').addEventListener('click',
       this.viewport_.zoomOut.bind(this.viewport_));
-  $('save-button').addEventListener('click', this.save_.bind(this));
-  $('print-button').addEventListener('click', this.print_.bind(this));
+
   if (this.isMaterial_) {
-    $('bookmarks-button').addEventListener('click', function() {
-      this.bookmarksPane.toggle();
+    this.materialToolbar_.addEventListener('save', this.save_.bind(this));
+    this.materialToolbar_.addEventListener('print', this.print_.bind(this));
+    this.materialToolbar_.addEventListener('toggle-bookmarks', function() {

[raymes, 2015/02/04 00:54:25]

We should be consistent with how we name events (we used camel case for
changePage). Polymer seems to use dashes like this, so can we change changePage
to change-page?

[Alexandre Carlton, 2015/02/04 04:28:47]

Done.

+      this.bookmarksPane_.toggle();
     }.bind(this));
+  } else {
+    $('save-button').addEventListener('click', this.save_.bind(this));
+    $('print-button').addEventListener('click', this.print_.bind(this));
   }
 
   // Setup the keyboard event listener.
   document.onkeydown = this.handleKeyEvent_.bind(this);
 
   // Set up the zoom API.
   if (this.shouldManageZoom_()) {
     chrome.tabs.setZoomSettings(this.streamDetails_.tabId,
                                 {mode: 'manual', scope: 'per-tab'},
                                 this.afterZoom_.bind(this));
@@ skipping 191 matching lines @@
   },
 
   /**
    * @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.progressBar_.value = progress;
+      this.materialToolbar_.loadProgress = progress;
     else
       this.progressBar_.progress = progress;
 
     if (progress == -1) {
       // Document load failed.
       this.errorScreen_.style.visibility = 'visible';
       this.sizer_.style.display = 'none';
       this.toolbar_.style.visibility = 'hidden';
       if (this.passwordScreen_.active) {
         this.passwordScreen_.deny();
         this.passwordScreen_.active = false;
       }
     } else if (progress == 100) {
       // Document load complete.
       if (this.lastViewportPosition_)
         this.viewport_.position = this.lastViewportPosition_;
-      if (this.isMaterial_)
+      if (!this.isMaterial_)
         this.pageIndicator_.style.visibility = 'visible';
       this.handleURLParams_();
       this.loaded_ = true;
       this.sendScriptingMessage_({
         type: 'documentLoaded'
       });
       while (this.delayedScriptingMessages_.length > 0)
         this.handleScriptingMessage(this.delayedScriptingMessages_.shift());
     }
   },
@@ skipping 20 matching lines @@
     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.isMaterial_) {
-          this.pageIndicator_.docLength =
+          this.materialToolbar_.docLength =
               this.documentDimensions_.pageDimensions.length;
         } 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 +
@@ skipping 33 matching lines @@
       case 'setScrollPosition':
         var position = this.viewport_.position;
         if (message.data.x !== undefined)
           position.x = message.data.x;
         if (message.data.y !== undefined)
           position.y = message.data.y;
         this.viewport_.position = position;
         break;
       case 'setTranslatedStrings':
         this.passwordScreen_.text = message.data.getPasswordString;
-        this.progressBar_.text = message.data.loadingString;
-        if (!this.isPrintPreview_)
-          this.progressBar_.style.visibility = 'visible';
+        if (!this.isMaterial_) {
+          this.progressBar_.text = message.data.loadingString;
+          if (!this.isPrintPreview_)
+            this.progressBar_.style.visibility = 'visible';
+        }
         this.errorScreen_.text = message.data.loadFailedString;
         break;
       case 'cancelStreamUrl':
         chrome.mimeHandlerPrivate.abortStream();
         break;
       case 'bookmarks':
         this.bookmarks_ = message.data.bookmarks;
         if (this.isMaterial_)
-          this.bookmarksPane.bookmarks = message.data.bookmarks;
+          this.bookmarksPane_.bookmarks = message.data.bookmarks;
         break;
     }
   },
 
   /**
    * @private
    * A callback that's called before the zoom changes. Notify the plugin to stop
    * reacting to scroll events while zoom is taking place to avoid flickering.
    */
   beforeZoom_: function() {
@@ skipping 77 matching lines @@
     this.toolbar_.style.right = toolbarRight + 'px';
     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();
-    this.pageIndicator_.index = visiblePage;
+    if (this.isMaterial_)
+      this.materialToolbar_.pageIndex = visiblePage;
+    else
+      this.pageIndicator_.index = visiblePage;
+
     if (!this.isMaterial_) {
       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 71 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);
 
-        this.pageIndicator_.pageLabels = message.data.pageNumbers;
+        if (!this.isMaterial_)
+          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 42 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_;
   }
 };