MD downloads: implement (x) inside of search input

chrome/browser/resources/md_downloads/toolbar.css

Index: chrome/browser/resources/md_downloads/toolbar.css
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
index bb8ddfbd3dbfa36e496f46caa7898573ab4dc8b0..c73c58566787d24c2ce8aa173d676f934be50c3e 100644
--- a/chrome/browser/resources/md_downloads/toolbar.css
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -41,13 +41,40 @@
   --paper-input-container-color: rgba(255, 255, 255, .5);
   --paper-input-container-focus-color: white;
   --paper-input-container-input: {
+    font-family: inherit;

[tommycli, 2015/08/03 18:41:03]

Does it not work without this? I thought font-family was inherited by default.

[Dan Beam, 2015/08/03 18:48:26]

it's not for all things (e.g. <button> doesn't) as well as it's overridden for
paper-input-container:

https://github.com/PolymerElements/paper-input/blob/master/paper-input-contai...
https://github.com/PolymerElements/paper-input/blob/master/paper-input-contai...
https://github.com/PolymerElements/paper-styles/blob/master/typography.html#L137

     font-size: 14px;
   };
   --paper-input-container-input-color: white;
   --paper-input-container-label: {
+    font-family: inherit;
     font-size: 14px;
   };
   -webkit-margin-end: 8px;
+  z-index: 0;
+}
+
+#search-term input[type='search']::-webkit-search-cancel-button,
+#search-term input[type='search']::-webkit-search-results-button {
+  -webkit-appearance: none;
+}
+
+#search-term paper-icon-button {
+  --iron-icon-height: 16px;
+  --iron-icon-width: 16px;
+  --paper-icon-button: {
+    height: 16px;
+    padding: 6px;
+    width: 16px;
+  };
+  position: absolute;
+  right: 0;
+  top: -4px;
+  z-index: 1;
+}
+
+:host-context([dir='rtl']) #search-term paper-icon-button {
+  left: 0;
+  right: auto;
 }
 
 paper-menu-button {