Implement basic toolbar with Material Design and loading progress.

chrome/browser/resources/pdf/viewport.js

 // Copyright 2014 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.
 
 /**
  * Returns the height of the intersection of two rectangles.
  * @param {Object} rect1 the first rect
  * @param {Object} rect2 the second rect
  * @return {number} the height of the intersection of the rects
  */
@@ skipping 23 matching lines @@
   this.sizer_ = sizer;
   this.viewportChangedCallback_ = viewportChangedCallback;
   this.beforeZoomCallback_ = beforeZoomCallback;
   this.afterZoomCallback_ = afterZoomCallback;
   this.allowedToChangeZoom_ = false;
   this.zoom_ = 1;
   this.documentDimensions_ = null;
   this.pageDimensions_ = [];
   this.scrollbarWidth_ = scrollbarWidth;
   this.fittingType_ = Viewport.FittingType.NONE;
+  var toolbar = $('pdf-toolbar');
+  this.toolbarHeight_ = (toolbar) ? toolbar.clientHeight : 0;

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

Can we pass the toolbar height into the viewport. Don't call it toolbarHeight
though, maybe call it yPos or something.

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

Done.

 
   window.addEventListener('scroll', this.updateViewport_.bind(this));
   window.addEventListener('resize', this.resize_.bind(this));
 }
 
 /**
  * Enumeration of page fitting types.
  * @enum {string}
  */
 Viewport.FittingType = {
@@ skipping 73 matching lines @@
     return this.documentNeedsScrollbars_(this.zoom_);
   },
 
   /**
    * @private
    * Helper function called when the zoomed document size changes.
    */
   contentSizeChanged_: function() {
     if (this.documentDimensions_) {
       this.sizer_.style.width =
-          this.documentDimensions_.width * this.zoom_ + 'px';
+          this.documentDimensions_.width * this.zoom_ +
+          this.toolbarHeight_ + 'px';

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

We shouldn't need to adjust the width

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

Done.

       this.sizer_.style.height =
-          this.documentDimensions_.height * this.zoom_ + 'px';
+          this.documentDimensions_.height * this.zoom_ +
+          this.toolbarHeight_ + 'px';
     }
   },
 
   /**
    * @private
    * Called when the viewport should be updated.
    */
   updateViewport_: function() {
     this.viewportChangedCallback_();
   },
@@ skipping 389 matching lines @@
     spaceOnLeft = Math.max(spaceOnLeft, 0);
 
     return {
       x: x * this.zoom_ + spaceOnLeft - this.window_.pageXOffset,
       y: insetDimensions.y * this.zoom_ - this.window_.pageYOffset,
       width: insetDimensions.width * this.zoom_,
       height: insetDimensions.height * this.zoom_
     };
   }
 };