Merge pull request #3569 from brave/native-button-styles

Buttons get Brave style
brave · Oct 31, 2019 · 2ffe1bb · 2ffe1bb
1 parent 6a3762b
commit 2ffe1bb
Show file tree

Hide file tree

Showing 8 changed files with 356 additions and 58 deletions.
diff --git a/chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc b/chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc
@@ -0,0 +1,23 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+#include "chrome/browser/ui/views/chrome_typography_provider.h"
+#include "ui/gfx/color_palette.h"
+
+namespace gfx {
+  const SkColor kBraveWhite = SkColorSetRGB(0xff, 0xff, 0xff);
+  const SkColor kBraveGrey800 = SkColorSetRGB(0x3b, 0x3e, 0x4f);
+}
+
+// Button text color
+#define kGoogleGrey900 kBraveWhite
+// Button text color (prominent, dark mode)
+#define kGoogleBlue300 kBraveWhite
+// // Button text color (prominent, light mode)
+#define kGoogleBlue600 kBraveGrey800
+#include "../../../../../chrome/browser/ui/views/chrome_typography_provider.cc"
+#undef kGoogleGrey900
+#undef kGoogleBlue300
+#undef kGoogleBlue600
diff --git a/chromium_src/ui/native_theme/common_theme.cc b/chromium_src/ui/native_theme/common_theme.cc
@@ -0,0 +1,54 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+#include "ui/native_theme/common_theme.h"
+
+#define GetAuraColor GetAuraColor_ChromiumImpl
+#include "../../../../ui/native_theme/common_theme.cc"
+#undef GetAuraColor
+
+namespace {
+  const SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54);
+}  // namespace
+
+
+namespace ui {
+
+SkColor GetAuraColor(NativeTheme::ColorId color_id,
+                    const NativeTheme* base_theme,
+                    NativeTheme::ColorScheme color_scheme) {
+  if (color_scheme == NativeTheme::ColorScheme::kDefault)
+    color_scheme = base_theme->GetSystemColorScheme();
+  const bool is_dark = (color_scheme == NativeTheme::ColorScheme::kDark);
+  switch (color_id) {
+    case NativeTheme::kColorId_ButtonEnabledColor:
+      return is_dark ? SK_ColorWHITE
+                    : SkColorSetRGB(0x3b, 0x3e, 0x4f);
+    case NativeTheme::kColorId_ButtonHoverColor:
+      return kBraveBrandColor;
+    case NativeTheme::kColorId_ButtonPressedShade:
+      return SkColorSetA(kBraveBrandColor, is_dark ? 0x2b : 0x23);
+    case NativeTheme::kColorId_ProminentButtonColor:
+    case NativeTheme::kColorId_ProminentButtonFocusedColor:
+      return kBraveBrandColor;
+    case NativeTheme::kColorId_ProminentButtonDisabledColor:
+      return gfx::kGoogleGrey800;
+    case NativeTheme::kColorId_TextOnProminentButtonColor:
+      return SK_ColorWHITE;
+    case NativeTheme::kColorId_ButtonBorderColor:
+      return SkColorSetRGB(0xc2, 0xc4, 0xcf);
+    case NativeTheme::kColorId_LabelEnabledColor: {
+      SkColor button = GetAuraColor(NativeTheme::kColorId_ButtonEnabledColor,
+          base_theme);
+      return button;
+    }
+    default:
+      break;
+  }
+  return GetAuraColor_ChromiumImpl(color_id, base_theme, color_scheme);
+}
+
+}  // namespace ui
+
diff --git a/chromium_src/ui/native_theme/native_theme_mac.mm b/chromium_src/ui/native_theme/native_theme_mac.mm
@@ -7,13 +7,20 @@
 
 namespace ui {
 bool ShouldOverride(NativeTheme::ColorId color_id) {
-  // This override only targets for old macOS like high sierra that doesn't
-  // support dark mode. We are using dark mode on old macOS but some below
-  // colors are fetched from system color and they are not dark mode aware.
-  // So, we should replace those colors with dark mode aware aura color.
-  if (@available(macOS 10.14, *))
+  // Always theme for these colors:
+  switch (color_id) {
+    case NativeTheme::kColorId_ButtonPressedShade:
+      return true;
+    default:
+      break;
+  }
+  // The rest of these overrides only targets for old macOS like high sierra
+  // that doesn't support dark mode. We are using dark mode on old macOS but
+  // some below colors are fetched from system color and they are not dark mode
+  // aware. So, we should replace those colors with dark mode aware aura color.
+  if (@available(macOS 10.14, *)) {
     return false;
-
+  }
   switch (color_id) {
     case NativeTheme::kColorId_EnabledMenuItemForegroundColor:
     case NativeTheme::kColorId_DisabledMenuItemForegroundColor:

diff --git a/chromium_src/ui/views/controls/button/md_text_button.cc b/chromium_src/ui/views/controls/button/md_text_button.cc
@@ -0,0 +1,170 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+#include "ui/views/controls/button/md_text_button.h"
+#include "ui/views/view_class_properties.h"
+
+// Override button creation to return BraveTextButton instances
+#define Create Create_ChromiumImpl
+#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl
+#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl
+#include "../../../../../ui/views/controls/button/md_text_button.cc"
+#undef CreateSecondaryUiButton
+#undef CreateSecondaryUiBlueButton
+#undef Create
+
+namespace {
+
+constexpr SkColor kBraveBrandColor = SkColorSetRGB(0xff, 0x76, 0x54);
+
+}  // namespace
+
+namespace views {
+
+// Make visual changes to MdTextButton in line with Brave visual style:
+//  - More rounded rectangle (for regular border, focus ring and ink drop)
+//  - Different hover text and boder color for non-prominent button
+//  - Differenet hover bg color for prominent background
+//  - No shadow for prominent background
+class BraveTextButton : public MdTextButton {
+ public:
+  using MdTextButton::MdTextButton;
+  // InkDrop
+  std::unique_ptr<InkDrop> CreateInkDrop() override;
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override;
+
+ protected:
+  void OnPaintBackground(gfx::Canvas* canvas) override;
+  void OnBoundsChanged(const gfx::Rect& previous_bounds) override;
+
+ private:
+  void UpdateColors() override;
+  DISALLOW_COPY_AND_ASSIGN(BraveTextButton);
+};
+
+//
+// These static CreateXYZ functions purely exist to make sure BraveTextButtons
+// are created instead of MdTextButtons.
+//
+
+// static
+std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiButton(
+    ButtonListener* listener,
+    const base::string16& text) {
+  return MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD);
+}
+
+// static
+std::unique_ptr<LabelButton> MdTextButton::CreateSecondaryUiBlueButton(
+    ButtonListener* listener,
+    const base::string16& text) {
+  auto md_button =
+      MdTextButton::Create(listener, text, style::CONTEXT_BUTTON_MD);
+  md_button->SetProminent(true);
+  return md_button;
+}
+
+// static
+std::unique_ptr<MdTextButton> MdTextButton::Create(ButtonListener* listener,
+                                                   const base::string16& text,
+                                                   int button_context) {
+  auto button = base::WrapUnique<BraveTextButton>(
+      new BraveTextButton(listener, button_context));
+  button->SetText(text);
+  button->SetCornerRadius(100);
+  button->SetFocusForPlatform();
+  return button;
+}
+
+void BraveTextButton::OnPaintBackground(gfx::Canvas* canvas) {
+  // Set brave-style hover colors
+  LabelButton::OnPaintBackground(canvas);
+  if (GetProminent() && (
+        hover_animation().is_animating() || state() == STATE_HOVERED)) {
+    constexpr SkColor normal_color = kBraveBrandColor;
+    constexpr SkColor hover_color = SkColorSetRGB(0xff, 0x97, 0x7d);
+    const SkAlpha alpha = hover_animation().CurrentValueBetween(0x00, 0xff);
+    const SkColor current_color = color_utils::AlphaBlend(
+        hover_color, normal_color, alpha);
+    cc::PaintFlags flags;
+    flags.setColor(current_color);
+    flags.setStyle(cc::PaintFlags::kFill_Style);
+    flags.setAntiAlias(true);
+    canvas->DrawRoundRect(gfx::RectF(GetLocalBounds()),
+        GetCornerRadius(), flags);
+  }
+}
+
+std::unique_ptr<InkDrop> BraveTextButton::CreateInkDrop() {
+  // We don't need a highlight on hover, the hover color
+  // is handled by the OnPaintBackground and brave-style doesn't
+  // have a shadow. Plus, it's very difficult (impossible?) to create
+  // a drop-shadow when clipping the ink drop to the rounded button.
+  std::unique_ptr<InkDrop> ink_drop = InkDropHostView::CreateInkDrop();
+  ink_drop->SetShowHighlightOnFocus(true);
+  ink_drop->SetShowHighlightOnHover(false);
+  return ink_drop;
+}
+
+std::unique_ptr<views::InkDropHighlight>
+    BraveTextButton::CreateInkDropHighlight() const {
+  // Blank ink drop highlight, not needed
+  const SkColor fill_color = SK_ColorTRANSPARENT;
+  gfx::RectF boundsF(GetLocalBounds());
+  return std::make_unique<InkDropHighlight>(
+      boundsF.size(),
+      GetCornerRadius(),
+      boundsF.CenterPoint(), fill_color);
+}
+
+void BraveTextButton::OnBoundsChanged(const gfx::Rect& previous_bounds) {
+  MdTextButton::OnBoundsChanged(previous_bounds);
+  // Provide a path for the focus border, and for clipping the inkdrop highlight
+  auto path = std::make_unique<SkPath>();
+  int radius = GetCornerRadius();
+  path->addRRect(SkRRect::MakeRectXY(RectToSkRect(GetLocalBounds()),
+                                    radius, radius));
+  SetProperty(kHighlightPathKey, path.release());
+}
+
+void BraveTextButton::UpdateColors() {
+  MdTextButton::UpdateColors();
+  if (GetProminent()) {
+    return;
+  }
+  // Override different text hover color
+  if (!color_utils::IsInvertedColorScheme()) {
+    SetTextColor(ButtonState::STATE_HOVERED, kBraveBrandColor);
+    SetTextColor(ButtonState::STATE_PRESSED, kBraveBrandColor);
+  }
+  // Override border color for hover on non-prominent
+  if (state() == ButtonState::STATE_PRESSED
+        || state() == ButtonState::STATE_HOVERED) {
+    // First, get the same background fill color that MdTextButton does.
+    // It is undfortunate to copy these lines almost as-is. Consider otherwise
+    // patching it in via a #define.
+    const ui::NativeTheme* theme = GetNativeTheme();
+    SkColor bg_color =
+        theme->GetSystemColor(ui::NativeTheme::kColorId_DialogBackground);
+    if (GetBgColorOverride()) {
+      bg_color = *GetBgColorOverride();
+    }
+    if (state() == STATE_PRESSED) {
+      SkColor shade =
+          GetNativeTheme()->GetSystemColor(
+              ui::NativeTheme::kColorId_ButtonPressedShade);
+      bg_color = color_utils::GetResultingPaintColor(shade, bg_color);
+    }
+    // The only thing that differs for Brave is the stroke color
+    SkColor stroke_color = kBraveBrandColor;
+    SetBackground(
+        CreateBackgroundFromPainter(
+            Painter::CreateRoundRectWith1PxBorderPainter(
+                bg_color, stroke_color, GetCornerRadius())));
+  }
+}
+
+}  // namespace views
diff --git a/chromium_src/ui/views/controls/button/md_text_button.h b/chromium_src/ui/views/controls/button/md_text_button.h
@@ -0,0 +1,35 @@
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+#ifndef BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_
+#define BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_
+
+#include "base/optional.h"
+#include "ui/views/controls/button/label_button.h"
+#include "ui/views/controls/focus_ring.h"
+#include "ui/views/style/typography.h"
+
+// Insert our own definition for `CreateXYZ`, and (in concert with the .cc)
+// move chromium's definition to `CreateXYZ_ChromiumImpl`
+#define CreateSecondaryUiButton CreateSecondaryUiButton_ChromiumImpl( \
+        ButtonListener* listener, \
+        const base::string16& text); \
+      static std::unique_ptr<LabelButton> CreateSecondaryUiButton
+#define CreateSecondaryUiBlueButton CreateSecondaryUiBlueButton_ChromiumImpl( \
+        ButtonListener* listener, \
+        const base::string16& text); \
+      static std::unique_ptr<LabelButton>  CreateSecondaryUiBlueButton
+#define Create Create_ChromiumImpl( \
+        ButtonListener* listener, \
+        const base::string16& text, \
+        int button_context = style::CONTEXT_BUTTON_MD); \
+      static std::unique_ptr<MdTextButton> Create
+
+#include "../../../../../ui/views/controls/button/md_text_button.h"
+#undef CreateSecondaryUiButton
+#undef CreateSecondaryUiBlueButton
+#undef Create
+
+#endif  // BRAVE_CHROMIUM_SRC_UI_VIEWS_CONTROLS_BUTTON_MD_TEXT_BUTTON_H_
diff --git a/chromium_src/ui/views/controls/focus_ring.cc b/chromium_src/ui/views/controls/focus_ring.cc
@@ -1,6 +1,7 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
+// Copyright (c) 2019 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
 
 #include "base/no_destructor.h"
 #include "ui/gfx/skia_util.h"
