[OsSettingsSearch] Align icons and center input placeholder text.

* Aligns RHS and LHS icons of search input to match search result rows.
* Changes row's selected property to attribute instead.
* Add optional margin to input placeholder text so it appears centered
  for new settings search.  Using conventional centering of placeholder
  does not work because the search input is a div placed next to the
  magnifying glass icon, causing a center of the text to be less than
  centered.

Screenshots:
https://screenshot.googleplex.com/iSb8VuxzVN7 align icons
https://screenshot.googleplex.com/HureEGYMWFk align icons (narrow)
https://screenshot.googleplex.com/FF2hGVoFxe6 'center' placeholder text

Bug: 1056909
Change-Id: If17be29eea183d3822a37c787a72d3f21e78c267
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134657Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#758121}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_search_result_row.html

@@ -38,14 +38,9 @@
         flex-grow: 1;
       }
 
-      #resultIcon {
-        margin-inline-end: 20px;
-        margin-inline-start: 16px;
-      }
-
-      #actionTypeIcon {
-        margin-inline-end: 16px;
-        margin-inline-start: 20px;
+      iron-icon {
+        margin: var(--cr-toolbar-icon-margin);
+        width: var(--cr-toolbar-icon-container-size);
       }
     </style>
     <div focus-row-container>

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -17,6 +17,8 @@
     <style include="settings-shared">
       :host {
         --cr-toolbar-field-width: 480px;
+        --cr-toolbar-icon-container-size: 32px;
+        --cr-toolbar-icon-margin: 6px 12px;
         display: flex;
         flex-basis: var(--cr-toolbar-field-width);
         flex-direction: row;
@@ -33,7 +35,10 @@
       }
 
       cr-toolbar-search-field {
+        --cr-toolbar-search-field-term-margin: 0;
         --cr-toolbar-search-field-border-radius: 20px;
+        --cr-toolbar-search-field-paper-spinner-margin: 0 12px;
+        --cr-toolbar-search-field-prompt-margin-inline-start: 140px;
         transition: height 150ms;
       }
 
@@ -61,7 +66,7 @@
         border-radius: 0 0 20px 20px;
         box-shadow: var(--cr-menu-shadow);
         display: table;
-        padding: 8px 0 13px 0;
+        padding: 8px 0 12px 0;
       }
 
       :host([narrow]) iron-dropdown [slot='dropdown-content'] {
@@ -71,6 +76,10 @@
       :host(:not([narrow])) iron-dropdown [slot='dropdown-content'] {
         width: var(--cr-toolbar-field-width, 680px);
       }
+
+      :host([narrow]) os-search-result-row {
+        --cr-toolbar-icon-margin: 6px 12px 6px 18px;
+      }
     </style>
     <cr-toolbar-search-field id="search" narrow="[[narrow]]"
         label="$i18n{searchPrompt}" clear-label="$i18n{clearSearch}"

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -28,8 +28,8 @@
         --cr-icon-button-fill-color-focus: var(
             --cr-toolbar-search-field-input-bg-color,
             var(--cr-toolbar-background-color));
-        --cr-icon-button-size: 32px;
-        margin: 6px;
+        --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 32px);
+        margin: var(--cr-toolbar-icon-margin, 6px);
       }
 
       @media (prefers-color-scheme: light) {
@@ -67,7 +67,7 @@
         --paper-spinner-color:
             var(--cr-toolbar-search-field-input-color, white);
         height: var(--cr-icon-size);
-        margin: 0 6px;
+        margin: var(--cr-toolbar-search-field-paper-spinner-margin, 0 6px);
         opacity: 0;
         padding: 6px;
         position: absolute;
@@ -88,8 +88,7 @@
         -webkit-font-smoothing: antialiased;
         flex: 1;
         line-height: 185%;
-        margin-inline-end: 2px;
-        margin-inline-start: 2px;
+        margin: var(--cr-toolbar-search-field-term-margin, 0 2px);
         position: relative;
       }
 
@@ -141,6 +140,8 @@
       }
 
       :host(:not([narrow])) #prompt {
+        margin-inline-start:
+            var(--cr-toolbar-search-field-prompt-margin-inline-start);
         opacity: var(--cr-toolbar-search-field-prompt-opacity);
       }