Move ownership of the tool-bar's menu buttons into remoting.Toolbar.

This CL also reinstates the previous behaviour of MenuButton whereby a
second click on the button hides the menu, which is made possible by a
saner ownership model.

BUG=415410

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

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

6 files changed, 71 insertions, 77 deletions

diff --git a/remoting/webapp/client_screen.js b/remoting/webapp/client_screen.js
index c70c51e..3b06083 100644
--- a/remoting/webapp/client_screen.js
+++ b/remoting/webapp/client_screen.js
@@ -321,8 +321,10 @@ remoting.onConnected = function(clientSession) {
   setConnectionInterruptedButtonsText_();
   document.getElementById('access-code-entry').value = '';
   remoting.setMode(remoting.AppMode.IN_SESSION);
-  remoting.toolbar.center();
-  remoting.toolbar.preview();
+  if (!base.isAppsV2()) {
+    remoting.toolbar.center();
+    remoting.toolbar.preview();
+  }
   remoting.clipboard.startSession();
   updateStatistics_();
   remoting.hangoutSessionEvents.raiseEvent(
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index 211c914..ac27d01 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -142,20 +142,8 @@ remoting.ClientSession = function(signalStrategy, container, hostDisplayName,
   /** @private */
   this.callPluginGotFocus_ = this.pluginGotFocus_.bind(this);
   /** @private */
-  this.callToggleFullScreen_ = remoting.fullscreen.toggle.bind(
-      remoting.fullscreen);
-  /** @private */
   this.callOnFullScreenChanged_ = this.onFullScreenChanged_.bind(this)
 
-  /** @private */
-  this.screenOptionsMenu_ = new remoting.MenuButton(
-      document.getElementById('screen-options-menu'),
-      this.onShowOptionsMenu_.bind(this));
-  /** @private */
-  this.sendKeysMenu_ = new remoting.MenuButton(
-      document.getElementById('send-keys-menu')
-  );
-
   /** @type {HTMLMediaElement} @private */
   this.video_ = null;
 
@@ -171,14 +159,6 @@ remoting.ClientSession = function(signalStrategy, container, hostDisplayName,
     img.style.left = event.x + 'px';
   };
 
-  /** @type {HTMLElement} @private */
-  this.resizeToClientButton_ =
-      document.getElementById('screen-resize-to-client');
-  /** @type {HTMLElement} @private */
-  this.shrinkToFitButton_ = document.getElementById('screen-shrink-to-fit');
-  /** @type {HTMLElement} @private */
-  this.fullScreenButton_ = document.getElementById('toggle-full-screen');
-
   /** @type {remoting.GnubbyAuthHandler} @private */
   this.gnubbyAuthHandler_ = null;
 
@@ -188,16 +168,6 @@ remoting.ClientSession = function(signalStrategy, container, hostDisplayName,
   /** @type {remoting.VideoFrameRecorder} @private */
   this.videoFrameRecorder_ = null;
 
-  if (this.mode_ == remoting.ClientSession.Mode.IT2ME) {
-    // Resize-to-client is not supported for IT2Me hosts.
-    this.resizeToClientButton_.hidden = true;
-  } else {
-    this.resizeToClientButton_.hidden = false;
-  }
-
-  this.fullScreenButton_.addEventListener(
-      'click', this.callToggleFullScreen_, false);
-
   this.defineEvents(Object.keys(remoting.ClientSession.Events));
 };
 
@@ -595,10 +565,6 @@ remoting.ClientSession.prototype.removePlugin = function() {
     this.plugin_ = null;
   }
 
-  // Delete event handlers that aren't relevent when not connected.
-  this.fullScreenButton_.removeEventListener(
-      'click', this.callToggleFullScreen_, false);
-
   // Leave full-screen mode, and stop listening for related events.
   var listener = this.callOnFullScreenChanged_;
   remoting.fullscreen.activate(
@@ -611,6 +577,7 @@ remoting.ClientSession.prototype.removePlugin = function() {
   } else {
     remoting.toolbar.setClientSession(null);
   }
+  remoting.optionsMenu.setClientSession(null);
   document.body.classList.remove('connected');
 
   // Remove mediasource-rendering class from the container - this will also
@@ -967,6 +934,7 @@ remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     } else {
       remoting.toolbar.setClientSession(this);
     }
+    remoting.optionsMenu.setClientSession(this);
     document.body.classList.add('connected');
 
     this.container_.addEventListener('mousemove',
@@ -1305,19 +1273,6 @@ remoting.ClientSession.prototype.onFullScreenChanged_ = function (fullscreen) {
 };
 
 /**
- * Updates the options menu to reflect the current scale-to-fit and full-screen
- * settings.
- * @return {void} Nothing.
- * @private
- */
-remoting.ClientSession.prototype.onShowOptionsMenu_ = function() {
-  remoting.MenuButton.select(this.resizeToClientButton_, this.resizeToClient_);
-  remoting.MenuButton.select(this.shrinkToFitButton_, this.shrinkToFit_);
-  remoting.MenuButton.select(this.fullScreenButton_,
-                             remoting.fullscreen.isActive());
-};
-
-/**
  * Scroll the client plugin by the specified amount, keeping it visible.
  * Note that this is only used in content full-screen mode (not windowed or
  * browser full-screen modes), where window.scrollBy and the scrollTop and
diff --git a/remoting/webapp/options_menu.js b/remoting/webapp/options_menu.js
index fce3bc9..bddfb89 100644
--- a/remoting/webapp/options_menu.js
+++ b/remoting/webapp/options_menu.js
@@ -69,6 +69,8 @@ remoting.OptionsMenu.prototype.setClientSession = function(clientSession) {
 
 remoting.OptionsMenu.prototype.onShow = function() {
   if (this.clientSession_) {
+    this.resizeToClient_.hidden =
+        this.clientSession_.getMode() == remoting.ClientSession.Mode.IT2ME;
     remoting.MenuButton.select(
         this.resizeToClient_, this.clientSession_.getResizeToClient());
     remoting.MenuButton.select(
@@ -133,3 +135,8 @@ remoting.OptionsMenu.prototype.onStartStopRecording_ = function() {
     this.clientSession_.startStopRecording();
   }
 }
+
+/**
+ * @type {remoting.OptionsMenu}
+ */
+remoting.optionsMenu = null;
\ No newline at end of file
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index 4e34d50..249d49a 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -61,6 +61,7 @@ remoting.init = function() {
     remoting.fullscreen = new remoting.FullscreenAppsV2();
     remoting.windowFrame = new remoting.WindowFrame(
         document.getElementById('title-bar'));
+    remoting.optionsMenu = remoting.windowFrame.createOptionsMenu();
   } else {
     remoting.oauth2 = new remoting.OAuth2();
     if (!remoting.oauth2.isAuthenticated()) {
@@ -68,6 +69,9 @@ remoting.init = function() {
     }
     remoting.identity = remoting.oauth2;
     remoting.fullscreen = new remoting.FullscreenAppsV1();
+    remoting.toolbar = new remoting.Toolbar(
+        document.getElementById('session-toolbar'));
+    remoting.optionsMenu = remoting.toolbar.createOptionsMenu();
   }
   remoting.stats = new remoting.ConnectionStats(
       document.getElementById('statistics'));
@@ -78,8 +82,6 @@ remoting.init = function() {
       document.getElementById('host-list-error-message'),
       document.getElementById('host-list-refresh-failed-button'),
       document.getElementById('host-list-loading-indicator'));
-  remoting.toolbar = new remoting.Toolbar(
-      document.getElementById('session-toolbar'));
   remoting.clipboard = new remoting.Clipboard();
   var sandbox = /** @type {HTMLIFrameElement} */
       document.getElementById('wcs-sandbox');
diff --git a/remoting/webapp/toolbar.js b/remoting/webapp/toolbar.js
index e75bef1..d6a6942 100644
--- a/remoting/webapp/toolbar.js
+++ b/remoting/webapp/toolbar.js
@@ -42,18 +42,22 @@ remoting.Toolbar = function(toolbar) {
    * @private
    */
   this.stubRight_ = 0;
+
   /**
-   * @type {remoting.OptionsMenu}
+   * @type {remoting.MenuButton}
    * @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('new-connection'),
-      document.getElementById('toggle-full-screen'),
-      null);
+  this.screenOptionsMenu_ = new remoting.MenuButton(
+      document.getElementById('screen-options-menu'),
+      this.onShowOptionsMenu_.bind(this));
+  /**
+   * @type {remoting.MenuButton}
+   * @private
+   */
+  this.sendKeysMenu_ = new remoting.MenuButton(
+      document.getElementById('send-keys-menu')
+  );
+
 
   window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
   window.addEventListener('resize', this.center.bind(this), false);
@@ -74,6 +78,21 @@ remoting.Toolbar = function(toolbar) {
   this.toolbar_.addEventListener('mousemove', stopTimer, false);
 };
 
+
+/**
+ * @return {remoting.OptionsMenu}
+ */
+remoting.Toolbar.prototype.createOptionsMenu = function() {
+  return 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('new-connection'),
+      document.getElementById('toggle-full-screen'),
+      null);
+};
+
 /**
  * Preview the tool-bar functionality by showing it for 3s.
  * @return {void} Nothing.
@@ -113,7 +132,6 @@ remoting.Toolbar.prototype.toggle = function() {
  *     there is no connection.
  */
 remoting.Toolbar.prototype.setClientSession = function(clientSession) {
-  this.optionsMenu_.setClientSession(clientSession);
   var connectedTo = document.getElementById('connected-to');
   connectedTo.innerText =
       clientSession ? clientSession.getHostDisplayName() : "";
@@ -158,6 +176,16 @@ remoting.Toolbar.onMouseMove = function(event) {
   }
 };
 
+/**
+ * Updates the options menu to reflect the current scale-to-fit and full-screen
+ * settings.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.Toolbar.prototype.onShowOptionsMenu_ = function() {
+  remoting.optionsMenu.onShow();
+};
+
 /** @type {remoting.Toolbar} */
 remoting.toolbar = null;
 
diff --git a/remoting/webapp/window_frame.js b/remoting/webapp/window_frame.js
index 185551d..75ecf49 100644
--- a/remoting/webapp/window_frame.js
+++ b/remoting/webapp/window_frame.js
@@ -30,19 +30,6 @@ remoting.WindowFrame = function(titleBar) {
   this.titleBar_ = titleBar;
 
   /**
-   * @type {remoting.OptionsMenu}
-   * @private
-   */
-  this.optionsMenu_ = new remoting.OptionsMenu(
-      titleBar.querySelector('.menu-send-ctrl-alt-del'),
-      titleBar.querySelector('.menu-send-print-screen'),
-      titleBar.querySelector('.menu-resize-to-client'),
-      titleBar.querySelector('.menu-shrink-to-fit'),
-      titleBar.querySelector('.menu-new-connection'),
-      titleBar.querySelector('.window-fullscreen'),
-      titleBar.querySelector('.menu-start-stop-recording'));
-
-  /**
    * @type {HTMLElement}
    * @private
    */
@@ -71,7 +58,7 @@ remoting.WindowFrame = function(titleBar) {
    */
   this.optionsMenuList_ = /** @type {HTMLElement} */
       (optionsButton.querySelector('.window-options-menu'));
-  base.debug.assert(this.optionsMenu_ != null);
+  base.debug.assert(this.optionsMenuList_ != null);
 
   /**
    * @type {Array.<{cls:string, fn: function()}>}
@@ -103,11 +90,24 @@ remoting.WindowFrame = function(titleBar) {
 };
 
 /**
+ * @return {remoting.OptionsMenu}
+ */
+remoting.WindowFrame.prototype.createOptionsMenu = function() {
+  return new remoting.OptionsMenu(
+      this.titleBar_.querySelector('.menu-send-ctrl-alt-del'),
+      this.titleBar_.querySelector('.menu-send-print-screen'),
+      this.titleBar_.querySelector('.menu-resize-to-client'),
+      this.titleBar_.querySelector('.menu-shrink-to-fit'),
+      this.titleBar_.querySelector('.menu-new-connection'),
+      this.titleBar_.querySelector('.window-fullscreen'),
+      this.titleBar_.querySelector('.menu-start-stop-recording'));
+};
+
+/**
  * @param {remoting.ClientSession} clientSession The client session, or null if
  *     there is no connection.
  */
 remoting.WindowFrame.prototype.setClientSession = function(clientSession) {
-  this.optionsMenu_.setClientSession(clientSession);
   this.clientSession_ = clientSession;
   var windowTitle = document.head.querySelector('title');
   if (this.clientSession_) {
@@ -215,7 +215,7 @@ remoting.WindowFrame.prototype.handleWindowStateChange_ = function() {
  * @private
  */
 remoting.WindowFrame.prototype.onShowOptionsMenu_ = function() {
-  this.optionsMenu_.onShow();
+  remoting.optionsMenu.onShow();
   this.titleBar_.classList.add('menu-opened');
 };