Implement basic toolbar with Material Design and loading progress.

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 2e7e06f996ed6831f70135376b19a961074d9e82..d88e5f80becbd65dc6917cafd3e0414c7212e1b6 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -46,6 +46,9 @@ function PDFViewer(streamDetails) {
   this.streamDetails = streamDetails;
   this.loaded = false;
 
+  var loc = window.location.href;
+  var pageLoaded = loc.substring(loc.lastIndexOf('/') + 1, loc.indexOf('?'));
+  this.isMaterial = pageLoaded === 'index-material.html';

[raymes, 2015/01/09 04:15:10]

I think this can just be:
this.isMaterial_ = location.pathname.substring(1) == 'index-material.html'

[Alexandre Carlton, 2015/01/12 06:33:57]

Done.

   // 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.
@@ -76,7 +79,10 @@ function PDFViewer(streamDetails) {
   this.plugin_.type = 'application/x-google-chrome-pdf';
   this.plugin_.addEventListener('message', this.handlePluginMessage_.bind(this),
                                 false);
-
+  if (this.isMaterial) {
+    this.toolbarHeight_ = $('pdf-toolbar').clientHeight;
+    this.plugin_.style.top = this.toolbarHeight_ + 'px';
+  }

[raymes, 2015/01/09 04:15:10]

We should set the plugin size here too, but it doesn't need to be inside
this.isMaterial.

this.plugin_.style.height = (window.innerHeight - this.toolbarHeight_) + 'px';
this.plugin_.style.width = window.innerWidth;

In the case of the non-material version, this.toolbarHeight should be 0

   // 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.
@@ -85,6 +91,8 @@ function PDFViewer(streamDetails) {
   this.sendScriptingMessage_({type: 'readyToReceive'});
 
   document.title = getFilenameFromURL(this.streamDetails.originalUrl);
+  if (this.isMaterial)
+    $('title').innerHTML = document.title;
   this.plugin_.setAttribute('src', this.streamDetails.originalUrl);
   this.plugin_.setAttribute('stream-url', this.streamDetails.streamUrl);
   var headers = '';
@@ -313,7 +321,11 @@ PDFViewer.prototype = {
    * @param {number} progress the progress as a percentage.
    */
   updateProgress_: function(progress) {
-    this.progressBar_.progress = progress;
+    if (this.isMaterial)
+      this.progressBar_.value = progress;
+    else
+      this.progressBar_.progress = progress;
+
     if (progress == -1) {
       // Document load failed.
       this.errorScreen_.style.visibility = 'visible';
@@ -325,6 +337,8 @@ PDFViewer.prototype = {
       }
     } else if (progress == 100) {
       // Document load complete.
+      if (this.isMaterial)
+        this.progressBar_.style.visibility = 'hidden';
       if (this.lastViewportPosition_)
         this.viewport_.position = this.lastViewportPosition_;
       this.handleURLParams_();
@@ -411,7 +425,8 @@ PDFViewer.prototype = {
         break;
       case 'setTranslatedStrings':
         this.passwordScreen_.text = message.data.getPasswordString;
-        this.progressBar_.text = message.data.loadingString;
+        if (!this.isMaterial)
+          this.progressBar_.text = message.data.loadingString;
         this.progressBar_.style.visibility = 'visible';
         this.errorScreen_.text = message.data.loadFailedString;
         break;
@@ -479,6 +494,11 @@ PDFViewer.prototype = {
     if (!this.documentDimensions_)
       return;
 
+    if (this.isMaterial) {
+      this.plugin_.style.height =
+          (window.innerHeight - this.toolbarHeight_) + 'px';
+    }

[raymes, 2015/01/09 04:15:10]

Same here, we can move this outside the if-block. We should set width and
height.

[raymes, 2015/01/13 00:26:18]

I think we need to keep something here.

[Alexandre Carlton, 2015/01/13 03:57:27]

Done.

+
     // Update the buttons selected.
     $('fit-to-page-button').classList.remove('polymer-selected');
     $('fit-to-width-button').classList.remove('polymer-selected');