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 a8ec3081fc0f46a7015d7ede91659ce26a14140e..96adab6278a5773213e1a548b9273aa560d42e5e 100644
--- a/chrome/browser/resources/pdf/pdf.js
+++ b/chrome/browser/resources/pdf/pdf.js
@@ -47,6 +47,7 @@ function PDFViewer(streamDetails) {
   this.loaded_ = false;
   this.parentWindow_ = null;
 
+  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.
@@ -58,6 +59,7 @@ function PDFViewer(streamDetails) {
   this.passwordScreen_.addEventListener('password-submitted',
                                         this.onPasswordSubmitted_.bind(this));
   this.errorScreen_ = $('error-screen');
+  this.toolbarHeight_ = (this.isMaterial_) ? $('pdf-toolbar').clientHeight : 0;
 
   // Create the viewport.
   this.viewport_ = new Viewport(window,
@@ -65,7 +67,8 @@ function PDFViewer(streamDetails) {
                                 this.viewportChanged_.bind(this),
                                 this.beforeZoom_.bind(this),
                                 this.afterZoom_.bind(this),
-                                getScrollbarWidth());
+                                getScrollbarWidth(),
+                                this.toolbarHeight_);
   // 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
@@ -77,6 +80,10 @@ function PDFViewer(streamDetails) {
   this.plugin_.type = 'application/x-google-chrome-pdf';
   this.plugin_.addEventListener('message', this.handlePluginMessage_.bind(this),
                                 false);
+  this.plugin_.style.top = this.toolbarHeight_ + 'px';
+  this.plugin_.style.height = (window.innerHeight - this.toolbarHeight_) + 'px';
+  this.plugin_.style.width = window.innerWidth + 'px';
+
 
   // Handle scripting messages from outside the extension that wish to interact
   // with it. We also send a message indicating that extension has loaded and
@@ -85,6 +92,8 @@ function PDFViewer(streamDetails) {
                           false);
 
   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 = '';
@@ -304,7 +313,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';
@@ -398,7 +411,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;
@@ -466,6 +480,10 @@ PDFViewer.prototype = {
     if (!this.documentDimensions_)
       return;
 
+    this.plugin_.style.height =

[raymes, 2015/01/13 04:32:01]

I'm a little afraid this could impact the non-material plugin so let's wrap it
in an if (this.isMaterial_) for now (sorry I think I asked you to remove it
before, but let's just keep it for safety for now

[Alexandre Carlton, 2015/01/13 05:21:44]

Done.

+        (window.innerHeight - this.toolbarHeight_) + 'px';
+    this.plugin_.style.height = window.innerWidth;
+
     // Update the buttons selected.
     $('fit-to-page-button').classList.remove('polymer-selected');
     $('fit-to-width-button').classList.remove('polymer-selected');