views: add focus to TabbedPane

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"
@@ skipping 42 matching lines @@
   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);
 
+  // This is a bit odd: since Tabs are not actually focusable, but rather the

[Evan Stade, 2016/09/26 16:28:36]

Why make the tabstrip focusable instead of the tabs? I think making the tabs
themselves actually focusable would generally be better for accessibility. Also
on the topic of a11y, you might need to override GetAccessibleState.

[Elly Fong-Jones, 2016/09/26 17:48:36]

I thought it would end up being sort of semantically weird to have the Tab
focused, but the left/right key bindings operating at the level of the TabStrip.
Neither of the approaches is really that pleasing to me, I guess. You have a
good point about accessibility focus, though, so perhaps I do need to rework
this to focus the Tab.

+  // containing TabStrip is, Tabs need to be told when the TabStrip gains or
+  // loses focus so they can swap to/from the focus ring border.
+  void OnContainerFocusChanged();
+
   // 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();
 
+  // Returns whether the containing TabStrip has focus.
+  bool ContainerHasFocus();
+
  private:
   enum TabState {
     TAB_INACTIVE,
     TAB_ACTIVE,
     TAB_HOVERED,
   };
 
   void SetState(TabState tab_state);
 
   TabbedPane* tabbed_pane_;
@@ skipping 157 matching lines @@
 }
 
 void Tab::SetState(TabState tab_state) {
   if (tab_state == tab_state_)
     return;
   tab_state_ = tab_state;
   OnStateChanged();
   SchedulePaint();
 }
 
+bool Tab::ContainerHasFocus() {
+  return tabbed_pane_->HasFocus();
+}
+
+void Tab::OnContainerFocusChanged() {
+  OnStateChanged();
+  SchedulePaint();
+}
+
+// The border used for MdTabs when they are both focused and selected: a
+// rectangle with the bottom side in a base color and the other sides in a
+// lightened version of the base color.
+class MdTabFocusRingBorder : public Border {
+ public:
+  MdTabFocusRingBorder(SkColor base_color);

[Evan Stade, 2016/09/26 16:28:35]

why pass in a parameter? Why not view.GetNativeTheme()->GetSystemColor in
OnPaint?  (this also handles a changing native theme)

[Elly Fong-Jones, 2016/09/26 17:48:36]

Oh good call, reaching into the View did not occur to me :)

