Implement apps v2 custom window frame.

remoting/webapp/client_session.js

 // Copyright (c) 2012 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 creation and teardown of a remoting client session.
  *
  * The ClientSession class controls lifetime of the client plugin
  * object and provides the plugin with the functionality it needs to
@@ skipping 160 matching lines @@
  *
  * TODO(jamiewalch): crbug.com/252796: Remove this once crbug.com/240772 is
  * fixed.
  */
 remoting.ClientSession.prototype.updateScrollbarVisibility = function() {
   var needsVerticalScroll = false;
   var needsHorizontalScroll = false;
   if (!this.shrinkToFit_) {
     // Determine whether or not horizontal or vertical scrollbars are
     // required, taking into account their width.
-    needsVerticalScroll = window.innerHeight < this.plugin_.desktopHeight;
-    needsHorizontalScroll = window.innerWidth < this.plugin_.desktopWidth;
+    var clientArea = this.getClientArea_();
+    needsVerticalScroll = clientArea.height < this.plugin_.desktopHeight;
+    needsHorizontalScroll = clientArea.width < this.plugin_.desktopWidth;
     var kScrollBarWidth = 16;
     if (needsHorizontalScroll && !needsVerticalScroll) {
       needsVerticalScroll =
-          window.innerHeight - kScrollBarWidth < this.plugin_.desktopHeight;
+          clientArea.height - kScrollBarWidth < this.plugin_.desktopHeight;
     } else if (!needsHorizontalScroll && needsVerticalScroll) {
       needsHorizontalScroll =
-          window.innerWidth - kScrollBarWidth < this.plugin_.desktopWidth;
+          clientArea.width - kScrollBarWidth < this.plugin_.desktopWidth;
     }
   }
 
-  var htmlNode = /** @type {HTMLElement} */ (document.documentElement);
+  var scroller = document.getElementById('scroller');
   if (needsHorizontalScroll) {
-    htmlNode.classList.remove('no-horizontal-scroll');
+    scroller.classList.remove('no-horizontal-scroll');
   } else {
-    htmlNode.classList.add('no-horizontal-scroll');
+    scroller.classList.add('no-horizontal-scroll');
   }
   if (needsVerticalScroll) {
-    htmlNode.classList.remove('no-vertical-scroll');
+    scroller.classList.remove('no-vertical-scroll');
   } else {
-    htmlNode.classList.add('no-vertical-scroll');
+    scroller.classList.add('no-vertical-scroll');
   }
 };
 
 // Note that the positive values in both of these enums are copied directly
 // from chromoting_scriptable_object.h and must be kept in sync. The negative
 // values represent state transitions that occur within the web-app that have
 // no corresponding plugin state transition.
 /** @enum {number} */
 remoting.ClientSession.State = {
   CONNECTION_CANCELED: -3,  // Connection closed (gracefully) before connecting.
@@ skipping 333 matching lines @@
       'click', this.callToggleFullScreen_, false);
 
   // Leave full-screen mode, and stop listening for related events.
   var listener = this.callOnFullScreenChanged_;
   remoting.fullscreen.syncWithMaximize(false);
   remoting.fullscreen.activate(
       false,
       function() {
         remoting.fullscreen.removeListener(listener);
       });
