MD WebUI: Improve tab focus behavior for toolbar search field

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // TODO(tsergeant): Add tests for cr-toolbar-search-field.
 Polymer({
   is: 'cr-toolbar-search-field',
 
   behaviors: [CrSearchFieldBehavior],
 
   properties: {
     narrow: {
       type: Boolean,
       reflectToAttribute: true,
     },
 
     // Prompt text to display in the search field.
     label: String,
 
     // Tooltip to display on the clear search button.
     clearLabel: String,
   },
 
   listeners: {
     'tap': 'showSearch_',
   },
 
+  /**
+   * @param {boolean} narrow

[dpapad, 2016/05/31 18:57:58]

@return missing

[tsergeant, 2016/06/01 01:20:49]

Done.

+   * @private
+   */
+  computeIconTabIndex_: function(narrow) {
+    return narrow ? 0 : -1;
+  },
+
   /** @private */
   onInputBlur_: function() {
     if (!this.hasSearchText)
       this.showingSearch = false;
   },
 
   /**
+   * Expand the search field when a key is pressed with it focused. This ensures
+   * it can be used correctly by tab-focusing.

[dpapad, 2016/05/31 18:57:58]

I am a bit skeptical about this behavior UX-wise. How would the user know that
she/he can start typing if the search field is not expanded? Should it be
expanded as soon as user focus it?

[tsergeant, 2016/06/01 01:20:49]

There's a blinking cursor shown in the field when they tab-focus in, so they
will know they can type. We only expand (and do the corresponding animation)
when they type to avoid doing an animation in-and-out when they just want to tab
straight through the field (it's quite distracting when that happens).

This is very similar to the behavior in Inbox and Google Photos, both of which
change layout when the search field is clicked.

+   * @private
+   */
+  onSearchTermKeypress_: function() {
+    if (!this.showingSearch)

[dpapad, 2016/05/31 18:57:58]

Why is this check necessary? Could we blindly set this boolean to true? Or is
this to avoid triggiring bindings if the boolean is already true? I would hope
that Polymer is smart enough to not do unnecessary work when the new and old
value of a Polymer property is the same.

[tsergeant, 2016/06/01 01:20:49]

Good point, done.

+      this.showingSearch = true;
+  },
+
+  /**
    * @param {Event} e
    * @private
    */
   showSearch_: function(e) {
     if (e.target != this.$.clearSearch)
       this.showingSearch = true;
   },
 
   /**
    * @param {Event} e
    * @private
    */
   hideSearch_: function(e) {
     this.showingSearch = false;
     e.stopPropagation();
   }
 });