[realbox] Replace <realbox-button> with <cr-icon-button>

Fixed: 1150983
Change-Id: I3be6ad5f6a0e2e8bfbca2f7cb67d8a0e532799d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2572239
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833575}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -26,7 +26,6 @@ js_type_check("closure_compile") {
     ":one_google_bar_api",
     ":promo_browser_command_proxy",
     ":realbox",
-    ":realbox_button",
     ":realbox_dropdown",
     ":realbox_icon",
     ":realbox_match",
@@ -194,21 +193,15 @@ js_library("realbox") {
 js_library("realbox_dropdown") {
   deps = [
     ":browser_proxy",
-    ":realbox_button",
     ":realbox_match",
     ":utils",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 
-js_library("realbox_button") {
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-}
-
 js_library("realbox_icon") {
   deps = [
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -217,10 +210,10 @@ js_library("realbox_icon") {
 
 js_library("realbox_match") {
   deps = [
-    ":realbox_button",
     ":realbox_icon",
     ":utils",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
     "//ui/webui/resources/js:load_time_data.m",
   ]
 }
@@ -265,7 +258,6 @@ html_to_js("web_components_local") {
     "middle_slot_promo.js",
     "mini_page.js",
     "most_visited.js",
-    "realbox_button.js",
     "realbox_dropdown.js",
     "realbox_icon.js",
     "realbox_match.js",
@@ -323,7 +315,6 @@ if (optimize_webui) {
       "logo.js",
       "doodle_share_dialog.js",
       "realbox.js",
-      "realbox_button.js",
       "realbox_dropdown.js",
       "realbox_icon.js",
       "realbox_match.js",

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -60,9 +60,6 @@
       <include name="IDR_NEW_TAB_PAGE_REALBOX_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox.js"
           use_base_dir="false" type="BINDATA" />
-      <include name="IDR_NEW_TAB_PAGE_REALBOX_BUTTON_JS"
-          file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox_button.js"
-          use_base_dir="false" type="BINDATA" />
       <include name="IDR_NEW_TAB_PAGE_REALBOX_DROPDOWN_JS"
           file="${root_gen_dir}/chrome/browser/resources/new_tab_page/realbox_dropdown.js"
           use_base_dir="false" type="BINDATA" />

chrome/browser/resources/new_tab_page/realbox_button.html

-<style>
-  :host {
-    align-items: center;
-    border-radius: 50%;
-    display: flex;
-    flex-shrink: 0;
-    height: 24px;
-    justify-content: center;
-    outline: none;
-    width: 24px;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  :host(:hover) {
-    background-color: var(--search-box-icon-bg-hovered, rgba(var(--google-grey-refresh-700-rgb), .16));
-  }
-
-  :host(:focus-within) {
-    background-color: var(--search-box-icon-bg-focused, rgba(var(--google-grey-refresh-700-rgb), .32));
-  }
-
-  #icon {
-    -webkit-mask-image: url(chrome://resources/images/icon_clear.svg);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 16px;
-    height: 100%;
-    width: 100%;
-  }
-
-  :host-context(.header) #icon {
-    -webkit-mask-image: url(icons/chevron.svg);
-    -webkit-transform: rotate(180deg);
-    background-color: var(--search-box-icon, var(--google-grey-refresh-700));
-  }
-
-  :host-context(.header[group-is-hidden]) #icon {
-    -webkit-transform: none;
-  }
-
-  :host-context(ntp-realbox-match:hover) #icon {
-    background-color: var(--search-box-icon, var(--google-grey-refresh-700));
-  }
-
-  :host-context(ntp-realbox-match:-webkit-any(:focus-within, .selected)) #icon,
-  :host-context(.header:focus-within) #icon {
-    background-color: var(--search-box-icon-selected, var(--google-grey-refresh-700));
-  }
-</style>
-<div id="icon"></div>
-

chrome/browser/resources/new_tab_page/realbox_button.js

-// 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.
-
-import './strings.m.js';
-
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-// The RHS action button. Used on autocomplete matches as the remove button as
-// well as on suggestion group headers as the toggle button.
-class RealboxButtonElement extends PolymerElement {
-  static get is() {
-    return 'ntp-realbox-button';
-  }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
-
-  ready() {
-    super.ready();
-
-    this.addEventListener('mousedown', this.onMouseDown_.bind(this));
-  }
-
-  //============================================================================
-  // Event handlers
-  //============================================================================
-
-  /**
-   * @param {!Event} e
-   */
-  onMouseDown_(e) {
-    e.preventDefault();  // Prevents default browser action (focus).
-  }
-}
-
-customElements.define(RealboxButtonElement.is, RealboxButtonElement);

chrome/browser/resources/new_tab_page/realbox_dropdown.html

@@ -40,6 +40,23 @@
     white-space: nowrap;
   }
 
+  .header cr-icon-button {
+    --cr-icon-button-fill-color: var(--search-box-icon, var(--google-grey-refresh-700));
+    --cr-icon-button-icon-size: 16px;
+    --cr-icon-button-margin-start: 0;
+    --cr-icon-button-size: 24px;
+    --cr-icon-image: url(icons/chevron.svg);
+    --cr-icon-image-transform: rotate(180deg);
+  }
+
+  .header[group-is-hidden] cr-icon-button {
+    --cr-icon-image-transform: none;
+  }
+
+  .header:focus-within:not(:focus) cr-icon-button {
+    --cr-icon-button-fill-color: var(--search-box-icon-selected, var(--google-grey-refresh-700));
+  }
+
   ntp-realbox-match:hover,
   .header:hover {
     background-color: var(--search-box-results-bg-hovered, rgba(var(--google-grey-900-rgb), .1));
@@ -63,11 +80,11 @@
           aria-hidden="true"
           group-is-hidden$="[[groupIsHidden_(groupId, hiddenGroupIds_.*)]]">
         <span class="text">[[headerForGroup_(groupId)]]</span>
-        <ntp-realbox-button tabindex="0" role="button"
+        <cr-icon-button class="icon-clear"
             title="[[toggleButtonTitleForGroup_(groupId, hiddenGroupIds_.*)]]"
             aria-label$="[[toggleButtonA11yLabelForGroup_(groupId, hiddenGroupIds_.*)]]"
-            on-keydown="onToggleButtonKeydown_">
-        </ntp-realbox-button>
+            on-mousedown="onToggleButtonMouseDown_">
+        </cr-icon-button>
       </div>
     </template>
     <template is="dom-if" if="[[!groupIsHidden_(groupId, hiddenGroupIds_.*)]]"

chrome/browser/resources/new_tab_page/realbox_dropdown.js

@@ -3,9 +3,10 @@
 // found in the LICENSE file.
 
 import './strings.m.js';
-import './realbox_button.js';
 import './realbox_match.js';
 import 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {skColorToRgba} from 'chrome://resources/js/color_utils.js';
@@ -229,21 +230,8 @@ class RealboxDropdownElement extends PolymerElement {
       return;
     }
 
-    const icon = assert(this.theme.icon);
-    // Icon's background color in a hovered context (0x29 == .16).
-    // TODO(crbug.com/1041129): Share this with the Omnibox.
-    const iconBgHovered = {value: icon.value & 0x29ffffff};
-
-    const iconSelected = assert(this.theme.iconSelected);
-    // Icon's background color in a focused context (0x52 == .32).
-    // TODO(crbug.com/1041129): Share this with the Omnibox.
-    const iconBgFocused = {value: iconSelected.value & 0x52ffffff};
-
     this.updateStyles({
-      '--search-box-icon-bg-focused': skColorToRgba(iconBgFocused),
-      '--search-box-icon-bg-hovered': skColorToRgba(iconBgHovered),
-      '--search-box-icon-selected': skColorToRgba(iconSelected),
-      '--search-box-icon': skColorToRgba(icon),
+      '--search-box-icon': skColorToRgba(this.theme.icon),
       '--search-box-results-bg-hovered':
           skColorToRgba(assert(this.theme.resultsBgHovered)),
       '--search-box-results-bg-selected':
@@ -299,14 +287,8 @@ class RealboxDropdownElement extends PolymerElement {
    * @param {!Event} e
    * @private
    */
-  onToggleButtonKeydown_(e) {
-    if (e.key !== 'Enter' && e.key !== ' ') {
-      return;
-    }
-
-    // Simulate a click so that it gets handled by |onHeaderClick_|.
-    e.target.click();
-    e.preventDefault();  // Prevents default browser action.
+  onToggleButtonMouseDown_(e) {
+    e.preventDefault();  // Prevents default browser action (focus).
   }
 
   //============================================================================

chrome/browser/resources/new_tab_page/realbox_match.html

-<style>
+<style include="cr-hidden-style cr-icons">
   :host {
     align-items: center;
     cursor: default;
@@ -70,6 +70,24 @@
     color: var(--search-box-results-url-selected, var(--google-blue-refresh-700));
   }
 
+  #remove {
+    --cr-icon-button-fill-color: var(--search-box-icon, var(--google-grey-refresh-700));
+    --cr-icon-button-icon-size: 16px;
+    --cr-icon-button-margin-end: 0;
+    --cr-icon-button-margin-start: 0;
+    --cr-icon-button-size: 24px;
+    opacity: 0; /* Hides the button while keeping it in tab order. */
+  }
+
+  :host-context(ntp-realbox-match:hover) #remove {
+    opacity: 1;
+  }
+
+  :host-context(ntp-realbox-match:-webkit-any(:focus-within, .selected)) #remove {
+    --cr-icon-button-fill-color: var(--search-box-icon-selected, var(--google-grey-refresh-700));
+    opacity: 1;
+  }
+
 </style>
 <ntp-realbox-icon id="icon" match="[[match]]"></ntp-realbox-icon>
 <div id="container">
@@ -77,7 +95,7 @@
   <span id="separator" class="dim">[[separatorText_]]</span>
   <span id="description" inner-h-t-m-l="[[descriptionHtml_]]"></span>
 </div>
-<ntp-realbox-button id="remove" tabindex="0" role="button"
-    on-click="onRemoveButtonClick_" on-keydown="onRemoveButtonKeydown_"
-    title$="[[removeButtonTitle_]]" hidden$="[[!removeButtonIsVisible_]]">
-</ntp-realbox-button>
+<cr-icon-button id="remove" class="icon-clear"
+    on-click="onRemoveButtonClick_" on-mousedown="onRemoveButtonMouseDown_"
+    title="[[removeButtonTitle_]]" hidden$="[[!removeButtonIsVisible_]]">
+</cr-icon-button>

chrome/browser/resources/new_tab_page/realbox_match.js

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './strings.m.js';
-import './realbox_button.js';
 import './realbox_icon.js';
+import './strings.m.js';
+import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/cr_icons_css.m.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -199,14 +201,8 @@ class RealboxMatchElement extends PolymerElement {
    * @param {!Event} e
    * @private
    */
-  onRemoveButtonKeydown_(e) {
-    if (e.key !== 'Enter' && e.key !== ' ') {
-      return;
-    }
-
-    // Simulate a click so that it gets handled by |onRemoveButtonClick_|.
-    e.target.click();
-    e.preventDefault();  // Prevents default browser action.
+  onRemoveButtonMouseDown_(e) {
+    e.preventDefault();  // Prevents default browser action (focus).
   }
 
   //============================================================================

chrome/test/data/webui/new_tab_page/realbox_test.js

@@ -248,9 +248,6 @@ suite('NewTabPageRealboxTest', () => {
     assertStyle(realbox, '--search-box-results-bg', '');
     assertStyle(realbox, '--search-box-text', '');
     assertStyle(realbox, '--search-box-icon', '');
-    assertStyle(matches, '--search-box-icon-bg-focused', '');
-    assertStyle(matches, '--search-box-icon-bg-hovered', '');
-    assertStyle(matches, '--search-box-icon-selected', '');
     assertStyle(matches, '--search-box-icon', '');
     assertStyle(matches, '--search-box-results-bg-hovered', '');
     assertStyle(matches, '--search-box-results-bg-selected', '');
@@ -271,9 +268,6 @@ suite('NewTabPageRealboxTest', () => {
     assertStyle(realbox, '--search-box-results-bg', 'rgba(0, 0, 4, 1)');
     assertStyle(realbox, '--search-box-text', 'rgba(0, 0, 13, 1)');
     assertStyle(realbox, '--search-box-icon', 'rgba(0, 0, 1, 1)');
-    assertStyle(matches, '--search-box-icon-bg-focused', 'rgba(0, 0, 2, 0.32)');
-    assertStyle(matches, '--search-box-icon-bg-hovered', 'rgba(0, 0, 1, 0.16)');
-    assertStyle(matches, '--search-box-icon-selected', 'rgba(0, 0, 2, 1)');
     assertStyle(matches, '--search-box-icon', 'rgba(0, 0, 1, 1)');
     assertStyle(matches, '--search-box-results-bg-hovered', 'rgba(0, 0, 5, 1)');
     assertStyle(
@@ -2061,17 +2055,22 @@ suite('NewTabPageRealboxTest', () => {
     assertTrue(window.getComputedStyle(headerEl).display !== 'none');
     assertEquals('Recommended for you', headerEl.textContent.trim());
     const toggleButtonEl =
-        realbox.$.matches.shadowRoot.querySelectorAll('ntp-realbox-button')[0];
+        realbox.$.matches.shadowRoot.querySelectorAll('cr-icon-button')[0];
     assertTrue(window.getComputedStyle(toggleButtonEl).display !== 'none');
 
     // Make the second match visible by pressing 'Space' on the toggle button.
-    const enter = new KeyboardEvent('keydown', {
+    toggleButtonEl.dispatchEvent(new KeyboardEvent('keydown', {
       bubbles: true,
       cancelable: true,
       composed: true,  // So it propagates across shadow DOM boundary.
       key: ' ',
-    });
-    toggleButtonEl.dispatchEvent(enter);
+    }));
+    toggleButtonEl.dispatchEvent(new KeyboardEvent('keyup', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,  // So it propagates across shadow DOM boundary.
+      key: ' ',
+    }));
 
     await testProxy.handler.whenCalled('toggleSuggestionGroupIdVisibility')
         .then((args) => {

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -58,6 +58,7 @@
         -webkit-mask-position: center;
         -webkit-mask-repeat: no-repeat;
         -webkit-mask-size: var(--cr-icon-button-icon-size);
+        -webkit-transform: var(--cr-icon-image-transform, none);
         background-color: var(--cr-icon-button-fill-color);
         height: 100%;
         transition: background-color var(--cr-icon-button-transition);