Refactor tool-bar event handlers.

The tool-bar is being phased out as part of the apps v2 work, but as
part of the transition, the functionality it provides needs to be shared
between it and the window frame. Step one is to disentangle some of the
event handling code from client_session.js and toolbar.js.

NOTRY=true

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@277797 0039d316-1c4b-4281-b951-d872f2087c98

remoting/remoting_webapp_files.gypi

@@ -88,6 +88,7 @@
       'webapp/fullscreen_v2.js',
       'webapp/l10n.js',
       'webapp/menu_button.js',
+      'webapp/options_menu.js',
       'webapp/ui_mode.js',
       'webapp/toolbar.js',
       'webapp/window_frame.js',

remoting/webapp/client_screen.js

@@ -76,30 +76,6 @@ remoting.disconnect = function() {
   console.log('Disconnected.');
 };
 
-/**
- * Sends a Ctrl-Alt-Del sequence to the remoting client.
- *
- * @return {void} Nothing.
- */
-remoting.sendCtrlAltDel = function() {
-  if (remoting.clientSession) {
-    console.log('Sending Ctrl-Alt-Del.');
-    remoting.clientSession.sendCtrlAltDel();
-  }
-};
-
-/**
- * Sends a Print Screen keypress to the remoting client.
- *
- * @return {void} Nothing.
- */
-remoting.sendPrintScreen = function() {
-  if (remoting.clientSession) {
-    console.log('Sending Print Screen.');
-    remoting.clientSession.sendPrintScreen();
-  }
-};
-
 /**
  * Callback function called when the state of the client plugin changes. The
  * current and previous states are available via the |state| member variable.
@@ -335,8 +311,6 @@ remoting.onConnected = function(clientSession) {
   remoting.clientSession = clientSession;
   remoting.clientSession.addEventListener('stateChanged', onClientStateChange_);
   setConnectionInterruptedButtonsText_();
-  var connectedTo = document.getElementById('connected-to');
-  connectedTo.innerText = remoting.connector.getHostDisplayName();
   document.getElementById('access-code-entry').value = '';
   remoting.setMode(remoting.AppMode.IN_SESSION);
   remoting.toolbar.center();

remoting/webapp/client_session.js

@@ -23,6 +23,7 @@
 var remoting = remoting || {};
 
 /**
+ * @param {string} hostDisplayName A human-readable name for the host.
  * @param {string} accessCode The IT2Me access code. Blank for Me2Me.
  * @param {function(boolean, function(string): void): void} fetchPin
  *     Called by Me2Me connections when a PIN needs to be obtained
@@ -46,8 +47,8 @@ var remoting = remoting || {};
  * @constructor
  * @extends {base.EventSource}
  */
