[ntp][gm3] Add background to theme snapshots/previews in GM3

This CL adds a colored background from Panorama snapshots/previews with the Chrome Refresh 2023 flag enabled.

Remaining work for GM3 theme preview:
- Update mini new tab page
- Support dark mode

*Figma in bug description*

Screenshots of this CL's changes with #chrome-refresh-2023 and #chrome-webui-refresh-2023 enabled:
No background: screenshot/6ouFkfJzN2LpEaD.png
Custom background: screenshot/5MQMnwg8qcHBTCy.png
Uploaded background: screenshot/9USYqmvNuner69B.png

Change-Id: I583d794a914f1b5bb76e687de35164e7d4be6d1b
Bug: 1446334
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4568306
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Paul Adedeji <pauladedeji@google.com>
Cr-Commit-Position: refs/heads/main@{#1149402}

chrome/browser/resources/side_panel/customize_chrome/theme_snapshot.html

@@ -1,12 +1,16 @@
 <style>
-  .theme-snapshot {
+  :host {
+    --image-background-color: var(--customize-chrome-color-background-color);
+  }
+
+  .snapshot-container {
     box-sizing: border-box;
     padding: 0 16px 8px;
     text-align: center;
     width: 100%;
   }
 
-  .theme-snapshot img {
+  .image-background img {
     object-fit: cover;
   }
 
@@ -18,9 +22,9 @@
     width: 100%;
   }
 
-  #classicChrome {
+  #classicChromeBackground {
     align-items: center;
-    background-color: var(--customize-chrome-color-background-color);
+    background-color: var(--image-background-color);
     display: flex;
     justify-content: center;
   }
@@ -30,6 +34,31 @@
     width: 256px;
   }
 
+  :host-context([chrome-refresh-2023]):host {
+    --image-background-color: var(--cr-fallback-color-tonal-container);
+  }
+
+  :host-context([chrome-refresh-2023]) .image-background {
+    align-items: center;
+    background-color: var(--image-background-color);
+    border: 0;
+    border-radius: 12px;
+    display: flex;
+    height: 158px;
+    justify-content: center;
+    margin-bottom: 12px;
+    width: 272px;
+  }
+
+  :host-context([chrome-refresh-2023]) img {
+    border: 0;
+    border-radius: 8px;
+    box-shadow: var(--cr-elevation-2);
+    height: 126px;
+    margin-bottom: 0;
+    width: 240px;
+  }
+
   .theme-title {
     color: var(--cr-secondary-text-color);
     font-size: 11px;
@@ -38,19 +67,22 @@
   }
 </style>
 <iron-pages selected="[[themeType_]]" attr-for-selected="theme-type">
-  <div class="theme-snapshot"
+  <div class="snapshot-container"
       theme-type="customTheme">
-    <img class="image" id="customThemeImage" is="cr-auto-img"
-        auto-src="[[theme_.backgroundImage.snapshotUrl.url]]" draggable="false"
-        aria-labelledby="customThemeTitle">
-    </img>
+    <div class="image-background">
+      <img class="image" id="customThemeImage" is="cr-auto-img"
+          auto-src="[[theme_.backgroundImage.snapshotUrl.url]]"
+          draggable="false"
+          aria-labelledby="customThemeTitle">
+      </img>
+    </div>
     <div id="customThemeTitle" class="theme-title">
         [[theme_.backgroundImage.title]]
     </div>
   </div>
-  <div class="theme-snapshot"
+  <div class="snapshot-container"
       theme-type="classicChrome">
-    <div class="image" id="classicChrome">
+    <div class="image-background image" id="classicChromeBackground">
       <img id="miniNewTabPage" src="icons/mini_new_tab_page.svg"
           aria-labelledby="classicChromeThemeTitle">
       </img>
@@ -59,11 +91,14 @@
         $i18n{classicChrome}
     </div>
   </div>
-  <div class="theme-snapshot"
+  <div class="snapshot-container"
       theme-type="uploadedImage">
-    <img class="image" id="uploadedThemeImage"
-          src="icons/uploaded_image.svg"
-          aria-labelledby="uploadedThemeTitle"></img>
+    <div class="image-background">
+      <img class="image" id="uploadedThemeImage"
+            src="icons/uploaded_image.svg"
+            aria-labelledby="uploadedThemeTitle">
+      </img>
+    </div>
     <div id="uploadedThemeTitle" class="theme-title">
         $i18n{uploadedImage}
     </div>

chrome/test/data/webui/side_panel/customize_chrome/theme_snapshot_test.ts

@@ -61,16 +61,17 @@ suite('ThemeSnapshotTest', () => {
         CustomizeThemeType.CUSTOM_THEME);
     assertEquals(
         $$<HTMLImageElement>(
-            themeSnapshotElement, '.theme-snapshot #customThemeImage')!
+            themeSnapshotElement, '.snapshot-container #customThemeImage')!
             .getAttribute('aria-labelledby'),
         'customThemeTitle');
     assertEquals(
         'foo',
         $$(themeSnapshotElement,
-           '.theme-snapshot #customThemeTitle')!.textContent!.trim());
+           '.snapshot-container #customThemeTitle')!.textContent!.trim());
     assertEquals(
         'chrome://theme/foo',
-        $$<HTMLImageElement>(themeSnapshotElement, '.theme-snapshot img')!.src);
+        $$<HTMLImageElement>(
+            themeSnapshotElement, '.snapshot-container img')!.src);
   });
 
   test('not setting a theme updates preview background color', async () => {
@@ -94,15 +95,17 @@ suite('ThemeSnapshotTest', () => {
         CustomizeThemeType.CLASSIC_CHROME);
     assertEquals(
         $$<HTMLImageElement>(
-            themeSnapshotElement,
-            '.theme-snapshot #miniNewTabPage')!.getAttribute('aria-labelledby'),
+            themeSnapshotElement, '.snapshot-container #miniNewTabPage')!
+            .getAttribute('aria-labelledby'),
         'classicChromeThemeTitle');
     assertEquals(
         'Classic Chrome',
         $$(themeSnapshotElement,
-           '.theme-snapshot #classicChromeThemeTitle')!.textContent!.trim());
+           '.snapshot-container #classicChromeThemeTitle')!.textContent!
+            .trim());
     assertStyle(
-        $$(themeSnapshotElement, '.theme-snapshot #classicChrome')!,
+        $$(themeSnapshotElement,
+           '.snapshot-container #classicChromeBackground')!,
         'background-color', 'rgb(20, 83, 154)');
   });
 
@@ -127,12 +130,12 @@ suite('ThemeSnapshotTest', () => {
         shownPages[0]!.getAttribute('theme-type'),
         CustomizeThemeType.UPLOADED_IMAGE);
     assertEquals(
-        $$(themeSnapshotElement, '.theme-snapshot #uploadedThemeImage')!
+        $$(themeSnapshotElement, '.snapshot-container #uploadedThemeImage')!
             .getAttribute('aria-labelledby'),
         'uploadedThemeTitle');
     assertEquals(
         'Uploaded image',
         $$(themeSnapshotElement,
-           '.theme-snapshot #uploadedThemeTitle')!.textContent!.trim());
+           '.snapshot-container #uploadedThemeTitle')!.textContent!.trim());
   });
 });