Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/options/options_page.js

Index: chrome/browser/resources/options/options_page.js
diff --git a/chrome/browser/resources/options/options_page.js b/chrome/browser/resources/options/options_page.js
index 0a7d963e4698be8389988511ba345f152cf94419..84eee1cf552c09d41e03962af1abe8e6fbb9e3c7 100644
--- a/chrome/browser/resources/options/options_page.js
+++ b/chrome/browser/resources/options/options_page.js
@@ -27,6 +27,7 @@ cr.define('options', function() {
   /**
    * This is the absolute difference maintained between standard and
    * fixed-width font sizes. Refer http://crbug.com/91922.
+   * @const
    */
   OptionsPage.SIZE_DIFFERENCE_FIXED_STANDARD = 3;
 
@@ -82,6 +83,9 @@ cr.define('options', function() {
     // If |opt_propertyBag| is non-truthy, homogenize to object.
     opt_propertyBag = opt_propertyBag || {};
 
+    // If a bubble is currently being shown, hide it.
+    this.hideBubble();
+
     // Find the currently visible root-level page.
     var rootPage = null;
     for (var name in this.registeredPages) {
@@ -379,6 +383,42 @@ cr.define('options', function() {
   };
 
   /**
+   * Returns the currently visible bubble, or null if no bubble is visible.
+   * @return {Bubble} The bubble currently being shown.
+   */
+  OptionsPage.getVisibleBubble = function() {
+    var bubble = OptionsPage.bubble_;
+    return bubble && !bubble.hidden ? bubble : null;
+  };
+
+  /**
+   * Shows an informational bubble displaying |content| and pointing at the
+   * |anchor| element. If |content| has focusable elements, they join the
+   * current page's tab order as siblings of |anchor|.
+   * @param {HTMLDivElement} content The content of the bubble.
+   * @param {HTMLElement} anchor The element at which the bubble points.
+   */
+  OptionsPage.showBubble = function(content, anchor) {
+    console.log('showBubble');
+    OptionsPage.hideBubble();
+
+    var bubble = new options.Bubble;
+    bubble.anchorNode = anchor;
+    bubble.arrowLocation = cr.ui.ArrowLocation.TOP_END;
+    bubble.content = content;
+    bubble.show();
+    OptionsPage.bubble_ = bubble;
+  };
+
+  /**
+   * Hides the currently visible bubble, if any.
+   */
+  OptionsPage.hideBubble = function() {
+    if (OptionsPage.bubble_)
+      OptionsPage.bubble_.hide();
+  };
+
+  /**
    * Updates managed banner visibility state based on the topmost page.
    */
   OptionsPage.updateManagedBannerVisibility = function() {