Implement popup bubbles for the controlled setting indicator

chrome/browser/resources/shared/js/cr/ui/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.
 
 // require: event_tracker.js
 
 cr.define('cr.ui', function() {
 
   /**
    * The arrow location specifies how the arrow and bubble are positioned in
@@ skipping 27 matching lines @@
   var BubbleBase = cr.ui.define('div');
 
   /**
    * The horizontal distance between the tip of the arrow and the reference edge
    * of the bubble (as specified by the arrow location).
    * @const
    */
   BubbleBase.ARROW_OFFSET = 30;
 
   BubbleBase.prototype = {
-    // Set up the prototype chain
+    // Set up the prototype chain.
     __proto__: HTMLDivElement.prototype,
 
     /**
      * Initialization function for the cr.ui framework.
      */
     decorate: function() {
       this.className = 'bubble';
       this.innerHTML =
           '<div class="bubble-content"></div>' +
           '<div class="bubble-shadow"></div>' +
@@ skipping 44 matching lines @@
                          location == ArrowLocation.TOP_END;
     },
 
     /**
      * Show the bubble.
      */
     show: 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;
       this.eventTracker_.add(doc, 'keydown', this, true);
       this.eventTracker_.add(doc, 'mousedown', this, true);
     },
 
     /**
      * Hide the bubble.
      */
     hide: function() {
       if (this.hidden)
         return;
 
+      this.eventTracker_.removeAll();
+      this.anchorNode_.isShowingBubble = false;
       this.hidden = true;
-      this.eventTracker_.removeAll();
       this.parentNode.removeChild(this);
     },
 
     /**
      * Handle keyboard events, dismissing the bubble if necessary.
      * @param {Event} event The event.
      */
     handleEvent: function(event) {
       // Close the bubble when the user presses <Esc>.
       if (event.type == 'keydown' && event.keyCode == 27) {
         this.hide();
         event.preventDefault();
         event.stopPropagation();
       }
     },
 
     /**
+     * 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';
     },
   };
 
   /**
    * The bubble alignment specifies the horizontal position of the bubble in
    * relation to the anchor node.
    * @enum
    */
@@ skipping 96 matching lines @@
         left = this.arrowAtRight_ ?
             anchorMid - this.clientWidth + BubbleBase.ARROW_OFFSET :
             anchorMid - BubbleBase.ARROW_OFFSET;
       }
       var top = this.arrowAtTop_ ? clientRect.bottom + arrowOffsetY :
           clientRect.top - this.clientHeight - arrowOffsetY;
 
       this.style.left = left + 'px';
       this.style.top = top + 'px';
 
-      this.updateArrowPosition_(true, BubbleBase.ARROW_OFFSET);
+      this.updateArrowPosition_(true, this.arrowAtTop_,
+                                BubbleBase.ARROW_OFFSET);
     },
 
     /**
      * Show the bubble.
      */
     show: function() {
       if (!this.hidden)
         return;
 
       BubbleBase.prototype.show.call(this);
@@ skipping 24 matching lines @@
     },
   };
 
   return {
     ArrowLocation: ArrowLocation,
     BubbleBase: BubbleBase,
     BubbleAlignment: BubbleAlignment,
     Bubble: Bubble
   };
 });