Harmony: implement TabbedPane styling

ui/views/controls/tabbed_pane/tabbed_pane.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/tabbed_pane.h"
 
 #include "base/logging.h"
 #include "base/macros.h"
 #include "third_party/skia/include/core/SkPaint.h"
 #include "third_party/skia/include/core/SkPath.h"
 #include "ui/accessibility/ax_view_state.h"
 #include "ui/base/default_style.h"
+#include "ui/base/material_design/material_design_controller.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/events/keycodes/keyboard_codes.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/font_list.h"
+#include "ui/views/border.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/tabbed_pane/tabbed_pane_listener.h"
+#include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/layout_manager.h"
 #include "ui/views/widget/widget.h"
 
 namespace {
 
 // TODO(markusheintz|msw): Use NativeTheme colors.
 const SkColor kTabTitleColor_Inactive = SkColorSetRGB(0x64, 0x64, 0x64);
 const SkColor kTabTitleColor_Active = SK_ColorBLACK;
 const SkColor kTabTitleColor_Hovered = SK_ColorBLACK;
 const SkColor kTabBorderColor = SkColorSetRGB(0xC8, 0xC8, 0xC8);
 const SkScalar kTabBorderThickness = 1.0f;
 
 const gfx::Font::Weight kHoverWeight = gfx::Font::Weight::NORMAL;
 const gfx::Font::Weight kActiveWeight = gfx::Font::Weight::BOLD;
 const gfx::Font::Weight kInactiveWeight = gfx::Font::Weight::NORMAL;
 
+const int kHarmonyTabStripVerticalPad = 16;
+const int kHarmonyTabStripTabHeight = 40;
+
 }  // namespace
 
 namespace views {
 
 // static
 const char TabbedPane::kViewClassName[] = "TabbedPane";
 
 // The tab view shown in the tab strip.
 class Tab : public View {
  public:
@@ skipping 10 matching lines @@
 
   // Overridden from View:
   bool OnMousePressed(const ui::MouseEvent& event) override;
   void OnMouseEntered(const ui::MouseEvent& event) override;
   void OnMouseExited(const ui::MouseEvent& event) override;
   void OnGestureEvent(ui::GestureEvent* event) override;
   gfx::Size GetPreferredSize() const override;
   void Layout() override;
   const char* GetClassName() const override;
 
+ protected:
+  Label* title() { return title_; }
+
+  // Called whenever |tab_state_| changes.
+  virtual void OnStateChanged();
+
  private:
   enum TabState {
     TAB_INACTIVE,
     TAB_ACTIVE,
     TAB_HOVERED,
   };
 
   void SetState(TabState tab_state);
 
   TabbedPane* tabbed_pane_;
   Label* title_;
   gfx::Size preferred_title_size_;
   TabState tab_state_;
   // The content view associated with this tab.
   View* contents_;
 
   DISALLOW_COPY_AND_ASSIGN(Tab);
 };
 
+// A subclass of Tab that implements the Harmony visual styling.
+class MdTab : public Tab {
+ public:
+  MdTab(TabbedPane* tabbed_pane, const base::string16& title, View* contents);
+  ~MdTab() override;
+
+  // Overridden from Tab:
+  void OnStateChanged() override;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(MdTab);
+};
+
 // The tab strip shown above the tab contents.
 class TabStrip : public View {
  public:
   // Internal class name.
   static const char kViewClassName[];
 
   explicit TabStrip(TabbedPane* tabbed_pane);
   ~TabStrip() override;
 
   // Overridden from View:
   gfx::Size GetPreferredSize() const override;
   void Layout() override;
   const char* GetClassName() const override;
   void OnPaint(gfx::Canvas* canvas) override;
 
  private:
   TabbedPane* tabbed_pane_;
 
   DISALLOW_COPY_AND_ASSIGN(TabStrip);
 };
 
+// A subclass of TabStrip that implements the Harmony visual styling. This
+// class uses a BoxLayout to position tabs.
+class MdTabStrip : public TabStrip {
+ public:
+  explicit MdTabStrip(TabbedPane* tabbed_pane);
+  ~MdTabStrip() override;
+
+  // Overridden from View:
+  gfx::Size GetPreferredSize() const override;
+  void Layout() override;
+  void OnPaint(gfx::Canvas* canvas) override;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(MdTabStrip);
+};
+
 // static
 const char Tab::kViewClassName[] = "Tab";
 
 Tab::Tab(TabbedPane* tabbed_pane, const base::string16& title, View* contents)
     : tabbed_pane_(tabbed_pane),
       title_(new Label(
           title,
           ui::ResourceBundle::GetSharedInstance().GetFontListWithDelta(
               ui::kLabelFontSizeDelta,
               gfx::Font::NORMAL,
               kActiveWeight))),
       tab_state_(TAB_ACTIVE),
       contents_(contents) {
   // Calculate this now while the font list is guaranteed to be bold.
   preferred_title_size_ = title_->GetPreferredSize();
 
   SetState(TAB_INACTIVE);
   AddChildView(title_);
 }
 
 Tab::~Tab() {}
 
 void Tab::SetSelected(bool selected) {
   contents_->SetVisible(selected);
   SetState(selected ? TAB_ACTIVE : TAB_INACTIVE);
 }
 
+void Tab::OnStateChanged() {
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  switch (tab_state_) {
+    case TAB_INACTIVE:
+      title_->SetEnabledColor(kTabTitleColor_Inactive);
+      title_->SetFontList(rb.GetFontListWithDelta(
+          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kInactiveWeight));
+      break;
+    case TAB_ACTIVE:
+      title_->SetEnabledColor(kTabTitleColor_Active);
+      title_->SetFontList(rb.GetFontListWithDelta(
+          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kActiveWeight));
+      break;
+    case TAB_HOVERED:
+      title_->SetEnabledColor(kTabTitleColor_Hovered);
+      title_->SetFontList(rb.GetFontListWithDelta(
+          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kHoverWeight));
+      break;
+  }
+}
+
 bool Tab::OnMousePressed(const ui::MouseEvent& event) {
   if (event.IsOnlyLeftMouseButton() &&
       GetLocalBounds().Contains(event.location()))
     tabbed_pane_->SelectTab(this);
   return true;
 }
 
 void Tab::OnMouseEntered(const ui::MouseEvent& event) {
   SetState(selected() ? TAB_ACTIVE : TAB_HOVERED);
 }
@@ skipping 36 matching lines @@
 }
 
 const char* Tab::GetClassName() const {
   return kViewClassName;
 }
 
 void Tab::SetState(TabState tab_state) {
   if (tab_state == tab_state_)
     return;
   tab_state_ = tab_state;
-
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-  switch (tab_state) {
-    case TAB_INACTIVE:
-      title_->SetEnabledColor(kTabTitleColor_Inactive);
-      title_->SetFontList(rb.GetFontListWithDelta(
-          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kInactiveWeight));
-      break;
-    case TAB_ACTIVE:
-      title_->SetEnabledColor(kTabTitleColor_Active);
-      title_->SetFontList(rb.GetFontListWithDelta(
-          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kActiveWeight));
-      break;
-    case TAB_HOVERED:
-      title_->SetEnabledColor(kTabTitleColor_Hovered);
-      title_->SetFontList(rb.GetFontListWithDelta(
-          ui::kLabelFontSizeDelta, gfx::Font::NORMAL, kHoverWeight));
-      break;
-  }
+  OnStateChanged();
   SchedulePaint();
 }
 
