3 files changed, 123 insertions, 3 deletions

diff --git a/chrome/browser/views/browser_actions_container.cc b/chrome/browser/views/browser_actions_container.cc
index 88c2b02..73981c29 100644
--- a/chrome/browser/views/browser_actions_container.cc
+++ b/chrome/browser/views/browser_actions_container.cc
@@ -4,6 +4,8 @@
 
 #include "chrome/browser/views/browser_actions_container.h"
 
+#include "app/gfx/canvas.h"
+#include "app/resource_bundle.h"
 #include "base/stl_util-inl.h"
 #include "chrome/browser/extensions/extension_browser_event_router.h"
 #include "chrome/browser/extensions/extensions_service.h"
@@ -15,15 +17,24 @@
 #include "chrome/common/extensions/extension_action.h"
 #include "chrome/common/notification_source.h"
 #include "chrome/common/notification_type.h"
+#include "grit/app_resources.h"
 #include "third_party/skia/include/core/SkBitmap.h"
+#include "third_party/skia/include/core/SkTypeface.h"
+#include "third_party/skia/include/effects/SkGradientShader.h"
 #include "views/controls/button/menu_button.h"
+#include "views/controls/button/text_button.h"
 
 // The size of the icon for page actions.
-static const int kIconSize = 30;
+static const int kIconSize = 29;
 
 // The padding between the browser actions and the omnibox/page menu.
 static const int kHorizontalPadding = 4;
 
+// This is the same value from toolbar.cc. We position the browser actions
+// container flush with the edges of the toolbar as a special case so that we
+// can draw the badge outside the visual bounds of the contianer.
+static const int kControlVertOffset = 6;
+
 ////////////////////////////////////////////////////////////////////////////////
 // BrowserActionImageView
 
@@ -349,7 +360,8 @@ void BrowserActionsContainer::Layout() {
   for (size_t i = 0; i < browser_action_views_.size(); ++i) {
     views::TextButton* view = browser_action_views_[i];
     int x = kHorizontalPadding + i * kIconSize;
-    view->SetBounds(x, (height() - kIconSize) / 2, kIconSize, kIconSize);
+    view->SetBounds(x, kControlVertOffset, kIconSize,
+        height() - (2 * kControlVertOffset));
   }
 }
 
@@ -384,3 +396,101 @@ void BrowserActionsContainer::BubbleLostFocus(BrowserBubble* bubble) {
   MessageLoop::current()->PostTask(FROM_HERE,
       task_factory_.NewRunnableMethod(&BrowserActionsContainer::HidePopup));
 }
