Add header asset native ui colors

This CL adds new color ids and colors for the avatar header assets for
incognito and guest modes using the old method by setting them manually
and the new method by extracting the colors from existing core colors.

Aligning colors in incognito and guest for both the header asset and
the avatar icon.

Screenshots:
https://screenshot.googleplex.com/BNC82JK2UkZR5eb.png

Bug: 1105763
Change-Id: Idcc27c87b081f22429c7342c042d39e721d6ef86
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2418654
Commit-Queue: Mariam Ali <alimariam@google.com>
Reviewed-by: Thomas Anderson <thomasanderson@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#814749}

chrome/browser/profiles/profile_avatar_icon_util.cc

@@ -23,6 +23,7 @@
 #include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/profiles/avatar_menu.h"
+#include "chrome/browser/ui/ui_features.h"
 #include "chrome/common/chrome_paths.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/theme_resources.h"
@@ -40,6 +41,7 @@
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/skia_util.h"
+#include "ui/native_theme/native_theme.h"
 #include "url/url_canon.h"
 
 #if defined(OS_WIN)
@@ -351,6 +353,10 @@ constexpr size_t kPlaceholderAvatarIndex = 0;
 #endif
 
 ui::ImageModel GetGuestAvatar(int size) {
+  if (base::FeatureList::IsEnabled(features::kNewProfilePicker)) {
+    return ui::ImageModel::FromVectorIcon(
+        kUserAccountAvatarIcon, ui::NativeTheme::kColorId_AvatarIcon, size);
+  }
   return ui::ImageModel::FromVectorIcon(kUserAccountAvatarIcon,
                                         gfx::kGoogleGrey500, size);
 }

chrome/browser/ui/views/profiles/incognito_menu_view.cc

