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

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

+<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">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-internet-known-networks-page">
   <template>
     <style include="settings-shared"></style>
     <div class="settings-box first single-column">
       <div class="settings-box continuation">
         <div>$i18n{knownNetworksMessage}</div>
       </div>
       <div class="settings-box first single-column self-stretch">
         <div class="secondary">$i18n{knownNetworksPreferred}</div>
         <div class="settings-box self-stretch start"
             hidden$="[[havePreferred_(networkStateList_)]]">
           $i18n{knownNetworksNoPreferred}
         </div>
         <template is="dom-repeat" items="[[networkStateList_]]"
             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>
       </div>
       <div class="settings-box first single-column self-stretch"
           hidden$="[[!haveNotPreferred_(networkStateList_)]]">
         <div class="secondary">$i18n{knownNetworksAll}</div>
         <template is="dom-repeat" items="[[networkStateList_]]"
             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>