MD Settings: Remove last usage of paper-item.

chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html

Index: chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
diff --git a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
index 243935e90172aed438ae6b3407a3108f72ec83d0..faf377ff7a1d6e20c92dcef98100e11d1d796542 100644
--- a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
+++ b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
@@ -6,31 +6,47 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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-item/paper-item.html">
 <link rel="import" href="cups_printers_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
 
-<dom-module id="add-printer-list">
+<dom-module id="cups-add-printer-dialog-style">
   <template>
-    <style include="settings-shared">
-      .list-frame {
-        -webkit-padding-end: 0;
-        -webkit-padding-start: 0;
+    <style>
+      .list-item {
+        background: none;
+        border: none;
+        box-sizing: border-box;
+        color: var(--paper-grey-800);
+        font: inherit;
+        min-height: 32px;
+        padding: 0 24px;
+        text-align: start;
+        width: 100%;
+        @apply(--settings-actionable);

[stevenjb, 2017/02/07 00:13:08]

This seems like a lot of unfortunatel customization. Also, Do we need a style
include to apply --settings-actionable?

[dpapad, 2017/02/07 00:22:58]

This is copied from cr-action-menu
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_action....
Unfortunately we can't reuse cr-action-menu (which was my original suggestion).

It is less unfortunate IMO than including paper-item and iron-dropdown styles in
settings_shared_css.html, which gets injected to every single element we use.
The fact that Vulcanize/polymer-css-build inline all included styles N times
makes the problem even worse.

So, although I agree that repeated custom style is not ideal, I think the
overall tradeoff is beneficial here.

[dpapad, 2017/02/07 00:25:01]

Regarding -settings-actionable, it seems to work without an include (note that
it is defined in settings_vars_css.html in a ":root" selector, not in
settings_shared_css.html).

[stevenjb, 2017/02/07 00:27:12]

OK, that's fair. We should probably audit settings_shared at some point and
remove some infrequently used CSS (or use custom vars instead which I would
expect to be cheaper?)

[stevenjb, 2017/02/07 00:27:12]

OK, maybe include settings_shared_css explicitly then?

[dpapad, 2017/02/07 00:56:28]

I think you meant settings_var_css instead. Done.

Regarding auditing settings_shared at some point, yes we could do that and move
shared styles that are only used by few cases accordingly. Similarly, I had
advocated in the past for more targeted shared styles, similar to
md_select_css.html, such that there is more granularity on what is included by
each element.

[stevenjb, 2017/02/07 01:11:06]

SGTM

[stevenjb, 2017/02/07 01:11:06]

Yup :)

       }
 
+      .list-item:focus {
+        background-color: var(--paper-grey-300);
+        outline: none;
+      }
+    </style>
+  </template>
+</dom-module>

[stevenjb, 2017/02/07 00:13:08]

nit: blank line

[dpapad, 2017/02/07 00:22:58]

Done.

+<dom-module id="add-printer-list">
+  <template>
+    <style include="settings-shared cups-add-printer-dialog-style">
       .list-item {
-        -webkit-padding-start: 20px;
-        min-height: 35px;
+        padding: 0 20px;
       }
     </style>
-    <div class="list-frame">
+    <div>
       <array-selector id="arraySelector" items="[[printers]]"
           selected="{{selectedPrinter}}">
       </array-selector>
       <template is="dom-repeat" items="[[printers]]">
-        <paper-item class="list-item" on-tap="onSelect_">
+        <button class="list-item" on-tap="onSelect_">
           [[item.printerName]] [[item.printerModel]]
-        </paper-item>
+        </button>
       </template>
     </div>
   </template>
@@ -38,7 +54,7 @@
 
 <dom-module id="drop-down-search-box">
   <template>
-    <style include="settings-shared">
+    <style include="settings-shared cups-add-printer-dialog-style">
       iron-dropdown,
       paper-input-container {
         width: 270px;
@@ -51,8 +67,11 @@
         };
       }
 
-      iron-dropdown .dropdown-content paper-item {
-        min-height: 40px;
+      iron-dropdown .dropdown-content {
+        background-color: white;
+        box-shadow: 0 2px 6px var(--paper-grey-500);
+        min-width: 128px;
+        padding: 8px 0;
       }
     </style>
     <paper-input-container no-label-float>
@@ -68,7 +87,7 @@
       <div class="dropdown-content">
         <template is="dom-repeat" items="[[items]]"
             filter="[[filterItems_(searchTerm_)]]">
-          <paper-item on-tap="onSelect_">[[item]]</paper-item>
+          <button class="list-item" on-tap="onSelect_">[[item]]</button>
         </template>
       </div>
     </iron-dropdown>