From 1c58411e983095dff4fc1882fb88a0bcf1542ea7 Mon Sep 17 00:00:00 2001 From: "bartfab@chromium.org" Date: Tue, 15 Jan 2013 18:55:39 +0000 Subject: 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 --- .../resources/options/controlled_setting.js | 62 +--------------- chrome/browser/resources/options/options.html | 2 + chrome/browser/resources/options/options_page.css | 20 +----- .../browser/resources/shared/css/bubble_button.css | 20 ++++++ .../resources/shared/js/cr/ui/bubble_button.js | 84 ++++++++++++++++++++++ chrome/browser/resources/shared_resources.grd | 4 ++ 6 files changed, 115 insertions(+), 77 deletions(-) create mode 100644 chrome/browser/resources/shared/css/bubble_button.css create mode 100644 chrome/browser/resources/shared/js/cr/ui/bubble_button.js 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 or 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 @@ + @@ -63,6 +64,7 @@ + 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 or 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" /> + type="chrome_html" /> +