Refactor Material Design PDF Viewer toolbar into a single element

chrome/browser/resources/pdf/pdf.js

Index: chrome/browser/resources/pdf/pdf.js
diff --git a/chrome/browser/resources/pdf/pdf.js b/chrome/browser/resources/pdf/pdf.js
index 6c91b53559e21700c8bf0310a1e89001fde8a16d..47bac6328c338e077048f42d45690b8953e2767a 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -86,8 +86,10 @@ function PDFViewer(streamDetails) {
   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,
@@ -123,7 +125,7 @@ function PDFViewer(streamDetails) {
 
   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 = '';
@@ -137,16 +139,10 @@ function PDFViewer(streamDetails) {
     this.plugin_.setAttribute('full-frame', '');
   document.body.appendChild(this.plugin_);
 
-  this.pageIndicator_.addEventListener('changePage', function(e) {
+  document.body.addEventListener('changePage', function(e) {
     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_));
@@ -156,12 +152,16 @@ function PDFViewer(streamDetails) {
       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() {
+        this.bookmarksPane_.toggle();

[Sam McNally, 2015/02/03 07:22:45]

2 space indent.

[Alexandre Carlton, 2015/02/03 22:50:42]

Done.

     }.bind(this));
+  } else {
+    $('save-button').addEventListener('click', this.save_.bind(this));
+    $('print-button').addEventListener('click', this.print_.bind(this));
   }
 
   // Setup the keyboard event listener.
@@ -364,7 +364,7 @@ PDFViewer.prototype = {
    */
   updateProgress_: function(progress) {
     if (this.isMaterial_)
-      this.progressBar_.value = progress;
+      this.materialToolbar_.progress = progress;
     else
       this.progressBar_.progress = progress;
 
@@ -381,7 +381,7 @@ PDFViewer.prototype = {
       // 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;
@@ -422,7 +422,7 @@ PDFViewer.prototype = {
           this.passwordScreen_.accept();
 
         if (this.isMaterial_) {
-          this.pageIndicator_.docLength =
+          this.materialToolbar_.docLength =
               this.documentDimensions_.pageDimensions.length;
         } else {
           this.pageIndicator_.initialFadeIn();
@@ -476,8 +476,9 @@ PDFViewer.prototype = {
         break;
       case 'setTranslatedStrings':
         this.passwordScreen_.text = message.data.getPasswordString;
-        this.progressBar_.text = message.data.loadingString;
-        if (!this.isPrintPreview_)
+        if (!this.isMaterial_)
+          this.progressBar_.text = message.data.loadingString;
+        if (!this.isPrintPreview_ && !this.isMaterial_)

[Sam McNally, 2015/02/03 07:22:45]

Move this inside the if above.

[Alexandre Carlton, 2015/02/03 22:50:43]

Done.

           this.progressBar_.style.visibility = 'visible';
         this.errorScreen_.text = message.data.loadFailedString;
         break;
@@ -487,7 +488,7 @@ PDFViewer.prototype = {
       case 'bookmarks':
         this.bookmarks_ = message.data.bookmarks;
         if (this.isMaterial_)
-          this.bookmarksPane.bookmarks = message.data.bookmarks;
+          this.bookmarksPane_.bookmarks = message.data.bookmarks;
         break;
     }
   },
@@ -585,7 +586,11 @@ PDFViewer.prototype = {
 
     // Update the page indicator.
     var visiblePage = this.viewport_.getMostVisiblePage();
-    this.pageIndicator_.index = visiblePage;
+    if (this.isMaterial_)
+      this.materialToolbar_.index = visiblePage;
+    else
+      this.pageIndicator_.index = visiblePage;
+
     if (!this.isMaterial_) {
       if (this.documentDimensions_.pageDimensions.length > 1 &&
           hasScrollbars.vertical) {
@@ -677,7 +682,9 @@ PDFViewer.prototype = {
         if (saveButton)
           saveButton.parentNode.removeChild(saveButton);
 
-        this.pageIndicator_.pageLabels = message.data.pageNumbers;
+        // TODO(alexandrec): Weren't we going to get rid of pageLabels?
+        if (!this.isMaterial_)
+          this.pageIndicator_.pageLabels = message.data.pageNumbers;

[Alexandre Carlton, 2015/02/03 02:22:24]

Just drawing attention to this; what should we do about pageLabels?

[Sam McNally, 2015/02/03 07:22:45]

We're keeping pageLabels, but we don't need to deal with them in the new UI
until we figure out what the plan is for print preview.

[Alexandre Carlton, 2015/02/03 22:50:42]

Acknowledged.

 
         this.plugin_.postMessage({
           type: 'resetPrintPreviewMode',