Add support for blue buttons.

ui/views/controls/button/label_button_border.cc

Index: ui/views/controls/button/label_button_border.cc
diff --git a/ui/views/controls/button/label_button_border.cc b/ui/views/controls/button/label_button_border.cc
index 9b7b13afb69827301f0a9148f75507d726546737..3d6c8369fd764c12a6e2bc1701f27cdc9a728438 100644
--- a/ui/views/controls/button/label_button_border.cc
+++ b/ui/views/controls/button/label_button_border.cc
@@ -25,6 +25,16 @@ const int kFocusedNormalImages[] = IMAGE_GRID(IDR_BUTTON_FOCUSED_NORMAL);
 const int kFocusedHoveredImages[] = IMAGE_GRID(IDR_BUTTON_FOCUSED_HOVER);
 const int kFocusedPressedImages[] = IMAGE_GRID(IDR_BUTTON_FOCUSED_PRESSED);
 
+const int kBlueNormalImages[] = IMAGE_GRID(IDR_BLUE_BUTTON_NORMAL);

[msw, 2013/05/13 18:27:20]

nit: consider dropping 'Images' from these constants; and above too if you want.

[benwells, 2013/05/14 11:30:44]

I think I prefer it being consistent with the normal button constants.

[msw, 2013/05/14 16:20:02]

Ok, feel free to leave/change both.

+const int kBlueHoveredImages[] = IMAGE_GRID(IDR_BLUE_BUTTON_HOVER);
+const int kBluePressedImages[] = IMAGE_GRID(IDR_BLUE_BUTTON_PRESSED);
+const int kBlueFocusedNormalImages[] = IMAGE_GRID(
+    IDR_BLUE_BUTTON_FOCUSED_NORMAL);
+const int kBlueFocusedHoveredImages[] = IMAGE_GRID(
+    IDR_BLUE_BUTTON_FOCUSED_HOVER);
+const int kBlueFocusedPressedImages[] = IMAGE_GRID(
+    IDR_BLUE_BUTTON_FOCUSED_PRESSED);
+
 // The text-button hot and pushed image IDs; normal is unadorned by default.
 const int kTextHoveredImages[] = IMAGE_GRID(IDR_TEXTBUTTON_HOVER);
 const int kTextPressedImages[] = IMAGE_GRID(IDR_TEXTBUTTON_PRESSED);
@@ -87,6 +97,23 @@ LabelButtonBorder::LabelButtonBorder(Button::ButtonStyle style)
                Painter::CreateImageGridPainter(kTextHoveredImages));
     SetPainter(false, Button::STATE_PRESSED,
                Painter::CreateImageGridPainter(kTextPressedImages));
+  } else if (style == Button::STYLE_BLUE_BUTTON) {
+    SetPainter(false, Button::STATE_NORMAL,
+               Painter::CreateImageGridPainter(kBlueNormalImages));
+    SetPainter(false, Button::STATE_HOVERED,
+               Painter::CreateImageGridPainter(kBlueHoveredImages));
+    SetPainter(false, Button::STATE_PRESSED,
+               Painter::CreateImageGridPainter(kBluePressedImages));
+    SetPainter(false, Button::STATE_DISABLED,
+               Painter::CreateImageGridPainter(kBlueNormalImages));
+    SetPainter(true, Button::STATE_NORMAL,
+               Painter::CreateImageGridPainter(kBlueFocusedNormalImages));
+    SetPainter(true, Button::STATE_HOVERED,
+               Painter::CreateImageGridPainter(kBlueFocusedHoveredImages));
+    SetPainter(true, Button::STATE_PRESSED,
+               Painter::CreateImageGridPainter(kBlueFocusedPressedImages));
+    SetPainter(true, Button::STATE_DISABLED,
+               Painter::CreateImageGridPainter(kBlueNormalImages));
   }
 }
 