+  ~MdTabFocusRingBorder() override;
+
+ private:
+  void Paint(const View& view, gfx::Canvas* canvas) override;
+  gfx::Insets GetInsets() const override;
+  gfx::Size GetMinimumSize() const override;
+
+  SkColor base_color_;
+};
+
+MdTabFocusRingBorder::MdTabFocusRingBorder(SkColor base_color)
+    : base_color_(base_color) {}
+MdTabFocusRingBorder::~MdTabFocusRingBorder() {}
+
+void MdTabFocusRingBorder::Paint(const View& view, gfx::Canvas* canvas) {
+  gfx::Insets insets = GetInsets();
+  // TODO(ellyjones): should this 0x66 be part of NativeTheme somehow?
+  SkColor light_color = SkColorSetA(base_color_, 0x66);
+
+  SkPaint paint;
+  paint.setColor(light_color);
+  paint.setStyle(SkPaint::kStroke_Style);
+  paint.setStrokeWidth(2);
+
+  gfx::Rect bounds = gfx::Rect(0, 0, view.width(), view.height());
+  bounds.Inset(1, 1);

[Evan Stade, 2016/09/26 16:28:36]

can this instead be stroke width / 2? Makes it more obvious what's going on.

[Elly Fong-Jones, 2016/09/26 17:48:36]

Done.

+
+  // Draw the lighter-colored stroke first, then draw the heavier stroke over
+  // the bottom of it. This is fine because the heavier stroke has 1.0 alpha, so
+  // the lighter stroke won't show through.
+  canvas->DrawRect(bounds, paint);
+  canvas->FillRect(gfx::Rect(0, view.height() - insets.bottom(), view.width(),
+                             insets.bottom()),
+                   base_color_);
+}
+
+gfx::Insets MdTabFocusRingBorder::GetInsets() const {
+  return gfx::Insets(2, 2);
+}
+
+gfx::Size MdTabFocusRingBorder::GetMinimumSize() const {
+  return gfx::Size(4, 4);

[Evan Stade, 2016/09/26 16:28:35]

Is this necessary?

[Elly Fong-Jones, 2016/09/26 17:48:36]

It seems to be - GetMinimumSize() is pure virtual on Border, so we have to
implement it here. I changed it to just use the insets though.

+}
+
 MdTab::MdTab(TabbedPane* tabbed_pane,
              const base::string16& title,
              View* contents)
     : Tab(tabbed_pane, title, contents) {
   OnStateChanged();
 }
 
 MdTab::~MdTab() {}
 
 void MdTab::OnStateChanged() {
   ui::NativeTheme* theme = GetNativeTheme();
   SkColor border_color = theme->GetSystemColor(
       selected() ? ui::NativeTheme::kColorId_FocusedBorderColor
                  : ui::NativeTheme::kColorId_UnfocusedBorderColor);
   int border_thickness = selected() ? 2 : 1;

[Evan Stade, 2016/09/26 16:28:35]

seems a little weird that the border thickness depends on selection state. That
doesn't affect layout at all (e.g. make the text jiggle)?

[Elly Fong-Jones, 2016/09/26 17:48:36]

It does not seem to. It *is* a little weird - maybe the right approach is for it
to always be 2pt, but either draw 2pt of FocusedBorderColor or 1pt or
transparent and 1pt of UnfocusedBorderColor?

-  SetBorder(
-      Border::CreateSolidSidedBorder(0, 0, border_thickness, 0, border_color));
+  if (ContainerHasFocus() && selected()) {
+    SetBorder(
+        base::MakeUnique<MdTabFocusRingBorder>(GetNativeTheme()->GetSystemColor(
+            ui::NativeTheme::kColorId_FocusedBorderColor)));
+  } else {
+    SetBorder(Border::CreateSolidSidedBorder(0, 0, border_thickness, 0,
+                                             border_color));
+  }
 
   SkColor font_color = selected()
       ? theme->GetSystemColor(ui::NativeTheme::kColorId_CallToActionColor)
       : theme->GetSystemColor(ui::NativeTheme::kColorId_ButtonEnabledColor);
   title()->SetEnabledColor(font_color);
 
   gfx::Font::Weight font_weight = gfx::Font::Weight::MEDIUM;
 #if defined(OS_WIN)
   if (selected())
     font_weight = gfx::Font::Weight::BOLD;
@@ skipping 114 matching lines @@
   AddChildView(contents_);
 }
 
 TabbedPane::~TabbedPane() {}
 
 int TabbedPane::GetTabCount() {
   DCHECK_EQ(tab_strip_->child_count(), contents_->child_count());
   return contents_->child_count();
 }
 
-View* TabbedPane::GetSelectedTab() {
-  return selected_tab_index() < 0 ?
-      NULL : GetTabAt(selected_tab_index())->contents();
-}
-
 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(
       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())
     return;
 
