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..e1ae17a7df26176ebb965c0beff1f6c2bb2155e8 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: 14px;

[dschuyler, 2017/03/20 19:11:30]

Please use a percentage for font sizes, so that they scale when the default font
size changes. E.g.
https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/settin...

[stevenjb, 2017/03/24 21:00:02]

Right... done. For the record it would be nice if we could just match specs and
still have fonts scale appropriately.

         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{networkSectionAdvancedExpandA11yLabel}">
+          </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="flex">$i18n{networkSectionNetwork}</div>

[dschuyler, 2017/03/20 19:11:30]

s/flex/start/

[stevenjb, 2017/03/24 21:00:03]

Done.

+          <cr-expand-button expanded="{{networkExpanded_}}"
+              alt="$i18n{networkSectionNetworkExpandA11yLabel}">
+          </cr-expand-button>
+        </div>
+
+        <iron-collapse opened="[[networkExpanded_]]">
+          <div class="layout vertical indented">
+            <!-- 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="flex">$i18n{networkSectionProxy}</div>

[dschuyler, 2017/03/20 19:11:30]

s/flex/start/

[stevenjb, 2017/03/24 21:00:03]

Done.

+          <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>