(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

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "ui/views/controls/tabbed_pane/native_tabbed_pane_views.h"
 
 #include "base/logging.h"
 #include "base/stl_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/font.h"
 #include "ui/views/controls/tabbed_pane/tabbed_pane.h"
 #include "ui/views/controls/tabbed_pane/tabbed_pane_listener.h"
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/widget/widget.h"
 
 namespace views {
 
 const SkColor kTabTitleColor_Inactive = SkColorSetRGB(0x66, 0x66, 0x66);
 const SkColor kTabTitleColor_Active = SkColorSetRGB(0x20, 0x20, 0x20);
 const SkColor kTabTitleColor_Pressed = SkColorSetRGB(0x33, 0x33, 0x33);
 const SkColor kTabTitleColor_Hovered = SkColorSetRGB(0x22, 0x22, 0x22);
 // TODO(markusheintz): The tab background color should be provided by the
 // NativeTheme.
 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;
 
 class Tab : public View {
  public:
   Tab(TabStrip* tab_strip, const string16& title, View* contents)
       : tab_strip_(tab_strip),
         title_(title),
         contents_(contents),
         title_color_(kTabTitleColor_Inactive) {}
@@ skipping 78 matching lines @@
   SkColor title_color_;
 
   DISALLOW_COPY_AND_ASSIGN(Tab);
 };
 
 class TabStrip : public View {
  public:
   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() {}
 
   void SelectTab(View* tab) {
     if (tab == selected_tab_)
       return;
     if (selected_tab_)
       static_cast<Tab*>(selected_tab_)->OnSelectedStateChanged(false);
     selected_tab_ = tab;
     static_cast<Tab*>(selected_tab_)->OnSelectedStateChanged(true);
@@ skipping 24 matching lines @@
     const int kTabOffset = 18;
     int x = kTabOffset;  // Layout tabs with an offset to the tabstrip border.
     for (int i = 0; i < child_count(); ++i) {
       gfx::Size ps = child_at(i)->GetPreferredSize();
       child_at(i)->SetBounds(x, 0, ps.width(), ps.height());
       x = child_at(i)->bounds().right();
     }
   }
   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;
     SkScalar line_width = SkIntToScalar(width());
     canvas->sk_canvas()->drawLine(0, line_y, line_width, line_y, paint);
   }
 
  private:
   NativeTabbedPaneViews* owner_;
   View* selected_tab_;
@@ skipping 221 matching lines @@
   if (tab_strip_->has_children())
     InitializeTabs();
 }
 
 void NativeTabbedPaneViews::InitializeTabs() {
   for (int i = 0; i < tab_strip_->child_count(); ++i)
     content_view_->AddChildView(Tab::GetContents(tab_strip_->child_at(i)));
 }
 
 }  // namespace views