MD Settings: Remove last usage of paper-item.

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

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.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-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="cups-add-printer-dialog-style">
+  <template>
+    <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">
-      .list-frame {
-        -webkit-padding-end: 0;
-        -webkit-padding-start: 0;
-      }
-
+    <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>
 </dom-module>
 
 <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;
       }
 
       paper-input-container {
         --paper-input-container-color: var(--google-grey-500);
         --paper-input-container-input: {
           font-size: inherit;
         };
       }
 
-      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>
       <input is="iron-input" type="search" on-tap="onTap_"
           on-search="onInputValueChanged_" on-change="onChange_" incremental>
       <paper-icon-button suffix id="searchIcon" icon="cr:search" hidden>
       </paper-icon-button>
       <paper-icon-button suffix id="dropdownIcon" icon="cr:arrow-drop-down">
       </paper-icon-button>
     </paper-input-container>
     <iron-dropdown horizontal-align="left" vertical-align="top"
         vertical-offset="47">
       <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>
   </template>
 </dom-module>
 
 <dom-module id="add-printer-dialog">
   <template>
     <style include="settings-shared">
       #dialog .body {
@@ skipping 21 matching lines @@
       <div class="body">
         <content select=".dialog-body"></content>
       </div>
       <div class="button-container">
         <content select=".dialog-buttons"></content>
       </div>
     </dialog>
   </template>
   <script src="cups_add_printer_dialog_util.js"></script>
 </dom-module>