Change the appearance of the App Notification bubble.

- Smaller, more compact bubble.
- Bubble can now be smaller than width of anchor node.
- New arrow image provided which makes the arrow smaller.
- Title increases in size just a tad bit (when expanded). 
- Title (in bubble collapsed mode) has some transparency mask on the right side, suggesting to the user that not all the text is visible.

BUG=108678
TEST=Visual inspection of the bubble, both expanded and collapsed.
Review URL: http://codereview.chromium.org/9046002

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

5 files changed, 86 insertions, 90 deletions

diff --git a/chrome/app/theme/theme_resources_large.grd b/chrome/app/theme/theme_resources_large.grd
index 729d54b..4278ec6 100644
--- a/chrome/app/theme/theme_resources_large.grd
+++ b/chrome/app/theme/theme_resources_large.grd
@@ -11,6 +11,9 @@
       <!-- KEEP THESE IN ALPHABETICAL ORDER AND SYNCHRONIZED WITH
            theme_resources_standard.grd. THIS MEANS THAT EACH ICON IN THIS FILE
            MUST HAVE AN EQUIVALENT ICON IN THE OTHER FILE.-->
+      <include name="IDR_APP_NOTIFICATION_NUB" file="nub.png" type="BINDATA" />
+      <include name="IDR_APP_NOTIFICATION_NUB_MASK" file="nub_mask.png" type="BINDATA" />
+      <include name="IDR_APP_NOTIFICATION_SMALL_BUBBLE" file="small_bubble.png" type="BINDATA" />
       <include name="IDR_BACK" file="large_back.png" type="BINDATA" />
       <include name="IDR_BACK_D" file="large_back_d.png" type="BINDATA" />
       <include name="IDR_BACK_H" file="large_back_h.png" type="BINDATA" />
diff --git a/chrome/app/theme/theme_resources_standard.grd b/chrome/app/theme/theme_resources_standard.grd
index 53b3ada..61bf7a6 100644
--- a/chrome/app/theme/theme_resources_standard.grd
+++ b/chrome/app/theme/theme_resources_standard.grd
@@ -14,6 +14,9 @@
       <!-- KEEP THESE IN ALPHABETICAL ORDER AND SYNCHRONIZED WITH
            theme_resources_large.grd. THIS MEANS THAT EACH ICON IN THIS FILE
            MUST HAVE AN EQUIVALENT ICON IN THE OTHER FILE.-->
+      <include name="IDR_APP_NOTIFICATION_NUB" file="nub.png" type="BINDATA" />
+      <include name="IDR_APP_NOTIFICATION_NUB_MASK" file="nub_mask.png" type="BINDATA" />
+      <include name="IDR_APP_NOTIFICATION_SMALL_BUBBLE" file="small_bubble.png" type="BINDATA" />
       <include name="IDR_BACK" file="back.png" type="BINDATA" />
       <include name="IDR_BACK_D" file="back_d.png" type="BINDATA" />
       <include name="IDR_BACK_H" file="back_h.png" type="BINDATA" />
diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index c54a21c..df194a6 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// 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.
 
