Updated toolbar download button style (uplift to 1.50.x) (#17811)

Merge pull request #17769 from brave/update_download_button_style

Updated toolbar download button style

browser/ui/color/brave_color_id.h

@@ -24,7 +24,8 @@
     E_CPONLY(kColorWebDiscoveryInfoBarMessage)      \
     E_CPONLY(kColorWebDiscoveryInfoBarLink)         \
     E_CPONLY(kColorWebDiscoveryInfoBarNoThanks)     \
-    E_CPONLY(kColorWebDiscoveryInfoBarClose)
+    E_CPONLY(kColorWebDiscoveryInfoBarClose)        \
+    E_CPONLY(kColorBraveDownloadToolbarButtonActive)
 
 #define BRAVE_SEARCH_CONVERSION_COLOR_IDS                             \
     E_CPONLY(kColorSearchConversionBannerTypeBackgroundBorder)        \

browser/ui/color/brave_color_mixer.cc

@@ -91,6 +91,11 @@ void AddChromeLightThemeColorMixer(ui::ColorProvider* provider,
   mixer[ui::kColorToggleButtonThumbOn] = {SkColorSetRGB(0x4C, 0x54, 0xD2)};
   mixer[ui::kColorToggleButtonTrackOff] = {SkColorSetRGB(0xDA, 0xDC, 0xE8)};
   mixer[ui::kColorToggleButtonTrackOn] = {SkColorSetRGB(0xE1, 0xE2, 0xF6)};
+
+  // Used for download button progress ring color.
+  mixer[kColorDownloadToolbarButtonActive] = {SkColorSetRGB(0x42, 0x3E, 0xEE)};
+  mixer[kColorDownloadToolbarButtonRingBackground] = {
+      SkColorSetARGB(0x0F, 0x1D, 0x1F, 0x25)};
 }
 
 void AddChromeDarkThemeColorMixer(ui::ColorProvider* provider,
@@ -128,6 +133,9 @@ void AddChromeDarkThemeColorMixer(ui::ColorProvider* provider,
   mixer[ui::kColorToggleButtonThumbOn] = {SkColorSetRGB(0x44, 0x36, 0xE1)};
   mixer[ui::kColorToggleButtonTrackOff] = {SkColorSetRGB(0x5E, 0x61, 0x75)};
   mixer[ui::kColorToggleButtonTrackOn] = {SkColorSetRGB(0x76, 0x79, 0xB1)};
+  mixer[kColorDownloadToolbarButtonActive] = {SkColorSetRGB(0x42, 0x3E, 0xEE)};
+  mixer[kColorDownloadToolbarButtonRingBackground] = {
+      SkColorSetARGB(0x33, 0x00, 0x00, 0x00)};
 }
 
 }  // namespace
@@ -274,6 +282,11 @@ void AddBraveLightThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorWebDiscoveryInfoBarNoThanks] = {SkColorSetRGB(0x6B, 0x70, 0x84)};
   mixer[kColorWebDiscoveryInfoBarClose] = {SkColorSetRGB(0x6B, 0x70, 0x84)};
 
+  // Color for download button when all completed and button needs user
+  // interaction.
+  mixer[kColorBraveDownloadToolbarButtonActive] = {
+      SkColorSetRGB(0x5F, 0x5C, 0xF1)};
+
   // Colors for HelpBubble. IDs are defined in
   // chrome/browser/ui/color/chrome_color_id.h
   mixer[kColorFeaturePromoBubbleBackground] = {SK_ColorWHITE};
@@ -370,6 +383,9 @@ void AddBraveDarkThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorWebDiscoveryInfoBarClose] = {
       SkColorSetARGB(0xBF, 0x8C, 0x90, 0xA1)};
 
