Update the notification bubble.

chrome/browser/resources/ntp4/apps_page.js

 // 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.
 
 cr.define('ntp4', function() {
   'use strict';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 266 matching lines @@
      */
     loadIcon: function() {
       if (this.appImgSrc_) {
         this.appImg_.src = this.appImgSrc_;
         this.appImg_.classList.remove('invisible');
         this.appImgSrc_ = null;
       }
       this.classList.remove('icon-loading');
     },
 
-    // Shows a notification text below the app icon and stuffs the attributes
-    // necessary to show the bubble when the user clicks on the notification
-    // text.
-    setupNotification_: function(notification) {
-      // Remove the old notification from this node (if any).
-      if (this.appNotification_)
-        this.appNotification_.parentNode.removeChild(this.appNotification_);
+    /*

[arv (Not doing code reviews), 2011/10/14 22:20:55]

Missing *

/**

+     * Creates a bubble node.
+     * @param {Object} notification The notification to show in the bubble.
+     * @param {boolean} full Whether we want the headline or just the content.

[arv (Not doing code reviews), 2011/10/14 22:20:55]

@private

+     */
+    createBubbleNode_: function(notification, full) {
+      if (!full) {
+        var titleItem = this.ownerDocument.createElement('span');
+        titleItem.textContent = notification['title'];
+        return titleItem;
+      } else {
+        var container = this.ownerDocument.createElement('div');
 
-      if (notification) {
-        // Add a new notification to this node.
-        var appNotification = this.ownerDocument.createElement('span');
-        appNotification.className = 'app-notification';
-        appNotification.textContent = notification['title'];
-        appNotification.addEventListener('click',
-                                         this.onNotificationClick_.bind(this));
-        appNotification.notificationTitle = notification['title'];
-        appNotification.notificationMessage = notification['body'];
-        if (typeof notification['linkUrl'] != 'undefined' &&
-            typeof notification['linkText'] != 'undefined') {
-          appNotification.notificationLink = notification['linkUrl'];
-          appNotification.notificationLinkText = notification['linkText'];
+        var messageItem = this.ownerDocument.createElement('div');
+        messageItem.textContent = notification['body'];
+        container.appendChild(messageItem);
+
+        if (notification['linkUrl'] && notification['linkText']) {
+          var anchor = this.ownerDocument.createElement('a');
+          anchor.href = notification['linkUrl'];
+          anchor.textContent = notification['linkText'];
+          container.appendChild(anchor);
         }
-        this.appNotification_ = appNotification;
-        this.appendChild(appNotification);
+
+        return container;
       }
     },
 
+    /*

[arv (Not doing code reviews), 2011/10/14 22:20:55]

Fix comment format here too

+    * Sets up a notification for the app icon.
+    * @param {Object} notification The notification to show in the bubble.
+    */
+    setupNotification_: function(notification) {
+      if (notification) {
+        var infoBubble;
+        if (!this.infoBubbleShowing_) {
+          // Create a new bubble.
+          infoBubble = new cr.ui.ExpandableBubble;
+          infoBubble.anchorNode = this;
+          infoBubble.dismissOnBlur = false;
+        } else {
+          // Reuse the old bubble instead of popping up a new bubble over
+          // the old one.
+          infoBubble = this.infoBubbleShowing_;
+          infoBubble.collapseBubble_();
+        }
+        infoBubble.contentTitle = this.createBubbleNode_(notification, false);
+        infoBubble.content = this.createBubbleNode_(notification, true);
+        infoBubble.show();
+
+        this.infoBubbleShowing_ = infoBubble;

[Evan Stade, 2011/10/14 18:22:59]

can you document this? Also currentlyShowingInfoBubble_ might be a better name
(infoBubbleShowing_ sounds like a boolean)

+      }
+    },
+
     /**
      * Creates the apps-promo section of the app (should only be called for the
      * webstore app).
      * @private
      */
     createAppsPromoExtras_: function() {
       this.classList.add('webstore');
 
       this.appsPromoExtras_ = $('apps-promo-extras-template').cloneNode(true);
       this.appsPromoExtras_.id = '';
@@ skipping 68 matching lines @@
     onClick_: function(e) {
       chrome.send('launchApp',
                   [this.appId, APP_LAUNCH.NTP_APPS_MAXIMIZED,
                    e.altKey, e.ctrlKey, e.metaKey, e.shiftKey, e.button]);
 
       // Don't allow the click to trigger a link or anything
       e.preventDefault();
     },
 
     /**
-     * Invoked when an app notification is clicked. This will show the
-     * notification bubble, containing the details of the notification.
-     * @param {Event} e The click event.
-     * @private
-     */
-    onNotificationClick_: function(e) {
-      var title = this.appNotification_.notificationTitle;
-      var message = this.appNotification_.notificationMessage;
-      var link = this.appNotification_.notificationLink;
-      var linkMessage = this.appNotification_.notificationLinkText;
-
-      if (!title || !message)
-        return;
-
-      var container = this.ownerDocument.createElement('div');
-      var titleItem = this.ownerDocument.createElement('strong');
-      titleItem.textContent = title;
-      container.appendChild(titleItem);
-      var messageDiv = this.ownerDocument.createElement('div');
-      messageDiv.textContent = message;
-      container.appendChild(messageDiv);
-      if (link && linkMessage) {
-        var anchor = this.ownerDocument.createElement('a');
-        anchor.href = link;
-        anchor.textContent = linkMessage;
-        container.appendChild(anchor);
-      }
-
-      var infoBubble = new cr.ui.Bubble;
-      infoBubble.anchorNode = e.target;
-      infoBubble.content = container;
-      infoBubble.show();
-    },
-
-    /**
      * Adds a node to the list of targets that will launch the app. This list
      * is also used in onMousedown to determine whether the app contents should
      * be shown as active (if we don't do this, then clicking anywhere in
      * appContents, even a part that is outside the ideally clickable region,
      * will cause the app icon to look active).
      * @param {HTMLElement} node The node that should be clickable.
      */
     addLaunchClickTarget_: function(node) {
       node.classList.add('launch-click-target');
       node.addEventListener('click', this.onClick_.bind(this));
@@ skipping 62 matching lines @@
     },
 
     /**
      * Uninstalls the app after it's been dropped on the trash.
      */
     removeFromChrome: function() {
       chrome.send('uninstallApp', [this.appData_.id, true]);
 
       this.tile.tilePage.cleanupDrag();
       this.tile.parentNode.removeChild(this.tile);
+
+      if (this.infoBubbleShowing_)
+        infoBubbleShowing_.hide();
     },
 
     /**
      * Called when a drag is starting on the tile. Updates dataTransfer with
      * data for this tile.
      */
     setDragData: function(dataTransfer) {
       dataTransfer.setData('Text', this.appData_.title);
       dataTransfer.setData('URL', this.appData_.url);
     },
@@ skipping 212 matching lines @@
     appNotificationChanged: appNotificationChanged,
     AppsPage: AppsPage,
     launchAppAfterEnable: launchAppAfterEnable,
   };
 });
 
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var appNotificationChanged = ntp4.appNotificationChanged;
 var launchAppAfterEnable = ntp4.launchAppAfterEnable;