Support bump-scroll in full-screen by adjusting plugin margins.

BUG=125031
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/10260022

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

6 files changed, 136 insertions, 4 deletions

diff --git a/remoting/webapp/client_plugin.js b/remoting/webapp/client_plugin.js
index 0af6005..826419e 100644
--- a/remoting/webapp/client_plugin.js
+++ b/remoting/webapp/client_plugin.js
@@ -61,7 +61,7 @@ remoting.ClientPlugin.Feature = {
 remoting.ClientPlugin.prototype.hasFeature = function(feature) {};
 
 /**
- * @return {Element} HTML element that corresponds to the plugin.
+ * @return {HTMLEmbedElement} HTML element that corresponds to the plugin.
  */
 remoting.ClientPlugin.prototype.element = function() {};
 
diff --git a/remoting/webapp/client_plugin_async.js b/remoting/webapp/client_plugin_async.js
index cb14fa4..ff93e19 100644
--- a/remoting/webapp/client_plugin_async.js
+++ b/remoting/webapp/client_plugin_async.js
@@ -200,7 +200,7 @@ remoting.ClientPluginAsync.prototype.cleanup = function() {
 };
 
 /**
- * @return {Element} HTML element that correspods to the plugin.
+ * @return {HTMLEmbedElement} HTML element that correspods to the plugin.
  */
 remoting.ClientPluginAsync.prototype.element = function() {
   return this.plugin;
diff --git a/remoting/webapp/client_plugin_v1.js b/remoting/webapp/client_plugin_v1.js
index c4d4607..8b51eb1 100644
--- a/remoting/webapp/client_plugin_v1.js
+++ b/remoting/webapp/client_plugin_v1.js
@@ -119,7 +119,7 @@ remoting.ClientPluginV1.prototype.cleanup = function() {
 };
 
 /**
- * @return {Element} HTML element that correspods to the plugin.
+ * @return {HTMLEmbedElement} HTML element that correspods to the plugin.
  */
 remoting.ClientPluginV1.prototype.element = function() {
   return this.plugin;
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index d7dc798..2cead97 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -94,6 +94,8 @@ remoting.ClientSession = function(hostJid, hostPublicKey, sharedSecret,
   this.shrinkToFit_.addEventListener('click', this.callEnableShrink_, false);
   this.originalSize_.addEventListener('click', this.callDisableShrink_, false);
   this.fullScreen_.addEventListener('click', this.callToggleFullScreen_, false);
+  /** @type {number?} @private */
+  this.bumpScrollTimer_ = null;
 };
 
 // Note that the positive values in both of these enums are copied directly
@@ -525,6 +527,10 @@ remoting.ClientSession.prototype.onResize = function() {
   }
   this.notifyClientDimensionsTimer_ =
       window.setTimeout(notifyClientDimensions, 1000);
+
+  // If bump-scrolling is enabled, adjust the plugin margins to fully utilize
+  // the new window area.
+  this.scroll_(0, 0);
 };
 
 /**
@@ -619,8 +625,10 @@ remoting.ClientSession.prototype.logStatistics = function(stats) {
 remoting.ClientSession.prototype.toggleFullScreen_ = function() {
   if (document.webkitIsFullScreen) {
     document.webkitCancelFullScreen();
+    this.enableBumpScroll_(false);
   } else {
     document.body.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+    this.enableBumpScroll_(true);
   }
 };
 
@@ -635,3 +643,117 @@ remoting.ClientSession.prototype.onShowOptionsMenu_ = function() {
   remoting.MenuButton.select(this.originalSize_, !this.scaleToFit);
   remoting.MenuButton.select(this.fullScreen_, document.webkitIsFullScreen);
 };
+
+/**
+ * Scroll the client plugin by the specified amount, keeping it visible.
+ * Note that this is only used in content full-screen mode (not windowed or
+ * browser full-screen modes), where window.scrollBy and the scrollTop and
+ * scrollLeft properties don't work.
+ * @param {number} dx The amount by which to scroll horizontally. Positive to
+ *     scroll right; negative to scroll left.
+ * @param {number} dy The amount by which to scroll vertically. Positive to
+ *     scroll down; negative to scroll up.
+ * @return {boolean} True if the requested scroll had no effect because both
+ *     vertical and horizontal edges of the screen have been reached.
+ * @private
+ */
+remoting.ClientSession.prototype.scroll_ = function(dx, dy) {
+  var plugin = this.plugin.element();
+  var style = plugin.style;
+
+  /**
+   * Helper function for x- and y-scrolling
+   * @param {number|string} curr The current margin, eg. "10px".
+   * @param {number} delta The requested scroll amount.
+   * @param {number} windowBound The size of the window, in pixels.
+   * @param {number} pluginBound The size of the plugin, in pixels.
+   * @param {{stop: boolean}} stop Reference parameter used to indicate when
+   *     the scroll has reached one of the edges and can be stopped in that
+   *     direction.
+   * @return {string} The new margin value.
+   */
+  var adjustMargin = function(curr, delta, windowBound, pluginBound, stop) {
+    var minMargin = Math.min(0, windowBound - pluginBound);
+    var result = (curr ? parseFloat(curr) : 0) - delta;
+    result = Math.min(0, Math.max(minMargin, result));
+    stop.stop = (result == 0 || result == minMargin);
+    return result + "px";
+  };
+
+  var stopX = { stop: false };
+  style.marginLeft = adjustMargin(style.marginLeft, dx,
+                                  window.innerWidth, plugin.width, stopX);
+  var stopY = { stop: false };
+  style.marginTop = adjustMargin(style.marginTop, dy,
+                                 window.innerHeight, plugin.height, stopY);
+  return stopX.stop && stopY.stop;
+}
+
+/**
+ * Enable or disable bump-scrolling.
+ * @param {boolean} enable True to enable bump-scrolling, false to disable it.
+ */
+remoting.ClientSession.prototype.enableBumpScroll_ = function(enable) {
+  if (enable) {
+    /** @type {remoting.ClientSession} */
+    var that = this;
+    /** @param {Event} event */
+    this.onMouseMoveRef_ = function(event) {
+      that.onMouseMove_(event);
+    }
+    this.plugin.element().addEventListener('mousemove', this.onMouseMoveRef_,
+                                           false);
+  } else {
+    this.plugin.element().removeEventListener('mousemove', this.onMouseMoveRef_,
+                                              false);
+    this.onMouseMoveRef_ = null;
+  }
+};
+
+/**
+ * @param {Event} event The mouse event.
+ * @private
+ */
+remoting.ClientSession.prototype.onMouseMove_ = function(event) {
+  if (this.bumpScrollTimer_) {
+    window.clearTimeout(this.bumpScrollTimer_);
+    this.bumpScrollTimer_ = null;
+  }
+  // It's possible to leave content full-screen mode without using the Screen
+  // Options menu, so we disable bump scrolling as soon as we detect this.
+  if (!document.webkitIsFullScreen) {
+    this.enableBumpScroll_(false);
+  }
+
+  /**
+   * Compute the scroll speed based on how close the mouse is to the edge.
+   * @param {number} mousePos The mouse x- or y-coordinate
+   * @param {number} size The width or height of the content area.
+   * @return {number} The scroll delta, in pixels.
+   */
+  var computeDelta = function(mousePos, size) {
+    var threshold = 10;
+    if (mousePos >= size - threshold) {
+      return 1 + 5 * (mousePos - (size - threshold)) / threshold;
+    } else if (mousePos <= threshold) {
+      return -1 - 5 * (threshold - mousePos) / threshold;
+    }
+    return 0;
+  };
+
+  var dx = computeDelta(event.x, window.innerWidth);
+  var dy = computeDelta(event.y, window.innerHeight);
+
+  if (dx != 0 || dy != 0) {
+    /** @type {remoting.ClientSession} */
+    var that = this;
+    // Scroll the view, and schedule a timer to do so again unless we've hit
+    // the edges of the screen. This timer is cancelled when the mouse moves.
+    var repeatScroll = function() {
+      if (!that.scroll_(dx, dy)) {
+        that.bumpScrollTimer_ = window.setTimeout(repeatScroll, 10);
+      }
+    };
+    repeatScroll();
+  }
+};
diff --git a/remoting/webapp/jscompiler_hacks.js b/remoting/webapp/jscompiler_hacks.js
index 419a9d44..e949eed 100644
--- a/remoting/webapp/jscompiler_hacks.js
+++ b/remoting/webapp/jscompiler_hacks.js
@@ -28,5 +28,15 @@ Element.prototype.webkitRequestFullScreen = function(flags) {};
 /** @type {{getRandomValues: function(Uint16Array):void}} */
 Window.prototype.crypto;
 
+/** @constructor
+    @extends {HTMLElement} */
+var HTMLEmbedElement = function() { };
+
+/** @type {number} */
+HTMLEmbedElement.prototype.height;
+
+/** @type {number} */
+HTMLEmbedElement.prototype.width;
+
 // This string is replaced with the actual value in build-webapp.py.
 var OAUTH2_USE_OFFICIAL_CLIENT_ID = false;
diff --git a/remoting/webapp/viewer_plugin_proto.js b/remoting/webapp/viewer_plugin_proto.js
index 786f408..6ccb7d9 100644
--- a/remoting/webapp/viewer_plugin_proto.js
+++ b/remoting/webapp/viewer_plugin_proto.js
@@ -9,7 +9,7 @@
 var remoting = remoting || {};
 
 /** @constructor
- *  @extends HTMLElement
+ *  @extends HTMLEmbedElement
  */
 remoting.ViewerPlugin = function() { };