MD WebUI: Fix misaligned spinner in narrow-mode 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>
@@ skipping 94 matching lines @@
 
       :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 {
+      :host-context([dir=ltr]):host([narrow][showing-search]) #icon,
+      :host-context([dir=ltr]):host([narrow][showing-search]) paper-spinner-lite
+      {

[Dan Beam, 2016/08/23 23:16:05]

wrap it

[tsergeant, 2016/08/23 23:22:19]

Do you mean like:

:host-context([dir=ltr]):host([narrow][showing-search])
    paper-spinner-lite {

[Dan Beam, 2016/08/23 23:36:43]

quit horsin' around[1], and just use -webkit-margin-start + transition: margin
like this https://jsfiddle.net/tg8q8Ltf/

[1] https://www.youtube.com/watch?v=a1d1S58P0nc

[tsergeant, 2016/08/23 23:51:32]

[grasping at straws]

is that Character Actress Margin Margindale?

(Done)

         margin-left: 18px;
       }
 
-      :host-context([dir=rtl]):host([narrow][showing-search]) #icon {
+      :host-context([dir=rtl]):host([narrow][showing-search]) #icon,
+      :host-context([dir=rtl]):host([narrow][showing-search]) paper-spinner-lite
+      {
         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 id="searchTerm" 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>