Tab Search: Search field font & placeholder fixes.

- Change search field font to inherited one
- Move shortcut text to a side in a div

Bug: 1145608
Change-Id: I6e6926c9d7a6a843072950e2fd0f31eaaf0df747
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2521097
Commit-Queue: Roman Arora <romanarora@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825520}

chrome/browser/resources/tab_search/app.html

@@ -59,7 +59,7 @@
   </svg>
 </iron-iconset-svg>
 <tab-search-search-field id="searchField" autofocus clear-label="$i18n{clearSearch}"
-    label="$i18n{searchTabs} [[getKeyboardShortcut_()]]" on-focus="onSearchFocus_"
+    label="$i18n{searchTabs}" on-focus="onSearchFocus_"
     on-keydown="onSearchKeyDown_" on-search-changed="onSearchChanged_">
 </tab-search-search-field>
 <div id="tabs">

chrome/browser/resources/tab_search/app.js

@@ -14,7 +14,6 @@ import './tab_search_search_field.js';
 import './strings.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
-import {isMac} from 'chrome://resources/js/cr.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {listenOnce} from 'chrome://resources/js/util.m.js';
 import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.js';
@@ -423,14 +422,6 @@ export class TabSearchAppElement extends PolymerElement {
     return `${tabData.tab.title} ${tabData.hostname}`;
   }
 
-  /**
-   * @return {string}
-   * @private
-   */
-  getKeyboardShortcut_() {
-    return (isMac ? 'Cmd' : 'Ctrl') + '+Shift+A';
-  }
-
   /**
    * @param {!Array<!WindowTabs>} windowTabs
    * @private

chrome/browser/resources/tab_search/tab_search_search_field.html

@@ -8,36 +8,64 @@
     user-select: none;
   }
 
+  :host([has-search-text]) label {
+    visibility: hidden;
+  }
+
   #searchIcon {
     height: var(--mwb-icon-size);
     padding-inline-end: var(--mwb-list-item-horizontal-margin);
     width: var(--mwb-icon-size);
   }
 
-  #searchInput {
-    padding: 0;
+  #searchWrapper {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    position: relative;
   }
 
-  @media (prefers-color-scheme: dark) {
-    #searchIcon {
-      color: var(--google-blue-refresh-300);
-    }
+  #searchLabel {
+    align-items: center;
+    color: var(--cr-secondary-text-color);
+    cursor: text;
+    display: flex;
+    font-size: var(--mwb-primary-text-font-size);
+    height: 100%;
+    justify-content: space-between;
+    position: absolute;
+    width: 100%;
   }
 
-  input {
-    align-self: stretch;
+  #searchInput {
     background-color: transparent;
     border: none;
     border-radius: 0;
     color: var(--cr-primary-text-color);
     flex: 1;
+    font-family: inherit;
     font-size: var(--mwb-primary-text-font-size);
+    font-style: inherit;
     outline: none;
+    padding: 0;
     text-overflow: ellipsis;
   }
+
+  @media (prefers-color-scheme: dark) {
+    #searchIcon {
+      color: var(--google-blue-refresh-300);
+    }
+  }
 </style>
+
 <iron-icon id="searchIcon" icon="mwb16:search"></iron-icon>
-<input id="searchInput" on-search="onSearchTermSearch"
-    on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
-    autofocus="[[autofocus]]" placeholder="[[label]]" autocomplete="off"
-    spellcheck="false">
+<div id="searchWrapper">
+  <label id="searchLabel" for="searchInput" aria-hidden="true">
+    <span>[[label]]</span>
+    <span>[[shortcut_]]</span>
+  </label>
+  <input id="searchInput" aria-labelledby="searchLabel"
+      autofocus="[[autofocus]]" autocomplete="off"
+      on-search="onSearchTermSearch" on-input="onSearchTermInput" type="search"
+      spellcheck="false">
+</div>

chrome/browser/resources/tab_search/tab_search_search_field.js

@@ -8,6 +8,7 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {CrSearchFieldBehavior, CrSearchFieldBehaviorInterface} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 /**
@@ -38,6 +39,12 @@ export class TabSearchSearchField extends TabSearchSearchFieldBase {
         type: Boolean,
         value: false,
       },
+
+      /** @private {string} */
+      shortcut_: {
+        type: String,
+        value: () => loadTimeData.getString('shortcutText'),
+      },
     };
   }
 

chrome/browser/ui/webui/tab_search/tab_search_ui.cc

@@ -20,6 +20,7 @@
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "ui/base/accelerators/accelerator.h"
 #include "ui/base/webui/web_ui_util.h"
 #include "ui/views/style/platform_style.h"
 
@@ -62,8 +63,12 @@ TabSearchUI::TabSearchUI(content::WebUI* web_ui)
                                  features::kTabSearchSearchThresholdMax));
   source->AddDouble("searchTitleToHostnameWeightRatio",
                     features::kTabSearchTitleToHostnameWeightRatio.Get());
-
   source->AddLocalizedString("close", IDS_CLOSE);
