MD WebUI: Center search field correctly inside cr-toolbar

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 
 <dom-module id="cr-toolbar-search-field">
   <template>
     <style>
       :host {
         align-items: center;
         display: flex;
         height: 40px;
         transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
             width 150ms cubic-bezier(0.4, 0, 0.2, 1);
         width: 44px;
       }
 
       [hidden] {
         display: none !important;
       }
 
       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 {
         --paper-spinner-color: white;
         height: 20px;
         margin: 0 6px;
         opacity: 0;
         padding: 6px;
         position: absolute;
         width: 20px;
       }
 
       paper-spinner-lite[active] {
         opacity: 1;
       }
 
+      #prompt,
+      paper-spinner-lite {
+        transition: opacity 200ms;
+      }
+
       paper-input-container {
         --paper-input-container-input-color: white;
         --paper-input-container-underline: {
           display: none;
         };
         --paper-input-container-underline-focus: {
           display: none;
         };
         --paper-input-container-label: {
           color: inherit;
           font-size: inherit;
         };
         -webkit-padding-start: 2px;
         flex: 1;
       }
 
       input[type='search']::-webkit-search-decoration,
       input[type='search']::-webkit-search-cancel-button,
       input[type='search']::-webkit-search-results-button {
         -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;
       }
 
       :host(:not([narrow]):not([showing-search])) #icon,
       :host(:not([narrow]):not([showing-search])) #prompt {
         opacity: 0.6;
       }
 
-      :host(:not([narrow]):not([showing-search])) #prompt {
-        visibility: visible;
+      :host([narrow]:not([showing-search])) paper-input-container {
+        display: none;
       }
 
-      /* Any layout, search open. */
-      :host([showing-search]) {
-        width: 100%;
-      }
-
+      /* Search open. */
       :host([showing-search][spinner-active]) #icon {
         opacity: 0;
       }
 
-      :host([narrow][showing-search]) #icon {
-        -webkit-margin-start: 18px;
+      :host([narrow][showing-search]) {
+        width: 100%;
+      }
+
+      /*
+       * 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;

[dpapad, 2016/07/13 20:50:11]

Can we not merge this CSS rule and the next one by using
-webkit-margin-start: 18px;

[tsergeant, 2016/07/14 03:50:51]

-webkit-margin-start doesn't animate, and having the margin animate smooths out
the open/close animation (otherwise it will jump around by 18px at the start of
the animation).

+      }
+
+      :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
+        margin-right: 18px;
       }
     </style>
     <paper-spinner-lite
         active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">
     </paper-spinner-lite>
     <paper-icon-button id="icon" icon="cr:search" title="[[label]]"
         tabindex$="[[computeIconTabIndex_(narrow)]]">
     </paper-icon-button>
     <paper-input-container on-search="onSearchTermSearch"
         on-keydown="onSearchTermKeydown" no-label-float>
       <label id="prompt" for="searchInput">[[label]]</label>
       <input is="iron-input" id="searchInput" type="search"
           on-blur="onInputBlur_" incremental></input>
     </paper-input-container>
     <paper-icon-button icon="cr:cancel" id="clearSearch"
         title="[[clearLabel]]" hidden$="[[!hasSearchText_]]"
         on-tap="hideSearch_">
     </paper-icon-button>
   </template>
   <script src="cr_toolbar_search_field.js"></script>
 </dom-module>