[MD] re-skin extension browser action badges

chrome/browser/ui/extensions/icon_with_badge_image_source.cc

Index: chrome/browser/ui/extensions/icon_with_badge_image_source.cc
diff --git a/chrome/common/badge_util.cc b/chrome/browser/ui/extensions/icon_with_badge_image_source.cc
similarity index 34%
rename from chrome/common/badge_util.cc
rename to chrome/browser/ui/extensions/icon_with_badge_image_source.cc
index 66497dbdd9239433c44049759373ac7ddb231d85..1ad59e32cf067ee7116751ceebeaa60e773718ee 100644
--- a/chrome/common/badge_util.cc
+++ b/chrome/browser/ui/extensions/icon_with_badge_image_source.cc
@@ -2,19 +2,23 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-#include "chrome/common/badge_util.h"
+#include "chrome/browser/ui/extensions/icon_with_badge_image_source.h"
 
+#include <algorithm>
 #include <cmath>
 
 #include "base/logging.h"
 #include "base/strings/utf_string_conversions.h"
 #include "third_party/skia/include/core/SkPaint.h"
 #include "third_party/skia/include/core/SkTypeface.h"
+#include "ui/base/resource/material_design/material_design_controller.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/color_palette.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/geometry/rect.h"
 #include "ui/gfx/geometry/size.h"