+
+void BrowserActionsContainer::PaintChildren(gfx::Canvas* canvas) {
+  View::PaintChildren(canvas);
+
+  // TODO(aa): Hook this up to the API to feed the badge color and text
+  // dynamically.
+  std::string text;
+  for (size_t i = 0; i < browser_action_views_.size(); ++i) {
+    if (i > 0) {
+      text += IntToString(i);
+      PaintBadge(canvas, browser_action_views_[i],
+                 SkColorSetARGB(255, 218, 0, 24), text);
+    }
+  }
+}
+
+void BrowserActionsContainer::PaintBadge(gfx::Canvas* canvas, 
+                                         views::TextButton* view,
+                                         const SkColor& badge_color,
+                                         const std::string& text) {
+  const int kTextSize = 8;
+  const int kBottomMargin = 6;
+  const int kPadding = 2;
+  const int kBadgeHeight = 11;
+  const int kMaxTextWidth = 23;
+  const int kCenterAlignThreshold = 20;  // at than width, we center align
+
+  canvas->save();
+
+  SkTypeface* typeface = SkTypeface::CreateFromName("Arial", SkTypeface::kBold);
+  SkPaint text_paint;
+  text_paint.setAntiAlias(true);
+  text_paint.setColor(SkColorSetARGB(255, 255, 255, 255));
+  text_paint.setFakeBoldText(true);
+  text_paint.setTextAlign(SkPaint::kLeft_Align);
+  text_paint.setTextSize(SkIntToScalar(kTextSize));
+  text_paint.setTypeface(typeface);
+
+  // Calculate text width. We clamp it to a max size.
+  SkScalar text_width = text_paint.measureText(text.c_str(), text.size());
+  text_width = SkIntToScalar(
+      std::min(kMaxTextWidth, SkScalarFloor(text_width)));
+
+  // Cacluate badge size. It is clamped to a min width just because it looks
+  // silly if it is too skinny.
+  int badge_width = SkScalarFloor(text_width) + kPadding * 2;
+  badge_width = std::max(kBadgeHeight, badge_width);
+
+  // Paint the badge background color in the right location. It is usually
+  // right-aligned, but it can also be center-aligned if it is large.
+  SkRect rect;
+  rect.fBottom = SkIntToScalar(height() - kBottomMargin);
+  rect.fTop = rect.fBottom - SkIntToScalar(kBadgeHeight);
+  if (badge_width >= kCenterAlignThreshold) {
+    rect.fLeft = SkIntToScalar(view->bounds().x() +
+        (view->bounds().width() - badge_width) / 2);
+    rect.fRight = rect.fLeft + SkIntToScalar(badge_width);
+  } else {
+    rect.fRight = SkIntToScalar(view->bounds().right());
+    rect.fLeft = rect.fRight - badge_width;
+  }
+
+  SkPaint rect_paint;
+  rect_paint.setStyle(SkPaint::kFill_Style);
+  rect_paint.setAntiAlias(true);
+  rect_paint.setColor(badge_color);
+  canvas->drawRoundRect(rect, SkIntToScalar(2), SkIntToScalar(2), rect_paint);
+
+  // Overlay the gradient. It is stretchy, so we do this in three parts.
+  ResourceBundle& resource_bundle = ResourceBundle::GetSharedInstance();
+  SkBitmap* gradient_left = resource_bundle.GetBitmapNamed(
+      IDR_BROWSER_ACTION_BADGE_LEFT);
+  SkBitmap* gradient_right = resource_bundle.GetBitmapNamed(
+      IDR_BROWSER_ACTION_BADGE_RIGHT);
+  SkBitmap* gradient_center = resource_bundle.GetBitmapNamed(
+      IDR_BROWSER_ACTION_BADGE_CENTER);
+
+  canvas->drawBitmap(*gradient_left, rect.fLeft, rect.fTop);
+  canvas->TileImageInt(*gradient_center,
+      SkScalarFloor(rect.fLeft) + gradient_left->width(),
+      SkScalarFloor(rect.fTop),
+      SkScalarFloor(rect.width()) - gradient_left->width() -
+                    gradient_right->width(),
+      SkScalarFloor(rect.height()));
+  canvas->drawBitmap(*gradient_right,
+      rect.fRight - SkIntToScalar(gradient_right->width()), rect.fTop);
+
+  // Finally, draw the text centered within the badge. We set a clip in case the
+  // text was too large.
+  rect.fLeft += kPadding;
+  rect.fRight -= kPadding;
+  canvas->clipRect(rect);
+  canvas->drawText(text.c_str(), text.size(),
+                   rect.fLeft + (rect.width() - text_width) / 2,
+                   rect.fTop + kTextSize + 1,
+                   text_paint);
+  canvas->restore();
+}
diff --git a/chrome/browser/views/browser_actions_container.h b/chrome/browser/views/browser_actions_container.h
index 178a3a2..b0aebec 100644
--- a/chrome/browser/views/browser_actions_container.h
+++ b/chrome/browser/views/browser_actions_container.h
@@ -20,6 +20,7 @@ class Profile;
 class ToolbarView;
 namespace views {
 class MenuButton;
+class TextButton;
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -66,9 +67,18 @@ class BrowserActionsContainer : public views::View,
   virtual void BubbleLostFocus(BrowserBubble* bubble);
 
  private:
+
   // Hide the current popup.
   void HidePopup();
 
+  // We override PaintChildren so that we can paint the badges on top of them.
+  virtual void PaintChildren(gfx::Canvas* canvas);
+
+  // Paints an individual badge.
+  virtual void PaintBadge(gfx::Canvas* canvas, views::TextButton* button,
+                          const SkColor& badge_color,
+                          const std::string& text);
+
   // The vector of browser actions (icons/image buttons for each action).
   std::vector<views::MenuButton*> browser_action_views_;
 
diff --git a/chrome/browser/views/toolbar_view.cc b/chrome/browser/views/toolbar_view.cc
index aeb13c3..dbc6fda 100644
--- a/chrome/browser/views/toolbar_view.cc
+++ b/chrome/browser/views/toolbar_view.cc
@@ -539,7 +539,7 @@ void ToolbarView::Layout() {
   }
 
   browser_actions_->SetBounds(
-      next_menu_x, child_y, browser_actions_width, child_height);
+      next_menu_x, 0, browser_actions_width, height());
   next_menu_x += browser_actions_width;
 
   page_menu_->SetBounds(next_menu_x, child_y, page_menu_width, child_height);