MD WebUI: Center search field correctly inside cr-toolbar

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

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
index 9f9af393deb104ff166756a158ea196b0692f911..eb51cdb99927eba5084d5816ef2ed7d006db0878 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -25,21 +25,18 @@
       paper-icon-button {
         height: 32px;
         margin: 6px;
+        min-width: 32px;
         padding: 6px;
         width: 32px;
       }
 
       #icon {
         --paper-icon-button-ink-color: white;
-      }
-
-      #icon,
-      paper-spinner-lite {
-        transition: opacity 200ms;
+        transition: margin 150ms, opacity 200ms;
       }
 
       #prompt {
-        visibility: hidden;
+        opacity: 0;
       }
 
       paper-spinner-lite {
@@ -56,6 +53,11 @@
         opacity: 1;
       }
 
+      #prompt,
+      paper-spinner-lite {
+        transition: opacity 200ms;
+      }
+
       paper-input-container {
         --paper-input-container-input-color: white;
         --paper-input-container-underline: {
@@ -78,13 +80,13 @@
         -webkit-appearance: none;
       }
 
-      /** Wide layout, no search open. */
-      :host(:not([narrow]):not([showing-search])) {
+      /** Wide layout. */
+      :host(:not([narrow])) {
         -webkit-padding-end: 0;
         background: rgba(0, 0, 0, 0.22);
         border-radius: 2px;
         cursor: text;
-        width: 580px;
+        width: var(--cr-toolbar-field-width);
       }
 
       :host(:not([narrow]):not([showing-search])) #icon,
@@ -92,21 +94,30 @@
         opacity: 0.6;
       }
 
-      :host(:not([narrow]):not([showing-search])) #prompt {
-        visibility: visible;
+      :host([narrow]:not([showing-search])) paper-input-container {
+        display: none;
+      }
+
+      /* Search open. */
+      :host([showing-search][spinner-active]) #icon {
+        opacity: 0;
       }
 
-      /* Any layout, search open. */
-      :host([showing-search]) {
+      :host([narrow][showing-search]) {
         width: 100%;
       }
 
-      :host([showing-search][spinner-active]) #icon {
-        opacity: 0;
+      /*
+       * Margin needs to be animated to prevent jumping around during
+       * opening/closing. -webkit-margin-start is not animatable, so we have to
+       * use regular margin-left/right instead.
+       */
+      :host-context([dir=ltr]):host([narrow][showing-search]) #icon {
+        margin-left: 18px;
       }
 
-      :host([narrow][showing-search]) #icon {
-        -webkit-margin-start: 18px;
+      :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
+        margin-right: 18px;
       }
     </style>
     <paper-spinner-lite