Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/options/options_bubble.js

+// Copyright (c) 2012 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('options', function() {
+  var BubbleBase = cr.ui.BubbleBase;
+
+  var OptionsBubble = cr.ui.define('div');
+
+  OptionsBubble.prototype = {
+    // Set up the prototype chain.
+    __proto__: BubbleBase.prototype,
+
+    /**
+     * Initialization function for the cr.ui framework.
+     */
+    decorate: function() {
+      BubbleBase.prototype.decorate.call(this);
+      this.classList.add('options-bubble');
+    },
+
+    /**
+     * Show the bubble.
+     */
+    show: function() {
+      if (!this.hidden)
+        return;
+
+      BubbleBase.prototype.show.call(this);
+
+      var doc = this.ownerDocument;
+      this.eventTracker_.add(doc, 'mousewheel', this, true);
+      this.eventTracker_.add(doc, 'scroll', this, true);
+      this.eventTracker_.add(doc, 'elementFocused', this, true);
+      this.eventTracker_.add(window, 'resize', this);
+    },
+
+    /**
+     * Handle events, closing the bubble when the user clicks or moves the focus
+     * outside the bubble and its anchor elements, scrolls the underlying
+     * document or resizes the window.
+     * @param {Event} event The event.
+     */
+    handleEvent: function(event) {
+      BubbleBase.prototype.handleEvent.call(this, event);
+
+      switch (event.type) {
+        // Close the bubble when the user clicks outside it, except if it is a
+        // left-click on the anchor element (allowing the anchor to handle the
+        // event and close the bubble itself).
+        case 'mousedown':
+          if (event.button == 0 && this.anchorNode_.contains(event.target))
+            break;
+        // Close the bubble when the underlying document is scrolled.
+        case 'mousewheel':
+        case 'scroll':
+          if (this.contains(event.target))
+            break;
+        // Close the bubble when the window is resized.
+        case 'resize':
+          this.hide();
+          break;
+        // Close the bubble when the focus moves to an element that is not the
+        // anchor and is not inside the bubble.
+        case 'elementFocused':
+          if (!this.anchorNode_.contains(event.target) &&
+              !this.contains(event.target)) {
+            this.hide();
+          }
+          break;
+      }
+    },
+
+    /**
+     * Attach the bubble to the document's DOM, making it a sibling of the
+     * anchor element so that focusable elements inside the bubble follow the
+     * anchor in the document's tab order.
+     * @private
+     */
+    attachToDOM_: function() {
+      var parent = this.anchorNode_.parentNode;
+      parent.insertBefore(this, this.anchorNode_.nextSibling);
+    },
+  };
+
+  return {
+    OptionsBubble: OptionsBubble
+  };
+});