First cut at badge implementation. Right now it just uses static

chrome/browser/views/browser_actions_container.cc

Index: chrome/browser/views/browser_actions_container.cc
diff --git a/chrome/browser/views/browser_actions_container.cc b/chrome/browser/views/browser_actions_container.cc
index bae129fbf902c3abc27628c4ff45cd10f68fd8f7..f25b0fcaa886d1bca91e464c091a7530ca6300be 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"
@@ -14,15 +16,23 @@
 #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/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
 
@@ -54,6 +64,9 @@ class BrowserActionImageView : public views::TextButton,
   // Called to update the display to match the browser action's state.
   void OnStateUpdated();
 
+  // Override painting to implement the badge.
+  virtual void Paint(gfx::Canvas* canvas);
+
   // The browser action this view represents. The ExtensionAction is not owned
   // by this class.
   ExtensionAction* browser_action_;
@@ -220,7 +233,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));
   }
 }
 
@@ -235,3 +249,101 @@ void BrowserActionsContainer::Observe(NotificationType type,
     NOTREACHED() << L"Received unexpected notification";
   }
 }
+
+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);

[Erik does not do reviews, 2009/10/01 20:21:04]

Don't we want to be centered?  In the case where there's a minimum sized rect,
and a narrow string, I'd imagine that left aligned would look odd.

+  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();
+}