MD WebUI: Improve tab focus behavior for toolbar search field

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

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
index aac426820c43e00e97956025673933bea7ae198f..b397783f29ddd6c58b1c316e5a9cd049cedc9c57 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
@@ -25,6 +25,14 @@ Polymer({
     '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)
@@ -32,6 +40,16 @@ Polymer({
   },
 
   /**
+   * 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
    */