+  mixer[kColorBraveDownloadToolbarButtonActive] = {
+      SkColorSetRGB(0x87, 0x84, 0xF4)};
+
   // Colors for HelpBubble. IDs are defined in
   // chrome/browser/ui/color/chrome_color_id.h
   mixer[kColorFeaturePromoBubbleBackground] = {SkColorSetRGB(0x12, 0x13, 0x16)};

chromium_src/chrome/browser/ui/views/download/bubble/download_toolbar_button_view.cc

@@ -0,0 +1,52 @@
+/* Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/. */
+
+#include "chrome/browser/ui/views/download/bubble/download_toolbar_button_view.h"
+
+#include "brave/browser/ui/color/brave_color_id.h"
+#include "ui/gfx/geometry/skia_conversions.h"
+
+namespace gfx {
+
+SkRect AdjustRingBounds(const gfx::RectF& ring_bounds);
+
+}  // namespace gfx
+
+#define RectFToSkRect(ring_bounds) AdjustRingBounds(ring_bounds)
+#define DownloadToolbarButtonView DownloadToolbarButtonViewChromium
+
+#include "src/chrome/browser/ui/views/download/bubble/download_toolbar_button_view.cc"
+
+#undef DownloadToolbarButtonView
+#undef RectFToSkRect
+
+namespace gfx {
+
+SkRect AdjustRingBounds(const gfx::RectF& ring_bounds) {
+  const int chromium_ring_radius = ui::TouchUiController::Get()->touch_ui()
+                                       ? kProgressRingRadiusTouchMode
+                                       : kProgressRingRadius;
+  constexpr auto kBraveRingRadius = 12;
+  const auto delta = kBraveRingRadius - chromium_ring_radius;
+  gfx::RectF new_bounds(ring_bounds);
+  new_bounds.Outset(gfx::OutsetsF(delta));
+  return gfx::RectFToSkRect(new_bounds);
+}
+
+}  // namespace gfx
+
+SkColor DownloadToolbarButtonView::GetIconColor() const {
+  const DownloadDisplayController::IconInfo icon_info = GetIconInfo();
+
+  // Apply active color only when download is completed and user doesn't
+  // interact with this button.
+  if (icon_info.icon_state == download::DownloadIconState::kComplete &&
+      icon_info.is_active) {
+    return GetColorProvider()->GetColor(kColorBraveDownloadToolbarButtonActive);
+  }
+
+  // Otherwise, always use inactive color.
+  return GetColorProvider()->GetColor(kColorDownloadToolbarButtonInactive);
+}

chromium_src/chrome/browser/ui/views/download/bubble/download_toolbar_button_view.h

@@ -0,0 +1,38 @@
+/* Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/. */
+
+#ifndef BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_DOWNLOAD_BUBBLE_DOWNLOAD_TOOLBAR_BUTTON_VIEW_H_
+#define BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_DOWNLOAD_BUBBLE_DOWNLOAD_TOOLBAR_BUTTON_VIEW_H_
+
+#include "chrome/browser/download/bubble/download_display_controller.h"
+
+#define DownloadToolbarButtonView DownloadToolbarButtonViewChromium
+#define GetIconColor                                        \
+  UnUsed() {                                                \
+    return SK_ColorTRANSPARENT;                             \
+  }                                                         \
+                                                            \
+ protected:                                                 \
+  DownloadDisplayController::IconInfo GetIconInfo() const { \
+    return controller_->GetIconInfo();                      \
+  }                                                         \
+                                                            \
+ public:                                                    \
+  virtual SkColor GetIconColor
+
+#include "src/chrome/browser/ui/views/download/bubble/download_toolbar_button_view.h"  // IWYU pragma: export
+
+#undef GetIconColor
+#undef DownloadToolbarButtonView
+
+class DownloadToolbarButtonView : public DownloadToolbarButtonViewChromium {
+ public:
+  using DownloadToolbarButtonViewChromium::DownloadToolbarButtonViewChromium;
+
+  // DownloadToolbarButtonViewChromium overrides:
+  SkColor GetIconColor() const override;
+};
+
+#endif  // BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_DOWNLOAD_BUBBLE_DOWNLOAD_TOOLBAR_BUTTON_VIEW_H_

