[M109 Merge] [NTP] Realbox comprehensive lens icon

Applies themed lens search icons to the Realbox component when comprehensive theming and theme realbox feature flags are enabled. Screenshot(s): White background color: https://drive.google.com/file/d/17dACjl_kCORtwVI9qd9vd7_j5ShtCngn/view Dark background color: https://drive.google.com/file/d/1t7RTjaCRrGM1zb5fxelwoKfqdvpb1djL/view (cherry picked from commit 23e02e7) Bug: 1378284 Change-Id: I5aac1456248a74bb1012e0c2b92bf9ccccc84b97 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4020906 Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org> Commit-Queue: Roman Arora <romanarora@chromium.org> Cr-Original-Commit-Position: refs/heads/main@{#1070118} Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4026483 Cr-Commit-Position: refs/branch-heads/5414@{#28} Cr-Branched-From: 4417ee5-refs/heads/main@{#1070088}
chromium · Nov 14, 2022 · 6437b4d · 6437b4d
1 parent f02e4a4
commit 6437b4d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/chrome/browser/resources/new_tab_page/app.html b/chrome/browser/resources/new_tab_page/app.html
@@ -327,7 +327,7 @@
   </ntp-logo>
   <div id="realboxContainer">
     <ntp-realbox id="realbox" is-dark="[[theme_.isDark]]"
-        themed-icons="[[theme_.themeRealboxIcons]]"
+        single-colored-icons="[[theme_.themeRealboxIcons]]"
         on-open-lens-search="onOpenLensSearch_"
         on-open-voice-search="onOpenVoiceSearch_" shown$="[[realboxShown_]]">
     </ntp-realbox>

diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox.html b/chrome/browser/resources/new_tab_page/realbox/realbox.html
@@ -41,14 +41,6 @@
     position: relative;
   }
 
-  :host([themed-icons]) #voiceSearchButton {
-    --iron-icon-fill-color: var(--color-new-tab-page-primary-foreground);
-  }
-
-  :host(:not([themed-icons])) #voiceSearchButton {
-    background-image: url(chrome://new-tab-page/icons/googlemic_clr_24px.svg);
-  }
-
   input {
     background-color: var(--color-realbox-background);
     border: none;
@@ -129,7 +121,27 @@
     width: 26px;
   }
 
-  :host #lensSearchButton {
+  :host([single-colored-icons]) #voiceSearchButton,
+  :host([single-colored-icons]) #lensSearchButton {
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 21px 21px;
+    background-color: var(--color-new-tab-page-primary-foreground);
+  }
+
+  :host([single-colored-icons]) #voiceSearchButton {
+    -webkit-mask-image: url(icons/googlemic_clr_24px.svg);
+  }
+
+  :host(:not([single-colored-icons])) #voiceSearchButton {
+    background-image: url(icons/googlemic_clr_24px.svg);
+  }
+
+  :host([single-colored-icons]) #lensSearchButton {
+    -webkit-mask-image: url(chrome://new-tab-page/icons/lens_icon.svg);
+  }
+
+  :host(:not([single-colored-icons])) #lensSearchButton {
     background-image: url(chrome://new-tab-page/icons/lens_icon.svg);
   }
 
@@ -179,9 +191,6 @@
     class="realbox-icon-button"
     on-click="onVoiceSearchClick_"
     title="$i18n{voiceSearchButtonLabel}">
-    <template is="dom-if" if="[[themedIcons]]">
-      <iron-icon class="realbox-icon-button-icon" icon="cr:mic"></iron-icon>
-    </template>
   </button>
   <template is="dom-if" if="[[realboxLensSearchEnabled_]]">
     <button id="lensSearchButton"

diff --git a/chrome/browser/resources/new_tab_page/realbox/realbox.ts b/chrome/browser/resources/new_tab_page/realbox/realbox.ts
@@ -83,9 +83,10 @@ export class RealboxElement extends PolymerElement {
         reflectToAttribute: true,
       },
 
-      /** Whether to display themed icons for the current background color. */
-      themedIcons: {
+      /** Whether to display single-colored icons or not. */
+      singleColoredIcons: {
         type: Boolean,
+        value: false,
         reflectToAttribute: true,
       },
 
@@ -199,7 +200,7 @@ export class RealboxElement extends PolymerElement {
   matchesAreVisible: boolean;
   matchSearchbox: boolean;
   realboxLensSearchEnabled: boolean;
-  themedIcons: boolean;
+  singleColoredIcons: boolean;
   private charTypedTime_: number;
   private isDeletingInput_: boolean;
   private lastIgnoredEnterEvent_: KeyboardEvent|null;

diff --git a/chrome/test/data/webui/new_tab_page/realbox/realbox_test.ts b/chrome/test/data/webui/new_tab_page/realbox/realbox_test.ts
@@ -12,7 +12,6 @@ import {getFaviconForPageURL} from 'chrome://resources/js/icon.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {getDeepActiveElement} from 'chrome://resources/js/util.js';
 import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
-import {waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {eventToPromise} from 'chrome://webui-test/test_util.js';
 
 import {assertStyle} from '../test_support.js';
@@ -220,19 +219,17 @@ suite('NewTabPageRealboxTest', () => {
     });
   });
 
-  test('realbox themed voice search icon exists', async () => {
+  test('Single colored voice search icon has masked image', async () => {
     // Arrange.
     document.body.innerHTML = window.trustedTypes!.emptyHTML;
     realbox = document.createElement('ntp-realbox');
-    realbox.themedIcons = true;
+    realbox.singleColoredIcons = true;
     document.body.appendChild(realbox);
 
     // Assert.
-    await waitAfterNextRender(realbox);
-    const voiceSearchIcon = realbox.$.voiceSearchButton.querySelector(
-        '.' +
-        'realbox-icon-button-icon');
-    assertTrue(!!voiceSearchIcon);
+    assertStyle(
+        realbox.$.voiceSearchButton, '-webkit-mask-image',
+        'url("chrome://new-tab-page/icons/googlemic_clr_24px.svg")');
   });
 
   //============================================================================