MD Settings: Migrate cups_printers_list.html to settings-action-menu.

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

Index: chrome/browser/resources/settings/printing_page/cups_printers_list.html
diff --git a/chrome/browser/resources/settings/printing_page/cups_printers_list.html b/chrome/browser/resources/settings/printing_page/cups_printers_list.html
index 077a0f47ec48ca5806740ca91aa892e944fd03b7..ea9e0f7ba3d6769e356986c85c641d6783a0a4b1 100644
--- a/chrome/browser/resources/settings/printing_page/cups_printers_list.html
+++ b/chrome/browser/resources/settings/printing_page/cups_printers_list.html
@@ -1,9 +1,8 @@
 <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/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="/printing_page/cups_printers_browser_proxy.html">
+<link rel="import" href="/settings_action_menu.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-cups-printers-list">
@@ -23,33 +22,25 @@
       .list-item {
         min-height: 20px;
       }
-      
-      iron-dropdown {
-        width: 120px;
-      }
     </style>
 
-    <template is="dom-repeat" items="{{printers}}"
+    <dialog is="settings-action-menu">

[michaelpg, 2016/10/20 18:00:39]

how does this menu react when it's opened for Printer X, and a change comes from
Chrome which removes Printer X?

[dpapad, 2016/10/20 18:15:56]

This is not handled at the moment. I can move this dialog inside the dom-repeat
again, and wrap it with a lazy-render or dom-if. This way it would be removed
from the DOM when the dom-repeat updates. Or perhaps there is a way to still
have 1 action menu for N rows, and somehow observe whether the current printer
just got removed.

BTW, case you are describing probably breaks other such menus in our codebase
where we chosen to have 1 menu for N rows.

[michaelpg, 2016/10/20 19:49:05]

Would that cause a dom-if template to be created for each item? :-\

I think it's fine if we just call close() in the menu item handlers. 
I just checked, and you're right. Filed http://crbug.com/657970

[dpapad, 2016/10/20 21:58:28]

Yes, it would cause a dom-if template node for each item. We already do this for
the certificate action menu, see
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/certif....
We do close the menu when an action happens, but don't bother removing it from
dom, we just use cr-lazy-render. So if you were to open 100 menus for 100
different items, the page would get gradually more populated.

+      <button class="dropdown-item" role="option" on-tap="onDetailsTap_">
+          $i18n{cupsPrinterDetails}

[michaelpg, 2016/10/20 18:00:39]

indents off

[dpapad, 2016/10/20 18:15:57]

Done.

+      </button>
+      <button class="dropdown-item" role="option" on-tap="onRemoveTap_">
+          $i18n{removePrinter}
+      </button>
+    </dialog>
+    <template is="dom-repeat" items="[[printers]]"
         filter="[[filterPrinter_(searchTerm)]]">
       <div id="container" class="list-item">
         <div class="name-column">
           <span class="name" id="printer-name">[[item.printerName]]</span>
           <!--TODO(xdai): Add icon for enterprise CUPS printer. -->
         </div>
-        <paper-icon-button icon="cr:more-vert" toggles
-            active="{{item.menuOpened}}">
+        <paper-icon-button icon="cr:more-vert" on-tap="onDotsTap_">

[michaelpg, 2016/10/20 18:00:39]

nit: name what the button is, not what it looks like

[dpapad, 2016/10/20 18:15:56]

OK, but
https://cs.chromium.org/search/?q=onDotsTap_&sq=package:chromium&type=cs.

[michaelpg, 2016/10/20 19:49:05]

Huh, ok then. Somehow I'd never seen it before.

         </paper-icon-button>
-        <iron-dropdown opened="{{item.menuOpened}}" horizontal-align="right"
-            vertical-align="top" horizontal-offset="15" vertical-offset="5">
-          <div class="dropdown-content">
-            <paper-item on-tap="onDetailsTap_">
-                $i18n{cupsPrinterDetails}
-            </paper-item>
-            <paper-item on-tap="onRemoveTap_">
-                $i18n{removePrinter}
-            </paper-item>
-          <div>
-        </iron-dropdown>
       </div>
     </template>
   </template>