Added screen options menu.

remoting/webapp/menu_button.js

Index: remoting/webapp/menu_button.js
diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd8fe2548fb91b691c3d5d05c75d753374d2e0a4
--- /dev/null
+++ b/remoting/webapp/menu_button.js
@@ -0,0 +1,80 @@
+// 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 representing a menu button and its associated menu items.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ * @param {Element} container The element containing the <button> and <ul>
+ *     elements comprising the menu. It should have the "menu-button" class.
+ * @param {function():void=} opt_onShow Optional callback invoked before the
+ *     menu is shown.
+ */
+remoting.MenuButton = function(container, opt_onShow) {
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.button_ = /** @type {HTMLElement} */ (container.querySelector('button'));
+
+  /**
+   * @type {undefined|function():void}
+   * @private
+   */
+  this.onShow_ = opt_onShow;
+
+  /** @type {remoting.MenuButton} */
+  var that = this;
+
+  // Create event handlers to show and hide the menu, attached to the button
+  // and the document body, respectively. These handlers are added and removed
+  // depending on the state of the menu. To prevent both triggering for one
+  // click, they are added by a timer.
+  /**
+   * @type {function(Event):void}
+   * @private
+   */
+  this.onClick_ = function(event) {
+    if (that.onShow_) {
+      that.onShow_();
+    }
+    that.button_.classList.add(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
+    that.button_.removeEventListener('click', that.onClick_, false);
+    window.setTimeout(
+        function() {
+          document.body.addEventListener('click', that.closeHandler_, false);
+        },
+        100);
+  };
+
+  /**
+   * @type {function(Event):void}
+   * @private
+   */
+  this.closeHandler_ = function(event) {
+    that.button_.classList.remove(remoting.MenuButton.BUTTON_ACTIVE_CLASS_);
+    document.body.removeEventListener('click', that.closeHandler_, false);
+    window.setTimeout(
+        function() {
+          that.button_.addEventListener('click', that.onClick_, false);
+        },
+        100);
+  };
+
+  this.button_.addEventListener('click', this.onClick_, false);
+};
+
+/** @const @private */
+remoting.MenuButton.BUTTON_ACTIVE_CLASS_ = 'active';
+
+/** @const */
+remoting.MenuButton.ITEM_SELECTED_CLASS = 'selected';