Add base class cr.ui.BubbleButton for options.ControlledSettingIndicator

chrome/browser/resources/shared/js/cr/ui/bubble_button.js

Index: chrome/browser/resources/shared/js/cr/ui/bubble_button.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/bubble_button.js b/chrome/browser/resources/shared/js/cr/ui/bubble_button.js
new file mode 100644
index 0000000000000000000000000000000000000000..7216a2d4180b32e434a2e65d2aafec4875084eb6
--- /dev/null
+++ b/chrome/browser/resources/shared/js/cr/ui/bubble_button.js
@@ -0,0 +1,84 @@
+// Copyright (c) 2013 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.
+
+cr.define('cr.ui', function() {
+  /**
+   * An image button that brings up an informative bubble when activated by
+   * keyboard or mouse.
+   * @constructor
+   * @extends {HTMLSpanElement}
+   */
+  var BubbleButton = cr.ui.define('span');
+
+  BubbleButton.prototype = {
+    __proto__: HTMLSpanElement.prototype,
+
+    /**
+     * Decorates the base element to show the proper icon.
+     */
+    decorate: function() {
+      this.className = 'bubble-button';
+      this.location = cr.ui.ArrowLocation.TOP_END;
+      this.image = document.createElement('div');
+      this.image.tabIndex = 0;
+      this.image.setAttribute('role', 'button');
+      this.image.addEventListener('click', this);
+      this.image.addEventListener('keydown', this);
+      this.image.addEventListener('mousedown', this);
+      this.appendChild(this.image);
+    },
+
+    /**
+     * Whether the button is currently showing a bubble.
+     * @type {boolean}
+     */
+    get showingBubble() {
+      return this.image.classList.contains('showing-bubble');
+    },
+    set showingBubble(showing) {
+      this.image.classList.toggle('showing-bubble', showing);
+    },
+
+    /**
+     * Handle mouse and keyboard events, allowing the user to open and close an
+     * informative bubble.
+     * @param {Event} event Mouse or keyboard event.
+     */
+    handleEvent: function(event) {
+      switch (event.type) {
+        // Toggle the bubble on left click. Let any other clicks propagate.
+        case 'click':
+          if (event.button != 0)
+            return;
+          break;
+        // Toggle the bubble when <Return> or <Space> is pressed. Let any other
+        // key presses propagate.
+        case 'keydown':
+          switch (event.keyCode) {
+            case 13:  // Return.
+            case 32:  // Space.
+              break;
+            default:
+              return;
+          }
+          break;
+        // Blur focus when a mouse button is pressed, matching the behavior of
+        // other Web UI elements.
+        case 'mousedown':
+          if (document.activeElement)
+            document.activeElement.blur();
+          event.preventDefault();
+          return;
+      }
+      this.toggleBubble_();
+      event.preventDefault();
+      event.stopPropagation();
+    },
+  };
+
+  // Export.
+  return {
+    BubbleButton: BubbleButton
+  };
+});