Implement basic toolbar with Material Design and loading progress.

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 29 matching lines @@
  * Creates a new PDFViewer. There should only be one of these objects per
  * document.
  * @param {Object} streamDetails The stream object which points to the data
  *     contained in the PDF.
  */
 function PDFViewer(streamDetails) {
   this.streamDetails_ = 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.
   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;

[raymes, 2015/01/13 06:24:50]

nit: don't need the () around this.isMaterial_

 
   // Create the viewport.
   this.viewport_ = new Viewport(window,
                                 this.sizer_,
                                 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
   // 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';
   this.plugin_.addEventListener('message', this.handlePluginMessage_.bind(this),
                                 false);
+  if (this.isMaterial_) {
+    this.plugin_.style.top = this.toolbarHeight_ + 'px';

[Sam McNally, 2015/01/13 07:03:56]

top and width can be set in the css file.

[Alexandre Carlton, 2015/01/14 22:42:50]

Done for top; does width need to be set at all?

+    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
   // is ready to receive messages.
   window.addEventListener('message', this.handleScriptingMessage.bind(this),
                           false);
 
   document.title = getFilenameFromURL(this.streamDetails_.originalUrl);
+  if (this.isMaterial_)
+    $('title').innerHTML = document.title;

[Sam McNally, 2015/01/13 07:03:56]

$('title').textContent

   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)
@@ skipping 199 matching lines @@
       this.viewport_.setZoom(this.urlParams_.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) {
-    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';
       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) {
@@ skipping 73 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.isMaterial_)
+          this.progressBar_.text = message.data.loadingString;
         this.progressBar_.style.visibility = 'visible';
         this.errorScreen_.text = message.data.loadFailedString;
         break;
       case 'cancelStreamUrl':
         chrome.streamsPrivate.abort(this.streamDetails_.streamUrl);
         break;
     }
   },
 
   /**
@@ skipping 47 matching lines @@
   },
 
   /**
    * @private
    * A callback that's called after the viewport changes.
    */
   viewportChanged_: function() {
     if (!this.documentDimensions_)
       return;
 
+    if (this.isMaterial_) {
+      this.plugin_.style.height =
+          (window.innerHeight - this.toolbarHeight_) + 'px';
+      this.plugin_.style.height = window.innerWidth;

[Sam McNally, 2015/01/13 07:03:56]

this.plugin_.style.width.
I think it's worth skipping this until the width can change.

+    }
+
     // Update the buttons selected.
     $('fit-to-page-button').classList.remove('polymer-selected');
     $('fit-to-width-button').classList.remove('polymer-selected');
     if (this.viewport_.fittingType == Viewport.FittingType.FIT_TO_PAGE) {
       $('fit-to-page-button').classList.add('polymer-selected');
     } else if (this.viewport_.fittingType ==
                Viewport.FittingType.FIT_TO_WIDTH) {
       $('fit-to-width-button').classList.add('polymer-selected');
     }
 
@@ skipping 122 matching lines @@
               this.streamDetails_.tabId != -1);
   },
 
   /**
    * @type {Viewport} the viewport of the PDF viewer.
    */
   get viewport() {
     return this.viewport_;
   }
 };