@@ -52,16 +52,15 @@ void IncognitoMenuView::BuildMenu() {
   int incognito_window_count =
       BrowserList::GetOffTheRecordBrowsersActiveForProfile(
           browser()->profile());
-  // TODO(crbug.com/1105763): Add asset colors to native theme and update icon
-  // temporary color placeholder to align with the design deck colors.
-  ui::ThemedVectorIcon header_art_icon(&kIncognitoMenuArtIcon,
-                                       ui::NativeTheme::kColorId_MenuIconColor);
+
+  ui::ThemedVectorIcon header_art_icon(
+      &kIncognitoMenuArtIcon, ui::NativeTheme::kColorId_AvatarHeaderArt);
   SetProfileIdentityInfo(
       /*profile_name=*/base::string16(),
       /*background_color=*/SK_ColorTRANSPARENT,
       /*edit_button=*/base::nullopt,
-      ui::ImageModel::FromVectorIcon(
-          kIncognitoProfileIcon, ui::NativeTheme::kColorId_BubbleForeground),
+      ui::ImageModel::FromVectorIcon(kIncognitoProfileIcon,
+                                     ui::NativeTheme::kColorId_AvatarIcon),
       l10n_util::GetStringUTF16(IDS_INCOGNITO_PROFILE_MENU_TITLE),
       incognito_window_count > 1
           ? l10n_util::GetPluralStringFUTF16(IDS_INCOGNITO_WINDOW_COUNT_MESSAGE,

chrome/browser/ui/views/profiles/profile_menu_view.cc

@@ -491,10 +491,8 @@ void ProfileMenuView::BuildGuestIdentity() {
                                                 guest_window_count);
   }
 
-  // TODO(crbug.com/1105763): Add asset colors to native theme and update icon
-  // temporary color placeholder to align with the design deck colors.
-  ui::ThemedVectorIcon header_art_icon(&kGuestMenuArtIcon,
-                                       ui::NativeTheme::kColorId_MenuIconColor);
+  ui::ThemedVectorIcon header_art_icon(
+      &kGuestMenuArtIcon, ui::NativeTheme::kColorId_AvatarHeaderArt);
   SetProfileIdentityInfo(
       /*profile_name=*/base::string16(),
       /*background_color=*/SK_ColorTRANSPARENT,

ui/color/color_id.h

@@ -16,9 +16,9 @@
   E(kColorAlertHighSeverity, NativeTheme::kColorId_AlertSeverityHigh) \
   E(kColorAlertLowSeverity, NativeTheme::kColorId_AlertSeverityLow) \
   E(kColorAlertMediumSeverity, NativeTheme::kColorId_AlertSeverityMedium) \
-  E_CPONLY(kColorBorderAndSeparatorForeground) \
   E_CPONLY(kColorDisabledForeground) \
   E_CPONLY(kColorItemSelectionBackground) \
+  E_CPONLY(kColorMidground) \
   E_CPONLY(kColorPrimaryBackground) \
   E_CPONLY(kColorPrimaryForeground) \
   E_CPONLY(kColorSecondaryForeground) \
@@ -26,6 +26,8 @@
   E_CPONLY(kColorTextSelectionBackground) \
   \
   /* Further UI element colors */ \
+  E(kColorAvatarHeaderArt, NativeTheme::kColorId_AvatarHeaderArt) \
+  E(kColorAvatarIcon, NativeTheme::kColorId_AvatarIcon) \
   E(kColorBubbleBackground, NativeTheme::kColorId_BubbleBackground) \
   E(kColorBubbleFooterBackground, \
     NativeTheme::kColorId_BubbleFooterBackground) \

ui/color/core_default_color_mixer.cc

@@ -28,7 +28,7 @@ ColorMixer& AddMixerForDarkMode(ColorProvider* provider) {
            {kColorAlertHighSeverity, gfx::kGoogleRed300},
            {kColorAlertLowSeverity, gfx::kGoogleGreen300},
            {kColorAlertMediumSeverity, gfx::kGoogleYellow300},
-           {kColorBorderAndSeparatorForeground, gfx::kGoogleGrey800},
+           {kColorMidground, gfx::kGoogleGrey800},
            {kColorPrimaryBackground, SkColorSetRGB(0x29, 0x2A, 0x2D)},
            {kColorPrimaryForeground, gfx::kGoogleGrey200},
            {kColorSecondaryForeground, gfx::kGoogleGrey500},
@@ -46,7 +46,7 @@ ColorMixer& AddMixerForLightMode(ColorProvider* provider) {
                     {kColorAlertHighSeverity, gfx::kGoogleRed600},
                     {kColorAlertLowSeverity, gfx::kGoogleGreen700},
                     {kColorAlertMediumSeverity, gfx::kGoogleYellow700},
-                    {kColorBorderAndSeparatorForeground, gfx::kGoogleGrey300},
+                    {kColorMidground, gfx::kGoogleGrey300},
                     {kColorPrimaryBackground, SK_ColorWHITE},
                     {kColorPrimaryForeground, gfx::kGoogleGrey900},
                     {kColorSecondaryForeground, gfx::kGoogleGrey700},

ui/color/ui_color_mixer.cc

@@ -17,10 +17,12 @@ void AddUiColorMixer(ColorProvider* provider) {
   const auto button_disabled_background =
       BlendForMinContrastWithSelf(kColorButtonBackground, 1.2f);
 
+  mixer[kColorAvatarHeaderArt] = {kColorMidground};
+  mixer[kColorAvatarIcon] = {kColorPrimaryForeground};
   mixer[kColorBubbleBackground] = {kColorPrimaryBackground};
   mixer[kColorBubbleFooterBackground] = {kColorSubtleEmphasisBackground};
   mixer[kColorButtonBackground] = {kColorPrimaryBackground};
-  mixer[kColorButtonBorder] = {kColorBorderAndSeparatorForeground};
+  mixer[kColorButtonBorder] = {kColorMidground};
   mixer[kColorButtonBorderDisabled] = button_disabled_background;
   mixer[kColorButtonForegroundDisabled] = {kColorDisabledForeground};
   mixer[kColorButtonForeground] = {kColorAccent};
@@ -35,7 +37,7 @@ void AddUiColorMixer(ColorProvider* provider) {
   mixer[kColorDialogBackground] = {kColorPrimaryBackground};
   mixer[kColorDialogForeground] = {kColorSecondaryForeground};
   mixer[kColorFocusableBorderFocused] = SetAlpha(kColorAccent, 0x4D);
-  mixer[kColorFocusableBorderUnfocused] = {kColorBorderAndSeparatorForeground};
+  mixer[kColorFocusableBorderUnfocused] = {kColorMidground};
   mixer[kColorIcon] = {kColorSecondaryForeground};
   mixer[kColorMenuIcon] = {kColorIcon};
   mixer[kColorLabelForegroundDisabled] = {kColorDisabledForeground};
@@ -47,7 +49,7 @@ void AddUiColorMixer(ColorProvider* provider) {
   mixer[kColorLinkForegroundPressed] = {kColorLinkForeground};
   mixer[kColorLinkForeground] = {kColorAccent};
   mixer[kColorMenuBackground] = {kColorPrimaryBackground};
-  mixer[kColorMenuBorder] = {kColorBorderAndSeparatorForeground};
+  mixer[kColorMenuBorder] = {kColorMidground};
   mixer[kColorMenuItemBackgroundAlertedInitial] = SetAlpha(kColorAccent, 0x4D);
   mixer[kColorMenuItemBackgroundAlertedTarget] = SetAlpha(kColorAccent, 0x1A);
   mixer[kColorMenuItemForegroundDisabled] = {kColorDisabledForeground};
@@ -57,8 +59,8 @@ void AddUiColorMixer(ColorProvider* provider) {
   mixer[kColorMenuItemForegroundSecondary] = {kColorSecondaryForeground};
   mixer[kColorMenuItemBackgroundSelected] = {kColorItemSelectionBackground};
   mixer[kColorMenuItemForegroundSelected] = {kColorMenuItemForeground};
-  mixer[kColorMenuSeparator] = {kColorBorderAndSeparatorForeground};
-  mixer[kColorTabContentSeparator] = {kColorBorderAndSeparatorForeground};
+  mixer[kColorMenuSeparator] = {kColorMidground};
+  mixer[kColorTabContentSeparator] = {kColorMidground};
   mixer[kColorTabForeground] = {kColorSecondaryForeground};
   mixer[kColorTabBorderSelected] = {kColorAccent};
   mixer[kColorTabForegroundSelected] = {kColorAccent};
@@ -67,7 +69,7 @@ void AddUiColorMixer(ColorProvider* provider) {
   mixer[kColorTableGroupingIndicator] = {kColorTableBackgroundSelectedFocused};
   mixer[kColorTableHeaderBackground] = {kColorTableBackground};
   mixer[kColorTableHeaderForeground] = {kColorTableForeground};
-  mixer[kColorTableHeaderSeparator] = {kColorBorderAndSeparatorForeground};
+  mixer[kColorTableHeaderSeparator] = {kColorMidground};
   mixer[kColorTableBackgroundSelectedFocused] = {kColorItemSelectionBackground};
   mixer[kColorTableForegroundSelectedFocused] = {kColorTableForeground};
   mixer[kColorTableBackgroundSelectedUnfocused] = {

ui/gtk/native_theme_gtk.cc

@@ -81,7 +81,7 @@ base::Optional<SkColor> SkColorFromColorId(
     case ui::NativeTheme::kColorId_NotificationDefaultBackground:
       return GetBgColor("");
     case ui::NativeTheme::kColorId_DialogForeground:
-    case ui::NativeTheme::kColorId_BubbleForeground:
+    case ui::NativeTheme::kColorId_AvatarIcon:
       return GetFgColor("GtkLabel");
     case ui::NativeTheme::kColorId_BubbleFooterBackground:
       return GetBgColor("#statusbar");
@@ -126,6 +126,7 @@ base::Optional<SkColor> SkColorFromColorId(
       return GetFgColor(
           "GtkMenu#menu GtkMenuItem#menuitem GtkLabel.accelerator");
     case ui::NativeTheme::kColorId_MenuSeparatorColor:
+    case ui::NativeTheme::kColorId_AvatarHeaderArt:
       if (GtkCheckVersion(3, 20)) {
         return GetSeparatorColor(
             "GtkMenu#menu GtkSeparator#separator.horizontal");

ui/native_theme/common_theme.cc

@@ -74,10 +74,12 @@ base::Optional<SkColor> GetDarkSchemeColor(NativeTheme::ColorId color_id) {
       return color_utils::AlphaBlend(SK_ColorWHITE, gfx::kGoogleGrey900, 0.04f);
     case NativeTheme::kColorId_DialogForeground:
       return gfx::kGoogleGrey500;
-    case NativeTheme::kColorId_BubbleForeground:
-      return gfx::kGoogleGrey200;
     case NativeTheme::kColorId_BubbleFooterBackground:
       return SkColorSetRGB(0x32, 0x36, 0x39);
+    case NativeTheme::kColorId_AvatarHeaderArt:
+      return gfx::kGoogleGrey800;
+    case NativeTheme::kColorId_AvatarIcon:
+      return gfx::kGoogleGrey200;
 
     // FocusableBorder
     case NativeTheme::kColorId_FocusedBorderColor:
@@ -249,10 +251,12 @@ SkColor GetDefaultColor(NativeTheme::ColorId color_id,
     case NativeTheme::kColorId_BubbleBackground:
     case NativeTheme::kColorId_NotificationDefaultBackground:
       return SK_ColorWHITE;
+    case NativeTheme::kColorId_AvatarHeaderArt:
+      return gfx::kGoogleGrey300;
+    case NativeTheme::kColorId_AvatarIcon:
+      return kPrimaryTextColor;
     case NativeTheme::kColorId_DialogForeground:
       return gfx::kGoogleGrey700;
-    case NativeTheme::kColorId_BubbleForeground:
-      return kPrimaryTextColor;
     case NativeTheme::kColorId_BubbleFooterBackground:
       return gfx::kGoogleGrey050;
 

ui/native_theme/native_theme.cc

@@ -36,6 +36,8 @@ NativeThemeColorIdToColorIdMap() {
         {NTCID::kColorId_AlertSeverityHigh, kColorAlertHighSeverity},
         {NTCID::kColorId_AlertSeverityLow, kColorAlertLowSeverity},
         {NTCID::kColorId_AlertSeverityMedium, kColorAlertMediumSeverity},
+        {NTCID::kColorId_AvatarHeaderArt, kColorAvatarHeaderArt},
+        {NTCID::kColorId_AvatarIcon, kColorAvatarIcon},
         {NTCID::kColorId_BubbleBackground, kColorBubbleBackground},
         {NTCID::kColorId_BubbleFooterBackground,
           kColorBubbleFooterBackground},

ui/native_theme/native_theme_color_id.h

@@ -14,8 +14,10 @@
   OP(kColorId_DialogBackground),                                               \
   OP(kColorId_DialogForeground),                                               \
   OP(kColorId_BubbleBackground),                                               \
-  OP(kColorId_BubbleForeground),                                               \
   OP(kColorId_BubbleFooterBackground),                                         \
+  /* Avatar and Header Asset */                                                \
+  OP(kColorId_AvatarHeaderArt),                                                \
+  OP(kColorId_AvatarIcon),                                                     \
   /* FocusableBorder */                                                        \
   OP(kColorId_FocusedBorderColor),                                             \
   OP(kColorId_UnfocusedBorderColor),                                           \