Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/shared/js/cr/ui/bubble.js

Index: chrome/browser/resources/shared/js/cr/ui/bubble.js
diff --git a/chrome/browser/resources/shared/js/cr/ui/bubble.js b/chrome/browser/resources/shared/js/cr/ui/bubble.js
index 4876a7d41fd7b7fceaa121e72b59b4ecabc59932..160d7c3177fa435c311d33806ced76499f22ab1c 100644
--- a/chrome/browser/resources/shared/js/cr/ui/bubble.js
+++ b/chrome/browser/resources/shared/js/cr/ui/bubble.js
@@ -45,7 +45,7 @@ cr.define('cr.ui', function() {
   BubbleBase.ARROW_OFFSET = 30;
 
   BubbleBase.prototype = {
-    // Set up the prototype chain
+    // Set up the prototype chain.
     __proto__: HTMLDivElement.prototype,
 
     /**
@@ -110,8 +110,9 @@ cr.define('cr.ui', function() {
       if (!this.hidden)
         return;
 
-      document.body.appendChild(this);
+      this.attachToDOM_();
       this.hidden = false;
+      this.anchorNode_.isShowingBubble = true;
 
       var doc = this.ownerDocument;
       this.eventTracker_ = new EventTracker;
@@ -126,8 +127,9 @@ cr.define('cr.ui', function() {
       if (this.hidden)
         return;
 
-      this.hidden = true;
       this.eventTracker_.removeAll();
+      this.anchorNode_.isShowingBubble = false;
+      this.hidden = true;
       this.parentNode.removeChild(this);
     },
 
@@ -145,27 +147,34 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Attach the bubble to the document's DOM.
+     * @private
+     */
+    attachToDOM_: function() {
+      document.body.appendChild(this);
+    },
+
+    /**
      * Update the arrow so that it appears at the correct position.
      * @param {Boolean} visible Whether the arrow should be visible.
-     * @param {number} The horizontal distance between the tip of the arrow and
-     * the reference edge of the bubble (as specified by the arrow location).
+     * @param {Boolean} atTop Whether the arrow should be at the top of the
+     * bubble.
+     * @param {number} tipOffset The horizontal distance between the tip of the
+     * arrow and the reference edge of the bubble (as specified by the arrow
+     * location).
      * @private
      */
-    updateArrowPosition_: function(visible, tipOffset) {
+    updateArrowPosition_: function(visible, atTop, tipOffset) {
       var bubbleArrow = this.querySelector('.bubble-arrow');
-
-      if (visible) {
-        bubbleArrow.style.display = 'block';
-      } else {
-        bubbleArrow.style.display = 'none';
+      bubbleArrow.hidden = !visible;
+      if (!visible)
         return;
-      }
 
       var edgeOffset = (-bubbleArrow.clientHeight / 2) + 'px';
-      bubbleArrow.style.top = this.arrowAtTop_ ? edgeOffset : 'auto';
-      bubbleArrow.style.bottom = this.arrowAtTop_ ? 'auto' : edgeOffset;
+      bubbleArrow.style.top = atTop ? edgeOffset : 'auto';
+      bubbleArrow.style.bottom = atTop ? 'auto' : edgeOffset;
 
-      edgeOffset = (tipOffset - bubbleArrow.clientHeight / 2) + 'px';
+      edgeOffset = (tipOffset - bubbleArrow.offsetWidth / 2) + 'px';
       bubbleArrow.style.left = this.arrowAtRight_ ? 'auto' : edgeOffset;
       bubbleArrow.style.right = this.arrowAtRight_ ? edgeOffset : 'auto';
     },
@@ -282,7 +291,8 @@ cr.define('cr.ui', function() {
       this.style.left = left + 'px';
       this.style.top = top + 'px';
 
-      this.updateArrowPosition_(true, BubbleBase.ARROW_OFFSET);
+      this.updateArrowPosition_(true, this.arrowAtTop_,
+                                BubbleBase.ARROW_OFFSET);
     },
 
     /**