[Chromoting] Add support for window shape in the client.

BUG=

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

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

7 files changed, 181 insertions, 0 deletions

diff --git a/remoting/remoting_webapp_files.gypi b/remoting/remoting_webapp_files.gypi
index f5ff2b0..2f098ae 100644
--- a/remoting/remoting_webapp_files.gypi
+++ b/remoting/remoting_webapp_files.gypi
@@ -83,6 +83,7 @@
     ],
     # UI JavaScript files.
     'remoting_webapp_js_ui_files': [
+      'webapp/base/js/window_shape.js',
       'webapp/crd/js/butter_bar.js',
       'webapp/crd/js/connection_stats.js',
       'webapp/crd/js/feedback.js',
diff --git a/remoting/webapp/base/js/window_shape.js b/remoting/webapp/base/js/window_shape.js
new file mode 100644
index 0000000..e609aef
--- /dev/null
+++ b/remoting/webapp/base/js/window_shape.js
@@ -0,0 +1,104 @@
+// 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.
+
+/**
+ * @fileoverview
+ * Class handling setting of the local app window shape to account for windows
+ * on the remote desktop, as well as any client-side UI.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/** @constructor */
+remoting.WindowShape = function() {
+  /**
+   * @type {Array.<{left: number, top: number, width: number, height: number}>}
+   * @private
+   */
+  this.desktopRects_ = [];
+
+  /**
+   * @type {Array.<remoting.WindowShape.ClientUI>}
+   * @private
+   */
+  this.clientUICallbacks_ = [];
+};
+
+/**
+ * @return {boolean} True if setShape is available.
+ */
+remoting.WindowShape.isSupported = function() {
+  return base.isAppsV2() &&
+      typeof(chrome.app.window.current().setShape) != 'undefined';
+}
+
+/**
+ * Add a client-side UI measurement callback.
+ *
+ * @param {remoting.WindowShape.ClientUI} callback
+ */
+remoting.WindowShape.prototype.addCallback = function(callback) {
+  this.clientUICallbacks_.push(callback);
+  this.updateClientWindowShape();
+};
+
+/**
+ * Set the region associated with the remote desktop windows.
+ *
+ * @param {Array.<{left: number, top: number, width: number, height: number}>}
+ *     rects
+ */
+remoting.WindowShape.prototype.setDesktopRects = function(rects) {
+  this.desktopRects_ = rects;
+  this.updateClientWindowShape();
+};
+
+/**
+ * Update the client window shape.
+ */
+remoting.WindowShape.prototype.updateClientWindowShape = function() {
+  if (!remoting.WindowShape.isSupported()) {
+    return;
+  }
+
+  var rects = this.desktopRects_.slice();
+  for (var i = 0; i < this.clientUICallbacks_.length; ++i) {
+    this.clientUICallbacks_[i].addToRegion(rects);
+  }
+  for (var i = 0; i < rects.length; ++i) {
+    /** @type {ClientRect} */
+    var rect = rects[i];
+    var left = Math.floor(rect.left);
+    var right = Math.ceil(rect.left + rect.width);
+    var top = Math.floor(rect.top);
+    var bottom = Math.ceil(rect.top + rect.height);
+    rects[i] = { left: left,
+                 top: top,
+                 width: right - left,
+                 height: bottom - top };
+  }
+  chrome.app.window.current().setShape({rects: rects});
+};
+
+
+/**
+ * @interface
+ */
+remoting.WindowShape.ClientUI = function () {
+};
+
+/**
+ * Add the context menu's bounding rectangle to the specified region.
+ *
+ * @param {Array.<{left: number, top: number, width: number, height: number}>}
+ *     rects
+ */
+remoting.WindowShape.ClientUI.prototype.addToRegion = function(rects) {};
+
+
+/** @type {remoting.WindowShape} */
+remoting.windowShape = new remoting.WindowShape();
diff --git a/remoting/webapp/crd/js/client_plugin.js b/remoting/webapp/crd/js/client_plugin.js
index 310584b..a154075 100644
--- a/remoting/webapp/crd/js/client_plugin.js
+++ b/remoting/webapp/crd/js/client_plugin.js
@@ -231,6 +231,13 @@ remoting.ClientPlugin.prototype.setDesktopSizeUpdateHandler =
     function(handler) {};
 
 /**
+ * @param {function():void} handler Callback for desktop shape change
+ *     notifications.
+ */
+remoting.ClientPlugin.prototype.setDesktopShapeUpdateHandler =
+    function(handler) {};
+
+/**
  * @param {function(!Array.<string>):void} handler Callback to inform of
  *     capabilities negotiated between host and client.
  */
diff --git a/remoting/webapp/crd/js/client_plugin_impl.js b/remoting/webapp/crd/js/client_plugin_impl.js
index f2a6aac..4e450e2 100644
--- a/remoting/webapp/crd/js/client_plugin_impl.js
+++ b/remoting/webapp/crd/js/client_plugin_impl.js
@@ -81,6 +81,11 @@ remoting.ClientPluginImpl = function(container, onExtensionMessage) {
   /** @private */
   this.onDesktopSizeUpdateHandler_ = function () {};
   /**
+   * @param {Array.<Array.<number>>} rects
+   * @private
+   */
+  this.onDesktopShapeUpdateHandler_ = function (rects) {};
+  /**
    * @param {!Array.<string>} capabilities The negotiated capabilities.
    * @private
    */
@@ -256,6 +261,14 @@ remoting.ClientPluginImpl.prototype.setDesktopSizeUpdateHandler =
 };
 
 /**
+ * @param {function():void} handler
+ */
+remoting.ClientPluginImpl.prototype.setDesktopShapeUpdateHandler =
+    function(handler) {
+  this.onDesktopShapeUpdateHandler_ = handler;
+};
+
+/**
  * @param {function(!Array.<string>):void} handler
  */
 remoting.ClientPluginImpl.prototype.setCapabilitiesHandler = function(handler) {
@@ -426,6 +439,17 @@ remoting.ClientPluginImpl.prototype.handleMessageMethod_ = function(message) {
     this.desktopYDpi_ = getNumberAttr(message.data, 'y_dpi', 96);
     this.onDesktopSizeUpdateHandler_();
 
+  } else if (message.method == 'onDesktopShape') {
+    var rects = getArrayAttr(message.data, 'rects');
+    for (var i = 0; i < rects.length; ++i) {
+      /** @type {Array.<number>} */
+      var rect = rects[i];
+      if (typeof rect != 'object' || rect.length != 4) {
+        throw 'Received invalid onDesktopShape message';
+      }
+    }
+    this.onDesktopShapeUpdateHandler_(rects);
+
   } else if (message.method == 'onPerfStats') {
     // Return value is ignored. These calls will throw an error if the value
     // is not a number.
diff --git a/remoting/webapp/crd/js/client_session.js b/remoting/webapp/crd/js/client_session.js
index 5be8029..7def739 100644
--- a/remoting/webapp/crd/js/client_session.js
+++ b/remoting/webapp/crd/js/client_session.js
@@ -553,6 +553,8 @@ remoting.ClientSession.prototype.onPluginInitialized_ = function(initialized) {
       this.onConnectionStatusUpdate_.bind(this));
   this.plugin_.setRouteChangedHandler(this.onRouteChanged_.bind(this));
   this.plugin_.setConnectionReadyHandler(this.onConnectionReady_.bind(this));
+  this.plugin_.setDesktopShapeUpdateHandler(
+      this.onDesktopShapeChanged_.bind(this));
   this.plugin_.setDesktopSizeUpdateHandler(
       this.onDesktopSizeChanged_.bind(this));
   this.plugin_.setCapabilitiesHandler(this.onSetCapabilities_.bind(this));
@@ -1164,6 +1166,30 @@ remoting.ClientSession.prototype.onDesktopSizeChanged_ = function() {
 };
 
 /**
+ * Sets the non-click-through area of the client in response to notifications
+ * from the plugin of desktop shape changes.
+ *
+ * @private
+ * @param {Array.<Array.<number>>} rects List of rectangles comprising the
+ *     desktop shape.
+ * @return {void} Nothing.
+ */
+remoting.ClientSession.prototype.onDesktopShapeChanged_ = function(rects) {
+  // Build the list of rects for the input region.
+  var inputRegion = [];
+  for (var i = 0; i < rects.length; ++i) {
+    var rect = {};
+    rect.left = rects[i][0];
+    rect.top = rects[i][1];
+    rect.width = rects[i][2];
+    rect.height = rects[i][3];
+    inputRegion.push(rect);
+  }
+
+  remoting.windowShape.setDesktopRects(inputRegion);
+};
+
+/**
  * Refreshes the plugin's dimensions, taking into account the sizes of the
  * remote desktop and client window, and the current scale-to-fit setting.
  *
diff --git a/remoting/webapp/crd/js/connection_stats.js b/remoting/webapp/crd/js/connection_stats.js
index 87011f2..8b144c4 100644
--- a/remoting/webapp/crd/js/connection_stats.js
+++ b/remoting/webapp/crd/js/connection_stats.js
@@ -14,6 +14,7 @@ var remoting = remoting || {};
 
 /**
  * @constructor
+ * @implements {remoting.WindowShape.ClientUI}
  * @param {Element} statsElement The HTML div to which to update stats.
  */
 remoting.ConnectionStats = function(statsElement) {
@@ -27,6 +28,8 @@ remoting.ConnectionStats = function(statsElement) {
    * @private
    */
   this.mostRecent_ = null
+
+  remoting.windowShape.addCallback(this);
 };
 
 /**
@@ -45,6 +48,19 @@ remoting.ConnectionStats.prototype.toggle = function() {
 };
 
 /**
+ * If the stats panel is visible, add its bounding rectangle to the specified
+ * region.
+ * @param {Array.<{left: number, top: number, width: number, height: number}>}
+ *     rects List of rectangles.
+ */
+
+remoting.ConnectionStats.prototype.addToRegion = function(rects) {
+  if (!this.statsElement_.hidden) {
+    rects.push(this.statsElement_.getBoundingClientRect());
+  }
+};
+
+/**
  * Update the statistics panel.
  * @param {remoting.ClientSession.PerfStats} stats The connection statistics.
  */
diff --git a/remoting/webapp/crd/js/remoting.js b/remoting/webapp/crd/js/remoting.js
index d04e32d..f80922f 100644
--- a/remoting/webapp/crd/js/remoting.js
+++ b/remoting/webapp/crd/js/remoting.js
@@ -32,6 +32,7 @@ function consentRequired_(authContinue) {
     dialog.hidden = true;
     button.removeEventListener('click', consentGranted, false);
     authContinue();
+    remoting.windowShape.updateClientWindowShape();
   };
   dialog.hidden = false;
   button.addEventListener('click', consentGranted, false);
@@ -107,6 +108,8 @@ remoting.init = function() {
   }
   remoting.identity.getEmail(remoting.onEmail, onGetEmailError);
 
+  remoting.windowShape.updateClientWindowShape();
+
   remoting.showOrHideIT2MeUi();
   remoting.showOrHideMe2MeUi();