vector_icons/chrome/app/vector_icons/download_in_progress.icon

@@ -0,0 +1,37 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+
+CANVAS_DIMENSIONS, 16,
+MOVE_TO, 8, 0.76f,
+R_CUBIC_TO, 0.32f, 0, 0.59f, 0.27f, 0.59f, 0.59f,
+R_V_LINE_TO, 8.55f,
+R_LINE_TO, 2.32f, -2.32f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.84f, 0.84f,
+R_LINE_TO, -3.32f, 3.32f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, -0.84f, 0,
+LINE_TO, 4.26f, 8.42f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.84f, -0.84f,
+LINE_TO, 7.41f, 9.9f,
+V_LINE_TO, 1.35f,
+ARC_TO, 0.59f, 0.59f, 0, 0, 1, 8, 0.76f,
+CLOSE,
+R_MOVE_TO, -6.65f, 9.97f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, 0.59f,
+R_V_LINE_TO, 1.66f,
+R_CUBIC_TO, 0, 0.59f, 0.48f, 1.07f, 1.07f, 1.07f,
+R_H_LINE_TO, 9.97f,
+R_CUBIC_TO, 0.59f, 0, 1.07f, -0.48f, 1.07f, -1.07f,
+R_V_LINE_TO, -1.66f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, -0.59f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, 0.59f,
+R_V_LINE_TO, 1.66f,
+R_ARC_TO, 2.25f, 2.25f, 0, 0, 1, -2.25f, 2.25f,
+H_LINE_TO, 3.02f,
+R_ARC_TO, 2.25f, 2.25f, 0, 0, 1, -2.25f, -2.25f,
+R_V_LINE_TO, -1.66f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, -0.59f,
+CLOSE,
+R_MOVE_TO, 0, 0,
+CLOSE

vector_icons/chrome/app/vector_icons/download_toolbar_button.icon

@@ -0,0 +1,37 @@
+// Copyright (c) 2023 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 https://mozilla.org/MPL/2.0/.
+
+CANVAS_DIMENSIONS, 16,
+MOVE_TO, 8, 0.76f,
+R_CUBIC_TO, 0.32f, 0, 0.59f, 0.27f, 0.59f, 0.59f,
+R_V_LINE_TO, 8.55f,
+R_LINE_TO, 2.32f, -2.32f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.84f, 0.84f,
+R_LINE_TO, -3.32f, 3.32f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, -0.84f, 0,
+LINE_TO, 4.26f, 8.42f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.84f, -0.84f,
+LINE_TO, 7.41f, 9.9f,
+V_LINE_TO, 1.35f,
+ARC_TO, 0.59f, 0.59f, 0, 0, 1, 8, 0.76f,
+CLOSE,
+R_MOVE_TO, -6.65f, 9.97f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, 0.59f,
+R_V_LINE_TO, 1.66f,
+R_CUBIC_TO, 0, 0.59f, 0.48f, 1.07f, 1.07f, 1.07f,
+R_H_LINE_TO, 9.97f,
+R_CUBIC_TO, 0.59f, 0, 1.07f, -0.48f, 1.07f, -1.07f,
+R_V_LINE_TO, -1.66f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, -0.59f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, 0.59f,
+R_V_LINE_TO, 1.66f,
+R_ARC_TO, 2.25f, 2.25f, 0, 0, 1, -2.25f, 2.25f,
+H_LINE_TO, 3.02f,
+R_ARC_TO, 2.25f, 2.25f, 0, 0, 1, -2.25f, -2.25f,
+R_V_LINE_TO, -1.66f,
+R_ARC_TO, 0.59f, 0.59f, 0, 0, 1, 0.59f, -0.59f,
+CLOSE,
+R_MOVE_TO, 0, 0,
+CLOSE