This CL moves the viewport management related implementation

(e.g. scrolling, letterboxing the plugin, resizing the host) from
remoting.DesktopConnectedView into smaller single-purposed classes.

Summary of changes:
1. Moves bumpScrolling implementation into the remoting.BumpScroller.
2. Moves all viewport related implementation from remoting.DesktopConnectedView
   into remoting.DesktopViewport

BUG=457890

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

Cr-Commit-Position: refs/heads/master@{#317707}

remoting/remoting_webapp_files.gypi

@@ -61,7 +61,7 @@
       'webapp/js_proto/chrome_proto.js',
       'webapp/unittests/apps_v2_migration_unittest.js',
       'webapp/unittests/base_unittest.js',
-      'webapp/unittests/desktop_connected_view_unittest.js',
+      'webapp/unittests/desktop_viewport_unittest.js',
       'webapp/unittests/dns_blackhole_checker_unittest.js',
       'webapp/unittests/event_hook_unittest.js',
       'webapp/unittests/fallback_signal_strategy_unittest.js',
@@ -199,8 +199,10 @@
     # UI JavaScript files.
     'remoting_webapp_js_ui_files': [
       'webapp/base/js/window_shape.js',
+      'webapp/crd/js/bump_scroller.js',
       'webapp/crd/js/butter_bar.js',
       'webapp/crd/js/connection_stats.js',
+      'webapp/crd/js/desktop_viewport.js',
       'webapp/crd/js/feedback.js',
       'webapp/crd/js/fullscreen.js',
       'webapp/crd/js/fullscreen_v1.js',

remoting/webapp/base/js/base.js

@@ -526,7 +526,7 @@ base.EventHook.prototype.dispose = function() {
 /**
   * An event hook implementation for DOM Events.
   *
-  * @param {HTMLElement} src
+  * @param {HTMLElement|Element} src
   * @param {string} eventName
   * @param {function(...?)} listener
   * @param {boolean} capture

remoting/webapp/browser_test/bump_scroll_browser_test.js

@@ -12,26 +12,48 @@
 
 'use strict';
 
-/**
- * @constructor
- * @extends {base.EventSourceImpl}
- */
-browserTest.FakeDesktopConnectedView = function() {
-  this.pluginPosition = {
+/** @constructor */
+browserTest.FakeDesktopViewport = function() {
+  /** @private */
+  this.pluginPosition_ = {
     top: 0,
     left: 0
   };
-  this.defineEvents(Object.keys(remoting.DesktopConnectedView.Events));
+  /** @private */
+  this.bumpScroller_ = new base.EventSourceImpl();
+  this.bumpScroller_.defineEvents(Object.keys(remoting.BumpScroller.Events));
 };
 
-base.extend(browserTest.FakeDesktopConnectedView, base.EventSourceImpl);
+/**
+ * @param {number} top
+ * @param {number} left
+ * @return {void} nothing.
+ */
+browserTest.FakeDesktopViewport.prototype.setPluginPositionForTesting =
+    function(top, left) {
+  this.pluginPosition_ = {
+    top: top,
+    left: left
+  };
+};
 
 /**
  * @return {{top: number, left:number}} The top-left corner of the plugin.
  */
-browserTest.FakeDesktopConnectedView.prototype.getPluginPositionForTesting =
+browserTest.FakeDesktopViewport.prototype.getPluginPositionForTesting =
     function() {
-  return this.pluginPosition;
+  return this.pluginPosition_;
+};
+
+/** @return {base.EventSource} */
+browserTest.FakeDesktopViewport.prototype.getBumpScrollerForTesting =
+    function() {
+  return this.bumpScroller_;
+};
+
+browserTest.FakeDesktopViewport.prototype.raiseEvent =
+    function() {
+  return this.bumpScroller_.raiseEvent.apply(this.bumpScroller_, arguments);
 };
 
 
@@ -92,7 +114,8 @@ browserTest.Bump_Scroll.prototype.run = function(data) {
  * @return {Promise}
  */
 browserTest.Bump_Scroll.prototype.noScrollWindowed = function() {
-  remoting.desktopConnectedView.setPluginSizeForBumpScrollTesting(
+  var viewport = remoting.desktopConnectedView.getViewportForTesting();
+  viewport.setPluginSizeForBumpScrollTesting(
       window.innerWidth + this.kHostDesktopSizeDelta,
       window.innerHeight + this.kHostDesktopSizeDelta);
   this.moveMouseTo(0, 0);
@@ -103,7 +126,8 @@ browserTest.Bump_Scroll.prototype.noScrollWindowed = function() {
  * @return {Promise}
  */
 browserTest.Bump_Scroll.prototype.noScrollSmaller = function() {
-  remoting.desktopConnectedView.setPluginSizeForBumpScrollTesting(
+  var viewport = remoting.desktopConnectedView.getViewportForTesting();
+  viewport.setPluginSizeForBumpScrollTesting(
       window.innerWidth - this.kHostDesktopSizeDelta,
       window.innerHeight - this.kHostDesktopSizeDelta);
   this.moveMouseTo(0, 0);
@@ -117,16 +141,17 @@ browserTest.Bump_Scroll.prototype.noScrollSmaller = function() {
  */
 browserTest.Bump_Scroll.prototype.scrollDirection =
     function(widthFraction, heightFraction) {
-  remoting.desktopConnectedView.setPluginSizeForBumpScrollTesting(
+  var viewport = remoting.desktopConnectedView.getViewportForTesting();
+  viewport.setPluginSizeForBumpScrollTesting(
       screen.width + this.kHostDesktopSizeDelta,
       screen.height + this.kHostDesktopSizeDelta);
   /** @type {number} */
-  var expectedTop = heightFraction == 0.0 ? 0 :
+  var expectedTop = heightFraction === 0.0 ? 0 :
                     heightFraction == 1.0 ? -this.kHostDesktopSizeDelta :
                     undefined;
   /** @type {number} */
-  var expectedLeft = widthFraction == 0.0 ? 0 :
-                     widthFraction == 1.0 ? -this.kHostDesktopSizeDelta :
+  var expectedLeft = widthFraction === 0.0 ? 0 :
+                     widthFraction === 1.0 ? -this.kHostDesktopSizeDelta :
                      undefined;
   var result = this.verifyScroll(expectedTop, expectedLeft);
   this.moveMouseTo(widthFraction * screen.width,
@@ -186,52 +211,49 @@ browserTest.Bump_Scroll.prototype.moveMouseTo = function(x, y) {
  * @return {Promise}
  */
 browserTest.Bump_Scroll.prototype.testVerifyScroll = function() {
-  var STARTED = remoting.DesktopConnectedView.Events.bumpScrollStarted;
-  var STOPPED = remoting.DesktopConnectedView.Events.bumpScrollStopped;
-  var fakeSession = new browserTest.FakeDesktopConnectedView;
+  var STARTED = remoting.BumpScroller.Events.bumpScrollStarted;
+  var STOPPED = remoting.BumpScroller.Events.bumpScrollStopped;
+  var fakeViewport = new browserTest.FakeDesktopViewport;
   var that = this;
 
   // No events raised (e.g. windowed mode).
-  var result = this.verifyScroll(undefined, undefined, fakeSession)
+  var result = this.verifyScroll(undefined, undefined, fakeViewport)
 
   .then(function() {
     // Start and end events raised, but no scrolling (e.g. full-screen mode
     // with host desktop <= window size).
-    fakeSession = new browserTest.FakeDesktopConnectedView;
-    var result = that.verifyScroll(undefined, undefined, fakeSession);
-    fakeSession.raiseEvent(STARTED, {});
-    fakeSession.raiseEvent(STOPPED, {});
+    fakeViewport = new browserTest.FakeDesktopViewport;
+    var result = that.verifyScroll(undefined, undefined, fakeViewport);
+    fakeViewport.raiseEvent(STARTED, {});
+    fakeViewport.raiseEvent(STOPPED, {});
     return result;
 
   }).then(function() {
     // Start and end events raised, with incorrect scrolling.
-    fakeSession = new browserTest.FakeDesktopConnectedView;
+    fakeViewport = new browserTest.FakeDesktopViewport;
     var result = base.Promise.negate(
-        that.verifyScroll(2, 2, fakeSession));
-    fakeSession.raiseEvent(STARTED, {});
-    fakeSession.pluginPosition.top = 1;
-    fakeSession.pluginPosition.left = 1;
-    fakeSession.raiseEvent(STOPPED, {});
+        that.verifyScroll(2, 2, fakeViewport));
+    fakeViewport.raiseEvent(STARTED, {});
+    fakeViewport.setPluginPositionForTesting(1, 1);
+    fakeViewport.raiseEvent(STOPPED, {});
     return result;
 
   }).then(function() {
     // Start event raised, but not end event.
-    fakeSession = new browserTest.FakeDesktopConnectedView;
+    fakeViewport = new browserTest.FakeDesktopViewport;
     var result = base.Promise.negate(
-        that.verifyScroll(2, 2, fakeSession));
-    fakeSession.raiseEvent(STARTED, {});
-    fakeSession.pluginPosition.top = 2;
-    fakeSession.pluginPosition.left = 2;
+        that.verifyScroll(2, 2, fakeViewport));
+    fakeViewport.raiseEvent(STARTED, {});
+    fakeViewport.setPluginPositionForTesting(2, 2);
     return result;
 
   }).then(function() {
     // Start and end events raised, with correct scrolling.
-    fakeSession = new browserTest.FakeDesktopConnectedView;
-    var result = that.verifyScroll(2, 2, fakeSession);
-    fakeSession.raiseEvent(STARTED, {});
-    fakeSession.pluginPosition.top = 2;
-    fakeSession.pluginPosition.left = 2;
-    fakeSession.raiseEvent(STOPPED, {});
+    fakeViewport = new browserTest.FakeDesktopViewport;
+    var result = that.verifyScroll(2, 2, fakeViewport);
+    fakeViewport.raiseEvent(STARTED, {});
+    fakeViewport.setPluginPositionForTesting(2, 2);
+    fakeViewport.raiseEvent(STOPPED, {});
     return result;
   });
 
@@ -245,26 +267,25 @@ browserTest.Bump_Scroll.prototype.testVerifyScroll = function() {
  *    plugin, or undefined if it is not expected to change.
  * @param {number|undefined} expectedLeft The expected horizontal position of
  *    the plugin, or undefined if it is not expected to change.
- * @param {browserTest.FakeDesktopConnectedView=} opt_desktopConnectedView
- *     DesktopConnectedView fake, for testing.
+ * @param {browserTest.FakeDesktopViewport=} opt_desktopViewport
+ *     DesktopViewport fake, for testing.
  * @return {Promise}
  */
 browserTest.Bump_Scroll.prototype.verifyScroll =
-    function (expectedTop, expectedLeft, opt_desktopConnectedView) {
-  /** @type {browserTest.FakeDesktopConnectedView} */
-  var desktopConnectedView = opt_desktopConnectedView ||
-      remoting.desktopConnectedView;
-  base.debug.assert(desktopConnectedView != null);
-  var STARTED = remoting.DesktopConnectedView.Events.bumpScrollStarted;
-  var STOPPED = remoting.DesktopConnectedView.Events.bumpScrollStopped;
+    function (expectedTop, expectedLeft, opt_desktopViewport) {
+  var desktopViewport = opt_desktopViewport ||
+      remoting.desktopConnectedView.getViewportForTesting();
+  base.debug.assert(desktopViewport != null);
+  var STARTED = remoting.BumpScroller.Events.bumpScrollStarted;
+  var STOPPED = remoting.BumpScroller.Events.bumpScrollStopped;
 
-  var initialPosition = desktopConnectedView.getPluginPositionForTesting();
+  var initialPosition = desktopViewport.getPluginPositionForTesting();
   var initialTop = initialPosition.top;
   var initialLeft = initialPosition.left;
 
   /** @return {Promise} */
   var verifyPluginPosition = function() {
-    var position = desktopConnectedView.getPluginPositionForTesting();
+    var position = desktopViewport.getPluginPositionForTesting();
     if (expectedLeft === undefined) {
       expectedLeft = initialLeft;
     }
@@ -281,20 +302,21 @@ browserTest.Bump_Scroll.prototype.verifyScroll =
     }
   };
 
-  var started = browserTest.expectEvent(desktopConnectedView, STARTED, 1000);
-  var stopped = browserTest.expectEvent(desktopConnectedView, STOPPED, 5000);
+  var bumpScroller = desktopViewport.getBumpScrollerForTesting();
+  var started = browserTest.expectEvent(bumpScroller, STARTED, 1000);
+  var stopped = browserTest.expectEvent(bumpScroller, STOPPED, 5000);
   return started.then(function() {
-    return stopped.then(function() {
-      return verifyPluginPosition();
-    });
+    return stopped;
   }, function() {
     // If no started event is raised, the test might still pass if it asserted
     // no scrolling.
-    if (expectedTop == undefined && expectedLeft == undefined) {
+    if (expectedTop === undefined && expectedLeft === undefined) {
       return Promise.resolve();
     } else {
       return Promise.reject(
           new Error('Scroll expected but no start event fired.'));
     }
+  }).then(function() {
+    return verifyPluginPosition();
   });
 };

remoting/webapp/crd/js/bump_scroller.js

+// Copyright 2015 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.
+
+/**
+ * @fileoverview
+ * This class allows enables the scrolling of the DestkopViewport in fullscreen
+ * mode by moving the mouse to the edge of the screen.
+ */
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+(function() {
+
+'use strict';
+
+/**
+ * @param {remoting.DesktopViewport} viewport
+ *
+ * @constructor
+ * @implements {base.Disposable}
+ * @extends {base.EventSourceImpl}
+ */
+remoting.BumpScroller = function(viewport) {
+  /** @private */
+  this.viewport_ = viewport;
+  /** @private {number?} */
+  this.bumpScrollTimer_ = null;
+  /** @private */
+  this.eventHook_ = new base.DomEventHook(document.documentElement, 'mousemove',
+                                          this.onMouseMove_.bind(this), false);
+
+  this.defineEvents(base.values(remoting.BumpScroller.Events));
+};
+base.extend(remoting.BumpScroller, base.EventSourceImpl);
+
+/** @enum {string} */
+remoting.BumpScroller.Events = {
+  bumpScrollStarted: 'bumpScrollStarted',
+  bumpScrollStopped: 'bumpScrollStopped'
+};
+
+remoting.BumpScroller.prototype.dispose = function() {
+  base.dispose(this.eventHook_);
+  this.eventHook_ = null;
+};
+
+/**
+ * @param {Event} event The mouse event.
+ * @private
+ */
+remoting.BumpScroller.prototype.onMouseMove_ = function(event) {
+  if (this.bumpScrollTimer_ !== null) {
+    window.clearTimeout(this.bumpScrollTimer_);
+    this.bumpScrollTimer_ = null;
+  }
+
+  /**
+   * 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 clientArea = this.viewport_.getClientArea();
+  var dx = computeDelta(event.x, clientArea.width);
+  var dy = computeDelta(event.y, clientArea.height);
+
+  if (dx !== 0 || dy !== 0) {
+    this.raiseEvent(remoting.BumpScroller.Events.bumpScrollStarted);
+    this.repeatScroll_(dx, dy, new Date().getTime());
+  }
+};
+
+/**
+ * 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.
+ *
+ * @param {number} dx
+ * @param {number} dy
+ * @param {number} expected The time at which we expect to be called.
+ * @private
+ */
+remoting.BumpScroller.prototype.repeatScroll_ = function(dx, dy, expected) {
+  /** @type {number} */
+  var now = new Date().getTime();
+  var timeout = 10;
+  var lateAdjustment = 1 + (now - expected) / timeout;
+  if (!this.viewport_.scroll(lateAdjustment * dx, lateAdjustment * dy)) {
+    this.raiseEvent(remoting.BumpScroller.Events.bumpScrollStopped);
+  } else {
+    this.bumpScrollTimer_ = window.setTimeout(
+        this.repeatScroll_.bind(this, dx, dy, now + timeout), timeout);
+  }
+};
+
+}());
\ No newline at end of file

remoting/webapp/crd/js/client_session.js

@@ -609,10 +609,6 @@ remoting.ClientSession.prototype.onSetCapabilities_ = function(capabilities) {
   }
 
   this.capabilities_ = capabilities;
-  if (this.hasCapability(
-      remoting.ClientSession.Capability.SEND_INITIAL_RESOLUTION)) {
-    this.uiHandler_.notifyClientResolution_();
-  }
   if (this.hasCapability(remoting.ClientSession.Capability.GOOGLE_DRIVE)) {
     this.sendGoogleDriveAccessToken_();
   }

remoting/webapp/crd/js/host.js

@@ -55,9 +55,9 @@ remoting.Host.Options = function(hostId) {
   /** @private */
   this.hostId_ = hostId;
   /** @type {boolean} */
-  this.shrinkToFit = false;
+  this.shrinkToFit = true;
   /** @type {boolean} */
-  this.resizeToClient = false;
+  this.resizeToClient = true;
   /** @type {string} */
   this.remapKeys = '';
   /** @type {number} */
@@ -79,9 +79,13 @@ remoting.Host.Options.prototype.load = function() {
      * @param {Object.<string|boolean|number>} options
      */
     function(options) {
+      // Must be defaulted to true so that app-remoting can resize the host
+      // upon launching.
+      // TODO(kelvinp): Uses a separate host options for app-remoting that
+      // hardcodes resizeToClient to true.
       that.resizeToClient =
-          getBooleanAttr(options, 'resizeToClient', false);
-      that.shrinkToFit = getBooleanAttr(options, 'shrinkToFit', false);
+          getBooleanAttr(options, 'resizeToClient', true);
+      that.shrinkToFit = getBooleanAttr(options, 'shrinkToFit', true);
       that.desktopScale = getNumberAttr(options, 'desktopScale', 1);
       that.remapKeys = getStringAttr(options, 'remapKeys', '');
     });