-remoting.ClientSession = function(accessCode, fetchPin, fetchThirdPartyToken,
-                                  authenticationMethods,
+remoting.ClientSession = function(hostDisplayName, accessCode, fetchPin,
+                                  fetchThirdPartyToken, authenticationMethods,
                                   hostId, hostJid, hostPublicKey, mode,
                                   clientPairingId, clientPairedSecret) {
   /** @private */
@@ -56,6 +57,8 @@ remoting.ClientSession = function(accessCode, fetchPin, fetchThirdPartyToken,
   /** @private */
   this.error_ = remoting.Error.NONE;
 
+  /** @private */
+  this.hostDisplayName_ = hostDisplayName;
   /** @private */
   this.hostJid_ = hostJid;
   /** @private */
@@ -109,8 +112,6 @@ remoting.ClientSession = function(accessCode, fetchPin, fetchThirdPartyToken,
   /** @private */
   this.callPluginGotFocus_ = this.pluginGotFocus_.bind(this);
   /** @private */
-  this.callSetScreenMode_ = this.onSetScreenMode_.bind(this);
-  /** @private */
   this.callToggleFullScreen_ = remoting.fullscreen.toggle.bind(
       remoting.fullscreen);
   /** @private */
@@ -144,12 +145,8 @@ remoting.ClientSession = function(accessCode, fetchPin, fetchThirdPartyToken,
     this.resizeToClientButton_.hidden = true;
   } else {
     this.resizeToClientButton_.hidden = false;
-    this.resizeToClientButton_.addEventListener(
-        'click', this.callSetScreenMode_, false);
   }
 
-  this.shrinkToFitButton_.addEventListener(
-      'click', this.callSetScreenMode_, false);
   this.fullScreenButton_.addEventListener(
       'click', this.callToggleFullScreen_, false);
   this.defineEvents(Object.keys(remoting.ClientSession.Events));
@@ -163,6 +160,15 @@ remoting.ClientSession.Events = {
   videoChannelStateChanged: 'videoChannelStateChanged'
 };
 
+/**
+ * Get host display name.
+ *
+ * @return {string}
+ */
+remoting.ClientSession.prototype.getHostDisplayName = function() {
+  return this.hostDisplayName_;
+};
+
 /**
  * Called when the window or desktop size or the scaling settings change,
  * to set the scroll-bar visibility.
@@ -202,6 +208,20 @@ remoting.ClientSession.prototype.updateScrollbarVisibility = function() {
   }
 };
 
+/**
+ * @return {boolean} True if shrink-to-fit is enabled; false otherwise.
+ */
+remoting.ClientSession.prototype.getShrinkToFit = function() {
+  return this.shrinkToFit_;
+};
+
+/**
+ * @return {boolean} True if resize-to-client is enabled; false otherwise.
+ */
+remoting.ClientSession.prototype.getResizeToClient = function() {
+  return this.resizeToClient_;
+};
+
 // 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
@@ -563,10 +583,6 @@ remoting.ClientSession.prototype.removePlugin = function() {
   }
 
   // Delete event handlers that aren't relevent when not connected.
-  this.resizeToClientButton_.removeEventListener(
-      'click', this.callSetScreenMode_, false);
-  this.shrinkToFitButton_.removeEventListener(
-      'click', this.callSetScreenMode_, false);
   this.fullScreenButton_.removeEventListener(
       'click', this.callToggleFullScreen_, false);
 
@@ -581,6 +597,7 @@ remoting.ClientSession.prototype.removePlugin = function() {
   if (remoting.windowFrame) {
     remoting.windowFrame.setConnected(false);
   }
+  remoting.toolbar.setClientSession(null);
 
   // Remove mediasource-rendering class from video-contained - this will also
   // hide the <video> element.
@@ -676,6 +693,7 @@ remoting.ClientSession.prototype.sendKeyCombination_ = function(keys) {
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.sendCtrlAltDel = function() {
+  console.log('Sending Ctrl-Alt-Del.');
   this.sendKeyCombination_([0x0700e0, 0x0700e2, 0x07004c]);
 }
 
@@ -685,6 +703,7 @@ remoting.ClientSession.prototype.sendCtrlAltDel = function() {
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.sendPrintScreen = function() {
+  console.log('Sending Print Screen.');
   this.sendKeyCombination_([0x070046]);
 }
 
@@ -746,26 +765,6 @@ remoting.ClientSession.prototype.applyRemapKeys_ = function(apply) {
   }
 }
 
-/**
- * Callback for the two "screen mode" related menu items: Resize desktop to
- * fit and Shrink to fit.
- *
- * @param {Event} event The click event indicating which mode was selected.
- * @return {void} Nothing.
- * @private
- */
-remoting.ClientSession.prototype.onSetScreenMode_ = function(event) {
-  var shrinkToFit = this.shrinkToFit_;
-  var resizeToClient = this.resizeToClient_;
-  if (event.target == this.shrinkToFitButton_) {
-    shrinkToFit = !shrinkToFit;
-  }
-  if (event.target == this.resizeToClientButton_) {
-    resizeToClient = !resizeToClient;
-  }
-  this.setScreenMode_(shrinkToFit, resizeToClient);
-};
-
 /**
  * Set the shrink-to-fit and resize-to-client flags and save them if this is
  * a Me2Me connection.
@@ -778,9 +777,8 @@ remoting.ClientSession.prototype.onSetScreenMode_ = function(event) {
  *     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_ =
+remoting.ClientSession.prototype.setScreenMode =
     function(shrinkToFit, resizeToClient) {
   if (resizeToClient && !this.resizeToClient_) {
     var clientArea = this.getClientArea_();
@@ -982,6 +980,7 @@ remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     if (remoting.windowFrame) {
       remoting.windowFrame.setConnected(true);
     }
+    remoting.toolbar.setClientSession(this);
 
   } else if (status == remoting.ClientSession.State.FAILED) {
     switch (error) {

remoting/webapp/event_handlers.js

@@ -91,6 +91,7 @@ function onLoad() {
   var auth_actions = [
       { event: 'click', id: 'auth-button', fn: doAuthRedirect },
       { event: 'click', id: 'cancel-connect-button', fn: goHome },
+      { event: 'click', id: 'sign-out', fn:remoting.signOut },
       { event: 'click', id: 'token-refresh-error-ok', fn: goHome },
       { event: 'click', id: 'token-refresh-error-sign-in', fn: doAuthRedirect }
   ];

remoting/webapp/options_menu.js

+// 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 the in-session options menu (or menus in the case of apps v1).
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {HTMLElement} sendCtrlAltDel
+ * @param {HTMLElement} sendPrtScrn
+ * @param {HTMLElement} resizeToClient
+ * @param {HTMLElement} shrinkToFit
+ * @param {HTMLElement?} fullscreen
+ * @constructor
+ */
+remoting.OptionsMenu = function(sendCtrlAltDel, sendPrtScrn,
+                                resizeToClient, shrinkToFit, fullscreen) {
+  this.sendCtrlAltDel_ = sendCtrlAltDel;
+  this.sendPrtScrn_ = sendPrtScrn;
+  this.resizeToClient_ = resizeToClient;
+  this.shrinkToFit_ = shrinkToFit;
+  this.fullscreen_ = fullscreen;
+  /**
+   * @type {remoting.ClientSession}
+   * @private
+   */
+  this.clientSession_ = null;
+
+  this.sendCtrlAltDel_.addEventListener(
+      'click', this.onSendCtrlAltDel_.bind(this), false);
+  this.sendPrtScrn_.addEventListener(
+      'click', this.onSendPrtScrn_.bind(this), false);
+  this.resizeToClient_.addEventListener(
+      'click', this.onResizeToClient_.bind(this), false);
+  this.shrinkToFit_.addEventListener(
+      'click', this.onShrinkToFit_.bind(this), false);
+  if (this.fullscreen_) {
+    this.fullscreen_.addEventListener(
+        'click', this.onFullscreen_.bind(this), false);
+  }
+};
+
+/**
+ * @param {remoting.ClientSession} clientSession The active session, or null if
+ *     there is no connection.
+ */
+remoting.OptionsMenu.prototype.setClientSession = function(clientSession) {
+  this.clientSession_ = clientSession;
+};
+
+remoting.OptionsMenu.prototype.onShow = function() {
+  if (this.clientSession_) {
+    remoting.MenuButton.select(
+        this.resizeToClient_, this.clientSession_.getResizeToClient());
+    remoting.MenuButton.select(
+        this.shrinkToFit_, this.clientSession_.getShrinkToFit());
+    if (this.fullscreen_) {
+      remoting.MenuButton.select(
+          this.fullscreen_, remoting.fullscreen.isActive());
+    }
+  }
+};
+
+remoting.OptionsMenu.prototype.onSendCtrlAltDel_ = function() {
+  if (this.clientSession_) {
+    this.clientSession_.sendCtrlAltDel();
+  }
+};
+
+remoting.OptionsMenu.prototype.onSendPrtScrn_ = function() {
+  if (this.clientSession_) {
+    this.clientSession_.sendPrintScreen();
+  }
+};
+
+remoting.OptionsMenu.prototype.onResizeToClient_ = function() {
+  if (this.clientSession_) {
+    this.clientSession_.setScreenMode(this.clientSession_.getShrinkToFit(),
+                                      !this.clientSession_.getResizeToClient());
+  }
+};
+
+remoting.OptionsMenu.prototype.onShrinkToFit_ = function() {
+  if (this.clientSession_) {
+    this.clientSession_.setScreenMode(!this.clientSession_.getShrinkToFit(),
+                                      this.clientSession_.getResizeToClient());
+  }
+};
+
+remoting.OptionsMenu.prototype.onFullscreen_ = function() {
+  remoting.fullscreen.toggle();
+};

remoting/webapp/session_connector.js

@@ -335,15 +335,6 @@ remoting.SessionConnector.prototype.getHostId = function() {
   return this.hostId_;
 };
 
-/**
- * Get host display name.
- *
- * @return {string}
- */
-remoting.SessionConnector.prototype.getHostDisplayName = function() {
-  return this.hostDisplayName_;
-};
-
 /**
  * Continue an IT2Me connection once an access token has been obtained.
  *
@@ -402,9 +393,10 @@ remoting.SessionConnector.prototype.createSession_ = function() {
   var authenticationMethods =
      'third_party,spake2_pair,spake2_hmac,spake2_plain';
   this.clientSession_ = new remoting.ClientSession(
-      this.passPhrase_, this.fetchPin_, this.fetchThirdPartyToken_,
-      authenticationMethods, this.hostId_, this.hostJid_, this.hostPublicKey_,
-      this.connectionMode_, this.clientPairingId_, this.clientPairedSecret_);
+      this.hostDisplayName_, this.passPhrase_, this.fetchPin_,
+      this.fetchThirdPartyToken_, authenticationMethods, this.hostId_,
+      this.hostJid_, this.hostPublicKey_, this.connectionMode_,
+      this.clientPairingId_, this.clientPairedSecret_);
   this.clientSession_.logHostOfflineErrors(!this.refreshHostJidIfOffline_);
   this.clientSession_.addEventListener(
       remoting.ClientSession.Events.stateChanged,

remoting/webapp/toolbar.js

@@ -42,6 +42,16 @@ remoting.Toolbar = function(toolbar) {
    * @private
    */
   this.stubRight_ = 0;
+  /**
+   * @type {remoting.OptionsMenu}
+   * @private
+   */
+  this.optionsMenu_ = new remoting.OptionsMenu(
+      document.getElementById('send-ctrl-alt-del'),
+      document.getElementById('send-print-screen'),
+      document.getElementById('screen-resize-to-client'),
+      document.getElementById('screen-shrink-to-fit'),
+      document.getElementById('toggle-full-screen'));
 
   window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
   window.addEventListener('resize', this.center.bind(this), false);
@@ -50,9 +60,6 @@ remoting.Toolbar = function(toolbar) {
       function() {
         chrome.app.window.create('main.html', { 'width': 800, 'height': 600 });
       });
-  registerEventListener('send-ctrl-alt-del', 'click', remoting.sendCtrlAltDel);
-  registerEventListener('send-print-screen', 'click', remoting.sendPrintScreen);
-  registerEventListener('sign-out', 'click', remoting.signOut);
   registerEventListener('toolbar-disconnect', 'click', remoting.disconnect);
   registerEventListener('toolbar-stub', 'click',
       function() { remoting.toolbar.toggle(); });
@@ -103,6 +110,16 @@ remoting.Toolbar.prototype.toggle = function() {
   this.toolbar_.classList.toggle(remoting.Toolbar.VISIBLE_CLASS_);
 };
 
+/**
+ * @param {remoting.ClientSession} clientSession The active session, or null if
+ *     there is no connection.
+ */
+remoting.Toolbar.prototype.setClientSession = function(clientSession) {
+  this.optionsMenu_.setClientSession(clientSession);
+  var connectedTo = document.getElementById('connected-to');
+  connectedTo.innerText = clientSession.getHostDisplayName();
+};
+
 /**
  * Test the specified co-ordinate to see if it is close enough to the stub
  * to activate it.