@@ -18,31 +19,31 @@
 namespace {
 
 class FocusRingTheme {
-  public:
-    SkColor GetSystemColor(int id) {
-      // At the time of implementation, only two Color IDs were possible.
-      // If this changes, consider overriding NativeTheme, or moving to
-      // ThemeProperties.
-      DCHECK(id == ui::NativeTheme::kColorId_FocusedBorderColor ||
-              id == ui::NativeTheme::kColorId_AlertSeverityHigh);
-      // Must be colors that are OK on dark or light bg since this is
-      // a very simplistic implementation.
-      switch (id) {
-        case ui::NativeTheme::kColorId_FocusedBorderColor:
-          return SkColorSetRGB(0xfb, 0x54, 0x2b);
-        case ui::NativeTheme::kColorId_AlertSeverityHigh:
-          return SkColorSetRGB(0xf4, 0x34, 0x05);
-      }
-      return gfx::kPlaceholderColor;
+ public:
+  SkColor GetSystemColor(int id) {
+    // At the time of implementation, only two Color IDs were possible.
+    // If this changes, consider overriding NativeTheme, or moving to
+    // ThemeProperties.
+    DCHECK(id == ui::NativeTheme::kColorId_FocusedBorderColor ||
+            id == ui::NativeTheme::kColorId_AlertSeverityHigh);
+    // Must be colors that are OK on dark or light bg since this is
+    // a very simplistic implementation.
+    switch (id) {
+      case ui::NativeTheme::kColorId_FocusedBorderColor:
+        return SkColorSetARGB(0x66, 0xfb, 0x54, 0x2b);
+      case ui::NativeTheme::kColorId_AlertSeverityHigh:
+        return SkColorSetRGB(0xf4, 0x34, 0x05);
     }
+    return gfx::kPlaceholderColor;
+  }
 };
 
 FocusRingTheme* GetFocusRingTheme() {
   static base::NoDestructor<FocusRingTheme> instance;
   return instance.get();
 }
 
-}
+}  // namespace
 
 #define GetNativeTheme GetFocusRingTheme
 #include "../../../../ui/views/controls/focus_ring.cc"

diff --git a/patches/ui-views-controls-button-md_text_button.h.patch b/patches/ui-views-controls-button-md_text_button.h.patch
@@ -0,0 +1,14 @@
+diff --git a/ui/views/controls/button/md_text_button.h b/ui/views/controls/button/md_text_button.h
+index 02bb4d1677e79497e02eaa42a70fd3ece310f803..52e54a1ee6d5bbe1710a20ffde554ac82ff61db2 100644
+--- a/ui/views/controls/button/md_text_button.h
++++ b/ui/views/controls/button/md_text_button.h
+@@ -66,7 +66,9 @@ class VIEWS_EXPORT MdTextButton : public LabelButton {
+   MdTextButton(ButtonListener* listener, int button_context);
+
+  private:
++  friend class BraveTextButton;
+   void UpdatePadding();
++  virtual
+   void UpdateColors();
+
+   // True if this button uses prominent styling (blue fill, etc.).