MD Settings: Network and bluetooth polish

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

 <link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../prefs/prefs.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
 <link rel="import" href="../settings_page/settings_subpage.html">
 <link rel="import" href="../settings_shared_css.html">
 <link rel="import" href="internet_detail_page.html">
 <link rel="import" href="internet_known_networks_page.html">
 <link rel="import" href="internet_subpage.html">
 <link rel="import" href="network_summary.html">
 
 <dom-module id="settings-internet-page">
   <template>
     <style include="settings-shared">
-      div.add-no-icon {
-        -webkit-margin-start: 36px
-      }
-
       iron-icon {
         -webkit-margin-end: 12px;
         -webkit-margin-start: 4px;
         height: 24px;
         width: 24px;
       }
     </style>
     <settings-animated-pages id="pages" section="internet"
         focus-config="[[focusConfig_]]">
       <neon-animatable route-path="default">
         <network-summary default-network="{{defaultNetwork}}"
             device-states="{{deviceStates}}"            
             networking-private="[[networkingPrivate]]">
         </network-summary>
         <template is="dom-if" if="[[allowAddConnection_(globalPolicy_)]]">
           <div actionable class="settings-box two-line"
               on-tap="onExpandAddConnectionsTap_">
             <div class="start layout horizontal center">
               <div>$i18n{internetAddConnection}</div>
             </div>
             <cr-expand-button alt="$i18n{internetAddConnectionExpandA11yLabel}"
                 id="expandAddConnections" expanded="{{addConnectionExpanded_}}">
             </cr-expand-button>
           </div>
           <template is="dom-if" if="[[addConnectionExpanded_]]">
-            <template is="dom-if" if="[[deviceIsEnabled_(deviceStates.WiFi)]]">
-              <div actionable class="settings-box continuation center"
-                  on-tap="onAddWiFiTap_">
-                <div class="start add-no-icon">$i18n{internetAddWiFi}</div>
+            <div class="list-frame vertical-list">
+              <template is="dom-if"
+                  if="[[deviceIsEnabled_(deviceStates.WiFi)]]">
+                <div actionable class="list-item" on-tap="onAddWiFiTap_">
+                  <div class="start">$i18n{internetAddWiFi}</div>
+                  <button class="icon-external" is="paper-icon-button-light"
+                      aria-label="$i18n{internetAddWiFi}">
+                  </button>
+                </div>
+              </template>
+              <div actionable class="list-item" on-tap="onAddVPNTap_">
+                <div class="start">$i18n{internetAddVPN}</div>
                 <button class="icon-external" is="paper-icon-button-light"
-                    aria-label="$i18n{internetAddWiFi}">
+                    aria-label="$i18n{internetAddVPN}">
                 </button>
               </div>
-            </template>
-            <div actionable class="settings-box continuation center"
-                on-tap="onAddVPNTap_">
-              <div class="start add-no-icon">$i18n{internetAddVPN}</div>
-              <button class="icon-external" is="paper-icon-button-light"
-                  aria-label="$i18n{internetAddVPN}">
-              </button>
+              <template is="dom-repeat" items="[[thirdPartyVpnProviders_]]">
+                <div actionable class="list-item"
+                    on-tap="onAddThirdPartyVpnTap_" provider="[[item]]">
+                  <div class="start">

[dschuyler, 2017/04/28 19:26:19]

Maybe: I'm not 100% sure, but this div may not be needed.

[stevenjb, 2017/04/28 19:49:36]

Hmm, actually, this really should have a button also. I added that instead.
PTAL.

[dschuyler, 2017/04/28 22:32:10]

Acknowledged.

+                    [[getAddThirdParrtyVpnLabel_(item)]]
+                  </div>
+                </div>
+              </template>
             </div>
-            <template is="dom-repeat" items="[[thirdPartyVpnProviders_]]">
-              <div actionable class="settings-box continuation center"
-                  on-tap="onAddThirdPartyVpnTap_" provider="[[item]]">
-                <div class="start add-no-icon">
-                  [[getAddThirdParrtyVpnLabel_(item)]]
-                </div>
-              </div>
-            </template>
           </template>
         </template>
         <template is="dom-if" if="[[!allowAddConnection_(globalPolicy_)]]">
           <div class="settings-box">
             <iron-icon class="policy" icon="cr20:domain"></iron-icon>
             <div>$i18n{internetAddConnectionNotAllowed}</div>
           </div>
         </template>
       </neon-animatable>
 
@@ skipping 27 matching lines @@
               networking-private="[[networkingPrivate]]"
               show-spinner="{{showSpinner_}}">
           </settings-bluetooth-subpage>
         </settings-subpage>
       </template>
 
     </settings-animated-pages>
   </template>
   <script src="internet_page.js"></script>
 </dom-module>