Spruce up the notification UI to much more closely match the mocks, including a new stylesheet from Glen for text+icon notifications, and little icons for the buttons.

Part of the CL includes new features for TextButton class to control icon placement and appearance on hover.

BUG=none
TEST=notifications

Review URL: http://codereview.chromium.org/450045

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

2 files changed, 67 insertions, 11 deletions

diff --git a/views/controls/button/text_button.cc b/views/controls/button/text_button.cc
index 068b323..0df9578c 100644
--- a/views/controls/button/text_button.cc
+++ b/views/controls/button/text_button.cc
@@ -29,6 +29,8 @@ const SkColor TextButton::kEnabledColor = SkColorSetRGB(6, 45, 117);
 const SkColor TextButton::kHighlightColor = SkColorSetARGB(200, 255, 255, 255);
 // static
 const SkColor TextButton::kDisabledColor = SkColorSetRGB(161, 161, 146);
+// static
+const SkColor TextButton::kHoverColor = TextButton::kEnabledColor;
 
 // How long the hover fade animation should last.
 static const int kHoverAnimationDurationMs = 170;
@@ -158,12 +160,15 @@ void TextButtonBorder::GetInsets(gfx::Insets* insets) const {
 TextButton::TextButton(ButtonListener* listener, const std::wstring& text)
     : CustomButton(listener),
       alignment_(ALIGN_LEFT),
+      icon_placement_(ICON_ON_LEFT),
       font_(ResourceBundle::GetSharedInstance().GetFont(
           ResourceBundle::BaseFont)),
       color_(kEnabledColor),
       color_enabled_(kEnabledColor),
       color_disabled_(kDisabledColor),
       color_highlight_(kHighlightColor),
+      color_hover_(kHoverColor),
+      has_hover_icon_(false),
       max_width_(0) {
   SetText(text);
   set_border(new TextButtonBorder);
@@ -186,6 +191,11 @@ void TextButton::SetIcon(const SkBitmap& icon) {
   icon_ = icon;
 }
 
+void TextButton::SetHoverIcon(const SkBitmap& icon) {
+  icon_hover_ = icon;
+  has_hover_icon_ = true;
+}
+
 void TextButton::SetFont(const gfx::Font& font) {
   font_ = font;
 }
@@ -204,6 +214,10 @@ void TextButton::SetHighlightColor(SkColor color) {
   color_highlight_ = color;
 }
 
+void TextButton::SetHoverColor(SkColor color) {
+  color_hover_ = color;
+}
+
 void TextButton::ClearMaxTextSize() {
   max_text_size_ = text_size_;
 }
@@ -228,13 +242,19 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
     PaintFocusBorder(canvas);
   }
 
+  SkBitmap icon;
+  if (has_hover_icon_ && (state() == BS_HOT || state() == BS_PUSHED))
+    icon = icon_hover_;
+  else
+    icon = icon_;
+
   gfx::Insets insets = GetInsets();
   int available_width = width() - insets.width();
   int available_height = height() - insets.height();
   // Use the actual text (not max) size to properly center the text.
   int content_width = text_size_.width();
-  if (icon_.width() > 0) {
-    content_width += icon_.width();
+  if (icon.width() > 0) {
+    content_width += icon.width();
     if (!text_.empty())
       content_width += kIconTextPadding;
   }
@@ -249,12 +269,19 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
         std::max(0, (available_width - content_width) / 2) + insets.left();
   }
   int text_x = icon_x;
-  if (icon_.width() > 0)
-    text_x += icon_.width() + kIconTextPadding;
+  if (icon.width() > 0)
+    text_x += icon.width() + kIconTextPadding;
   const int text_width = std::min(text_size_.width(),
                                   width() - insets.right() - text_x);
   int text_y = (available_height - text_size_.height()) / 2 + insets.top();
 
+  // If the icon should go on the other side, swap the elements.
+  if (icon_placement_ == ICON_ON_RIGHT) {
+    int new_text_x = icon_x;
+    icon_x = new_text_x + text_width + kIconTextPadding;
+    text_x = new_text_x;
+  }
+
   if (text_width > 0) {
     // Because the text button can (at times) draw multiple elements on the
     // canvas, we can not mirror the button by simply flipping the canvas as
@@ -267,11 +294,17 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
     gfx::Rect text_bounds(text_x, text_y, text_width, text_size_.height());
     text_bounds.set_x(MirroredLeftPointForRect(text_bounds));
 
+    SkColor text_color;
+    if (state() == BS_HOT || state() == BS_PUSHED)
+      text_color = color_hover_;
+    else
+      text_color = color_;
+
     if (for_drag) {
 #if defined(OS_WIN)
       // TODO(erg): Either port DrawStringWithHalo to linux or find an
       // alternative here.
-      canvas->DrawStringWithHalo(text_, font_, color_, color_highlight_,
+      canvas->DrawStringWithHalo(text_, font_, text_color, color_highlight_,
                                  text_bounds.x(),
                                  text_bounds.y(),
                                  text_bounds.width(),
@@ -280,7 +313,7 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
 #else
       canvas->DrawStringInt(text_,
                             font_,
-                            color_,
+                            text_color,
                             text_bounds.x(),
                             text_bounds.y(),
                             text_bounds.width(),
@@ -289,7 +322,7 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
     } else {
       canvas->DrawStringInt(text_,
                             font_,
-                            color_,
+                            text_color,
                             text_bounds.x(),
                             text_bounds.y(),
                             text_bounds.width(),
@@ -297,13 +330,13 @@ void TextButton::Paint(gfx::Canvas* canvas, bool for_drag) {
     }
   }
 
-  if (icon_.width() > 0) {
-    int icon_y = (available_height - icon_.height()) / 2 + insets.top();
+  if (icon.width() > 0) {
+    int icon_y = (available_height - icon.height()) / 2 + insets.top();
 
     // Mirroring the icon position if necessary.
-    gfx::Rect icon_bounds(icon_x, icon_y, icon_.width(), icon_.height());
+    gfx::Rect icon_bounds(icon_x, icon_y, icon.width(), icon.height());
     icon_bounds.set_x(MirroredLeftPointForRect(icon_bounds));
-    canvas->DrawBitmapInt(icon_, icon_bounds.x(), icon_bounds.y());
+    canvas->DrawBitmapInt(icon, icon_bounds.x(), icon_bounds.y());
   }
 }
 
diff --git a/views/controls/button/text_button.h b/views/controls/button/text_button.h
index 20848db..d895a6e 100644
--- a/views/controls/button/text_button.h
+++ b/views/controls/button/text_button.h
@@ -87,6 +87,19 @@ class TextButton : public CustomButton {
   // Sets the icon.
   void SetIcon(const SkBitmap& icon);
   SkBitmap icon() const { return icon_; }
+  void SetHoverIcon(const SkBitmap& icon);
+  SkBitmap icon_hover() const { return icon_hover_; }
+
+  // Meanings are reversed for right-to-left layouts.
+  enum IconPlacement {
+    ICON_ON_LEFT,
+    ICON_ON_RIGHT
+  };
+
+  IconPlacement icon_placement() { return icon_placement_; }
+  void set_icon_placement(IconPlacement icon_placement) {
+    icon_placement_ = icon_placement;
+  }
 
   // TextButton remembers the maximum display size of the text passed to
   // SetText. This method resets the cached maximum display size to the
@@ -98,6 +111,7 @@ class TextButton : public CustomButton {
   void SetEnabledColor(SkColor color);
   void SetDisabledColor(SkColor color);
   void SetHighlightColor(SkColor color);
+  void SetHoverColor(SkColor color);
 
   // Paint the button into the specified canvas. If |for_drag| is true, the
   // function paints a drag image representation into the canvas.
@@ -112,6 +126,7 @@ class TextButton : public CustomButton {
   static const SkColor kEnabledColor;
   static const SkColor kHighlightColor;
   static const SkColor kDisabledColor;
+  static const SkColor kHoverColor;
 
  protected:
   virtual bool OnMousePressed(const MouseEvent& e);
@@ -135,6 +150,9 @@ class TextButton : public CustomButton {
   // The alignment of the text string within the button.
   TextAlignment alignment_;
 
+  // The position of the icon.
+  IconPlacement icon_placement_;
+
   // The font used to paint the text.
   gfx::Font font_;
 
@@ -145,10 +163,15 @@ class TextButton : public CustomButton {
   SkColor color_enabled_;
   SkColor color_disabled_;
   SkColor color_highlight_;
+  SkColor color_hover_;
 
   // An icon displayed with the text.
   SkBitmap icon_;
 
+  // An optional different version of the icon for hover state.
+  SkBitmap icon_hover_;
+  bool has_hover_icon_;
+
   // The width of the button will never be larger than this value. A value <= 0
   // indicates the width is not constrained.
   int max_width_;