+  if (remoting.titleBar) {
+    remoting.titleBar.setClientSession(null);
+  }
 
   // Remove mediasource-rendering class from video-contained - this will also
   // hide the <video> element.
   /** @type {HTMLElement} */(document.getElementById('video-container'))
       .classList.remove('mediasource-rendering');
 };
 
 /**
  * Deletes the <embed> element from the container and disconnects.
  *
@@ skipping 165 matching lines @@
  * @param {boolean} resizeToClient True if window resizes should cause the
  *     host to attempt to resize its desktop to match the client window size;
  *     false to disable this behaviour for subsequent window resizes--the
  *     current host desktop size is not restored in this case.
  * @return {void} Nothing.
  * @private
  */
 remoting.ClientSession.prototype.setScreenMode_ =
     function(shrinkToFit, resizeToClient) {
   if (resizeToClient && !this.resizeToClient_) {
-    this.plugin_.notifyClientResolution(window.innerWidth,
-                                       window.innerHeight,
-                                       window.devicePixelRatio);
+    var clientArea = this.getClientArea_();
+    this.plugin_.notifyClientResolution(clientArea.width,
+                                        clientArea.height,
+                                        window.devicePixelRatio);
   }
 
   // If enabling shrink, reset bump-scroll offsets.
   var needsScrollReset = shrinkToFit && !this.shrinkToFit_;
 
   this.shrinkToFit_ = shrinkToFit;
   this.resizeToClient_ = resizeToClient;
   this.updateScrollbarVisibility();
 
   if (this.hostId_ != '') {
@@ skipping 164 matching lines @@
  * @private
  * @param {number} status The plugin's status.
  * @param {number} error The plugin's error state, if any.
  */
 remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     function(status, error) {
   if (status == remoting.ClientSession.State.CONNECTED) {
     this.setFocusHandlers_();
     this.onDesktopSizeChanged_();
     if (this.resizeToClient_) {
-      this.plugin_.notifyClientResolution(window.innerWidth,
-                                         window.innerHeight,
-                                         window.devicePixelRatio);
+      var clientArea = this.getClientArea_();
+      this.plugin_.notifyClientResolution(clientArea.width,
+                                          clientArea.height,
+                                          window.devicePixelRatio);
     }
-    // Start listening for full-screen related events.
+    // Activate full-screen related UX.
     remoting.fullscreen.addListener(this.callOnFullScreenChanged_);
     remoting.fullscreen.syncWithMaximize(true);
+    if (remoting.titleBar) {
+      remoting.titleBar.setClientSession(this);
+    }
+
   } else if (status == remoting.ClientSession.State.FAILED) {
     switch (error) {
       case remoting.ClientSession.ConnectionError.HOST_IS_OFFLINE:
         this.error_ = remoting.Error.HOST_IS_OFFLINE;
         break;
       case remoting.ClientSession.ConnectionError.SESSION_REJECTED:
         this.error_ = remoting.Error.INVALID_ACCESS_CODE;
         break;
       case remoting.ClientSession.ConnectionError.INCOMPATIBLE_PROTOCOL:
         this.error_ = remoting.Error.INCOMPATIBLE_PROTOCOL;
@@ skipping 36 matching lines @@
  */
 remoting.ClientSession.prototype.onSetCapabilities_ = function(capabilities) {
   if (this.capabilities_ != null) {
     console.error('onSetCapabilities_() is called more than once');
     return;
   }
 
   this.capabilities_ = capabilities;
   if (this.hasCapability_(
       remoting.ClientSession.Capability.SEND_INITIAL_RESOLUTION)) {
-    this.plugin_.notifyClientResolution(window.innerWidth,
-                                       window.innerHeight,
-                                       window.devicePixelRatio);
+    var clientArea = this.getClientArea_();
+    this.plugin_.notifyClientResolution(clientArea.width,
+                                        clientArea.height,
+                                        window.devicePixelRatio);
   }
 };
 
 /**
  * @private
  * @param {remoting.ClientSession.State} newState The new state for the session.
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.setState_ = function(newState) {
   var oldState = this.state_;
@@ skipping 37 matching lines @@
   }
 
   // Defer notifying the host of the change until the window stops resizing, to
   // avoid overloading the control channel with notifications.
   if (this.resizeToClient_) {
     var kResizeRateLimitMs = 1000;
     if (this.hasCapability_(
         remoting.ClientSession.Capability.RATE_LIMIT_RESIZE_REQUESTS)) {
       kResizeRateLimitMs = 250;
     }
+    var clientArea = this.getClientArea_();
     this.notifyClientResolutionTimer_ = window.setTimeout(
         this.plugin_.notifyClientResolution.bind(this.plugin_,
-                                                 window.innerWidth,
-                                                 window.innerHeight,
+                                                 clientArea.width,
+                                                 clientArea.height,
                                                  window.devicePixelRatio),
         kResizeRateLimitMs);
   }
 
   // If bump-scrolling is enabled, adjust the plugin margins to fully utilize
   // the new window area.
   this.resetScroll_();
 
   this.updateScrollbarVisibility();
 };
@@ skipping 44 matching lines @@
  * remote desktop and client window, and the current scale-to-fit setting.
  *
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.updateDimensions = function() {
   if (this.plugin_.desktopWidth == 0 ||
       this.plugin_.desktopHeight == 0) {
     return;
   }
 
-  var windowWidth = window.innerWidth;
-  var windowHeight = window.innerHeight;
+  var clientArea = this.getClientArea_();
   var desktopWidth = this.plugin_.desktopWidth;
   var desktopHeight = this.plugin_.desktopHeight;
 
   // When configured to display a host at its original size, we aim to display
   // it as close to its physical size as possible, without losing data:
   // - If client and host have matching DPI, render the host pixel-for-pixel.
   // - If the host has higher DPI then still render pixel-for-pixel.
   // - If the host has lower DPI then let Chrome up-scale it to natural size.
 
   // We specify the plugin dimensions in Density-Independent Pixels, so to
   // render pixel-for-pixel we need to down-scale the host dimensions by the
   // devicePixelRatio of the client. To match the host pixel density, we choose
   // an initial scale factor based on the client devicePixelRatio and host DPI.
 
   // Determine the effective device pixel ratio of the host, based on DPI.
   var hostPixelRatioX = Math.ceil(this.plugin_.desktopXDpi / 96);
   var hostPixelRatioY = Math.ceil(this.plugin_.desktopYDpi / 96);
   var hostPixelRatio = Math.min(hostPixelRatioX, hostPixelRatioY);
 
   // Down-scale by the smaller of the client and host ratios.
   var scale = 1.0 / Math.min(window.devicePixelRatio, hostPixelRatio);
 
   if (this.shrinkToFit_) {
     // Reduce the scale, if necessary, to fit the whole desktop in the window.
-    var scaleFitWidth = Math.min(scale, 1.0 * windowWidth / desktopWidth);
-    var scaleFitHeight = Math.min(scale, 1.0 * windowHeight / desktopHeight);
+    var scaleFitWidth = Math.min(scale, 1.0 * clientArea.width / desktopWidth);
+    var scaleFitHeight =
+        Math.min(scale, 1.0 * clientArea.height / desktopHeight);
     scale = Math.min(scaleFitHeight, scaleFitWidth);
 
     // If we're running full-screen then try to handle common side-by-side
     // multi-monitor combinations more intelligently.
     if (remoting.fullscreen.isActive()) {
       // If the host has two monitors each the same size as the client then
       // scale-to-fit will have the desktop occupy only 50% of the client area,
       // in which case it would be preferable to down-scale less and let the
       // user bump-scroll around ("scale-and-pan").
       // Triggering scale-and-pan if less than 65% of the client area would be
@@ skipping 138 matching lines @@
    */
   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 };
+  var clientArea = this.getClientArea_();
   style.marginLeft = adjustMargin(style.marginLeft, dx,
-                                  window.innerWidth, plugin.clientWidth, stopX);
+                                  clientArea.width, plugin.clientWidth, stopX);
 
   var stopY = { stop: false };
-  style.marginTop = adjustMargin(style.marginTop, dy,
-                                window.innerHeight, plugin.clientHeight, stopY);
+  style.marginTop = adjustMargin(
+      style.marginTop, dy, clientArea.height, plugin.clientHeight, stopY);
   return stopX.stop && stopY.stop;
 };
 
 remoting.ClientSession.prototype.resetScroll_ = function() {
   if (this.plugin_) {
     var plugin = this.plugin_.element();
     plugin.style.marginTop = '0px';
     plugin.style.marginLeft = '0px';
   }
 };
@@ skipping 36 matching lines @@
   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);
+  var clientArea = this.getClientArea_();
+  var dx = computeDelta(event.x, clientArea.width);
+  var dy = computeDelta(event.y, clientArea.height);
 
   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.
      * @param {number} expected The time at which we expect to be called.
      */
     var repeatScroll = function(expected) {
@@ skipping 57 matching lines @@
  * supported.
  * @private
  */
 remoting.ClientSession.prototype.createGnubbyAuthHandler_ = function() {
   if (this.mode_ == remoting.ClientSession.Mode.ME2ME) {
     this.gnubbyAuthHandler_ = new remoting.GnubbyAuthHandler(this);
     // TODO(psj): Move to more generic capabilities mechanism.
     this.sendGnubbyAuthMessage({'type': 'control', 'option': 'auth-v1'});
   }
 };
+
+/**
+ * @return {{width: number, height: number}} The height of the window's client
+ *     area. This differs between apps v1 and apps v2 due to the custom window
+ *     borders used by the latter.
+ * @private
+ */
+remoting.ClientSession.prototype.getClientArea_ = function() {
+  return remoting.titleBar ?
+      remoting.titleBar.getClientArea() :
+      { 'width': window.innerWidth, 'height': window.innerHeight };
+}