MD text buttons - implement focus ring.

ui/views/controls/button/md_text_button.cc

Index: ui/views/controls/button/md_text_button.cc
diff --git a/ui/views/controls/button/md_text_button.cc b/ui/views/controls/button/md_text_button.cc
index 6095a1da33f4f15ff6e989942e83f3c524628989..1db8d64b74c9a7945193f43e61183db7f75abf61 100644
--- a/ui/views/controls/button/md_text_button.cc
+++ b/ui/views/controls/button/md_text_button.cc
@@ -6,6 +6,7 @@
 
 #include "base/i18n/case_conversion.h"
 #include "ui/base/material_design/material_design_controller.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/color_utils.h"
 #include "ui/native_theme/native_theme.h"
 #include "ui/views/border.h"
@@ -22,6 +23,37 @@ const int kVerticalPadding = 6;
 // Minimum size to reserve for the button contents.
 const int kMinWidth = 48;
 
+// The amount to enlarge the focus border in all directions relative to the
+// button.
+const int kFocusBorderOutset = -4;
+
+// The corner radius of the focus border roundrect.
+const int kFocusBorderCornerRadius = 3;
+
+class MdFocusRing : public views::View {

[sky, 2016/03/15 16:49:26]

Seems rather heavy to create a view for the focus indicator that has a layer.
How could you need a layer?

[Evan Stade, 2016/03/15 19:09:43]

The focus ring sits outside the button. We can't achieve that without layers or
making the button bigger. This seemed a lot simpler than the latter, which would
require changing the background, the ripple, the click targeting, and padding
around various instances of this type of button (which is usually specified in
terms of the normal border/bg not the focus ring).

If you are worried about the cost of creating this, I could instantiate it
lazily (most buttons will never get tabbed to).

+ public:
+  MdFocusRing() {
+    SetPaintToLayer(true);
+    layer()->SetFillsBoundsOpaquely(false);
+  }
+  ~MdFocusRing() override {}
+
+  void OnPaint(gfx::Canvas* canvas) override {
+    SkPaint paint;
+    paint.setAntiAlias(true);
+    paint.setColor(GetNativeTheme()->GetSystemColor(
+        ui::NativeTheme::kColorId_CallToActionColor));
+    paint.setStyle(SkPaint::kStroke_Style);
+    paint.setStrokeWidth(1);
+    gfx::RectF rect(GetLocalBounds());
+    rect.Inset(gfx::InsetsF(0.5));
+    canvas->DrawRoundRect(rect, kFocusBorderCornerRadius, paint);
+  }
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(MdFocusRing);
+};
+
 }  // namespace
 
 // static
@@ -43,6 +75,24 @@ LabelButton* MdTextButton::CreateStandardButton(ButtonListener* listener,
   return button;
 }
 
+void MdTextButton::Layout() {
+  LabelButton::Layout();
+
+  gfx::Rect focus_bounds = GetLocalBounds();
+  focus_bounds.Inset(gfx::Insets(kFocusBorderOutset));
+  focus_ring_->SetBoundsRect(focus_bounds);
+}
+
+void MdTextButton::OnFocus() {
+  View::OnFocus();
+  focus_ring_->SetVisible(true);
+}
+
+void MdTextButton::OnBlur() {
+  View::OnBlur();
+  focus_ring_->SetVisible(false);
+}
+
 SkColor MdTextButton::GetInkDropBaseColor() const {
   return color_utils::DeriveDefaultIconColor(label()->enabled_color());
 }
@@ -53,14 +103,18 @@ void MdTextButton::SetText(const base::string16& text) {
 
 MdTextButton::MdTextButton(ButtonListener* listener)
     : LabelButton(listener, base::string16()),
-      ink_drop_delegate_(this, this) {
+      ink_drop_delegate_(this, this),
+      focus_ring_(new MdFocusRing()) {
   set_ink_drop_delegate(&ink_drop_delegate_);
   set_has_ink_drop_action_on_click(true);
   SetHorizontalAlignment(gfx::ALIGN_CENTER);
   SetFocusable(true);
-  // TODO(estade): create a focus painter.
-  SetFocusPainter(nullptr);
   SetMinSize(gfx::Size(kMinWidth, 0));
+
+  AddChildView(focus_ring_);
+  focus_ring_->SetVisible(false);
+  SetFocusPainter(nullptr);
+  set_request_focus_on_press(false);
 }
 
 MdTextButton::~MdTextButton() {}