Add an explicit full-screen button.

We've recevied feedback that conflating maximized and full-screen is not what
users expect. This CL builds on https://codereview.chromium.org/498813003/ to
remove this functionality and instead add an explicit full-screen button to
the window frame.

Note that the icon is a placeholder until we can get UX resources to design a
better one.

BUG=404693

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

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

remoting/remoting_webapp_files.gypi

@@ -231,6 +231,7 @@
       'resources/icon_close.webp',
       'resources/icon_cross.webp',
       'resources/icon_disconnect.webp',
+      'resources/icon_fullscreen.webp',
       'resources/icon_help.webp',
       'resources/icon_host.webp',
       'resources/icon_maximize_restore.webp',

remoting/webapp/client_session.js

@@ -591,7 +591,6 @@ remoting.ClientSession.prototype.removePlugin = function() {
 
   // Leave full-screen mode, and stop listening for related events.
   var listener = this.callOnFullScreenChanged_;
-  remoting.fullscreen.syncWithMaximize(false);
   remoting.fullscreen.activate(
       false,
       function() {
@@ -984,7 +983,6 @@ remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     }
     // Activate full-screen related UX.
     remoting.fullscreen.addListener(this.callOnFullScreenChanged_);
-    remoting.fullscreen.syncWithMaximize(true);
     if (remoting.windowFrame) {
       remoting.windowFrame.setClientSession(this);
     } else {

remoting/webapp/fullscreen.js

@@ -47,19 +47,5 @@ remoting.Fullscreen.prototype.addListener = function(callback) { };
  */
 remoting.Fullscreen.prototype.removeListener = function(callback) { };
 
-/**
- * Enable or disable automatic synchronization of full-screen and maximized
- * states. This allows the application to enter full-screen mode whenever its
- * window is maximized, regardless of how the user initiates this (clicking
- * the maximize control, double-clicking the title bar or using the tray menu,
- * for example). If the window is already maximized when this synchronization
- * is enabled, it is full-screened.
- *
- * This method is a no-op for apps v1.
- *
- * @param {boolean} sync True to enable synchronization; false to disable.
- */
-remoting.Fullscreen.prototype.syncWithMaximize = function(sync) { };
-
 /** @type {remoting.Fullscreen} */
 remoting.fullscreen = null;

remoting/webapp/fullscreen_v1.js

@@ -75,9 +75,6 @@ remoting.FullscreenAppsV1.prototype.removeListener = function(callback) {
   this.eventSource_.removeEventListener(this.kEventName_, callback);
 };
 
-remoting.FullscreenAppsV1.prototype.syncWithMaximize = function(sync) {
-};
-
 /**
  * @private
  */

remoting/webapp/fullscreen_v2.js

@@ -17,12 +17,6 @@ var remoting = remoting || {};
  * @implements {remoting.Fullscreen}
  */
 remoting.FullscreenAppsV2 = function() {
-  /**
-   * @type {boolean} True if maximize/restore events are being hooked.
-   * @private
-   */
-  this.hookingWindowEvents_ = false;
-
   /**
    * @type {boolean} True if the next onRestored event should cause callbacks
    *     to be notified of a full-screen changed event. onRestored fires when
@@ -47,8 +41,6 @@ remoting.FullscreenAppsV2 = function() {
 
   chrome.app.window.current().onFullscreened.addListener(
       this.onFullscreened_.bind(this));
-  chrome.app.window.current().onMaximized.addListener(
-      this.onMaximized_.bind(this));
   chrome.app.window.current().onRestored.addListener(
       this.onRestored_.bind(this));
 };
@@ -92,39 +84,14 @@ remoting.FullscreenAppsV2.prototype.removeListener = function(callback) {
   this.eventSource_.removeEventListener(this.kEventName_, callback);
 };
 
-remoting.FullscreenAppsV2.prototype.syncWithMaximize = function(sync) {
-  if (sync && chrome.app.window.current().isMaximized()) {
-    chrome.app.window.current().restore();
-    this.activate(true);
-  }
-  this.hookingWindowEvents_ = sync;
-};
-
 remoting.FullscreenAppsV2.prototype.onFullscreened_ = function() {
   this.notifyCallbacksOnRestore_ = true;
   this.eventSource_.raiseEvent(this.kEventName_, true);
   document.body.classList.add('fullscreen');
 };
 
-remoting.FullscreenAppsV2.prototype.onMaximized_ = function() {
-  if (this.hookingWindowEvents_) {
-    chrome.app.window.current().restore();
-    this.activate(true);
-  }
-};
-
 remoting.FullscreenAppsV2.prototype.onRestored_ = function() {
-  // TODO(jamiewalch): ChromeOS generates a spurious onRestore event if
-  // fullscreen() is called from an onMaximized handler (crbug.com/394819),
-  // so ignore the callback if the window is still full-screen.
-  if (this.isActive()) {
-    return;
-  }
-
   document.body.classList.remove('fullscreen');
-  if (this.hookingWindowEvents_) {
-    this.activate(false);
-  }
   if (this.notifyCallbacksOnRestore_) {
     this.notifyCallbacksOnRestore_ = false;
     this.eventSource_.raiseEvent(this.kEventName_, false);

remoting/webapp/html/window_frame.html

@@ -46,6 +46,10 @@ found in the LICENSE file.
           class="window-control window-maximize-restore">
       <img src="icon_maximize_restore.webp">
     </span>
+    <span i18n-title="FULL_SCREEN"
+          class="window-control window-fullscreen">
+      <img src="icon_fullscreen.webp">
+    </span>
     <span i18n-title="CLOSE_WINDOW"
           class="window-control window-close">
       <img src="icon_close.webp">

remoting/webapp/window_frame.css

@@ -115,8 +115,10 @@ html.apps-v2 #scroller {
   border-right: none;
 }
 
-/* The Disconnect and Options buttons are only displayed when connected. */
+/* The Disconnect, full-screen and options buttons are only displayed when
+   connected. */
 body:not(.connected) .window-disconnect,
+body:not(.connected) .window-fullscreen,
 body:not(.connected) .window-options {
   display: none;
 }
@@ -134,6 +136,7 @@ body:not(.connected) .window-options {
  * - A border is added to the window controls to ensure they stand out against
  *   any desktop.
  * - The window border is removed.
+ * - The full-screen button is removed.
  */
 
 html.apps-v2 body.fullscreen #scroller {
@@ -182,3 +185,7 @@ body.fullscreen .title-bar.preview {
 .fullscreen .title-bar.opened .window-controls-stub {
   background-color: #a6a6a6;
 }
+
+body.fullscreen .window-fullscreen {
+  display: none;
+}

remoting/webapp/window_frame.js

@@ -39,7 +39,7 @@ remoting.WindowFrame = function(titleBar) {
       titleBar.querySelector('.menu-resize-to-client'),
       titleBar.querySelector('.menu-shrink-to-fit'),
       titleBar.querySelector('.menu-new-connection'),
-      null,
+      titleBar.querySelector('.window-fullscreen'),
       titleBar.querySelector('.menu-start-stop-recording'));
 
   /**
@@ -162,13 +162,7 @@ remoting.WindowFrame.prototype.maximizeOrRestoreWindow_ = function() {
       chrome.app.window.current().isFullscreen() ||
       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 if (this.clientSession_) {
-    chrome.app.window.current().fullscreen();
   } else {
     chrome.app.window.current().maximize();
   }
@@ -202,8 +196,6 @@ remoting.WindowFrame.prototype.handleWindowStateChange_ = function() {
     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';
   }