Hookup print and save buttons in the out of process PDF plugin

BUG=303491

Review URL: https://codereview.chromium.org/169613005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@252884 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/pdf/background.js

@@ -2,11 +2,37 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-chrome.streamsPrivate.onExecuteMimeTypeHandler.addListener(
-  function(mime_type, original_url, content_url, tab_id) {
-    // TODO(raymes): Currently this doesn't work with embedded PDFs (it
-    // causes the entire frame to navigate). Also work out how we can
-    // mask the URL with the URL of the PDF.
-    chrome.tabs.update(tab_id, { url: 'index.html?' + content_url });
-  }
-);
+(function() {
+  'use strict';
+
+  /**
+   * Keep a stack of stream details for requests. These are pushed onto the
+   * stack as requests come in and popped off the stack as they are handled by a
+   * renderer.
+   * TODO(raymes): This is probably racy for multiple requests. We could
+   * associate an ID with the request but this code will probably change
+   * completely when MIME type handling is improved.
+   */
+  var streamsCache = [];
+
+  window.popStreamDetails = function() {
+    if (streamsCache.length > 0)
+      return streamsCache.pop();
+  };
+
+  chrome.streamsPrivate.onExecuteMimeTypeHandler.addListener(
+    function(mimeType, originalURL, contentURL, tabID) {
+      // TODO(raymes): Currently this doesn't work with embedded PDFs (it
+      // causes the entire frame to navigate). Also work out how we can
+      // mask the URL with the URL of the PDF.
+      var streamDetails = {
+        mimeType: mimeType,
+        originalURL: originalURL,
+        streamURL: contentURL
+      };
+      streamsCache.push(streamDetails);
+      chrome.tabs.update(tabID, {url: 'index.html'});
+    }
+  );
+
+}());

chrome/browser/resources/pdf/index.html

@@ -174,7 +174,7 @@ license that can be found in the LICENSE file.
   
 </polymer-element>
 
-<polymer-element name="viewer-toolbar" attributes="fadingIn" on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}" on-mouseout="{{fadeOut}}" assetpath="html_office/elements/viewer-toolbar/">
+<polymer-element name="viewer-toolbar" attributes="fadingIn" assetpath="html_office/elements/viewer-toolbar/">
 <template>
   <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
@@ -187,6 +187,7 @@ license that can be found in the LICENSE file.
   font-size: 0;
   opacity: 1;
   padding: 30px 30px 15px 30vw;
+  pointer-events: none;
   position: fixed;
   right: 0;
 }
@@ -226,6 +227,7 @@ license that can be found in the LICENSE file.
   display: inline-block;
   height: 36px;
   margin: 0;
+  pointer-events: all;
   width: 43px;
 }
 
@@ -447,7 +449,9 @@ license that can be found in the LICENSE file.
     <viewer-button id="zoom-out-button" src="button_zoom_out.png">
     </viewer-button>
   </polymer-selector>
-  <viewer-button id="save-button" src="button_save.png"></viewer-button>
+  <a id="save-button-link" download="">
+    <viewer-button id="save-button" src="button_save.png"></viewer-button>
+  </a>
   <viewer-button id="print-button" src="button_print.png"></viewer-button>
 </viewer-toolbar>
 

chrome/browser/resources/pdf/index.in.html

@@ -64,7 +64,9 @@
     <viewer-button id="zoom-out-button" src="button_zoom_out.png">
     </viewer-button>
   </polymer-selector>
-  <viewer-button id="save-button" src="button_save.png"></viewer-button>
+  <a id="save-button-link" download>
+    <viewer-button id="save-button" src="button_save.png"></viewer-button>
+  </a>
   <viewer-button id="print-button" src="button_print.png"></viewer-button>
 </viewer-toolbar>
 

chrome/browser/resources/pdf/index.js

