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:
   // Internal class name.
   static const char kViewClassName[];
 
   Tab(TabbedPane* tabbed_pane, const base::string16& title, View* contents);
   ~Tab() override;
 
   View* contents() const { return contents_; }
 
   bool selected() const { return contents_->visible(); }
   void SetSelected(bool selected);
 
+  // Called whenever tab_state_ changes.

[sky, 2016/08/31 16:44:03]

Generally we put |'s around references to members/parameters in documentation,
e.g. |tab_state_|. See tabbed_pane.h for more examples.

[Elly Fong-Jones, 2016/08/31 16:49:11]

Done.

+  virtual void OnStateChanged();

[sky, 2016/08/31 16:44:03]

Make protected

[Elly Fong-Jones, 2016/08/31 16:49:11]

Done.

+
   // 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_;

[sky, 2016/08/31 16:44:03]

Style guide says no protected members.

[Elly Fong-Jones, 2016/08/31 16:49:10]

Done.

+
  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_(new Label(
           title,
           ui::ResourceBundle::GetSharedInstance().GetFontListWithDelta(
               ui::kLabelFontSizeDelta,
               gfx::Font::NORMAL,
               kActiveWeight))),
+      tabbed_pane_(tabbed_pane),
       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);
+  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;
+  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;
+#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