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 {function():void} @private */
+  this.callEnableShrink_ = function() { that.setScaleToFit(true); };
+  /** @type {function():void} @private */
+  this.callDisableShrink_ = function() { that.setScaleToFit(false); };
+  /** @type {function():void} @private */
+  this.callToggleFullScreen_ = function() { that.toggleFullScreen_(); };
+  /** @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', this.callEnableShrink_, false);
+  this.originalSize_.addEventListener('click', this.callDisableShrink_, false);
+  this.fullScreen_.addEventListener('click', this.callToggleFullScreen_, 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 215 matching lines @@
  */
 remoting.ClientSession.prototype.removePlugin = function() {
   if (this.plugin) {
     this.plugin.element().removeEventListener(
         'focus', this.callPluginGotFocus_, false);
     this.plugin.element().removeEventListener(
         'blur', this.callPluginLostFocus_, false);
     this.plugin.cleanup();
     this.plugin = null;
   }
+  this.shrinkToFit_.removeEventListener('click', this.callEnableShrink_, false);
+  this.originalSize_.removeEventListener('click', this.callDisableShrink_,
+                                         false);
+  this.fullScreen_.removeEventListener('click', this.callToggleFullScreen_,
+                                       false);
 };
 
 /**
  * Deletes the <embed> element from the container and disconnects.
  *
  * @return {void} Nothing.
  */
 remoting.ClientSession.prototype.disconnect = function() {
   // The plugin won't send a state change notification, so we explicitly log
   // the fact that the connection has closed.
@@ skipping 22 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() {
+  remoting.MenuButton.select(this.shrinkToFit_, this.scaleToFit);
+  remoting.MenuButton.select(this.originalSize_, !this.scaleToFit);
+  remoting.MenuButton.select(this.fullScreen_, document.webkitIsFullScreen);
+};