Implement apps v2 custom window frame.

remoting/webapp/title_bar.js

Index: remoting/webapp/title_bar.js
diff --git a/remoting/webapp/title_bar.js b/remoting/webapp/title_bar.js
new file mode 100644
index 0000000000000000000000000000000000000000..067bdf72e698b0d28db2b6e14fbf43d49c89b2d7
--- /dev/null
+++ b/remoting/webapp/title_bar.js
@@ -0,0 +1,153 @@
+// 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
+ * Apps v2 custom title bar implementation
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ */
+remoting.TitleBar = function() {
+  /**
+   * @type {remoting.ClientSession}
+   * @private
+   */
+  this.clientSession_ = null;

[kelvinp, 2014/05/06 04:42:15]

It seems like this is only used as a boolean to indicate whether we are
connected or not.  IMO, I think the TitleBar should as at little knowledge about
the app as possible.

What about exposing method called showDisconnectButton on the title bar instead,
so that the ClientSession can call it when the connection state changes?

[Jamie, 2014/05/06 21:11:08]

I've renamed it to setConnected. I had originally wanted a reference to the
client session because it has a disconnect method. Unfortunately, that method
doesn't do the necessary DOM clean-up, so we have to call the global
remoting.disconnect instead, which is ugly but it does mean that the client
session reference is no longer needed, as you point out.

+
+  /**
+   * @type {Array.<{id:string, fn: function()}>}
+   */
+  var handlers = [
+    { id: 'window-disconnect', fn: this.disconnectSession_.bind(this) },
+    { id: 'window-maximize-restore',
+      fn: this.maximizeOrRestoreWindow_.bind(this) },
+    { id: 'window-minimize', fn: this.minimizeWindow_.bind(this) },
+    { id: 'window-close', fn: window.close.bind(window) },
+    { id: 'window-controls-stub', fn: this.toggleWindowControls_.bind(this) }
+  ];
+  for (var i = 0; i < handlers.length; ++i) {
+    var element = document.getElementById(handlers[i].id);
+    element.addEventListener('click', handlers[i].fn, false);
+  }
+
+  // Ensure that tool-tips are always correct.
+  this.updateMaximizeOrRestoreIconTitle_();
+  chrome.app.window.current().onMaximized.addListener(
+      this.updateMaximizeOrRestoreIconTitle_.bind(this));
+  chrome.app.window.current().onRestored.addListener(
+      this.updateMaximizeOrRestoreIconTitle_.bind(this));
+  chrome.app.window.current().onFullscreened.addListener(
+      this.updateMaximizeOrRestoreIconTitle_.bind(this));
+};
+
+/**
+ * @param {remoting.ClientSession} clientSession The current session, or null
+ *     if there is no active session.
+ */
+remoting.TitleBar.prototype.setClientSession = function(clientSession) {
+  this.clientSession_ = clientSession;
+  if (this.clientSession_) {
+    document.body.classList.add('connected');
+  } else {
+    document.body.classList.remove('connected');
+  }
+  this.updateMaximizeOrRestoreIconTitle_();
+};
+
+/**
+ * @return {{width: number, height: number}} The size of the window, ignoring
+ *     the title-bar and window borders, if visible.
+ */
+remoting.TitleBar.prototype.getClientArea = function() {

[kelvinp, 2014/05/06 04:42:15]

It seems a bit odd to have a getClientArea method on a class called TitleBar.  I
think remoting.AppWindow seems like a better name for this class. 

[Jamie, 2014/05/06 21:11:08]

I've gone with WindowFrame instead, since AppWindow is already a class in the
chrome namespace with very different semantics.

+  if (chrome.app.window.current().isFullscreen()) {
+    return { 'height': window.innerHeight, 'width': window.innerWidth };
+  } else {
+    var kBorderWidth = 1;
+    var titleBar = document.getElementById('title-bar');
+    base.debug.assert(titleBar != null);
+    return {
+      'height': window.innerHeight - titleBar.clientHeight - 2 * kBorderWidth,
+      'width': window.innerWidth - 2 * kBorderWidth
+    };
+  }
+};
+
+/**
+ * @private
+ */
+remoting.TitleBar.prototype.disconnectSession_ = function() {
+  remoting.disconnect();
+};
+
+/**
+ * @private
+ */
+remoting.TitleBar.prototype.maximizeOrRestoreWindow_ = function() {
+  /** @type {boolean} */
+  var restore =
+      chrome.app.window.current().isFullscreen() ||

[kelvinp, 2014/05/06 04:42:15]

It seems a bit odd that some of the fullscreen management is done via
remoting.fullscreen but some is done through chrome.app.window.current().  Can
we unify the two?  May be remoting.TitleBar can call into remoting.fullScreen?

[Jamie, 2014/05/06 21:11:08]

Since we don't encapsulate the maximized state, I think it would be more strange
to use remoting.FullScreen for the full-screen state, but chrome.AppWindow for
the maximized state. I prefer to leave this as-it; LMK if you feel strongly
about it.

+      chrome.app.window.current().isMaximized();
+  if (restore) {
+    // Restore twice: once to exit full-screen and once to exit maximized.
+    // If the app is not full-screen, or went full-screen without first
+    // being maximized, then the second restore has no effect.
+    chrome.app.window.current().restore();
+    chrome.app.window.current().restore();
+  } else {
+    chrome.app.window.current().maximize();
+  }
+};
+
+/**
+ * @private
+ */
+remoting.TitleBar.prototype.minimizeWindow_ = function() {
+  chrome.app.window.current().minimize();
+};
+
+/**
+ * @private
+ */
+remoting.TitleBar.prototype.restoreWindow_ = function() {
+  chrome.app.window.current().restore();
+};
+
+/**
+ * @private
+ */
+remoting.TitleBar.prototype.toggleWindowControls_ = function() {
+  document.getElementById('window-controls').classList.toggle('opened');
+};
+
+/**
+ * Update the tool-top for the maximize/full-screen/restore icon to reflect
+ * its current behaviour.
+ *
+ * @private
+ */
+remoting.TitleBar.prototype.updateMaximizeOrRestoreIconTitle_ = function() {
+  var icon = document.getElementById('window-maximize-restore');
+  /** @type {string} */
+  var tag = '';
+  if (chrome.app.window.current().isFullscreen()) {
+    tag = /*i18n-content*/'EXIT_FULL_SCREEN';
+  } else if (chrome.app.window.current().isMaximized()) {
+    tag = /*i18n-content*/'RESTORE_WINDOW';
+  } else if (this.clientSession_) {
+    tag = /*i18n-content*/'FULL_SCREEN';
+  } else {
+    tag = /*i18n-content*/'MAXIMIZE_WINDOW';
+  }
+  icon.title = l10n.getTranslationOrError(tag);
+};
+
+/** @type {remoting.TitleBar} */
+remoting.titleBar = null;