remoting.WindowShape clean up.

remoting/webapp/base/js/window_shape.js

Index: remoting/webapp/base/js/window_shape.js
diff --git a/remoting/webapp/base/js/window_shape.js b/remoting/webapp/base/js/window_shape.js
index ee15a0f436c85c13ed0ad815cdc4cda1cebeef66..677038d027a87c182ace83fdb83171061a5bd607 100644
--- a/remoting/webapp/base/js/window_shape.js
+++ b/remoting/webapp/base/js/window_shape.js
@@ -20,7 +20,7 @@ remoting.WindowShape = function() {
   this.desktopRects_ = [];
 
   /** @private {Array<remoting.WindowShape.ClientUI>} */
-  this.clientUICallbacks_ = [];
+  this.clientUIs_ = [];
 };
 
 /**
@@ -31,15 +31,67 @@ remoting.WindowShape.isSupported = function() {
   return base.isAppsV2() &&
       typeof(chrome.app.window.current().setShape) != 'undefined' &&
       !remoting.platformIsMac();
-}
+};
 
 /**
- * Add a client-side UI measurement callback.
+ * Adds a client-side UI.

[garykac, 2015/05/19 00:39:53]

The other comments are active: "Center align the...", "Set the region...", "Add
the context menu...".

For consistency, this should remain "Add a client-side UI."

  *
  * @param {remoting.WindowShape.ClientUI} callback
  */
-remoting.WindowShape.prototype.addCallback = function(callback) {
-  this.clientUICallbacks_.push(callback);
+remoting.WindowShape.prototype.registerClientUI = function(callback) {
+  if (this.clientUIs_.indexOf(callback) === -1) {
+    this.clientUIs_.push(callback);
+    this.updateClientWindowShape();
+  }
+};
+
+/**
+ * Removes a client-side UI.
+ *
+ * @param {remoting.WindowShape.ClientUI} callback
+ */
+remoting.WindowShape.prototype.unregisterClientUI = function(callback) {
+  var index = this.clientUIs_.indexOf(callback);
+  this.clientUIs_.splice(index, 1);
+  this.updateClientWindowShape();
+};
+
+/**
+ * Center align a DOM element to the desktop shape.
+ *
+ * @param {HTMLElement} element
+ */
+remoting.WindowShape.prototype.centerToDesktop = function(element) {
+  var desktop = {
+    left: Number.MAX_VALUE,
+    right: Number.MIN_VALUE,
+    top: Number.MAX_VALUE,
+    bottom: Number.MIN_VALUE
+  };
+
+  // If there is no desktop window, center it to the current viewport.
+  if (this.desktopRects_.length === 0) {
+    desktop.left = 0;
+    desktop.right = window.innerWidth;
+    desktop.top = 0;
+    desktop.bottom = window.innerHeight;
+  } else {
+    // Compute the union of the bounding rects of all desktop windows.
+    this.desktopRects_.forEach(function(
+        /**{left: number, top: number, width: number, height: number}*/ rect) {
+      desktop.left = Math.min(rect.left, desktop.left);
+      desktop.right = Math.max(rect.left + rect.width, desktop.right);
+      desktop.top = Math.min(rect.top, desktop.top);
+      desktop.bottom = Math.max(rect.top + rect.height, desktop.bottom);
+    });
+  }
+
+  // Center the element to the desktop window bounding rect.
+  var rect = element.getBoundingClientRect();
+  var left = (desktop.right - desktop.left - rect.width) / 2 + desktop.left;
+  var top = (desktop.bottom - desktop.top - rect.height) / 2 + desktop.top;
+  element.style.left = left + 'px';
+  element.style.top = top + 'px';
   this.updateClientWindowShape();
 };
 
@@ -63,8 +115,8 @@ remoting.WindowShape.prototype.updateClientWindowShape = function() {
   }
 
   var rects = this.desktopRects_.slice();
-  for (var i = 0; i < this.clientUICallbacks_.length; ++i) {
-    this.clientUICallbacks_[i].addToRegion(rects);
+  for (var i = 0; i < this.clientUIs_.length; ++i) {
+    this.clientUIs_[i].addToRegion(rects);
   }
   for (var i = 0; i < rects.length; ++i) {
     var rect = /** @type {ClientRect} */ (rects[i]);