+#include "ui/gfx/image/image_skia_operations.h"
 #include "ui/resources/grit/ui_resources.h"
 
 namespace {
@@ -44,10 +48,8 @@ const int kMaxTextWidth = 23;
 // The minimum width for center-aligning the badge.
 const int kCenterAlignThreshold = 20;
 
-}  // namespace
-
-namespace badge_util {
-
+// Helper routine that returns a singleton SkPaint object configured for
+// rendering badge overlay text (correct font, typeface, etc).
 SkPaint* GetBadgeTextPaintSingleton() {
 #if defined(OS_MACOSX)
   const char kPreferredTypeface[] = "Helvetica Bold";
@@ -85,99 +87,173 @@ SkPaint* GetBadgeTextPaintSingleton() {
   return text_paint;
 }
 
-void PaintBadge(gfx::Canvas* canvas,
-                const gfx::Rect& bounds,
-                const std::string& text,
-                const SkColor& text_color_in,
-                const SkColor& background_color_in,
-                int icon_width) {
-  if (text.empty())
+}  // namespace
+
+IconWithBadgeImageSource::Badge::Badge(const std::string& text,
+                                       SkColor text_color,
+                                       SkColor background_color)
+    : text(text), text_color(text_color), background_color(background_color) {}
+
+IconWithBadgeImageSource::Badge::~Badge() {}
+
+IconWithBadgeImageSource::IconWithBadgeImageSource(const gfx::Size& size)
+    : gfx::CanvasImageSource(size, false),
+      grayscale_(false),
+      paint_decoration_(false) {}
+
+IconWithBadgeImageSource::~IconWithBadgeImageSource() {}
+
+void IconWithBadgeImageSource::SetIcon(const gfx::Image& icon) {
+  icon_ = icon;
+}
+
+void IconWithBadgeImageSource::SetBadge(scoped_ptr<Badge> badge) {
+  badge_ = badge.Pass();
+}
+
+void IconWithBadgeImageSource::Draw(gfx::Canvas* canvas) {
+  if (icon_.IsEmpty())
+    return;
+
+  int x_offset = std::floor((size().width() - icon_.Width()) / 2.0);
+  int y_offset = std::floor((size().height() - icon_.Height()) / 2.0);
+  gfx::ImageSkia skia = icon_.AsImageSkia();
+  if (grayscale_)
+    skia = gfx::ImageSkiaOperations::CreateHSLShiftedImage(skia, {-1, 0, 0.6});
+  canvas->DrawImageInt(skia, x_offset, y_offset);
+
+  // Draw a badge on the provided browser action icon's canvas.
+  PaintBadge(canvas);
+
+  if (paint_decoration_)
+    PaintDecoration(canvas);
+}
+
+// Paints badge with specified parameters to |canvas|.
+void IconWithBadgeImageSource::PaintBadge(gfx::Canvas* canvas) {
+  if (!badge_ || badge_->text.empty())
     return;
 
-  SkColor text_color = text_color_in;
-  if (SkColorGetA(text_color_in) == 0x00)
-    text_color = SK_ColorWHITE;
+  SkColor text_color = SkColorGetA(badge_->text_color) == SK_AlphaTRANSPARENT
+                           ? SK_ColorWHITE
+                           : badge_->text_color;
 
-  SkColor background_color = background_color_in;
-  if (SkColorGetA(background_color_in) == 0x00)
-      background_color = SkColorSetARGB(255, 218, 0, 24);
+  SkColor background_color = ui::MaterialDesignController::IsModeMaterial()
+                                 ? gfx::kGoogleBlue500
+                                 : SkColorSetARGB(255, 218, 0, 24);
+  if (SkColorGetA(badge_->background_color) != SK_AlphaTRANSPARENT)
+    background_color = badge_->background_color;
 
   canvas->Save();
 
-  SkPaint* text_paint = badge_util::GetBadgeTextPaintSingleton();
-  text_paint->setColor(text_color);
-  float scale = canvas->image_scale();
-
-  // Calculate text width. Font width may not be linear with respect to the
-  // scale factor (e.g. when hinting is applied), so we need to use the font
-  // size that canvas actually uses when drawing a text.
-  text_paint->setTextSize(SkFloatToScalar(kTextSize) * scale);
-  SkScalar sk_text_width_in_pixel =
-      text_paint->measureText(text.c_str(), text.size());
-  text_paint->setTextSize(SkFloatToScalar(kTextSize));
-
-  // We clamp the width to a max size. SkPaint::measureText returns the width in
-  // pixel (as a result of scale multiplier), so convert sk_text_width_in_pixel
-  // back to DIP (density independent pixel) first.
-  int text_width =
-      std::min(kMaxTextWidth,
-               static_cast<int>(
-                   std::ceil(SkScalarToFloat(sk_text_width_in_pixel) / scale)));
+  SkPaint* text_paint = nullptr;
+  int text_width = 0;
+  ResourceBundle* rb = &ResourceBundle::GetSharedInstance();

[Devlin, 2015/11/24 23:08:51]

nitty nit: any reason to not use a reference?

[Evan Stade, 2015/11/24 23:32:47]

We typically don't use non-const refs for anything. I've been instructed to
avoid the (very common) pattern of

  ResourceBundle& rb = ResourceBundle::GetSharedInstance();

+  gfx::FontList base_font = rb->GetFontList(ResourceBundle::BaseFont)

[Devlin, 2015/11/24 23:08:51]

nit: const&?

[Evan Stade, 2015/11/24 23:32:47]

DeriveWithHeightUpperBound doesn't return const ref

+                                .DeriveWithHeightUpperBound(kBadgeHeight);
+  base::string16 utf16_text = base::UTF8ToUTF16(badge_->text);
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    text_width =
+        std::min(kMaxTextWidth, canvas->GetStringWidth(utf16_text, base_font));
+  } else {
+    text_paint = GetBadgeTextPaintSingleton();
+    text_paint->setColor(text_color);
+    float scale = canvas->image_scale();
+
+    // Calculate text width. Font width may not be linear with respect to the
+    // scale factor (e.g. when hinting is applied), so we need to use the font
+    // size that canvas actually uses when drawing a text.
+    text_paint->setTextSize(SkFloatToScalar(kTextSize) * scale);
+    SkScalar sk_text_width_in_pixel =
+        text_paint->measureText(badge_->text.c_str(), badge_->text.size());
+    text_paint->setTextSize(SkFloatToScalar(kTextSize));
+
+    // We clamp the width to a max size. SkPaint::measureText returns the width
+    // in pixel (as a result of scale multiplier), so convert
+    // sk_text_width_in_pixel back to DIP (density independent pixel) first.
+    text_width = std::min(
+        kMaxTextWidth, static_cast<int>(std::ceil(
+                           SkScalarToFloat(sk_text_width_in_pixel) / scale)));
+  }
 
   // Calculate badge size. It is clamped to a min width just because it looks
   // silly if it is too skinny.
   int badge_width = text_width + kPadding * 2;
   // Force the pixel width of badge to be either odd (if the icon width is odd)
   // or even otherwise. If there is a mismatch you get http://crbug.com/26400.
-  if (icon_width != 0 && (badge_width % 2 != icon_width % 2))
+  if (size().width() != 0 && (badge_width % 2 != size().width() % 2))
     badge_width += 1;
   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.
-  int rect_height = kBadgeHeight;
-  int rect_y = bounds.bottom() - kBadgeHeight;
-  int rect_width = badge_width;
-  int rect_x = (badge_width >= kCenterAlignThreshold) ?
-      bounds.x() + (bounds.width() - badge_width) / 2 :
-      bounds.right() - badge_width;
-  gfx::Rect rect(rect_x, rect_y, rect_width, rect_height);
-
+  gfx::Rect rect(badge_width >= kCenterAlignThreshold
+                     ? (size().width() - badge_width) / 2
+                     : size().width() - badge_width,
+                 size().height() - kBadgeHeight, badge_width, kBadgeHeight);
   SkPaint rect_paint;
   rect_paint.setStyle(SkPaint::kFill_Style);
   rect_paint.setAntiAlias(true);
   rect_paint.setColor(background_color);
-  canvas->DrawRoundRect(rect, 2, rect_paint);
-
-  // Overlay the gradient. It is stretchy, so we do this in three parts.
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-  gfx::ImageSkia* gradient_left = rb.GetImageSkiaNamed(
-      IDR_BROWSER_ACTION_BADGE_LEFT);
-  gfx::ImageSkia* gradient_right = rb.GetImageSkiaNamed(
-      IDR_BROWSER_ACTION_BADGE_RIGHT);
-  gfx::ImageSkia* gradient_center = rb.GetImageSkiaNamed(
-      IDR_BROWSER_ACTION_BADGE_CENTER);
-
-  canvas->DrawImageInt(*gradient_left, rect.x(), rect.y());
-  canvas->TileImageInt(*gradient_center,
-      rect.x() + gradient_left->width(),
-      rect.y(),
-      rect.width() - gradient_left->width() - gradient_right->width(),
-      rect.height());
-  canvas->DrawImageInt(*gradient_right,
-      rect.right() - gradient_right->width(), rect.y());
-
-  // Finally, draw the text centered within the badge. We set a clip in case the
-  // text was too large.
-  rect.Inset(kPadding, 0);
-  canvas->ClipRect(rect);
-  canvas->sk_canvas()->drawText(
-      text.c_str(), text.size(),
-      SkFloatToScalar(rect.x() +
-                      static_cast<float>(rect.width() - text_width) / 2),
-      SkFloatToScalar(rect.y() + kTextSize + kTopTextPadding),
-      *text_paint);
+
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    gfx::Rect cutout_rect(rect);
+    cutout_rect.Inset(-1, -1);
+    SkPaint cutout_paint = rect_paint;
+    cutout_paint.setXfermodeMode(SkXfermode::kClear_Mode);
+    canvas->DrawRoundRect(cutout_rect, 2, cutout_paint);
+  }
+
+  canvas->DrawRoundRect(
+      rect, ui::MaterialDesignController::IsModeMaterial() ? 1 : 2, rect_paint);
+
+  if (ui::MaterialDesignController::IsModeMaterial()) {
+    rect.Inset(std::max(kPadding, (rect.width() - text_width) / 2),
+               kBadgeHeight - base_font.GetHeight(), kPadding, 0);
+    canvas->DrawStringRect(utf16_text, base_font, text_color, rect);
+  } else {
+    // Overlay the gradient. It is stretchy, so we do this in three parts.

[Devlin, 2015/11/24 23:08:51]

There's enough if (md)/else blocks here that I think this would be more readable
if we had two methods for doing the actual painting, passing in the few shared
params.

Also, a high-level comment or two on the differences between MD and non-MD would
be helpful.

[Evan Stade, 2015/11/24 23:32:47]

I've reduced the number of IsModeMaterial conditionals but I think the shared
code is too interleaved to factor out cleanly.

It's also relevant that MD is going to be default soon (TM). Hence all this
pre-MD code will soon be removed. It will be much easier to just delete some
conditional blocks than to re-integrate two separate functions.
again, MD is going to replace non-MD very shortly. In particular, for this UI,
the only reason for them to coexist is to give us a chance to come to an
agreeable MD version before making the switch. We don't have to wait for the
rest of MD to be enabled. Thus I don't think a comment about the difference
would last very long or be very useful in the meantime (although such
information can be found in the CL description or bug report).

[Devlin, 2015/11/24 23:54:32]

How soon?
I'm not entirely sure I agree with this.  It seems like it's pretty easy to just
inline a function, since it's only called in one place.
if (MD)
  DoMDFoo();
else
  DoLegacyFoo();

DoMdFoo() {
  <foo stuff>
}

becomes
<foo stuff>

Also, there's relatively little here that's actually shared between MD and
non-md, and quite a few things that are instantiated for both because they're
used in separate if-else blocks.  E.g., text_paint (only non-md), utf16_text
(only md), base_font (only md)...

Are you sure it's messier to separate these out than keep them together?  (If
you are, then we can keep it this way - just asking you to think about it
again.)

<update> See also latest patch set comment for an orthogonal suggestion that
would also work.

[Evan Stade, 2015/11/25 00:18:20]

Overall, hopefully M50. For this smallish change (and others before it), sooner
than that (ideally the current milestone, m49).
this example assumes no parameters but the original suggestion involved
parameters
only base font is instantiated for both, and that's fixable, but doesn't seem
super worth it.
I'm sure that's what I believe, yes :) It may or may not be what others believe.
When reading this function, whether you're trying to understand MD or pre-MD,
you can read from top to bottom and just skip the parts that aren't relevant. If
you start slicing and dicing, you can't read from top to bottom any more; you
have to skip around.
I would rather just copy paste the function and have two copies of the same code
(temporarily of course) than put effort into disentangling and then
re-entangling.

