MD Settings: Fix Network section styling

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

Index: chrome/browser/resources/settings/internet_page/internet_detail_page.html
diff --git a/chrome/browser/resources/settings/internet_page/internet_detail_page.html b/chrome/browser/resources/settings/internet_page/internet_detail_page.html
index 3e735d119701aae9f0bf14267a4da4741e14b48f..51b01ffd32565712a02d2af52072a881f5f44b0a 100644
--- a/chrome/browser/resources/settings/internet_page/internet_detail_page.html
+++ b/chrome/browser/resources/settings/internet_page/internet_detail_page.html
@@ -47,17 +47,6 @@
         -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);
       }
@@ -76,8 +65,7 @@
 
       #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;
       }
 
@@ -217,66 +205,85 @@
         </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>
-          </div>
+      <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>
 
-          <!-- 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>
 
-          <!-- 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>
+        <!-- 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>
-      </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>