+MdTab::MdTab(TabbedPane* tabbed_pane,
+             const base::string16& title,
+             View* contents)
+    : Tab(tabbed_pane, title, contents) {
+  OnStateChanged();
+}
+
+MdTab::~MdTab() {}
+
+void MdTab::OnStateChanged() {
+  // These values are directly from the Harmony specs for tabbed panes.
+  const SkColor kSelectedBorderColor = SkColorSetRGB(0x42, 0x85, 0xF4);

[Evan Stade, 2016/09/01 20:46:07]

Hi Elly, a couple ex post facto comments. Instead of hardcoding these values,
they should be drawn from the theme. This one and the selected font one should
be kColorId_CallToActionColor. The normal font one should be
kColorId_ButtonEnabledColor. The normal border one should be some value that we
can share with comboboxes.

One practical application (beyond fewer hardcoded values) is that the GTK theme
does actually change these values.

[Evan Stade, 2016/09/01 22:02:30]

I'm thinking the border should use
kColorId_FocusedBorderColor/kColorId_UnfocusedBorderColor (although currently
the latter value is wrong and would need to be updated).

+  const SkColor kNormalBorderColor = SkColorSetARGB(0x23, 0x00, 0x00, 0x00);
+  const SkColor kSelectedFontColor = SkColorSetRGB(0x42, 0x85, 0xF4);
+  const SkColor kNormalFontColor = SkColorSetRGB(0x5A, 0x5A, 0x5A);
+
+  SkColor border_color = selected() ? kSelectedBorderColor : kNormalBorderColor;
+  int border_thickness = selected() ? 2 : 1;

[Evan Stade, 2016/09/01 20:46:07]

are you sure these values are right? This results in 2 or 1 dp, but the spec
says px. This means at 2x scale (retina) you will get 4px and 2px. Most strokes
in harmony are 1px at all scale factors so I suspect this is the same.

+  SetBorder(
+      Border::CreateSolidSidedBorder(0, 0, border_thickness, 0, border_color));
+
+  SkColor font_color = selected() ? kSelectedFontColor : kNormalFontColor;
+  title()->SetEnabledColor(font_color);
+
+  gfx::Font::Weight font_weight = gfx::Font::Weight::NORMAL;
+#if defined(OS_WIN)
+  if (selected())
+    font_weight = gfx::Font::Weight::BOLD;

[Evan Stade, 2016/09/01 20:46:06]

should this not just be MEDIUM on all platforms?

+#endif
+
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  title()->SetFontList(rb.GetFontListWithDelta(ui::kLabelFontSizeDelta,
+                                               gfx::Font::NORMAL, font_weight));
+}
+
 // static
 const char TabStrip::kViewClassName[] = "TabStrip";
 
 TabStrip::TabStrip(TabbedPane* tabbed_pane) : tabbed_pane_(tabbed_pane) {}
 
 TabStrip::~TabStrip() {}
 
 gfx::Size TabStrip::GetPreferredSize() const {
   gfx::Size size;
   for (int i = 0; i < child_count(); ++i) {
@@ skipping 46 matching lines @@
     SkPaint paint;
     paint.setStyle(SkPaint::kStroke_Style);
     paint.setColor(kTabBorderColor);
     paint.setStrokeWidth(kTabBorderThickness);
     canvas->DrawPath(path, paint);
   } else {
     canvas->sk_canvas()->drawLine(0, line_y, line_end, line_y, paint);
   }
 }
 
