Added screen options menu.

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 46 matching lines @@
   this.plugin = null;
   this.scaleToFit = false;
   this.logToServer = new remoting.LogToServer();
   this.onStateChange = onStateChange;
   /** @type {remoting.ClientSession} */
   var that = this;
   /** @type {function():void} @private */
   this.callPluginLostFocus_ = function() { that.pluginLostFocus_(); };
   /** @type {function():void} @private */
   this.callPluginGotFocus_ = function() { that.pluginGotFocus_(); };
+  /** @type {remoting.MenuButton} @private */
+  this.screenOptionsMenu_ = new remoting.MenuButton(
+      document.getElementById('screen-options-menu'),
+      function() { that.onShowOptionsMenu_(); }
+  );
+  /** @type {HTMLElement} @private */
+  this.shrinkToFit_ = document.getElementById('enable-shrink-to-fit');
+  /** @type {HTMLElement} @private */
+  this.originalSize_ = document.getElementById('disable-shrink-to-fit');
+  /** @type {HTMLElement} @private */
+  this.fullScreen_ = document.getElementById('toggle-full-screen');
+  this.shrinkToFit_.addEventListener('click',
+                                     function() { that.setScaleToFit(true); },
+                                     false);
+  this.originalSize_.addEventListener('click',
+                                      function() { that.setScaleToFit(false); },
+                                      false);
+  this.fullScreen_.addEventListener('click',
+                                    function() { that.toggleFullScreen_(); },
+                                    false);
 };
 
 // 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 states transitions that occur within the web-app that have
 // no corresponding plugin state transition.
 /** @enum {number} */
 remoting.ClientSession.State = {
   CREATED: -3,
   BAD_PLUGIN_VERSION: -2,
@@ skipping 257 matching lines @@
 
 /**
  * Enables or disables the client's scale-to-fit feature.
  *
  * @param {boolean} scaleToFit True to enable scale-to-fit, false otherwise.
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.setScaleToFit = function(scaleToFit) {
   this.scaleToFit = scaleToFit;
   this.updateDimensions();
-  var button = document.getElementById('toggle-scaling');
-  if (scaleToFit) {
-    button.classList.add('toggle-button-active');
-  } else {
-    button.classList.remove('toggle-button-active');
-  }
 }
 
 /**
  * Returns whether the client is currently scaling the host to fit the tab.
  *
  * @return {boolean} The current scale-to-fit setting.
  */
 remoting.ClientSession.prototype.getScaleToFit = function() {
   return this.scaleToFit;
 }
@@ skipping 171 matching lines @@
 };
 
 /**
  * Logs statistics.
  *
  * @param {remoting.ClientSession.PerfStats} stats
  */
 remoting.ClientSession.prototype.logStatistics = function(stats) {
   this.logToServer.logStatistics(stats, this.mode);
 };
+
+/**
+ * Toggles between full-screen and windowed mode.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.ClientSession.prototype.toggleFullScreen_ = function() {
+  if (document.webkitIsFullScreen) {
+    document.webkitCancelFullScreen();
+  } else {
+    document.body.webkitRequestFullScreen();
+  }
+};
+
+/**
+ * Updates the options menu to reflect the current scale-to-fit and full-screen
+ * settings.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.ClientSession.prototype.onShowOptionsMenu_ = function() {
+  if (this.scaleToFit) {
+    this.shrinkToFit_.classList.add(remoting.MenuButton.ITEM_SELECTED_CLASS);
+    this.originalSize_.classList.remove(
+        remoting.MenuButton.ITEM_SELECTED_CLASS);
+  } else {
+    this.shrinkToFit_.classList.remove(remoting.MenuButton.ITEM_SELECTED_CLASS);
+    this.originalSize_.classList.add(remoting.MenuButton.ITEM_SELECTED_CLASS);
+  }
+  if (document.webkitIsFullScreen) {
+    this.fullScreen_.classList.add(remoting.MenuButton.ITEM_SELECTED_CLASS);
+  } else {
+    this.fullScreen_.classList.remove(remoting.MenuButton.ITEM_SELECTED_CLASS);
+  }
+};