Added screen options menu.

remoting/webapp/client_session.js

Index: remoting/webapp/client_session.js
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index 4b5c45a16e717bf30815526bd66c22d5e19fea62..80d60f94138e2f8dffd5f284f7e019cda08a2c38 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -64,6 +64,26 @@ remoting.ClientSession = function(hostJid, hostPublicKey, sharedSecret,
   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',

[simonmorris, 2012/03/28 22:55:02]

The onFocus and onBlur handlers are removed at tear-down. Do we need to do the
same for these?

[Jamie, 2012/03/28 23:47:46]

Done.

+                                     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
@@ -341,12 +361,6 @@ remoting.ClientSession.prototype.disconnect = function() {
 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');
-  }
 }
 
 /**
@@ -538,3 +552,38 @@ remoting.ClientSession.prototype.getPerfStats = function() {
 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);

[simonmorris, 2012/03/28 22:55:02]

A utility function, something like setSelected(element, isSelected), would make
this much simpler.

Could be a separate CL.

[Jamie, 2012/03/28 23:47:46]

Done.

+    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);
+  }
+};