@@ -370,6 +370,7 @@ cr.define('ntp4', function() {
         infoBubble.contentTitle = this.createBubbleNode_(notification, false);
         infoBubble.content = this.createBubbleNode_(notification, true);
         infoBubble.show();
+        infoBubble.resizeAndReposition();
 
         this.currentBubbleShowing_ = infoBubble;
       }
diff --git a/chrome/browser/resources/shared/css/expandable_bubble.css b/chrome/browser/resources/shared/css/expandable_bubble.css
index b86b885..b875fd2 100644
--- a/chrome/browser/resources/shared/css/expandable_bubble.css
+++ b/chrome/browser/resources/shared/css/expandable_bubble.css
@@ -4,57 +4,72 @@
  */
 
 .expandable-bubble {
+  -webkit-border-image: url('chrome://theme/IDR_APP_NOTIFICATION_SMALL_BUBBLE')
+                        5 5 7 6 stretch;
+  -webkit-box-sizing: border-box;
+  -webkit-user-select: none;
+  border-width: 5px 5px 7px 6px;
+  color: #444;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 12px;
   position: absolute;
+  z-index: 1;
 }
 
-.expandable-bubble[expanded] {
-  width: 300px;
-}
-
-.expandable-bubble-contents {
-  color: black;
-  font-size: 12px;
-  left: 1px;
-  line-height: 150%;
-  padding: 6px 3px 5px 6px;
-  position: relative;
-  right: 1px;
-  top: 1px;
-  z-index: 3;
+.expandable-bubble::after {
+  bottom: -1px;
+  content: url('chrome://theme/IDR_APP_NOTIFICATION_NUB');
+  display: block;
+  height: 7px;
+  position: absolute;
+  right: 5px;  /* TODO(finnur): Need to handle RTL properly. */
+  width: 9px;
 }
 
-.expandable-bubble[expanded] > .expandable-bubble-close { 
-  z-index : 8;
-}
-.expandable-bubble[expanded] > .expandable-bubble-contents {
-  z-index : 7;
-}
-.expandable-bubble[expanded] > .expandable-bubble-arrow {
-  z-index : 6;
-}
-.expandable-bubble[expanded] > .expandable-bubble-shadow {
-  z-index : 5;  /* One higher then the close button on an unexpanded bubble. */
+.expandable-bubble > .expandable-bubble-contents > .expandable-bubble-title {
+  display: inline-block;
+  margin-left: 1px;
+  margin-top : -3px;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.expandable-bubble-title {
-  font-size: 12px;
+.expandable-bubble[masked] > .expandable-bubble-contents >
+    .expandable-bubble-title::after {
+  content: url('chrome://theme/IDR_APP_NOTIFICATION_NUB_MASK');
+  display: block;
+  height: 15px;
   overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 12px;
 }
 
-.expandable-bubble[expanded] > .expandable-bubble-contents > .expandable-bubble-title {
-  text-align: left;
+.expandable-bubble[expanded] > .expandable-bubble-contents >
+    .expandable-bubble-title {
+  font-size: 13px;
+  margin-left: 0;
+  margin-bottom: 3px;
 }
 
 .expandable-bubble-close {
   background-image: no-repeat 50% 50%;  
   height: 16px;
   position: absolute;
-  right: 6px;
-  top: 6px;
+  right: 0;
+  top: 0;
   width: 16px;
+  z-index: 2;
+}
+
+.expandable-bubble[expanded] {
+  padding: 3px;
+  z-index: 3;  /* One higher then the close button on an unexpanded bubble. */
+}
+
+.expandable-bubble[expanded] > .expandable-bubble-close { 
   z-index: 4;
 }
 
@@ -69,45 +84,3 @@
 .expandable-bubble-close:active {
   background-image: url('chrome://theme/IDR_CLOSE_BAR_P');
 }
-
-.expandable-bubble-shadow {
-  bottom: -2px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-}
-
-.expandable-bubble-arrow {
-  /* The tip of the arrow.  */
-  border-bottom-right-radius: 1px;
-  /* No border on the right or top (inner sides of the rotated square) because
-   * it would overlap/darken the content shadow. */
-  border-right: none;
-  border-top: none;
-  bottom: -9px;
-  height: 15px;
-  position: absolute;
-  right: 15px;
-  width: 15px;
-  z-index: 2;
-  -webkit-transform: rotate(45deg);
-}
-
-.expandable-bubble-contents,
-.expandable-bubble-arrow {
-  background: white;
-}
-
-.expandable-bubble-shadow,
-.expandable-bubble-arrow {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-.expandable-bubble-shadow,
-.expandable-bubble-contents {
-  border-radius: 6px;
-  box-sizing: border-box;
-}
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 33ad303..baaebf7 100644
--- a/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
+++ b/chrome/browser/resources/shared/js/cr/ui/expandable_bubble.js
@@ -1,4 +1,4 @@
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// 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.
 
@@ -30,9 +30,7 @@ cr.define('cr.ui', function() {
             '<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>';
+          '<div class="expandable-bubble-close" hidden></div>';
 
       this.hidden = true;
       this.bubbleSuppressed = false;
@@ -113,9 +111,14 @@ cr.define('cr.ui', function() {
     reposition_: function() {
       var clientRect = this.anchorNode_.getBoundingClientRect();
 
-      this.style.left = this.style.right = clientRect.left + 'px';
+      // Center bubble in collapsed mode (if it doesn't take up all the room we
+      // have).
+      var offset = 0;
+      if (!this.expanded)
+        offset = (clientRect.width - parseInt(this.style.width)) / 2;
+      this.style.left = this.style.right = clientRect.left + offset + 'px';
 
-      var top = clientRect.top - 1;
+      var top = Math.max(0, clientRect.top - 4);
       this.style.top = this.expanded ?
           (top - this.offsetHeight + this.unexpandedHeight) + 'px' :
           top + 'px';
@@ -132,7 +135,11 @@ cr.define('cr.ui', function() {
       var bubbleTitle = this.querySelector('.expandable-bubble-title');
       var closeElement = this.querySelector('.expandable-bubble-close');
       var closeWidth = this.expanded ? closeElement.clientWidth : 0;
-      var margin = 12;
+      var margin = 15;
+
+      // Suppress the width style so we can get it to calculate its width.
+      // We'll set the right width again when we are done.
+      bubbleTitle.style.width = '';
 
       if (this.expanded) {
         // We always show the full title but never show less width than 250
@@ -142,17 +149,17 @@ cr.define('cr.ui', function() {
         this.style.marginLeft = (width - expandedWidth) + 'px';
         width = expandedWidth;
       } else {
+        var newWidth = Math.min(bubbleTitle.scrollWidth + margin, width);
+        // If we've maxed out in width then apply the mask.
+        this.masked = newWidth == width;
+        width = newWidth;
         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.
+      // Width is determined by the width of the title (when not expanded) but
+      // capped to the width of the anchor node.
       this.style.width = width + '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_();
@@ -281,6 +288,15 @@ cr.define('cr.ui', function() {
    */
   cr.defineProperty(ExpandableBubble, 'expanded', cr.PropertyKind.BOOL_ATTR);
 
+  /**
+   * Whether the title needs to be masked out towards the right, which indicates
+   * to the user that part of the text is clipped. This is only used when the
+   * bubble is collapsed and the title doesn't fit because it is maxed out in
+   * width within the anchored node.
+   * @type {boolean}
+   */
+  cr.defineProperty(ExpandableBubble, 'masked', cr.PropertyKind.BOOL_ATTR);
+
   return {
     ExpandableBubble: ExpandableBubble
   };