Index: chrome/browser/resources/options/controlled_setting.js |
diff --git a/chrome/browser/resources/options/controlled_setting.js b/chrome/browser/resources/options/controlled_setting.js |
index 6e2567e938e88000929b01bfd989659c29398c46..eafa7e350163abfde0d10ebd44d91c4e6ff16ec4 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 |
*/ |