MD Settings: Fix Network section styling

chrome/browser/resources/settings/internet_page/internet_detail_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_network_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_indicator.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-collapse/iron-collapse.html">
@@ skipping 29 matching lines @@
       iron-icon {
         -webkit-margin-end: 10px;
       }
 
       paper-toggle-button,
       cr-policy-network-indicator,
       cr-policy-indicator {
         -webkit-margin-start: var(--settings-control-spacing);
       }
 
-      /* Use <span> for subtitles so as not to interfere with
-       * settings-box:first-of-type. */
-      span.subtitle {
-        font-weight: 700;
-        padding: 20px;
-      }
-
-      .advanced {
-        font-weight: 700;
-      }
-
       .indented {
         -webkit-margin-start: var(--settings-box-row-padding);
       }
 
       .settings-box.stretch {
         align-items: stretch;
       }
 
       .settings-box:first-of-type {
         border-top: none;
       }
 
       #buttonDiv paper-button {
         margin: 10px 0;
       }
 
       #networkState {
         -webkit-padding-start: 8px;
-        /* TODO(stevenjb): Finalize font-size / style for this. */
-        font-size: 125%;
+        font-size: 107.69%;  /* 14px / 13px */
         font-weight: 500;
       }
 
       #networkState[connected] {
         color: var(--google-green-500);
       }
     </style>
     <!-- Title section: Icon + name + connection state. -->
     <div class="settings-box first">
       <div class="start layout horizontal center">
@@ skipping 119 matching lines @@
         <template is="dom-if" if="[[hasInfoFields_(networkProperties)]]">
           <div class="settings-box single-column stretch">
             <network-property-list
                 fields="[[getInfoFields_(networkProperties)]]"
                 property-dict="[[networkProperties]]">
             </network-property-list>
           </div>
         </template>
       </div>
 
-      <!-- Advanced toggle. -->
-      <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_"
-          hidden$="[[!showAdvanced_(networkProperties)]]">
-        <div class="advanced flex">$i18n{networkSectionAdvanced}</div>
-        <cr-expand-button id="expandButton" expanded="{{advancedExpanded_}}"
-            alt="$i18n{networkSectionAdvancedExpandA11yLabel}">
-        </cr-expand-button>
-      </div>
+      <template is="dom-if" if="[[showAdvanced_(networkProperties)]]">
+        <!-- Advanced toggle. -->
+        <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_">
+          <div class="flex">$i18n{networkSectionAdvanced}</div>
+          <cr-expand-button expanded="{{advancedExpanded_}}"
+              alt="$i18n{networkSectionAdvancedA11yLabel}">
+          </cr-expand-button>
+        </div>
 
-      <!-- Advanced section -->
-      <iron-collapse opened="[[advancedExpanded_]]">
-        <div class="layout vertical indented">
-          <div class="settings-box single-column stretch"
-              hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
-            <!-- Advanced properties -->
-            <network-property-list
-                hidden$="[[!hasAdvancedFields_(networkProperties)]]"
-                fields="[[getAdvancedFields_(networkProperties)]]"
-                property-dict="[[networkProperties]]">
-            </network-property-list>
-            <!-- Device properties -->
-            <network-property-list
-                hidden$="[[!hasDeviceFields_(networkProperties)]]"
-                fields="[[getDeviceFields_(networkProperties)]]"
-                property-dict="[[networkProperties]]">
-            </network-property-list>
+        <!-- Advanced section -->
+        <iron-collapse opened="[[advancedExpanded_]]">
+          <div class="layout vertical indented">
+            <div class="settings-box single-column stretch"
+                hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
+              <!-- Advanced properties -->
+              <network-property-list
+                  hidden$="[[!hasAdvancedFields_(networkProperties)]]"
+                  fields="[[getAdvancedFields_(networkProperties)]]"
+                  property-dict="[[networkProperties]]">
+              </network-property-list>
+              <!-- Device properties -->
+              <network-property-list
+                  hidden$="[[!hasDeviceFields_(networkProperties)]]"
+                  fields="[[getDeviceFields_(networkProperties)]]"
+                  property-dict="[[networkProperties]]">
+              </network-property-list>
+            </div>
           </div>
