[OsSettingsLanguages] Update search field look

Spec: http://go/cros-lang-settings-figma

Change device language: http://screen/5tJTJeKbQqqPLBb
Add languages: http://screen/A4KkBzEiSFdTzJM
Add input methods: http://screen/7ukfaWuZv4fJMpv

Border-radius of the underline is not yet updated.

Bug: 1113437
Change-Id: Ie4c9828a2ed71ba3b67aef89bbe848c2c5237756
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2436969Reviewed-by: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811608}

chrome/browser/resources/settings/chromeos/os_languages_page/BUILD.gn

@@ -371,6 +371,7 @@ group("polymer3_elements") {
     ":os_languages_page_module",
     ":os_languages_page_v2_module",
     ":os_languages_section_module",
+    ":shared_style_module",
     ":smart_inputs_page_module",
     "../../languages_page:languages_module",
     "../../languages_page:modulize",
@@ -467,6 +468,12 @@ polymer_modulizer("input_page") {
   auto_imports = os_settings_auto_imports
 }
 
+polymer_modulizer("shared_style") {
+  js_file = "shared_style.m.js"
+  html_file = "shared_style.html"
+  html_type = "style-module"
+}
+
 polymer_modulizer("smart_inputs_page") {
   js_file = "smart_inputs_page.js"
   html_file = "smart_inputs_page.html"

chrome/browser/resources/settings/chromeos/os_languages_page/add_input_methods_dialog.html

@@ -7,12 +7,13 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="../metrics_recorder.html">
+<link rel="import" href="shared_style.html">
 <link rel="import" href="../../languages_page/languages.html">
 <link rel="import" href="../../settings_shared_css.html">
 
 <dom-module id="os-settings-add-input-methods-dialog">
   <template>
-    <style include="settings-shared iron-flex">
+    <style include="settings-shared iron-flex shared-style">
       #dialogBody {
         display: flex;
         flex-direction: column;
@@ -22,9 +23,7 @@
       }
 
       cr-search-field {
-        --cr-search-field-search-input-width: 100%;
-        padding-bottom: 8px;
-        padding-inline-end: 20px;
+        margin-bottom: 8px;
       }
 
       .label {

chrome/browser/resources/settings/chromeos/os_languages_page/change_device_language_dialog.html

@@ -10,6 +10,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="languages_metrics_proxy.html">
+<link rel="import" href="shared_style.html">
 <link rel="import" href="../localized_link/localized_link.html">
 <link rel="import" href="../metrics_recorder.html">
 <link rel="import" href="../../languages_page/languages.html">
@@ -18,7 +19,7 @@
 
 <dom-module id="os-settings-change-device-language-dialog">
   <template>
-    <style include="settings-shared iron-flex">
+    <style include="settings-shared iron-flex shared-style">
       #dialogBody {
         display: flex;
         flex-direction: column;
@@ -30,6 +31,7 @@
 
       cr-search-field {
         margin-bottom: 16px;
+        margin-inline-start: 20px;
         margin-top: 16px;
       }
 
@@ -71,7 +73,7 @@
             localized-string="[[i18nAdvanced(
                 'changeDeviceLanguageDialogDescription')]]">
         </settings-localized-link>
-        <cr-search-field class="padded" label="$i18n{searchLanguages}"
+        <cr-search-field label="$i18n{searchLanguages}"
             id="search" on-search-changed="onSearchChanged_"
             clear-label="$i18n{clearSearch}" on-keydown="onKeydown_" autofocus>
         </cr-search-field>

chrome/browser/resources/settings/chromeos/os_languages_page/os_add_languages_dialog.html

@@ -7,13 +7,15 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/find_shortcut_behavior.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="shared_style.html">
 <link rel="import" href="../../languages_page/languages.html">
 <link rel="import" href="../../settings_shared_css.html">
 
 <dom-module id="os-settings-add-languages-dialog">
   <template>
-    <style include="settings-shared">
+    <style include="settings-shared shared-style">
       #dialog-body {
         display: flex;
         flex-direction: column;
@@ -23,21 +25,20 @@
       }
 
       cr-search-field {
-        padding-inline-end: 24px;
+        margin-bottom: 16px;
       }
 
       iron-list {
         flex: 1;
       }
 
-      .ripple-padding {
-        /* Create a little extra space for checkbox ink ripple to flow into. */
-        padding-inline-start: 20px;
-      }
-
       cr-checkbox::part(label-container) {
         white-space: nowrap;
       }
+
+      .list-item {
+        min-height: 36px;
+      }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">$i18n{addLanguagesDialogTitle}</div>
@@ -46,7 +47,7 @@
             on-search-changed="onSearchChanged_" on-keydown="onKeydown_"
             clear-label="$i18n{clearSearch}" autofocus>
         </cr-search-field>
-        <iron-list class="ripple-padding" scroll-target="[[$$('[slot=body]')]]"
+        <iron-list scroll-target="[[$$('[slot=body]')]]"
             items="[[getLanguages_(
                 languages.supported, languages.enabled.*, filterValue_)]]">
           <template>

chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.html

