Merge pull request #3753 from brave/button-styles-71

Uplift button-styles #3569 to 0.71.x

chromium_src/chrome/browser/ui/views/chrome_typography_provider.cc

@@ -0,0 +1,44 @@
+// 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/gfx/color_palette.h"
+#include "ui/views/style/typography.h"
+
+// Comes after the above includes.
+#include "chrome/browser/ui/views/chrome_typography_provider.h"
+
+namespace {
+  const SkColor kBraveGrey800 = SkColorSetRGB(0x3b, 0x3e, 0x4f);
+}
+
+#define GetColor GetColor_ChromiumImpl
+#include "../../../../../../chrome/browser/ui/views/chrome_typography_provider.cc"
+#undef GetColor
+
+SkColor ChromeTypographyProvider::GetColor(const views::View& view,
+                                           int context,
+                                           int style) const {
+  // Harmony check duplicated from ChromiumImpl
+  const ui::NativeTheme* native_theme = view.GetNativeTheme();
+  DCHECK(native_theme);
+  if (ShouldIgnoreHarmonySpec(*native_theme)) {
+    return GetHarmonyTextColorForNonStandardNativeTheme(context, style,
+                                                        *native_theme);
+  }
+  // Override button text colors
+  if (context == views::style::CONTEXT_BUTTON_MD) {
+    switch (style) {
+      case views::style::STYLE_DIALOG_BUTTON_DEFAULT:
+        return SK_ColorWHITE;
+      case views::style::STYLE_DISABLED:
+        // Keep chromium style for this state.
+        break;
+      default:
+        return native_theme->ShouldUseDarkColors() ? SK_ColorWHITE
+                                                   : kBraveGrey800;
+    }
+  }
+  return GetColor_ChromiumImpl(view, context, style);
+}

chromium_src/chrome/browser/ui/views/chrome_typography_provider.h

@@ -0,0 +1,19 @@
+// 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_CHROME_BROWSER_UI_VIEWS_CHROME_TYPOGRAPHY_PROVIDER_H_
+#define BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_CHROME_TYPOGRAPHY_PROVIDER_H_
+
+#include "ui/views/style/typography_provider.h"
+
+#define GetColor \
+        GetColor_ChromiumImpl(const views::View& view, \
+                   int context, \
+                   int style) const; \
+        SkColor GetColor
+#include "../../../../../../chrome/browser/ui/views/chrome_typography_provider.h"
+#undef GetColor
+
+#endif  // BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_CHROME_TYPOGRAPHY_PROVIDER_H_

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
+

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:

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

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_