@@ -105,18 +132,21 @@ void LabelButtonBorder::Paint(const View& view, gfx::Canvas* canvas) {
 
   if (animation && animation->is_animating()) {
     // Composite the background and foreground painters during state animations.
-    int alpha = animation->CurrentValueBetween(0, 0xff);
+    // The alpha is how much of the foreground state to use. To get this,

[msw, 2013/05/13 18:27:20]

Hmm, I don't think this is correct, because the images themselves contain
partially transparent pixels. For example, imagine a (black, 50% opaque) border
pixel in both the background and foreground states. In the way you've changed
the code ( basically reverting my http://crrev.com/199342 ), as the animation
progresses, the background state will always draw (black, 50% opaque) and then
the foreground state will draw (black, alpha*50% opaque) for alpha (0->1). So
towards the end of the animation, that pixel will be super dark, close to 100%
opaque, then as the animation ends it will instantaneously be back to 50%
opaque. This is exactly the jank I fixed in my change, and you can see it more
clearly if you increase the animation period.

What is the specific defect you are trying to address? That should be mentioned
in this comment or at least your CL description.

[benwells, 2013/05/14 11:30:44]

Ah, I think I now understand the intent of that change, but it seems to have
made things worse ... maybe the blue buttons show this more than other styles.

A good example of how the blending is now wrong is in the opaque parts of the
button. For these pixels the background now comes through. E.g, if the
background color is B, image one is I1 and image two is I2 and we're halfway
through the animation:
- after the first paint, the color is B/2 + I1/2
- after the second paint, the color is B/4 + I1/4 + I2/2.

So, the final result is 1/4 background, 1/4 first image and 1/2 the second
image, instead of 1/2 first image and 1/2 second image which is what we want for
opaque pixels in both.

For the blue buttons on an almost white background, this shows as a brightening
in the middle of the animation.

I'm not sure what the best way to fix this is. One way that should work would be
to 
1. save the original background of the canvas
2. paint the background theme bitmap (without alpha)
3. start an alpha layer with the foreground alpha
4. copy the original background of the canvas into the layer
5. paint the foreground theme bitmap
6. restore, blending the two images together.

This should work as when the blending happens there will be no alpha in either
image being blended, assuming the canvas is opaque to start with and has the
background in it. Is that the case with aura and it's layered structure? Or
maybe there is some standard way to do this? It seems like it should be simple.

[msw, 2013/05/14 16:20:02]

Ah, you're right, we must blend the images before compositing with the canvas.
I'm not sure I follow the steps you outlined, here's what I would try:
1) SaveLayerAlpha(0xff) (a new layer to blend the images together first)
2) SaveLayerAlpha(0xff-alpha) + Paint background + Restore
3) SaveLayerAlpha(alpha) + Paint foreground + Restore
4) Restore (this should composite the already-blended button images)
Perhaps someone that knows Skia better would have a better idea.

+    // composite (using SOURCE_OVER) alpha of the foreground over the
+    // background. This is equivalent to compositing (1 - alpha) of the
+    // background over the foreground.
     state = native_theme_delegate->GetBackgroundThemeState(&extra);
-    canvas->SaveLayerAlpha(static_cast<uint8>(0xff - alpha));
     PaintHelper(this, canvas, theme, part, state, rect, extra);
-    canvas->Restore();
 
+    int alpha = animation->CurrentValueBetween(0, 0xff);
     state = native_theme_delegate->GetForegroundThemeState(&extra);
     canvas->SaveLayerAlpha(static_cast<uint8>(alpha));
     PaintHelper(this, canvas, theme, part, state, rect, extra);
     canvas->Restore();
   } else if (state == ui::NativeTheme::kDisabled &&
-             style() == Button::STYLE_BUTTON) {
+             (style() == Button::STYLE_BUTTON ||
+              style() == Button::STYLE_BLUE_BUTTON)) {
     canvas->SaveLayerAlpha(static_cast<uint8>(0xff / 2));
     PaintHelper(this, canvas, theme, part, state, rect, extra);
     canvas->Restore();
@@ -138,6 +168,8 @@ gfx::Insets LabelButtonBorder::GetInsets() const {
     return gfx::Insets(5, 6, 5, 6);
   if (style() == Button::STYLE_NATIVE_TEXTBUTTON)
     return gfx::Insets(5, 12, 5, 12);
+  if (style() == Button::STYLE_BLUE_BUTTON)
+    return gfx::Insets(9, 13, 9, 13);
   NOTREACHED();
   return gfx::Insets();
 }