+MdTabStrip::MdTabStrip(TabbedPane* tabbed_pane) : TabStrip(tabbed_pane) {
+  BoxLayout* layout =
+      new BoxLayout(BoxLayout::kHorizontal, 0, kHarmonyTabStripVerticalPad, 0);
+  layout->set_main_axis_alignment(BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
+  layout->set_cross_axis_alignment(BoxLayout::CROSS_AXIS_ALIGNMENT_STRETCH);
+  layout->SetDefaultFlex(1);
+  SetLayoutManager(layout);
+}
+
+MdTabStrip::~MdTabStrip() {}
+
+gfx::Size MdTabStrip::GetPreferredSize() const {
+  return gfx::Size(width(),
+                   kHarmonyTabStripVerticalPad * 2 + kHarmonyTabStripTabHeight);
+}
+
+// Let this class's LayoutManager handle the layout.
+void MdTabStrip::Layout() {
+  return View::Layout();
+}
+
+// The tab strip "border" is drawn as part of the tabs, so all this method needs
+// to do is paint the background.
+void MdTabStrip::OnPaint(gfx::Canvas* canvas) {
+  OnPaintBackground(canvas);
+}
+
 TabbedPane::TabbedPane()
-  : listener_(NULL),
-    tab_strip_(new TabStrip(this)),
-    contents_(new View()),
-    selected_tab_index_(-1) {
+    : listener_(NULL),
+      tab_strip_(ui::MaterialDesignController::IsSecondaryUiMaterial()
+                     ? new MdTabStrip(this)
+                     : new TabStrip(this)),
+      contents_(new View()),
+      selected_tab_index_(-1) {
 #if defined(OS_MACOSX)
   SetFocusBehavior(FocusBehavior::ACCESSIBLE_ONLY);
 #else
   SetFocusBehavior(FocusBehavior::ALWAYS);
 #endif
 
   AddChildView(tab_strip_);
   AddChildView(contents_);
 }
 
@@ skipping 12 matching lines @@
 void TabbedPane::AddTab(const base::string16& title, View* contents) {
   AddTabAtIndex(tab_strip_->child_count(), title, contents);
 }
 
 void TabbedPane::AddTabAtIndex(int index,
                                const base::string16& title,
                                View* contents) {
   DCHECK(index >= 0 && index <= GetTabCount());
   contents->SetVisible(false);
 
-  tab_strip_->AddChildViewAt(new Tab(this, title, contents), index);
+  tab_strip_->AddChildViewAt(
+      ui::MaterialDesignController::IsSecondaryUiMaterial()
+          ? new MdTab(this, title, contents)
+          : new Tab(this, title, contents),
+      index);
   contents_->AddChildViewAt(contents, index);
   if (selected_tab_index() < 0)
     SelectTabAt(index);
 
   PreferredSizeChanged();
 }
 
 void TabbedPane::SelectTabAt(int index) {
   DCHECK(index >= 0 && index < GetTabCount());
   if (index == selected_tab_index())
@@ skipping 83 matching lines @@
     selected_tab->NotifyAccessibilityEvent(
         ui::AX_EVENT_FOCUS, true);
   }
 }
 
 void TabbedPane::GetAccessibleState(ui::AXViewState* state) {
   state->role = ui::AX_ROLE_TAB_LIST;
 }
 
 }  // namespace views