+
+  ui::Accelerator accelerator(ui::VKEY_A,
+                              ui::EF_SHIFT_DOWN | ui::EF_PLATFORM_ACCELERATOR);
+  source->AddString("shortcutText", accelerator.GetShortcutText());
+
   webui::SetupWebUIDataSource(
       source, base::make_span(kTabSearchResources, kTabSearchResourcesSize),
       /*generated_path=*/std::string(), IDR_TAB_SEARCH_TAB_SEARCH_PAGE_HTML);

chrome/test/data/webui/tab_search/tab_search_app_focus_test.js

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {getDeepActiveElement} from 'chrome://resources/js/util.m.js';
 import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {TabSearchAppElement} from 'chrome://tab-search/app.js';
@@ -15,7 +14,7 @@ import {assertEquals, assertGT} from '../../chai_assert.js';
 import {flushTasks} from '../../test_util.m.js';
 
 import {generateSampleDataFromSiteNames, sampleData, sampleSiteNames} from './tab_search_test_data.js';
-import {assertTabItemAndNeighborsInViewBounds, disableScrollIntoViewAnimations} from './tab_search_test_helper.js';
+import {assertTabItemAndNeighborsInViewBounds, disableScrollIntoViewAnimations, initLoadTimeDataWithDefaults} from './tab_search_test_helper.js';
 import {TestTabSearchApiProxy} from './test_tab_search_api_proxy.js';
 
 suite('TabSearchAppFocusTest', () => {
@@ -28,16 +27,14 @@ suite('TabSearchAppFocusTest', () => {
 
   /**
    * @param {ProfileTabs} sampleData
-   * @param {Object=} loadTimeOverridenData
+   * @param {Object=} loadTimeOverriddenData
    */
-  async function setupTest(sampleData, loadTimeOverridenData) {
+  async function setupTest(sampleData, loadTimeOverriddenData) {
     testProxy = new TestTabSearchApiProxy();
     testProxy.setProfileTabs(sampleData);
     TabSearchApiProxyImpl.instance_ = testProxy;
 
-    if (loadTimeOverridenData) {
-      loadTimeData.overrideValues(loadTimeOverridenData);
-    }
+    initLoadTimeDataWithDefaults(loadTimeOverriddenData);
 
     tabSearchApp = /** @type {!TabSearchAppElement} */
         (document.createElement('tab-search-app'));

chrome/test/data/webui/tab_search/tab_search_app_test.js

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {keyDownOn} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {TabSearchAppElement} from 'chrome://tab-search/app.js';
 import {ProfileTabs, Tab} from 'chrome://tab-search/tab_search.mojom-webui.js';
@@ -14,7 +13,7 @@ import {assertEquals, assertFalse, assertGT, assertNotEquals, assertTrue} from '
 import {flushTasks, waitAfterNextRender} from '../../test_util.m.js';
 
 import {generateSampleDataFromSiteNames, sampleData, sampleSiteNames} from './tab_search_test_data.js';
-import {assertTabItemAndNeighborsInViewBounds, assertTabItemInViewBounds, disableScrollIntoViewAnimations} from './tab_search_test_helper.js';
+import {assertTabItemAndNeighborsInViewBounds, assertTabItemInViewBounds, disableScrollIntoViewAnimations, initLoadTimeDataWithDefaults} from './tab_search_test_helper.js';
 import {TestTabSearchApiProxy} from './test_tab_search_api_proxy.js';
 
 suite('TabSearchAppTest', () => {
@@ -45,16 +44,14 @@ suite('TabSearchAppTest', () => {
 
   /**
    * @param {ProfileTabs} sampleData
-   * @param {Object=} loadTimeOverridenData
+   * @param {Object=} loadTimeOverriddenData
    */
-  async function setupTest(sampleData, loadTimeOverridenData) {
+  async function setupTest(sampleData, loadTimeOverriddenData) {
     testProxy = new TestTabSearchApiProxy();
     testProxy.setProfileTabs(sampleData);
     TabSearchApiProxyImpl.instance_ = testProxy;
 
-    if (loadTimeOverridenData) {
-      loadTimeData.overrideValues(loadTimeOverridenData);
-    }
+    initLoadTimeDataWithDefaults(loadTimeOverriddenData);
 
     tabSearchApp = /** @type {!TabSearchAppElement} */
         (document.createElement('tab-search-app'));

chrome/test/data/webui/tab_search/tab_search_test_helper.js

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {assertGE, assertLE} from '../../chai_assert.js';
 
 /**
@@ -55,3 +56,18 @@ export function assertTabItemAndNeighborsInViewBounds(
     assertTabItemInViewBounds(tabsDiv, tabItems[index + 1]);
   }
 }
+
+/**
+ * Initialize the loadTimeData with the provided data and defaults.
+ * @param {Object=} loadTimeOverriddenData
+ */
+export function initLoadTimeDataWithDefaults(loadTimeOverriddenData) {
+  if (!loadTimeOverriddenData) {
+    loadTimeOverriddenData = {};
+  }
+  if (!loadTimeOverriddenData.hasOwnProperty('shortcutText')) {
+    loadTimeOverriddenData.shortcutText = '';
+  }
+
+  loadTimeData.overrideValues(loadTimeOverriddenData);
+}