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 |
+ }; |
+}); |