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

Re-landing. The test failure this was reverted for is unrelated (the
failure was in native UI, this is a WebUI change).

This CL extracts a cr.ui.BubbleButton base class from the
options.ControlledSettingIndicator so that it can be shared with the
upcoming improved about:policy page.

BUG=134849
TEST=Manual

TBR=jhawkins@chromium.org


Review URL: https://chromiumcodereview.appspot.com/11907007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@176946 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 115 insertions, 77 deletions

diff --git a/chrome/browser/resources/options/controlled_setting.js b/chrome/browser/resources/options/controlled_setting.js
index 6e2567e..eafa7e3 100644
--- a/chrome/browser/resources/options/controlled_setting.js
+++ b/chrome/browser/resources/options/controlled_setting.js
@@ -15,13 +15,14 @@ cr.define('options', function() {
   var ControlledSettingIndicator = cr.ui.define('span');
 
   ControlledSettingIndicator.prototype = {
-    __proto__: HTMLSpanElement.prototype,
+    __proto__: cr.ui.BubbleButton.prototype,
 
     /**
      * Decorates the base element to show the proper icon.
      */
     decorate: function() {
-      var self = this;
+      cr.ui.BubbleButton.prototype.decorate.call(this);
+      this.classList.add('controlled-setting-indicator');
 
       // If there is a pref, track its controlledBy and recommendedValue
       // properties in order to be able to bring up the correct bubble.
@@ -30,16 +31,6 @@ cr.define('options', function() {
             this.pref, this.handlePrefChange.bind(this));
         this.resetHandler = this.clearAssociatedPref_;
       }
-
-      this.className = 'controlled-setting-indicator';
-      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);
     },
 
     /**
@@ -53,17 +44,6 @@ cr.define('options', function() {
     },
 
     /**
-     * Whether the indicator 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);
-    },
-
-    /**
      * Clears the preference associated with this indicator.
      * @private
      */
@@ -91,42 +71,6 @@ cr.define('options', function() {
     },
 
     /**
-     * Handle mouse and keyboard events, allowing the user to open and close a
-     * bubble with further information.
-     * @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();
-    },
-
-    /**
      * Open or close a bubble with further information about the pref.
      * @private
      */
diff --git a/chrome/browser/resources/options/options.html b/chrome/browser/resources/options/options.html
index ebe6910..d0dc184 100644
--- a/chrome/browser/resources/options/options.html
+++ b/chrome/browser/resources/options/options.html
@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <title i18n-content="optionsPageTitle"></title>
 <link rel="stylesheet" href="chrome://resources/css/bubble.css">
+<link rel="stylesheet" href="chrome://resources/css/bubble_button.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="chrome://resources/css/list.css">
 <link rel="stylesheet" href="chrome://resources/css/overlay.css">
@@ -63,6 +64,7 @@
 <script src="chrome://resources/js/cr/ui/touch_handler.js"></script>
 <script src="chrome://resources/js/cr/ui/array_data_model.js"></script>
 <script src="chrome://resources/js/cr/ui/bubble.js"></script>
+<script src="chrome://resources/js/cr/ui/bubble_button.js"></script>
 <script src="chrome://resources/js/cr/ui/focus_manager.js"></script>
 <script src="chrome://resources/js/cr/ui/list_selection_model.js"></script>
 <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script>
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 0733c8c..b20e393 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -477,29 +477,13 @@ html:not([enablePepperFlashSettings]) .pepper-flash-settings {
   padding: 0;
 }
 
-.controlled-setting-indicator {
-  display: none;
-}
-
 input:-webkit-any([type='text'],[type='url'],:not([type])) +
     .controlled-setting-indicator {
   -webkit-margin-start: 5px;
 }
 
-.controlled-setting-indicator[controlled-by] {
-  display: inline-block;
-  height: 0;
-  line-height: 1;
-  vertical-align: middle;
-  width: 16px;
-}
-
-.controlled-setting-indicator[controlled-by] > div {
-  background-size: 16px;
-  height: 16px;
-  position: relative;
-  top: -8px;
-  width: 16px;
+.controlled-setting-indicator:not([controlled-by]) {
+  display: none;
 }
 
 .controlled-setting-indicator[controlled-by='policy'] > div {
diff --git a/chrome/browser/resources/shared/css/bubble_button.css b/chrome/browser/resources/shared/css/bubble_button.css
new file mode 100644
index 0000000..5f37ed2
--- /dev/null
+++ b/chrome/browser/resources/shared/css/bubble_button.css
@@ -0,0 +1,20 @@
+/* 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.
+ */
+
+.bubble-button {
+  display: inline-block;
+  height: 0;
+  line-height: 1;
+  vertical-align: middle;
+  width: 16px;
+}
+
+.bubble-button > div {
+  background-size: 16px;
+  height: 16px;
+  position: relative;
+  top: -8px;
+  width: 16px;
+}
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 0000000..7216a2d
--- /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
+  };
+});
diff --git a/chrome/browser/resources/shared_resources.grd b/chrome/browser/resources/shared_resources.grd
index 41777c9..6561d08 100644
--- a/chrome/browser/resources/shared_resources.grd
+++ b/chrome/browser/resources/shared_resources.grd
@@ -41,6 +41,8 @@ without changes to the corresponding grd file. -->
                  file="shared/css/alert_overlay.css" type="chrome_html" />
       <structure name="IDR_SHARED_CSS_BUBBLE"
                  file="shared/css/bubble.css" type="chrome_html" />
+      <structure name="IDR_SHARED_CSS_BUBBLE_BUTTON"
+                 file="shared/css/bubble_button.css" type="chrome_html" />
       <structure name="IDR_SHARED_CSS_DIALOGS"
                  file="shared/css/dialogs.css" type="chrome_html" />
       <structure name="IDR_SHARED_CSS_LIST"
@@ -95,6 +97,8 @@ without changes to the corresponding grd file. -->
                  type="chrome_html" />
       <structure name="IDR_SHARED_JS_CR_UI_BUBBLE"
                  file="shared/js/cr/ui/bubble.js" type="chrome_html" />
+      <structure name="IDR_SHARED_JS_CR_UI_BUBBLE_BUTTON"
+                 file="shared/js/cr/ui/bubble_button.js" type="chrome_html" />
       <structure name="IDR_SHARED_JS_CR_UI_CARD_SLIDER"
                  file="shared/js/cr/ui/card_slider.js" type="chrome_html" />
       <structure name="IDR_SHARED_JS_CR_UI_COMMAND"