+        </iron-collapse>
+      </template>
 
-          <!-- Network sub-section title -->
-          <div class="layout vertical"
-              hidden$="[[!hasNetworkSection_(networkProperties)]]">
-            <span class="subtitle">$i18n{networkSectionNetwork}</span>
+      <template is="dom-if" if="[[hasNetworkSection_(networkProperties)]]">
+        <!-- Network toggle -->
+        <div class="settings-box" actionable on-tap="toggleNetworkExpanded_">
+          <div class="start">$i18n{networkSectionNetwork}</div>
+          <cr-expand-button expanded="{{networkExpanded_}}"
+              alt="$i18n{networkSectionNetworkExpandA11yLabel}">
+          </cr-expand-button>
+        </div>
+
+        <iron-collapse opened="[[networkExpanded_]]">
+          <div class="layout vertical indented">

[dschuyler, 2017/03/28 01:38:06]

Would "settings-box continuation" work here?

[stevenjb, 2017/03/29 20:56:10]

No, it would loose the 'vertical' layout. Also, each of the pieces below have
custom layout, they don't really fit the 'settings-box' mold; the only thing
they share in common is the indent amount, which is handled by a CSS var.

+            <!-- APN -->
+            <template is="dom-if"
+                if="[[isType_(NetworkType_.CELLULAR, networkProperties)]]">
+              <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
+                  network-properties="[[networkProperties]]">
+              </network-apnlist>
+            </template>
+
+            <!-- IP Config, Nameservers -->
+            <template is="dom-if"
+                if="[[isRememberedOrConnected_(networkProperties)]]">
+              <network-ip-config editable on-ip-change="onIPConfigChange_"
+                  network-properties="[[networkProperties]]">
+              </network-ip-config>
+              <network-nameservers editable
+                  on-nameservers-change="onIPConfigChange_"
+                  network-properties="[[networkProperties]]">
+              </network-nameservers>
+            </template>
           </div>
+        </iron-collapse>
 
-          <!-- APN -->
-          <template is="dom-if"
-              if="[[isType_(NetworkType_.CELLULAR, networkProperties)]]">
-            <network-apnlist editable on-apn-change="onNetworkPropertyChange_"
-                network-properties="[[networkProperties]]">
-            </network-apnlist>
-          </template>
+        <!-- Proxy toggle -->
+        <div class="settings-box" actionable on-tap="toggleProxyExpanded_">
+          <div class="start">$i18n{networkSectionProxy}</div>
+          <cr-expand-button expanded="{{proxyExpanded_}}"
+              alt="$i18n{networkSectionProxyExpandA11yLabel}">
+          </cr-expand-button>
+        </div>
 
-          <!-- IP Config, Nameservers, Proxy -->
-          <template is="dom-if"
-              if="[[isRememberedOrConnected_(networkProperties)]]">
-            <network-ip-config editable on-ip-change="onIPConfigChange_"
-                network-properties="[[networkProperties]]">
-            </network-ip-config>
-            <network-nameservers editable
-                on-nameservers-change="onIPConfigChange_"
-                network-properties="[[networkProperties]]">
-            </network-nameservers>
-            <span class="subtitle">$i18n{networkSectionProxy}</span>
-            <network-proxy editable prefs="{{prefs}}"
-                on-proxy-change="onProxyChange_"
-                network-properties="[[networkProperties]]">
-            </network-proxy>
-          </template>
-        </div>
-      </iron-collapse>
+        <iron-collapse opened="[[proxyExpanded_]]">
+          <network-proxy editable prefs="{{prefs}}"
+              on-proxy-change="onProxyChange_"
+              network-properties="[[networkProperties]]">
+          </network-proxy>
+        </iron-collapse>
+      </template>
     </template>
   </template>
   <script src="internet_detail_page.js"></script>
 </dom-module>