-  if (selected_tab_index() >= 0)
-    GetTabAt(selected_tab_index())->SetSelected(false);
+  if (GetSelectedTab())
+    GetSelectedTab()->SetSelected(false);
 
   selected_tab_index_ = index;
   Tab* tab = GetTabAt(index);
   tab->SetSelected(true);
   tab_strip_->SchedulePaint();
 
   FocusManager* focus_manager = tab->contents()->GetFocusManager();
   if (focus_manager) {
     const View* focused_view = focus_manager->GetFocusedView();
     if (focused_view && contents_->Contains(focused_view) &&
@@ skipping 16 matching lines @@
   for (int i = 0; i < contents_->child_count(); ++i)
     size.SetToMax(contents_->child_at(i)->GetPreferredSize());
   size.Enlarge(0, tab_strip_->GetPreferredSize().height());
   return size;
 }
 
 Tab* TabbedPane::GetTabAt(int index) {
   return static_cast<Tab*>(tab_strip_->child_at(index));
 }
 
+Tab* TabbedPane::GetSelectedTab() {
+  return selected_tab_index() >= 0 ? GetTabAt(selected_tab_index()) : nullptr;
+}
+
+bool TabbedPane::MoveSelectionBy(int delta) {
+  const int tab_count = GetTabCount();
+  if (tab_count <= 1)
+    return false;
+  int next_selected_index = (selected_tab_index() + delta) % tab_count;
+  if (next_selected_index < 0)
+    next_selected_index += tab_count;
+  SelectTabAt(next_selected_index);
+  return true;
+}
+
 void TabbedPane::Layout() {
   const gfx::Size size = tab_strip_->GetPreferredSize();
   tab_strip_->SetBounds(0, 0, width(), size.height());
   contents_->SetBounds(0, tab_strip_->bounds().bottom(), width(),
                        std::max(0, height() - size.height()));
   for (int i = 0; i < contents_->child_count(); ++i)
     contents_->child_at(i)->SetSize(contents_->size());
 }
 
 void TabbedPane::ViewHierarchyChanged(
     const ViewHierarchyChangedDetails& details) {
   if (details.is_add) {
     // Support navigating tabs by Ctrl+Tab and Ctrl+Shift+Tab.
     AddAccelerator(ui::Accelerator(ui::VKEY_TAB,
                                    ui::EF_CONTROL_DOWN | ui::EF_SHIFT_DOWN));
     AddAccelerator(ui::Accelerator(ui::VKEY_TAB, ui::EF_CONTROL_DOWN));
   }
 }
 
 bool TabbedPane::AcceleratorPressed(const ui::Accelerator& accelerator) {
   // Handle Ctrl+Tab and Ctrl+Shift+Tab navigation of pages.
   DCHECK(accelerator.key_code() == ui::VKEY_TAB && accelerator.IsCtrlDown());
-  const int tab_count = GetTabCount();
-  if (tab_count <= 1)
+  return MoveSelectionBy(accelerator.IsShiftDown() ? -1 : 1);
+}
+
+bool TabbedPane::OnKeyPressed(const ui::KeyEvent& event) {
+  if (!HasFocus())
     return false;
-  const int increment = accelerator.IsShiftDown() ? -1 : 1;
-  int next_tab_index = (selected_tab_index() + increment) % tab_count;
-  // Wrap around.
-  if (next_tab_index < 0)
-    next_tab_index += tab_count;
-  SelectTabAt(next_tab_index);
-  return true;
+  ui::DomKey key = event.GetDomKey();
+  if (key != ui::DomKey::ARROW_LEFT && key != ui::DomKey::ARROW_RIGHT)
+    return false;
+  return MoveSelectionBy(key == ui::DomKey::ARROW_LEFT ? 1 : -1);
 }
 
 const char* TabbedPane::GetClassName() const {
   return kViewClassName;
 }
 
 void TabbedPane::OnFocus() {
   View::OnFocus();
 
-  View* selected_tab = GetSelectedTab();
-  if (selected_tab) {
-    selected_tab->NotifyAccessibilityEvent(
-        ui::AX_EVENT_FOCUS, true);
+  Tab* selected = GetSelectedTab();
+  if (selected) {
+    selected->OnContainerFocusChanged();
+    if (selected->contents())
+      selected->contents()->NotifyAccessibilityEvent(ui::AX_EVENT_FOCUS, true);
   }
 }
 
+void TabbedPane::OnBlur() {
+  View::OnBlur();
+  Tab* selected_tab = GetSelectedTab();
+  if (selected_tab)
+    selected_tab->OnContainerFocusChanged();
+}
+
 void TabbedPane::GetAccessibleState(ui::AXViewState* state) {
   state->role = ui::AX_ROLE_TAB_LIST;
 }
 
 }  // namespace views