@@ -389,32 +389,49 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
 
   Polymer('viewer-toolbar', {
     fadingIn: false,
-    timerId: undefined,
+    timerId_: undefined,
+    inInitialFadeIn_: false,
     ready: function() {
-      this.fadingInChanged();
-    },
-    fadeIn: function() {
-      this.fadingIn = true;
+      this.parentNode.addEventListener('mousemove', function(e) {
+        var rect = this.getBoundingClientRect();
+        if (e.clientX >= rect.left && e.clientX <= rect.right &&
+            e.clientY >= rect.top && e.clientY <= rect.bottom) {
+          this.fadingIn = true;
+          // If we hover over the toolbar, cancel the initial fade in.
+          if (this.inInitialFadeIn_)
+            this.inInitialFadeIn_ = false;
+        } else {
+          // Initially we want to keep the toolbar up for a longer period.
+          if (!this.inInitialFadeIn_)
+            this.fadingIn = false;
+        }
+      }.bind(this));
     },
-    fadeOut: function() {
-      this.fadingIn = false;
+    initialFadeIn: function() {
+      this.inInitialFadeIn_ = true;
+      this.fadeIn();
+      this.fadeOutAfterDelay(6000);
     },
     fadingInChanged: function() {
       if (this.fadingIn) {
-        this.style.opacity = 1;
-        if (this.timerId !== undefined) {
-          clearTimeout(this.timerId);
-          this.timerId = undefined;
-        }
+        this.fadeIn();
       } else {
-        if (this.timerId === undefined) {
-          this.timerId = setTimeout(
-            function() {
-              this.style.opacity = 0;
-              this.timerId = undefined;
-            }.bind(this), 3000);
-        }
+        if (this.timerId_ === undefined)
+          this.fadeOutAfterDelay(3000);
       }
+    },
+    fadeIn: function() {
+      this.style.opacity = 1;
+      clearTimeout(this.timerId_);
+      this.timerId_ = undefined;
+    },
+    fadeOutAfterDelay: function(delay) {
+      this.timerId_ = setTimeout(
+        function() {
+          this.style.opacity = 0;
+          this.timerId_ = undefined;
+          this.inInitialFadeIn_ = false;
+        }.bind(this), delay);
     }
   });
 ;
@@ -454,26 +471,28 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
     text: '1',
     timerId: undefined,
     ready: function() {
-      var scrollCallback = function() {
-        var percent = window.scrollY /
-            (document.body.scrollHeight -
-             document.documentElement.clientHeight);
-        this.style.top = percent *
-            (document.documentElement.clientHeight - this.offsetHeight) + 'px';
-        this.style.opacity = 1;
-        clearTimeout(this.timerId);
-
-        this.timerId = setTimeout(function() {
-          this.style.opacity = 0;
-          this.timerId = undefined;
-        }.bind(this), 2000);
-      }.bind(this);
+      var callback = this.fadeIn.bind(this, 2000);
       window.addEventListener('scroll', function() {
-        requestAnimationFrame(scrollCallback);
+        requestAnimationFrame(callback);
       });
-
-      scrollCallback();
     },
+    initialFadeIn: function() {
+      this.fadeIn(6000);
+    },
+    fadeIn: function(displayTime) {
+      var percent = window.scrollY /
+          (document.body.scrollHeight -
+           document.documentElement.clientHeight);
+      this.style.top = percent *
+          (document.documentElement.clientHeight - this.offsetHeight) + 'px';
+      this.style.opacity = 1;
+      clearTimeout(this.timerId);
+
+      this.timerId = setTimeout(function() {
+        this.style.opacity = 0;
+        this.timerId = undefined;
+      }.bind(this), displayTime);
+    }
   });
 ;
 

chrome/browser/resources/pdf/pdf.js

@@ -36,6 +36,13 @@ var viewport;
 // The document dimensions.
 var documentDimensions;
 
+// Notify the plugin to print.
+function print() {
+  plugin.postMessage({
+    type: 'print',
+  });
+}
+
 // Returns true if the fit-to-page button is enabled.
 function isFitToPageEnabled() {
   return $('fit-to-page-button').classList.contains('polymer-selected');
@@ -120,10 +127,9 @@ function load() {
   plugin.id = 'plugin';
   plugin.type = 'application/x-google-chrome-pdf';
   plugin.addEventListener('message', handleMessage, false);
-  // The pdf location is passed in the document url in the format:
-  // http://<.../pdf.html>?<pdf location>.
-  var url = window.location.search.substring(1);
-  plugin.setAttribute('src', url);
+  // The pdf location is passed in stream details in the background page.
+  var streamDetails = chrome.extension.getBackgroundPage().popStreamDetails();
+  plugin.setAttribute('src', streamDetails.streamURL);
   document.body.appendChild(plugin);
 
   // Setup the button event listeners.
@@ -135,6 +141,9 @@ function load() {
       viewport.zoomIn.bind(viewport));
   $('zoom-out-button').addEventListener('click',
       viewport.zoomOut.bind(viewport));
+  $('save-button-link').href = streamDetails.originalURL;
+  $('print-button').addEventListener('click', print);
+
 
   // Setup keyboard event listeners.
   document.onkeydown = function(e) {