[Devlin, 2015/12/01 21:06:42]

I'm not sure I agree, but it's not worth arguing about for code that's hopefully
fairly transient. :)

+    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+    gfx::ImageSkia* gradient_left =
+        rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_LEFT);
+    gfx::ImageSkia* gradient_right =
+        rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_RIGHT);
+    gfx::ImageSkia* gradient_center =
+        rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_CENTER);
+
+    canvas->DrawImageInt(*gradient_left, rect.x(), rect.y());
+    canvas->TileImageInt(
+        *gradient_center, rect.x() + gradient_left->width(), rect.y(),
+        rect.width() - gradient_left->width() - gradient_right->width(),
+        rect.height());
+    canvas->DrawImageInt(*gradient_right,
+                         rect.right() - gradient_right->width(), rect.y());
+
+    // Finally, draw the text centered within the badge. We set a clip in case
+    // the text was too large.
+    rect.Inset(kPadding, 0);
+    canvas->ClipRect(rect);
+    canvas->sk_canvas()->drawText(
+        badge_->text.c_str(), badge_->text.size(),
+        SkFloatToScalar(rect.x() +
+                        static_cast<float>(rect.width() - text_width) / 2),
+        SkFloatToScalar(rect.y() + kTextSize + kTopTextPadding), *text_paint);
+  }
   canvas->Restore();
 }
 
-}  // namespace badge_util
+void IconWithBadgeImageSource::PaintDecoration(gfx::Canvas* canvas) {
+  static const SkColor decoration_color = SkColorSetARGB(255, 70, 142, 226);
+
+  int major_radius = std::ceil(size().width() / 5.0);
+  int minor_radius = std::ceil(major_radius / 2.0);
+  gfx::Point center_point(major_radius + 1, size().height() - (major_radius)-1);
+  SkPaint paint;
+  paint.setAntiAlias(true);
+  paint.setStyle(SkPaint::kFill_Style);
+  paint.setColor(SK_ColorTRANSPARENT);
+  paint.setXfermodeMode(SkXfermode::kSrc_Mode);
+  canvas->DrawCircle(center_point, major_radius, paint);
+  paint.setColor(decoration_color);
+  canvas->DrawCircle(center_point, minor_radius, paint);
+}