+
+<!-- Common styles for 'Languages and inputs' section. -->
+<dom-module id="shared-style">
+  <template>
+    <style>
+      cr-search-field {
+        --cr-search-field-clear-icon-fill: var(--cros-icon-color-secondary);
+        --cr-search-field-clear-icon-margin-end: 8px;
+        --cr-search-field-clear-icon-size: 18px;
+        --cr-search-field-input-border-bottom: none;
+        --cr-search-field-input-min-height: 32px;
+        --cr-search-field-input-padding-bottom: 0;
+        --cr-search-field-input-padding-start: 8px;
+        --cr-search-field-input-padding-top: 0;
+        --cr-search-field-input-width: 100%;
+        --cr-search-field-search-icon-display: none;
+        --cr-search-field-search-icon-fill: var(--cros-icon-color-secondary);
+        --cr-search-field-search-icon-inline-display: block;
+        --cr-search-field-search-icon-inline-margin-start: 6px;
+        background-color: var(--google-grey-100);
+        border-radius: 4px;
+        margin-inline-end: 20px;
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file

chrome/browser/resources/settings/chromeos/os_settings_resources_v3.grdp

@@ -209,6 +209,11 @@
            use_base_dir="false"
            compress="false"
            type="BINDATA" />
+  <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SHARED_STYLE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/shared_style.m.js"
+           use_base_dir="false"
+           compress="false"
+           type="BINDATA" />
   <include name="IDR_OS_SETTINGS_LANGUAGES_PAGE_SMART_INPUTS_PAGE_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/chromeos/os_languages_page/smart_inputs_page.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/os_settings_resources.grd

@@ -779,6 +779,9 @@
       <structure name="IDR_OS_SETTINGS_LANGUAGES_INPUT_METHOD_UTIL_JS"
                  file="chromeos/os_languages_page/input_method_util.js"
                  compress="false" type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_LANGUAGES_SHARED_STYLE_HTML"
+                 file="chromeos/os_languages_page/shared_style.html"
+                 compress="false" type="chrome_html" />
       <structure name="IDR_OS_SETTINGS_LANGUAGES_SMART_INPUTS_PAGE_HTML"
                  file="chromeos/os_languages_page/smart_inputs_page.html"
                  compress="false" type="chrome_html" />

ui/webui/resources/cr_elements/cr_search_field/cr_search_field.html

@@ -14,31 +14,39 @@
       :host {
         display: flex;
         user-select: none;
+        --cr-search-field-input-border-bottom: 1px solid var(--cr-secondary-text-color);
       }
 
       #searchIcon {
         align-self: center;
+        display: var(--cr-search-field-search-icon-display, inherit);
         height: 16px;
         padding: 4px;
         vertical-align: middle;
         width: 16px;
       }
 
+      #searchIconInline {
+        --iron-icon-fill-color: var(--cr-search-field-search-icon-fill, inherit);
+        display: var(--cr-search-field-search-icon-inline-display, none);
+        margin-inline-start: var(--cr-search-field-search-icon-inline-margin-start, 0);
+      }
+
       #searchInput {
         --cr-input-background-color: transparent;
-        --cr-input-border-bottom: 1px solid var(--cr-secondary-text-color);
+        --cr-input-border-bottom: var(--cr-search-field-input-border-bottom);
         --cr-input-border-radius: 0;
         --cr-input-error-display: none;
-        --cr-input-min-height: 24px;
+        --cr-input-min-height: var(--cr-search-field-input-min-height, 24px);
         --cr-input-padding-end: 0;
-        --cr-input-padding-start: 0;
-        --cr-input-padding-bottom: 2px;
-        --cr-input-padding-top: 2px;
+        --cr-input-padding-start: var(--cr-search-field-input-padding-start, 0);
+        --cr-input-padding-bottom: var(--cr-search-field-input-padding-bottom, 2px);
+        --cr-input-padding-top: var(--cr-search-field-input-padding-top, 2px);
         align-self: stretch;
         color: var(--cr-primary-text-color);
         display: block;
         font-size: 92.3076923%;  /* To 12px from 13px. */
-        width: var(--cr-search-field-search-input-width, 160px);
+        width: var(--cr-search-field-input-width, 160px);
       }
 
       :host([has-search-text]) #searchInput {
@@ -47,9 +55,10 @@
 
       #clearSearch {
         /* A 16px icon that fits on the input line. */
-        --cr-icon-button-icon-size: 16px;
+        --cr-icon-button-fill-color: var(--cr-search-field-clear-icon-fill, inherit);
+        --cr-icon-button-icon-size: var(--cr-search-field-clear-icon-size, 16px);
         --cr-icon-button-size: 24px;
-        margin-inline-end: -4px;
+        margin-inline-end: var(--cr-search-field-clear-icon-margin-end, -4px);
         margin-inline-start: 4px;
         position: absolute;
         right: 0;
@@ -64,6 +73,7 @@
     <cr-input id="searchInput" on-search="onSearchTermSearch"
         on-input="onSearchTermInput" aria-label$="[[label]]" type="search"
         autofocus="[[autofocus]]" placeholder="[[label]]" spellcheck="false">
+      <iron-icon id="searchIconInline" slot="inline-prefix" icon="cr:search"></iron-icon>
       <cr-icon-button id="clearSearch" class="icon-cancel"
           hidden$="[[!hasSearchText]]" slot="suffix" on-click="onTapClear_"
           title="[[clearLabel]]">