Polish the extension app notifications a bit:

1) Add the handleCloseEvent setter so we can get rid of the bubble (munjal, can you take a look at this piece)?
2) Get rid of error message when uninstalling apps.
3) Make sure the bubble doesn't pop up in the top left corner while the icons for the apps are loading.

BUG=88067, 102606
TEST=When loading the NTP, notification bubbles should not flash briefly in the top left corner. The inspector should have no error message when removing (uninstalling apps) and bubbles you close should not come back.
Review URL: http://codereview.chromium.org/8430035

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@109012 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 44 insertions, 11 deletions

diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index 872edd0..dd96ad5 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -337,6 +337,11 @@ cr.define('ntp4', function() {
           // Create a new bubble.
           infoBubble = new cr.ui.ExpandableBubble;
           infoBubble.anchorNode = this;
+          infoBubble.appId = this.appData_.id;
+          infoBubble.handleCloseEvent = function() {
+            chrome.send('closeNotification', [this.appId]);
+            infoBubble.hide();
+          };
         } else {
           // Reuse the old bubble instead of popping up a new bubble over
           // the old one.
@@ -777,7 +782,9 @@ cr.define('ntp4', function() {
   };
 
   function appNotificationChanged(id, notification) {
-    $(id).setupNotification_(notification);
+    var app = $(id);
+    if (app)  // The app might have been uninstalled.
+      app.setupNotification_(notification);
   };
 
   return {
diff --git a/chrome/browser/resources/shared/css/expandable_bubble.css b/chrome/browser/resources/shared/css/expandable_bubble.css
index 712efa0..a756e97 100644
--- a/chrome/browser/resources/shared/css/expandable_bubble.css
+++ b/chrome/browser/resources/shared/css/expandable_bubble.css
@@ -39,6 +39,7 @@
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .expandable-bubble[expanded] > .expandable-bubble-contents > .expandable-bubble-title {
diff --git a/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js b/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
index 24477a2..f7bda3b 100644
--- a/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
+++ b/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
@@ -35,6 +35,7 @@ cr.define('cr.ui', function() {
           '<div class="expandable-bubble-arrow"></div>';
 
       this.hidden = true;
+      this.handleCloseEvent = this.hide;
     },
 
     /**
@@ -72,11 +73,29 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * Handles the close event which is triggered when the close button
+     * is clicked. By default is set to this.hide.
+     * @param {function} A function with no parameters
+     */
+    set handleCloseEvent(func) {
+      this.handleCloseEvent_ = func;
+    },
+
+    /**
      * Updates the position of the bubble.
      * @private
      */
     reposition_: function() {
       var clientRect = this.anchorNode_.getBoundingClientRect();
+      if (clientRect.width <= 0) {
+        // When the page loads initially, the icons for the apps haven't loaded
+        // yet so the width of the anchor is 0. We then make sure we don't draw
+        // at 0,0 by drawing off-screen instead. We'll get another chance to
+        // reposition when the icons have loaded.
+        this.style.top = "-999px";
+        return;
+      }
+
       this.style.left = this.style.right = clientRect.left + 'px';
 
       var top = clientRect.top - 1;
@@ -92,8 +111,17 @@ cr.define('cr.ui', function() {
     resizeAndReposition_: function() {
       var clientRect = this.anchorNode_.getBoundingClientRect();
       var width = clientRect.width;
+
+      var bubbleTitle = this.querySelector('.expandable-bubble-title');
+      var closeElement = this.querySelector('.expandable-bubble-close');
+      var closeWidth = this.expanded ? closeElement.clientWidth : 0;
+      var margin = 12;
+
       if (this.expanded) {
-        var expandedWidth = 250;
+        // We always show the full title but never show less width than 250
+        // pixels.
+        var expandedWidth =
+            Math.max(250, bubbleTitle.scrollWidth + closeWidth + margin);
         this.style.marginLeft = (width - expandedWidth) + 'px';
         width = expandedWidth;
       } else {
@@ -103,14 +131,11 @@ cr.define('cr.ui', function() {
       // 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';
-      if (width > 0) {
-        var bubbleTitle = this.querySelector('.expandable-bubble-title');
-        bubbleTitle.style.width = width ? width - 2 + 'px' : 0 + 'px';
-        var bubbleContent = this.querySelector('.expandable-bubble-main');
-        bubbleContent.style.width = width ? width - 12 + 'px' : 0 + 'px';
-        var bubbleShadow = this.querySelector('.expandable-bubble-shadow');
-        bubbleShadow.style.width = width ? width + 2 + 'px' : 0 + 'px';
-      }
+      bubbleTitle.style.width = Math.max(0, width - margin - closeWidth) + 'px';
+      var bubbleContent = this.querySelector('.expandable-bubble-main');
+      bubbleContent.style.width = Math.max(0, width - margin) + 'px';
+      var bubbleShadow = this.querySelector('.expandable-bubble-shadow');
+      bubbleShadow.style.width = width ? width + 2 + 'px' : 0 + 'px';
 
       // Also reposition the bubble -- dimensions have potentially changed.
       this.reposition_();
@@ -211,7 +236,7 @@ cr.define('cr.ui', function() {
 
         case 'mousedown':
           if (e.target == this.querySelector('.expandable-bubble-close')) {
-            this.hide();
+            this.handleCloseEvent_();
             handled = true;
           } else if (!this.contains(e.target)) {
             if (this.expanded) {