[MD Extensions] Move search field out of downloads, use it in extensions

ui/webui/resources/html/cr/ui/search_field.html

Index: ui/webui/resources/html/cr/ui/search_field.html
diff --git a/ui/webui/resources/html/cr/ui/search_field.html b/ui/webui/resources/html/cr/ui/search_field.html
new file mode 100644
index 0000000000000000000000000000000000000000..fa0e15f9a9a373df2f07d09fa2fa164b8deb4e91
--- /dev/null
+++ b/ui/webui/resources/html/cr/ui/search_field.html
@@ -0,0 +1,27 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.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-input/paper-input-container.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+
+<dom-module id="search-field">
+  <template>
+    <paper-icon-button icon="search" id="search-button"
+        on-click="toggleShowingSearch_"></paper-icon-button>

[Dan Beam, 2015/09/14 19:22:05]

it may be worthwhile to put this in a

  <template is="dom-if" if="[[showingSearch_]]">
    ...
  </template>

instead of binding to hidden as it reduces the page weight

[Devlin, 2015/09/14 21:47:19]

I tried this out, but it makes other things quite a bit more painful.  In
particular, automatic node finding doesn't work for dynamically generated
templates, so lines in the js like "this.$['search-input'].focus()" become quite
a bit uglier, and less polymeric.  Also,
https://www.polymer-project.org/1.0/docs/devguide/templates.html seems to imply
that the conditional templates would do more harm than good unless they're
pricey to construct - but I have no idea if a) we care (2x as expensive on
not-expensive is still not-expensive) or b) that documentation is still current.

WDYT?  If you'd still prefer a conditional template, I'll put it in; just wanna
make sure it's worth the churn.

[Dan Beam, 2015/09/14 23:16:05]

yeah, forgot about that.  in the past I've used binding and such that need less
references to the $ ID hash, but yes: it is a little uglier.

fwiw: I also prototyped making $()[1] take an optional context to
querySelector() from, like queryRequired[2].  that's an alternative that may
reduce ugliness.

basically, you go from:

  this.$.blah.focus();

to

  $('blah', this).focus();

:D

[1]
https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...
[2]
https://code.google.com/p/chromium/codesearch#chromium/src/ui/webui/resources...
paper-* elements are 'spensive (it's like 13 sub-elements for a paper-button)
it is correct, but dom-if still has been a win on downloads
i'm cool with as it is (I did write it, after all).  just something to consider.
 maybe just add a TODO()?

[Devlin, 2015/09/15 17:24:06]

TL;DR: TODO'd.

document.querySelector (and this.querySelector from SearchField) still don't
return the element, because it's part of a separate template.  I *think* using
something like this.shadowRoot.querySelector might, but then we're back to
ugliness... for now, let's just do this. :)

+    <paper-input-container id="search-term" on-search="onSearchTermSearch_"
+        on-keydown="onSearchTermKeydown_" hidden$="[[!showingSearch_]]"
+        no-label-float>
+      <input is="iron-input" id="search-input" type="search"
+          i18n-values="placeholder:search" incremental>
+      <paper-icon-button icon="cancel" id="clear-search"
+          on-click="toggleShowingSearch_"
+          hidden$="[[!showingSearch_]]"></paper-icon-button>
+    </paper-input-container>
+  </template>
+  <link rel="import" type="css"
+        href="chrome://resources/css/cr/ui/search_field.css">
+  <script src="chrome://resources/js/cr/ui/search_field.js"></script>
+</dom-module>