Update the notification bubble.

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

Index: chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
===================================================================
--- chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js	(revision 0)
+++ chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js	(revision 0)
@@ -0,0 +1,228 @@
+// Copyright (c) 2011 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() {
+  'use strict';
+
+  /**
+   * ExpandableBubble is a free-floating compact informational bubble with an
+   * arrow that points at a place of interest on the page. When clicked, the
+   * bubble expands to show more of its content. Width of the bubble is the
+   * width of the node it is overlapping when unexpanded. Expanded, it is of a
+   * fixed width, but variable height. Currently the arrow is always positioned
+   * at the bottom right and points down.
+   * @constructor
+   * @extends {cr.ui.div}
+   */
+  var ExpandableBubble = cr.ui.define('div');
+
+  ExpandableBubble.prototype = {
+    __proto__: HTMLDivElement.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      this.className = 'expandable-bubble';
+      this.innerHTML =
+          '<div class="expandable-bubble-contents">' +
+            '<div class="expandable-bubble-title"></div>' +
+            '<div class="expandable-bubble-main" hidden></div>' +
+          '</div>' +
+          '<div class="expandable-bubble-close" hidden></div>' +
+          '<div class="expandable-bubble-shadow"></div>' +
+          '<div class="expandable-bubble-arrow"></div>';
+
+      this.hidden = true;
+    },
+
+    /**
+     * Sets the title of the bubble. The title is always visible when the
+     * bubble is visible.
+     * @type {node} An HTML element to set as the title.

[arv (Not doing code reviews), 2011/10/18 16:50:30]

{Node}

+     */
+    set contentTitle(node) {
+      var bubbleTitle = this.querySelector('.expandable-bubble-title');
+      bubbleTitle.textContent = '';
+      bubbleTitle.appendChild(node);
+    },
+
+    /**
+     * Sets the content node of the bubble. The content node is only visible
+     * when the bubble is expanded.
+     * @param {node} An HTML element.
+     */
+    set content(node) {
+      var bubbleMain = this.querySelector('.expandable-bubble-main');
+      bubbleMain.textContent = '';
+      bubbleMain.appendChild(node);
+    },
+
+    /**
+     * Sets the anchor node, i.e. the node that this bubble points at and
+     * partially overlaps.
+     * @param {HTMLElement} node The new anchor node.
+     */
+    set anchorNode(node) {
+      this.anchorNode_ = node;
+
+      if (!this.hidden)
+        this.resizeAndReposition_();
+    },
+
+    /**
+     * Updates the position of the bubble.
+     * @private
+     */
+    reposition_: function() {
+      var clientRect = this.anchorNode_.getBoundingClientRect();
+      this.style.left = this.style.right = clientRect.left + 'px';
+
+      var top = clientRect.top - 1;
+      if (this.getAttribute('expanded') != null) {

[arv (Not doing code reviews), 2011/10/18 16:50:30]

or hasAttribute

There is also a "macro" in cr.js that allows you to do:

cr.defineProperty(ExpandableBubble, 'expanded', cr.PropertyKind.BOOL_ATTR);

after that you can use it as an ordinary property. See 
http://www.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/sha...
 for sample usage.

[Finnur, 2011/10/19 15:12:30]

Ooh, nice.

+        this.style.top =
+            (top - this.offsetHeight + this.unexpandedHeight) + 'px';
+      } else {
+        this.style.top = top + 'px';
+      }
+    },
+
+    /**
+     * Resizes the bubble and then repositions it.
+     * @private
+     */
+    resizeAndReposition_: function() {
+      var clientRect = this.anchorNode_.getBoundingClientRect();
+      var width = clientRect.width;
+      if (this.getAttribute('expanded') != null) {
+        var expandedWidth = 250;
+        this.style.marginLeft = (width - expandedWidth) + 'px';
+        width = expandedWidth;
+      } else {
+        this.style.marginLeft = '0';
+      }
+
+      // Width is dynamic (when not expanded) based on the width of the anchor
+      // node, and the title and shadow need to follow suit.
+      this.style.width = width + 'px';
+      var bubbleTitle = this.querySelector('.expandable-bubble-title');
+      bubbleTitle.style.width = width - 2 + 'px';
+      var bubbleContent = this.querySelector('.expandable-bubble-main');
+      bubbleContent.style.width = width - 12 + 'px';
+      var bubbleShadow = this.querySelector('.expandable-bubble-shadow');
+      bubbleShadow.style.width = width + 2 + 'px';
+
+      // Also reposition the bubble -- dimensions have potentially changed.
+      this.reposition_();
+    },
+
+    /*
+     * Expand the bubble (bringing the full content into view).
+     * @private
+     */
+    expandBubble_: function() {
+      this.querySelector('.expandable-bubble-main').hidden = false;
+      this.querySelector('.expandable-bubble-close').hidden = false;
+      this.setAttribute('expanded', '');
+      this.resizeAndReposition_();
+    },
+
+    /**
+     * Collapse the bubble, hiding the main content and the close button.
+     * This is automatically called when the window is resized.
+     * @private
+     */
+    collapseBubble_: function() {
+      this.querySelector('.expandable-bubble-main').hidden = true;
+      this.querySelector('.expandable-bubble-close').hidden = true;
+      this.removeAttribute('expanded');
+      this.resizeAndReposition_();
+    },
+
+    /**
+     * The onclick handler for the notification (expands the bubble).
+     * @param {Event} e The event.
+     * @private
+     */
+    onNotificationClick_ : function(e) {
+      if (!this.contains(e.target))
+        return;
+
+      if (this.getAttribute('expanded') == null) {
+        // Save the height of the unexpanded bubble, so we can make sure to
+        // position it correctly (arrow points in the same location) after
+        // we expand it.
+        this.unexpandedHeight = this.offsetHeight;
+      }
+
+      this.expandBubble_();
+    },
+
+    /**
+     * Starts showing the bubble. The bubble will grab input and show until the
+     * user clicks away.
+     */
+    show: function() {
+      if (!this.hidden)
+        return;
+
+      document.body.appendChild(this);
+      this.hidden = false;
+      this.resizeAndReposition_();
+
+      this.eventTracker_ = new EventTracker;
+      this.eventTracker_.add(window,
+                             'load', this.resizeAndReposition_.bind(this));
+      this.eventTracker_.add(window,
+                             'resize', this.collapseBubble_.bind(this));
+      this.eventTracker_.add(window,
+                             'click', this.onNotificationClick_.bind(this));
+
+      var doc = this.ownerDocument;
+      this.eventTracker_.add(doc, 'keydown', this, true);

[Finnur, 2011/10/20 11:36:08]

Silly question: arv & estade: How do I convert this to a keydown event for this
class only. I've tried various things and looked at how the eventTracker is used
elsewhere, but I've not gotten it to work right.

[Evan Stade, 2011/10/20 17:08:50]

change doc to the node you want to listen on

[arv (Not doing code reviews), 2011/10/20 18:54:13]

Remember that key events are dispatched from the focused element.

+      this.eventTracker_.add(doc, 'mousedown', this, true);
+    },
+
+    /**
+     * Hides the bubble from view.
+     */
+    hide: function() {
+      this.hidden = true;
+      this.eventTracker_.removeAll();
+      this.parentNode.removeChild(this);
+    },
+
+    /**
+     * Handles keydown and mousedown events, dismissing the bubble if
+     * necessary.
+     * @param {Event} e The event.
+     * @private
+     */
+    handleEvent: function(e) {
+      switch (e.type) {
+        case 'keydown':
+          if (e.keyCode == 27)  // Esc.

[Evan Stade, 2011/10/19 01:57:05]

if escape hides, then don't you want blur() to hide as well?

[Finnur, 2011/10/19 15:12:30]

Good question. I think, since the key event is not targeted towards a specific
balloon, that Esc should collapse any expanded bubble, as opposed to hiding it.
Otherwise, you press Esc and all bubbles on screen disappear.

On 2011/10/19 01:57:05, Evan Stade wrote:

[Evan Stade, 2011/10/19 23:26:14]

I agree. Your keyboard handler should only be connected to this bubble, not the
doc.

but I was talking about the blur event, i.e. when the bubble loses focus via
tabbing or other means, that the bubble should collapse. This seems to go hand
in hand with escape causing collapse.

[Finnur, 2011/10/20 11:36:08]

See question above...

On 2011/10/19 23:26:14, Evan Stade wrote:

+            this.hide();
+          break;
+
+        case 'mousedown':
+          if (e.target == this.querySelector('.expandable-bubble-close')) {
+            this.hide();
+          } else if (!this.contains(e.target)) {
+            if (this.getAttribute('expanded') != null)
+              this.collapseBubble_();
+          }
+          break;
+      }
+
+      e.stopPropagation();

[Evan Stade, 2011/10/19 01:57:05]

I am not sure whether these are desired in the mousedown case since you are not
trying to emulate a focus grab

[Finnur, 2011/10/19 15:12:30]

Do you mean I don't need it for the keyboard event? 
If I remove it for mousedown I see some wonkyness when I click the
within/outside the bubble (the web store icon pulsates).

This is by the way exactly what bubble.js does in this function...

On 2011/10/19 01:57:05, Evan Stade wrote:

[Evan Stade, 2011/10/19 23:26:14]

no, I mean that you don't need it for mousedown
that is an unrelated bug fixed on tip of tree
because bubble.js is emulating a focus grab.

[Finnur, 2011/10/20 11:36:08]

Ah, I see. 

On 2011/10/19 23:26:14, Evan Stade wrote:

+      e.preventDefault();
+      return;
+    },
+  };
+
+  return {
+    ExpandableBubble: ExpandableBubble
+  };
+});
Property changes on: chrome\browser\resources\shared\js\cr\ui\expandable_bubble.js
___________________________________________________________________
Added: svn:eol-style
   + LF