MD Settings: Internet: Convert 'Known Networks' page to dropdown menus

chrome/browser/resources/settings/internet_page/internet_known_networks_page.html

Index: chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
diff --git a/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html b/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
index 9972456b145ab1619d1016cb3a4e79c5cc2af8c7..4af5d30e5093ccda029975f2f6208a7dfcce0f4d 100644
--- a/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
+++ b/chrome/browser/resources/settings/internet_page/internet_known_networks_page.html
@@ -1,3 +1,4 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.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-flex-layout/classes/iron-flex-layout.html">
@@ -20,7 +21,9 @@
             filter="networkIsPreferred_">
           <div class="settings-box self-stretch">
             <div class="start">[[item.Name]]</div>
-            <paper-icon-button icon="cr:clear" on-tap="onRemoveTap_">
+            <paper-icon-button id="preferredDots" icon="cr:more-vert"

[michaelpg, 2017/02/01 23:43:40]

using the same ID in a dom-repeat means the ID would be reused within the
element's shadow root.

[stevenjb, 2017/02/02 01:54:44]

Yeah, that's a bit weird, I'll use an attribute instead.

+                tabindex$="[[tabindex]]" guid$="[[item.GUID]]" 

[michaelpg, 2017/02/01 23:43:40]

i have a preference for using real attributes. there's a specific HTML feature
for this, data-foo:

    data-guid$="[[item.GUID]]"

which also adds a 'guid' key to the item's |dataset| property.

[stevenjb, 2017/02/02 01:54:44]

Huh. Interesting. They appear to be available to CSS too. Done.

+                on-tap="onMenuButtonTap_">
             </paper-icon-button>
           </div>
         </template>
@@ -32,12 +35,29 @@
             filter="networkIsNotPreferred_">
           <div class="settings-box self-stretch">
             <div class="start">[[item.Name]]</div>
-            <paper-icon-button icon="cr:add" on-tap="onAddTap_">
+            <paper-icon-button id="notPreferredDots" icon="cr:more-vert" 

[michaelpg, 2017/02/01 23:43:40]

ditto

[stevenjb, 2017/02/02 01:54:44]

Done.

+                tabindex$="[[tabindex]]" guid$="[[item.GUID]]"
+                on-tap="onMenuButtonTap_">
             </paper-icon-button>
           </div>
         </template>
       </div>
     </div>
+
+    <dialog id="dotsMenu" is="cr-action-menu">
+      <button class="dropdown-item" role="option"
+          hidden="[[selectedIsPreferred_]]" on-tap="onAddPreferredTap_">
+        $i18n{knownNetworksMenuAddPreferred}
+      </button>
+      <button class="dropdown-item" role="option"
+          hidden="[[!selectedIsPreferred_]]" on-tap="onRemovePreferredTap_">
+        $i18n{knownNetworksMenuRemovePreferred}
+      </button>
+      <button class="dropdown-item" role="option" on-tap="onForgetTap_">
+        $i18n{knownNetworksMenuForget}
+      </button>
+    </dialog>
+
   </template>
   <script src="internet_known_networks_page.js"></script>
 </dom-module>