Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/options/options_page.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() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
    * @constructor
    * @param {string} name Options page name.
    * @param {string} title Options page title, used for history.
    * @extends {EventTarget}
    */
   function OptionsPage(name, title, pageDivName) {
     this.name = name;
     this.title = title;
     this.pageDivName = pageDivName;
     this.pageDiv = $(this.pageDivName);
     this.tab = null;
     this.lastFocusedElement = null;
   }
 
   /** @const */ var HORIZONTAL_OFFSET = 155;
 
   /**
    * 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;
 
   /**
    * Main level option pages. Maps lower-case page names to the respective page
    * object.
    * @protected
    */
   OptionsPage.registeredPages = {};
 
@@ skipping 35 matching lines @@
    * @param {Object=} opt_propertyBag An optional bag of properties including
    *     replaceState (if history state should be replaced instead of pushed).
    * @private
    */
   OptionsPage.showPageByName = function(pageName,
                                         updateHistory,
                                         opt_propertyBag) {
     // 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) {
       var page = this.registeredPages[name];
       if (page.visible && !page.parentPage) {
         rootPage = page;
         break;
       }
     }
 
@@ skipping 277 matching lines @@
   /**
    * Returns the topmost visible page, or null if no page is visible.
    * @return {OptionPage} The topmost visible page.
    */
   OptionsPage.getTopmostVisiblePage = function() {
     // Check overlays first since they're top-most if visible.
     return this.getVisibleOverlay_() || this.getTopmostVisibleNonOverlayPage_();
   };
 
   /**
+   * 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() {
     var topPage = this.getTopmostVisiblePage();
     if (topPage)
       topPage.updateManagedBannerVisibility();
   };
 
   /**
    * Shows the tab contents for the given navigation tab.
@@ skipping 508 matching lines @@
     canShowPage: function() {
       return true;
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 });