Add avatar header assets in incognito and guest menus

This CL adds a few elements to the new menus in incognito and guest
modes:
 - Add a new background subclass that allows to draw themed images
   on a view's background.
 - Add incognito and guest mode art assets.

Design Deck: go/alignmenus

Screenshots:
https://screenshot.googleplex.com/9nCgPZMahh8eALD.png

Bug: 1105763
Change-Id: I2367514aa7285959409e68e3cfd618690beedff1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2388442Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Ramin Halavati <rhalavati@chromium.org>
Reviewed-by: Peter Boström <pbos@chromium.org>
Reviewed-by: Jan Krcal <jkrcal@chromium.org>
Commit-Queue: Mariam Ali <alimariam@google.com>
Cr-Commit-Position: refs/heads/master@{#809711}

chrome/app/vector_icons/BUILD.gn

@@ -10,6 +10,7 @@ import("//ui/webui/webui_features.gni")
 aggregate_vector_icons("chrome_vector_icons") {
   icon_directory = "."
 
+  # Keep sorted alphabetically.
   icons = [
     "account_box.icon",
     "account_child.icon",
@@ -18,24 +19,21 @@ aggregate_vector_icons("chrome_vector_icons") {
     "apps.icon",
     "autofill/webauthn_dialog_header.icon",
     "autofill/webauthn_dialog_header_dark.icon",
+    "back_arrow_touch.icon",
     "blocked_redirect.icon",
+    "bookmarkbar_touch_overflow.icon",
     "browser_tools.icon",
     "browser_tools_error.icon",
+    "browser_tools_error_touch.icon",
+    "browser_tools_touch.icon",
     "browser_tools_update.icon",
+    "browser_tools_update_touch.icon",
     "caret_down.icon",
     "caret_up.icon",
+    "cast_for_education.icon",
     "click_to_call_illustration.icon",
     "click_to_call_illustration_dark.icon",
     "close_all.icon",
-
-    # Alternative squarer content_paste icon optimised for display at 18x18dip.
-    # Currently only used in the Page Info bubble.
-    "back_arrow_touch.icon",
-    "bookmarkbar_touch_overflow.icon",
-    "browser_tools_error_touch.icon",
-    "browser_tools_touch.icon",
-    "browser_tools_update_touch.icon",
-    "cast_for_education.icon",
     "computer_with_circle_background.icon",
     "copy.icon",
     "crashed_tab.icon",
@@ -50,10 +48,12 @@ aggregate_vector_icons("chrome_vector_icons") {
     "fullscreen.icon",
     "generic_stop.icon",
     "globe.icon",
+    "guest_menu_art.icon",
     "hardware_computer.icon",
     "hardware_smartphone.icon",
     "horizontal_menu.icon",
     "incognito.icon",
+    "incognito_menu_art.icon",
     "incognito_profile.icon",
     "input.icon",
     "key.icon",

chrome/app/vector_icons/guest_menu_art.icon

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 272,
+MOVE_TO, 209.9f, 56.8f,
+CUBIC_TO, 209.3f, 56.2f, 208.4f, 56, 207.6f, 56.2f,
+LINE_TO, 200.4f, 58.1f,
+CUBIC_TO, 199.6f, 58.3f, 198.9f, 59, 198.7f, 59.8f,
+LINE_TO, 196.8f, 67,
+CUBIC_TO, 196.6f, 67.8f, 196.8f, 68.7f, 197.4f, 69.3f,
+LINE_TO, 200, 72,
+H_LINE_TO, 202.1f,
+LINE_TO, 198.4f, 68.3f,
+CUBIC_TO, 198.2f, 68.1f, 198.1f, 67.8f, 198.2f, 67.5f,
+LINE_TO, 200.1f, 60.3f,
+CUBIC_TO, 200.2f, 60, 200.4f, 59.8f, 200.7f, 59.7f,
+LINE_TO, 207.9f, 57.8f,
+CUBIC_TO, 208.2f, 57.7f, 208.5f, 57.8f, 208.7f, 58,
+LINE_TO, 214, 63.3f,
+CUBIC_TO, 214.2f, 63.5f, 214.3f, 63.8f, 214.2f, 64.1f,
+LINE_TO, 212.3f, 71.3f,
+CUBIC_TO, 212.2f, 71.6f, 212, 71.8f, 211.7f, 71.9f,
+LINE_TO, 211.3f, 72,
+H_LINE_TO, 213.7f,
+CUBIC_TO, 213.7f, 71.9f, 213.8f, 71.8f, 213.8f, 71.7f,
+LINE_TO, 215.7f, 64.5f,
+CUBIC_TO, 215.9f, 63.7f, 215.7f, 62.8f, 215.1f, 62.2f,
+LINE_TO, 209.9f, 56.8f,
+CLOSE,
+MOVE_TO, 176.1f, 6.4f,
+CUBIC_TO, 176.1f, 15.3f, 183.3f, 22.5f, 192.2f, 22.5f,
+CUBIC_TO, 201.1f, 22.5f, 208.3f, 15.3f, 208.3f, 6.4f,
+CUBIC_TO, 208.3f, 4.1f, 207.8f, 1.9f, 207, 0,
+H_LINE_TO, 177.5f,
+CUBIC_TO, 176.6f, 2, 176.1f, 4.1f, 176.1f, 6.4f,
+CLOSE,
+MOVE_TO, 102.5f, 18.7f,
+CUBIC_TO, 105.92f, 18.7f, 108.7f, 15.92f, 108.7f, 12.5f,
+CUBIC_TO, 108.7f, 9.08f, 105.92f, 6.3f, 102.5f, 6.3f,
+CUBIC_TO, 99.08f, 6.3f, 96.3f, 9.08f, 96.3f, 12.5f,
+CUBIC_TO, 96.3f, 15.92f, 99.08f, 18.7f, 102.5f, 18.7f,
+CLOSE,
+MOVE_TO, 56.1f, 4.9f,
+CUBIC_TO, 58.3f, 8, 57.6f, 12.4f, 54.4f, 14.6f,
+CUBIC_TO, 52.9f, 15.7f, 51, 16.1f, 49.2f, 15.8f,
+CUBIC_TO, 47.4f, 15.5f, 45.8f, 14.5f, 44.7f, 13,
+LINE_TO, 35.9f, 0.4f,
+CUBIC_TO, 35.8f, 0.3f, 35.7f, 0.1f, 35.7f, 0,
+H_LINE_TO, 34,
+CUBIC_TO, 34.2f, 0.4f, 34.4f, 0.8f, 34.7f, 1.2f,
+LINE_TO, 43.6f, 13.8f,
+CUBIC_TO, 44.9f, 15.6f, 46.8f, 16.9f, 49.1f, 17.3f,
+CUBIC_TO, 49.6f, 17.4f, 50.1f, 17.4f, 50.6f, 17.4f,
+CUBIC_TO, 52.3f, 17.4f, 54, 16.9f, 55.5f, 15.9f,
+CUBIC_TO, 59.3f, 13.2f, 60.2f, 7.9f, 57.5f, 4.1f,
+LINE_TO, 54.5f, 0,
+H_LINE_TO, 52.7f,
+LINE_TO, 56.1f, 4.9f,
+CLOSE,
+MOVE_TO, 272, 27.2f,
+CUBIC_TO, 270.8f, 27.1f, 269.7f, 27.3f, 268.6f, 27.7f,
+CUBIC_TO, 267.3f, 28.2f, 265.9f, 28.3f, 264.6f, 27.8f,
+LINE_TO, 264, 27.6f,
+CUBIC_TO, 262.7f, 27.1f, 261.7f, 26.1f, 261.2f, 24.8f,
+CUBIC_TO, 260.4f, 22.9f, 258.8f, 21.4f, 256.6f, 20.8f,
+CUBIC_TO, 253.4f, 19.9f, 249.8f, 21.3f, 248.2f, 24.3f,
+CUBIC_TO, 246.1f, 28.2f, 247.9f, 32.9f, 251.9f, 34.4f,
+CUBIC_TO, 253.7f, 35.1f, 255.7f, 35.1f, 257.4f, 34.4f,
+CUBIC_TO, 258.7f, 33.9f, 260.1f, 33.8f, 261.3f, 34.3f,
+LINE_TO, 261.9f, 34.5f,
+CUBIC_TO, 263.2f, 35, 264.2f, 36, 264.7f, 37.3f,
+CUBIC_TO, 265.4f, 39, 266.8f, 40.4f, 268.6f, 41.1f,
+CUBIC_TO, 269.7f, 41.5f, 270.8f, 41.7f, 271.9f, 41.6f,
+V_LINE_TO, 27.2f,
+H_LINE_TO, 272,
+CLOSE,
+MOVE_TO, 0, 34.1f,
+V_LINE_TO, 56.9f,
+LINE_TO, 25, 48.3f,
+CUBIC_TO, 25.8f, 48, 26.2f, 47.1f, 25.9f, 46.3f,
+CUBIC_TO, 21.6f, 36.2f, 10.5f, 31, 0, 34.1f,
+CLOSE,
+MOVE_TO, 65.9f, 52.9f,
+CUBIC_TO, 65.3f, 52.4f, 64.5f, 52.7f, 64.3f, 53.4f,
+LINE_TO, 60.4f, 72,
+H_LINE_TO, 65.1f,
+LINE_TO, 72.35f, 69.6f,
+LINE_TO, 79.6f, 67.2f,
+CUBIC_TO, 80.3f, 67, 80.5f, 66, 79.9f, 65.6f,
+LINE_TO, 65.9f, 52.9f,
+CLOSE,
+NEW_PATH,
+STROKE, 1,
+MOVE_TO, 0.5f, 4,
+CUBIC_TO, 0.5f, 2.07f, 2.07f, 0.5f, 4, 0.5f,
+H_LINE_TO, 268,
+CUBIC_TO, 269.93f, 0.5f, 271.5f, 2.07f, 271.5f, 4,
+V_LINE_TO, 68,
+CUBIC_TO, 271.5f, 69.93f, 269.93f, 71.5f, 268, 71.5f,
+H_LINE_TO, 4,
+CUBIC_TO, 2.07f, 71.5f, 0.5f, 69.93f, 0.5f, 68,
+V_LINE_TO, 4,
+CLOSE
\ No newline at end of file

chrome/app/vector_icons/incognito_menu_art.icon

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 272,
+MOVE_TO, 203.7f, 0,
+H_LINE_TO, 268,
+CUBIC_TO, 270.21f, 0, 272, 1.79f, 272, 4,
+V_LINE_TO, 69,
+CUBIC_TO, 272, 71.21f, 270.21f, 73, 268, 73,
+H_LINE_TO, 259.4f,
+LINE_TO, 258, 61.6f,
+CUBIC_TO, 256.3f, 62.1f, 254.5f, 62.4f, 252.6f, 62.4f,
+CUBIC_TO, 243.1f, 62.4f, 235.4f, 55.1f, 234.5f, 45.7f,
+CUBIC_TO, 229.4f, 42.5f, 225.3f, 44.5f, 223.8f, 45.6f,
+CUBIC_TO, 223.1f, 55, 215.3f, 62.4f, 205.7f, 62.4f,
+CUBIC_TO, 195.6f, 62.4f, 187.5f, 54.2f, 187.5f, 44.2f,
+CUBIC_TO, 187.5f, 34.1f, 195.7f, 26, 205.7f, 26,
+CUBIC_TO, 214.3f, 26, 221.5f, 32, 223.4f, 40.1f,
+CUBIC_TO, 226.4f, 38.8f, 230.5f, 38.3f, 234.9f, 40.2f,
+CUBIC_TO, 236.8f, 32.1f, 244, 26.1f, 252.6f, 26.1f,
+H_LINE_TO, 253.8f,
+LINE_TO, 253.2f, 20.8f,
+H_LINE_TO, 182.2f,
+H_LINE_TO, 94.4f,
+LINE_TO, 100.1f, 13.5f,
+H_LINE_TO, 172.1f,
+LINE_TO, 167.1f, 0,
+H_LINE_TO, 188.5f,
+LINE_TO, 184, 15.5f,
+H_LINE_TO, 252.6f,
+LINE_TO, 252, 10.3f,
+H_LINE_TO, 199.8f,
+LINE_TO, 203.7f, 0,
+CLOSE,
+MOVE_TO, 68.2f, 0,
+H_LINE_TO, 4,
+CUBIC_TO, 1.79f, 0, 0, 1.79f, 0, 4,
+V_LINE_TO, 69,
+CUBIC_TO, 0, 71.21f, 1.79f, 73, 4, 73,
+LINE_TO, 4.5f, 73,
+LINE_TO, 13.8f, 47.7f,
+CUBIC_TO, 16.4f, 49.4f, 19.5f, 50.4f, 22.8f, 50.4f,
+CUBIC_TO, 31.3f, 50.4f, 38.3f, 43.8f, 38.9f, 35.5f,
+CUBIC_TO, 40.3f, 34.5f, 44, 32.7f, 48.5f, 35.6f,
+CUBIC_TO, 49.2f, 43.9f, 56.1f, 50.4f, 64.6f, 50.4f,
+CUBIC_TO, 67.5f, 50.4f, 70.2f, 49.7f, 72.6f, 48.3f,
+LINE_TO, 53, 73,
+H_LINE_TO, 76.4f,
+CUBIC_TO, 74.4f, 69.3f, 73.2f, 65.1f, 73.2f, 60.6f,
+CUBIC_TO, 73.2f, 46.6f, 84.6f, 35.2f, 98.6f, 35.2f,
+CUBIC_TO, 110.6f, 35.2f, 120.6f, 43.6f, 123.3f, 54.8f,
+CUBIC_TO, 127.5f, 53, 133.2f, 52.3f, 139.3f, 54.9f,
+CUBIC_TO, 141.9f, 43.6f, 152, 35.2f, 164, 35.2f,
+CUBIC_TO, 168.8f, 35.2f, 173.3f, 36.6f, 177.1f, 38.9f,
+LINE_TO, 180.3f, 28,
+H_LINE_TO, 88.7f,
+LINE_TO, 80.1f, 38.8f,
+CUBIC_TO, 80.6f, 37.3f, 80.8f, 35.8f, 80.8f, 34.2f,
+CUBIC_TO, 80.8f, 25.3f, 73.5f, 18, 64.6f, 18,
+CUBIC_TO, 56.9f, 18, 50.5f, 23.4f, 48.8f, 30.5f,
+CUBIC_TO, 44.9f, 28.9f, 41.3f, 29.3f, 38.6f, 30.5f,
+CUBIC_TO, 37, 24, 31.6f, 19, 24.9f, 18.1f,
+LINE_TO, 26.7f, 13.3f,
+H_LINE_TO, 85.5f,
+V_LINE_TO, 8.7f,
+H_LINE_TO, 28.4f,
+LINE_TO, 30.1f, 4.1f,
+H_LINE_TO, 69.7f,
+LINE_TO, 68.2f, 0,
+CLOSE,
+MOVE_TO, 85.3f, 73,
+H_LINE_TO, 111.7f,
+CUBIC_TO, 114.7f, 69.7f, 116.6f, 65.4f, 116.6f, 60.6f,
+CUBIC_TO, 116.6f, 50.6f, 108.5f, 42.5f, 98.5f, 42.5f,
+CUBIC_TO, 88.5f, 42.5f, 80.4f, 50.6f, 80.4f, 60.6f,
+CUBIC_TO, 80.4f, 65.4f, 82.3f, 69.8f, 85.3f, 73,
+CLOSE,
+MOVE_TO, 120.5f, 73,
+H_LINE_TO, 141.6f,
+CUBIC_TO, 139.9f, 69.9f, 138.8f, 66.5f, 138.5f, 62.8f,
+CUBIC_TO, 131.5f, 58.3f, 125.8f, 61.2f, 123.6f, 62.7f,
+CUBIC_TO, 123.3f, 66.4f, 122.2f, 69.9f, 120.5f, 73,
+CLOSE,
+MOVE_TO, 150.4f, 73,
+H_LINE_TO, 167.2f,
+LINE_TO, 174.6f, 46.2f,
+CUBIC_TO, 171.5f, 43.9f, 167.7f, 42.5f, 163.6f, 42.5f,
+CUBIC_TO, 153.6f, 42.5f, 145.5f, 50.6f, 145.5f, 60.6f,
+CUBIC_TO, 145.5f, 65.4f, 147.4f, 69.8f, 150.4f, 73,
+CLOSE,
+MOVE_TO, 76.2f, 34.2f,
+CUBIC_TO, 76.2f, 40.61f, 71.01f, 45.8f, 64.6f, 45.8f,
+CUBIC_TO, 58.19f, 45.8f, 53, 40.61f, 53, 34.2f,
+CUBIC_TO, 53, 27.79f, 58.19f, 22.6f, 64.6f, 22.6f,
+CUBIC_TO, 71.01f, 22.6f, 76.2f, 27.79f, 76.2f, 34.2f,
+CLOSE,
+MOVE_TO, 34.4f, 34.2f,
+CUBIC_TO, 34.4f, 27.9f, 29.4f, 22.8f, 23.2f, 22.6f,
+LINE_TO, 15.5f, 43.2f,
+CUBIC_TO, 17.5f, 44.8f, 20, 45.8f, 22.8f, 45.8f,
+CUBIC_TO, 29.2f, 45.8f, 34.4f, 40.6f, 34.4f, 34.2f,
+CLOSE,
+MOVE_TO, 218.7f, 44.2f,
+CUBIC_TO, 218.7f, 51.38f, 212.88f, 57.2f, 205.7f, 57.2f,
+CUBIC_TO, 198.52f, 57.2f, 192.7f, 51.38f, 192.7f, 44.2f,
+CUBIC_TO, 192.7f, 37.02f, 198.52f, 31.2f, 205.7f, 31.2f,
+CUBIC_TO, 212.88f, 31.2f, 218.7f, 37.02f, 218.7f, 44.2f,
+CLOSE,
+MOVE_TO, 239.6f, 44.2f,
+CUBIC_TO, 239.6f, 51.4f, 245.4f, 57.2f, 252.6f, 57.2f,
+CUBIC_TO, 254.3f, 57.2f, 255.9f, 56.9f, 257.4f, 56.3f,
+LINE_TO, 254.4f, 31.3f,
+CUBIC_TO, 253.8f, 31.2f, 253.2f, 31.2f, 252.5f, 31.2f,
+CUBIC_TO, 245.4f, 31.1f, 239.6f, 37, 239.6f, 44.2f,
+CLOSE
\ No newline at end of file

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

@@ -52,7 +52,10 @@ 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);
   SetProfileIdentityInfo(
       /*profile_name=*/base::string16(),
       /*background_color=*/SK_ColorTRANSPARENT,
@@ -63,7 +66,8 @@ void IncognitoMenuView::BuildMenu() {
       incognito_window_count > 1
           ? l10n_util::GetPluralStringFUTF16(IDS_INCOGNITO_WINDOW_COUNT_MESSAGE,
                                              incognito_window_count)
-          : base::string16());
+          : base::string16(),
+      header_art_icon);
 
 #if defined(OS_WIN)
   if (ProfileShortcutManager::IsFeatureEnabled() &&

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

@@ -491,11 +491,16 @@ 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);
   SetProfileIdentityInfo(
       /*profile_name=*/base::string16(),
       /*background_color=*/SK_ColorTRANSPARENT,
       /*edit_button=*/base::nullopt, profiles::GetGuestAvatar(),
-      l10n_util::GetStringUTF16(IDS_GUEST_PROFILE_NAME), subtitle);
+      l10n_util::GetStringUTF16(IDS_GUEST_PROFILE_NAME), subtitle,
+      header_art_icon);
 }
 
 void ProfileMenuView::BuildAutofillButtons() {

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

@@ -61,6 +61,9 @@ constexpr int kMaxImageSize = ProfileMenuViewBase::kIdentityImageSize;
 constexpr int kDefaultMargin = 8;
 constexpr int kBadgeSize = 16;
 constexpr int kCircularImageButtonSize = 28;
+// TODO(crbug.com/1128499): Remove this constant by extracting art height from
+// |avatar_header_art|.
+constexpr int kHeaderArtHeight = 72;
 constexpr int kIdentityImageBorder = 2;
 constexpr int kIdentityImageSizeInclBorder =
     ProfileMenuViewBase::kIdentityImageSize + 2 * kIdentityImageBorder;
@@ -360,7 +363,8 @@ void BuildProfileBackgroundContainer(
     base::Optional<SkColor> background_color,
     int corner_radius,
     std::unique_ptr<views::View> avatar_image_view,
-    std::unique_ptr<views::View> edit_button) {
+    std::unique_ptr<views::View> edit_button,
+    const ui::ThemedVectorIcon& avatar_header_art) {
   constexpr int kExtraMarginInsideProfileBackground = 2;
 
   views::View* profile_background_container =
@@ -389,8 +393,23 @@ void BuildProfileBackgroundContainer(
         views::CreateBackgroundFromPainter(
             views::Painter::CreateSolidRoundRectPainter(
                 background_color.value(), corner_radius, background_insets)));
+  } else {
+    profile_background_container->SetBackground(
+        views::CreateThemedVectorIconBackground(profile_background_container,
+                                                avatar_header_art));
   }
 
+  // |avatar_margin| is derived from |avatar_header_art| asset height, it
+  // increases margin for the avatar icon to make |avatar_header_art| visible
+  // above the center of the avatar icon.
+  // Subtracting |kIdentityImageBorder| from the height as it isn't part of the
+  // actual image and shouldn't affect the margin.
+  const int avatar_margin =
+      avatar_header_art.empty()
+          ? kDefaultMargin
+          : kHeaderArtHeight - kIdentityImageBorder -
+                ProfileMenuViewBase::kIdentityImageSize / 2;
+
   // The |heading_and_image_container| is on the left and it stretches almost
   // the full width. It contains the profile heading and the avatar image.
   views::View* heading_and_image_container =
@@ -406,12 +425,14 @@ void BuildProfileBackgroundContainer(
       ->SetOrientation(views::LayoutOrientation::kVertical)
       .SetMainAxisAlignment(views::LayoutAlignment::kCenter)
       .SetCrossAxisAlignment(views::LayoutAlignment::kCenter)
-      .SetInteriorMargin(gfx::Insets(/*top=*/kDefaultMargin, 0, 0, 0));
+      .SetInteriorMargin(gfx::Insets(/*top=*/avatar_margin, 0, 0, 0));
   if (heading_label) {
+    DCHECK(avatar_header_art.empty());
     heading_label->SetBorder(
         views::CreateEmptyBorder(gfx::Insets(/*vertical=*/kDefaultMargin, 0)));
     heading_and_image_container->AddChildView(std::move(heading_label));
   }
+
   heading_and_image_container->AddChildView(std::move(avatar_image_view));
 
   // The |edit_button| is on the right and has fixed width.
@@ -520,7 +541,8 @@ void ProfileMenuViewBase::SetProfileIdentityInfo(
     base::Optional<EditButtonParams> edit_button_params,
     const ui::ImageModel& image_model,
     const base::string16& title,
-    const base::string16& subtitle) {
+    const base::string16& subtitle,
+    const ui::ThemedVectorIcon& avatar_header_art) {
   constexpr int kBottomMargin = kDefaultMargin;
   const bool new_design =
       base::FeatureList::IsEnabled(features::kNewProfilePicker);
@@ -603,7 +625,7 @@ void ProfileMenuViewBase::SetProfileIdentityInfo(
       /*parent=*/identity_info_container_, std::move(heading_label),
       background_color,
       GetCornerRadius(),  // Use the same radius as the bubble has.
-      std::move(avatar_image_view), std::move(edit_button));
+      std::move(avatar_image_view), std::move(edit_button), avatar_header_art);
   BuildProfileTitleAndSubtitle(/*parent=*/identity_info_container_, title,
                                subtitle);
 }

chrome/browser/ui/views/profiles/profile_menu_view_base.h

@@ -128,7 +128,8 @@ class ProfileMenuViewBase : public content::WebContentsDelegate,
       base::Optional<EditButtonParams> edit_button_params,
       const ui::ImageModel& image_model,
       const base::string16& title,
-      const base::string16& subtitle = base::string16());
+      const base::string16& subtitle = base::string16(),
+      const ui::ThemedVectorIcon& avatar_header_art = ui::ThemedVectorIcon());
   void SetSyncInfo(const SyncInfo& sync_info,
                    const base::RepeatingClosure& action,
                    bool show_badge);

ui/views/background.cc

@@ -13,7 +13,6 @@
 #include "cc/paint/paint_flags.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_utils.h"
-#include "ui/native_theme/native_theme_color_id.h"
 #include "ui/views/painter.h"
 #include "ui/views/view.h"
 #include "ui/views/view_observer.h"
@@ -62,6 +61,33 @@ class RoundedRectBackground : public Background {
   DISALLOW_COPY_AND_ASSIGN(RoundedRectBackground);
 };
 
+// ThemedVectorIconBackground is an image drawn on the view's background using
+// ThemedVectorIcon to react to theme changes.
+class ThemedVectorIconBackground : public Background, public ViewObserver {
+ public:
+  explicit ThemedVectorIconBackground(View* view,
+                                      const ui::ThemedVectorIcon& icon)
+      : icon_(icon), observer_(this) {
+    DCHECK(!icon_.empty());
+    observer_.Add(view);
+    OnViewThemeChanged(view);
+  }
+
+  // ViewObserver:
+  void OnViewThemeChanged(View* view) override { view->SchedulePaint(); }
+  void OnViewIsDeleting(View* view) override { observer_.Remove(view); }
+
+  void Paint(gfx::Canvas* canvas, View* view) const override {
+    canvas->DrawImageInt(icon_.GetImageSkia(view->GetNativeTheme()), 0, 0);
+  }
+
+ private:
+  const ui::ThemedVectorIcon icon_;
+  ScopedObserver<View, ViewObserver> observer_;
+
+  DISALLOW_COPY_AND_ASSIGN(ThemedVectorIconBackground);
+};
+
 // ThemedSolidBackground is a solid background that stays in sync with a view's
 // native theme.
 class ThemedSolidBackground : public SolidBackground, public ViewObserver {
@@ -125,6 +151,12 @@ std::unique_ptr<Background> CreateRoundedRectBackground(SkColor color,
   return std::make_unique<RoundedRectBackground>(color, radius);
 }
 
+std::unique_ptr<Background> CreateThemedVectorIconBackground(
+    View* view,
+    const ui::ThemedVectorIcon& icon) {
+  return std::make_unique<ThemedVectorIconBackground>(view, icon);
+}
+
 std::unique_ptr<Background> CreateThemedSolidBackground(
     View* view,
     ui::NativeTheme::ColorId color_id) {

ui/views/background.h

@@ -14,6 +14,7 @@
 #include "third_party/skia/include/core/SkColor.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/native_theme/native_theme.h"
+#include "ui/native_theme/themed_vector_icon.h"
 #include "ui/views/views_export.h"
 
 #if defined(OS_WIN)
@@ -24,6 +25,10 @@ namespace gfx {
 class Canvas;
 }
 
+namespace ui {
+class ThemedVectorIcon;
+}
+
 namespace views {
 
 class Painter;
@@ -79,10 +84,15 @@ VIEWS_EXPORT std::unique_ptr<Background> CreateThemedSolidBackground(
     View* view,
     ui::NativeTheme::ColorId color_id);
 
-// Creates a Background from the specified Painter.
+// Creates a background from the specified Painter.
 VIEWS_EXPORT std::unique_ptr<Background> CreateBackgroundFromPainter(
     std::unique_ptr<Painter> painter);
 
+// Creates a background from the specified ThemedVectorIcon.
+VIEWS_EXPORT std::unique_ptr<Background> CreateThemedVectorIconBackground(
+    View* view,
+    const ui::ThemedVectorIcon& icon);
+
 }  // namespace views
 
 #endif  // UI_VIEWS_BACKGROUND_H_