[ntp] Support shopping module product images with white backgrounds

Product images should sit on top of a light gray background. Before this
CL, we only supported this for images with a transparent background.
This CL adds support for images with a white background by:
- Placing the image in a white box,
- Making the image and the box slightly transparent, and
- Placing the box on top of a dark gray background.
The colors and transparency are chosen such that the white box and the
dark gray background mix to the same light gray we showed for images
with transparent backgrounds before. See crbug/1145763 for screenshots.

Fixed: 1145763
Change-Id: Ib07bfd99b6a0d30192113e1ceb1a542d076138a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2520319
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Moe Ahmadi <mahmadi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824548}

chrome/browser/resources/new_tab_page/modules/task_module/module.html

@@ -30,23 +30,30 @@
     margin-inline-start: 16px;
   }
 
-  .image {
+  .image-background {
     border-radius: 4px;
-    box-sizing: border-box;
     margin-bottom: 8px;
     width: 120px;
   }
 
-  :host([shopping]) .image {
-    background: var(--google-grey-50);
+  :host([shopping]) .image-background {
+    /* Mixes to Google Grey 50 underneath .image-container. */
+    background-color: rgb(22, 55, 88);
     height: 120px;
+  }
+
+  :host([shopping]) .image-container {
+    background-color: white;
+    box-sizing: border-box;
+    opacity: 97%;
     padding: 10px;
   }
 
-  :host([recipe]) .image {
+  :host([recipe]) .image-background {
     height: 100px;
   }
 
+  .image-container,
   img {
     height: 100%;
     width: 100%;
@@ -168,8 +175,10 @@
       on-dom-change="onDomChange_">
     <a class="task-item" href="[[item.targetUrl.url]]"
         on-click="onTaskItemClick_" on-auxclick="onTaskItemClick_">
-      <div class="image">
-        <img is="ntp-img" auto-src="[[item.imageUrl.url]]"></img>
+      <div class="image-background">
+        <div class="image-container">
+          <img is="ntp-img" auto-src="[[item.imageUrl.url]]"></img>
+        </div>
       </div>
       <div class="price" hidden$="[[!item.price]]">[[item.price]]</div>
       <div class="name" title="[[item.name]]">[[item.name]]</div>