(Views only) Add a gradient background to the tabstrip of the view tabbed pane implementation.

ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc

Index: ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc
diff --git a/ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc b/ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc
index 2a1b447c4fd82e290c875abac6f7b6e0ee7904bc..6a27c556f39372817552062662cf09bfa94a2bab 100644
--- a/ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc
+++ b/ui/views/controls/tabbed_pane/native_tabbed_pane_views.cc
@@ -26,6 +26,8 @@ const SkColor kTabBackgroundColor_Active = SK_ColorWHITE;
 const SkColor kTabBorderColor = SkColorSetRGB(0xCC, 0xCC, 0xCC);
 const SkScalar kTabBorderThickness = 1.0f;
 const SkScalar kTabBorderRadius = 2.0f;
+const SkColor kTabStripBackgroundColorStart = SK_ColorWHITE;
+const SkColor kTabStripBackgroundColorEnd = SkColorSetRGB(0xEE, 0xEE, 0xEE);
 
 class TabStrip;
 
@@ -124,6 +126,11 @@ class TabStrip : public View {
   explicit TabStrip(NativeTabbedPaneViews* owner)
       : owner_(owner),
         selected_tab_(NULL) {
+    const float gradient_start = 0.7f;

[msw, 2012/08/08 17:12:20]

nit: please compare snapshots or get values from UX, the gradient looks
smaller/lighter than the spec at first glance.

[msw, 2012/08/08 18:29:50]

nit: i think this needs const naming kGradientStart; same for end.

[markusheintz_, 2012/08/08 21:53:55]

It's a bit tricky because the shadows around the tab are still missing. 

The reference values are the once that are used on ChromeOS. It's easy to
observe them since this is webUI und you can just use the dev tools.
The values  are 0%    #ff ff ff  
                        60%  #ff ff ff 
                        80%  #fa fa fa
                      100%  #f2 f2 f2

These values are not the same as in the mocks.

If changed this now to make it use the same values as on CROS, These are not the
same values as in the mocks.

I will bring this UI in the final UI review before launch.

[markusheintz_, 2012/08/08 21:53:55]

obsolete.

+    const float gradient_end = 1.0f;
+    set_background(Background::CreateVerticalGradientRangeBackground(
+        kTabStripBackgroundColorStart, kTabStripBackgroundColorEnd,
+        gradient_start, gradient_end));
   }
   virtual ~TabStrip() {}
 
@@ -168,6 +175,7 @@ class TabStrip : public View {
   }
   virtual void OnPaint(gfx::Canvas* canvas) OVERRIDE {
     SkPaint paint;
+    OnPaintBackground(canvas);

[msw, 2012/08/08 17:12:20]

Perhaps just call View::OnPaint here (or above the SkPaint decl)?

[markusheintz_, 2012/08/08 21:53:55]

Moved above the SkPaint.

I deliberately didn't call the View::OnPaint as I only want to draw the
Background.

What I also could do (and already did in a prototyp) is get rid of the custom
OnPaint method and use a custom Border impl.

     paint.setColor(kTabBorderColor);
     paint.setStrokeWidth(kTabBorderThickness);
     SkScalar line_y = SkIntToScalar(height()) - kTabBorderThickness;