MD Settings: Internet: Minor html cleanup

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_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">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
@@ skipping 23 matching lines @@
       }
 
       cr-policy-network-indicator {
         -webkit-margin-start: 10px;
       }
 
       iron-collapse {
         margin: 10px;
       }
 
+      .settings-box.embedded {
+        -webkit-margin-start: 0;
+        align-items: stretch;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .settings-box.stretch {
+        align-items: stretch;
+      }
+
       .subtitle {
         -webkit-margin-start: 20px;
         font-weight: 500;
         padding: 20px 0;
       }
 
       #buttonDiv paper-button {
         margin: 10px 0;
       }
 
       #networkName {
         /* TODO(stevenjb): Finalize font-size for this and networkState. */
         font-size: 125%;
         font-weight: 500;
       }
 
       #networkState {
         @apply(--settings-secondary);
-     }
+      }
 
       #networkState[connected] {
         color: var(--google-green-500);
       }
 
       #proxyDiv {
         max-width: 500px;
       }
     </style>
-    <div class="settings-box first single-column">
-      <!-- Title section: Icon + name + connection state. -->
-      <div class="settings-box embedded">
-        <div class="start layout horizontal center">
-          <cr-network-icon network-state="[[networkProperties]]">
-          </cr-network-icon>
-          <div class="layout vertical">
-            <div id="networkName">[[getStateName_(networkProperties)]]</div>
-            <div id="networkState"
-                connected$="[[isConnectedState_(networkProperties)]]">
-              [[getStateText_(networkProperties)]]
-            </div>
+    <!-- Title section: Icon + name + connection state. -->
+    <div class="settings-box first">
+      <div class="start layout horizontal center">
+        <cr-network-icon network-state="[[networkProperties]]">
+        </cr-network-icon>
+        <div class="layout vertical">
+          <div id="networkName">[[getStateName_(networkProperties)]]</div>
+          <div id="networkState"
+               connected$="[[isConnectedState_(networkProperties)]]">
+            [[getStateText_(networkProperties)]]
           </div>
         </div>
-        <div id="buttonDiv" class="layout horizontal center">
-          <paper-button class="secondary-button" on-tap="onForgetTap_"
-              hidden$="[[!showForget_(networkProperties)]]">
-            $i18n{networkButtonForget}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onViewAccountTap_"
-              hidden$="[[!showViewAccount_(networkProperties)]]">
-            $i18n{networkButtonViewAccount}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onActivateTap_"
-              hidden$="[[!showActivate_(networkProperties)]]">
-            $i18n{networkButtonActivate}
-          </paper-button>
-          <paper-button class="secondary-button" on-tap="onConfigureTap_"
-              hidden$="[[!showConfigure_(networkProperties)]]">
-            $i18n{networkButtonConfigure}
-          </paper-button>
-          <paper-button class="primary-button" on-tap="onConnectTap_"
-              hidden$="[[!showConnect_(networkProperties)]]"
-              disabled="[[!enableConnect_(networkProperties, defaultNetwork)]]">
-            $i18n{networkButtonConnect}
-          </paper-button>
-          <paper-button class="primary-button" on-tap="onDisconnectTap_"
-              hidden$="[[!showDisconnect_(networkProperties)]]">
-            $i18n{networkButtonDisconnect}
-          </paper-button>
-        </div>
       </div>
-      <!-- Shared. -->
-      <div class="settings-box embedded"
-          hidden$="[[!showShared_(networkProperties)]]">
-        $i18n{networkShared}
+      <div id="buttonDiv" class="layout horizontal center">
+        <paper-button class="secondary-button" on-tap="onForgetTap_"
+             hidden$="[[!showForget_(networkProperties)]]">
+          $i18n{networkButtonForget}
+        </paper-button>
+        <paper-button class="secondary-button" on-tap="onViewAccountTap_"
+            hidden$="[[!showViewAccount_(networkProperties)]]">
+          $i18n{networkButtonViewAccount}
+        </paper-button>
+        <paper-button class="secondary-button" on-tap="onActivateTap_"
+            hidden$="[[!showActivate_(networkProperties)]]">
+          $i18n{networkButtonActivate}
+        </paper-button>
+        <paper-button class="secondary-button" on-tap="onConfigureTap_"
+            hidden$="[[!showConfigure_(networkProperties)]]">
+          $i18n{networkButtonConfigure}
+        </paper-button>
+        <paper-button class="primary-button" on-tap="onConnectTap_"
+            hidden$="[[!showConnect_(networkProperties)]]"
+            disabled="[[!enableConnect_(networkProperties, defaultNetwork)]]">
+          $i18n{networkButtonConnect}
+        </paper-button>
+        <paper-button class="primary-button" on-tap="onDisconnectTap_"
+            hidden$="[[!showDisconnect_(networkProperties)]]">
+          $i18n{networkButtonDisconnect}
+        </paper-button>
       </div>
+    </div>
+
+    <!-- Shared. -->
+    <div class="settings-box continuation"
+        hidden$="[[!showShared_(networkProperties)]]">
+      $i18n{networkShared}
+    </div>
+    <!-- Top level properties -->
+    <div class="settings-box continuation embedded">
       <!-- Prefer this network. -->
-      <div class="settings-box embedded"
+      <div class="settings-box"
           hidden$="[[!showPreferNetwork_(networkProperties)]]">
         <paper-checkbox checked="{{preferNetwork_}}"
-            disabled="[[isNetworkPolicyEnforced(networkProperties.Priority)]]">
+                        disabled="[[isNetworkPolicyEnforced(networkProperties.Priority)]]">

[dschuyler, 2016/09/01 20:45:13]

nit: wrap line or indent less.

[stevenjb, 2016/09/02 17:07:58]

Aha! My editor was doing this and I did some more investigating and found a way
to convince it to indent this correctly. Done!

           $i18n{networkPrefer}
         </paper-checkbox>
         <cr-policy-network-indicator property="[[networkProperties.Priority]]">
         </cr-policy-network-indicator>
       </div>
       <!-- Autoconnect. -->
-      <div class="settings-box embedded"
+      <div class="settings-box"
           hidden$="[[!showAutoConnect_(networkProperties)]]">
         <paper-checkbox checked="{{autoConnect_}}">
           $i18n{networkAutoConnect}
         </paper-checkbox>
         <cr-policy-network-indicator
             property="[[getManagedAutoConnect_(networkProperties)]]">
         </cr-policy-network-indicator>
       </div>
+      <!-- SIM Info (Cellular only). -->
+      <div class="settings-box single-column stretch">
+        <network-siminfo
+            editable on-siminfo-change="onNetworkPropertyChange_"
+            hidden$="[[!showCellularSim_(networkProperties)]]"
+            network-properties="[[networkProperties]]"
+            networking-private="[[networkingPrivate]]">
+        </network-siminfo>
+      </div>
+      <!-- IP Address. -->
+      <div class="settings-box two-line single-column stretch"
+           hidden$="[[!IPAddress_]]">
+        <div>$i18n{networkIPAddress}</div>
+        <div class="secondary">[[IPAddress_]]</div>
+      </div>
+      <!-- Properties to always show if present. -->
+      <network-property-list hidden$="[[!hasInfoFields_(networkProperties)]]"
+          fields="[[getInfoFields_(networkProperties)]]"
+          property-dict="[[networkProperties]]">
+      </network-property-list>
     </div>
 
-    <!-- SIM Info (Cellular only). -->
-    <network-siminfo
-        editable on-siminfo-change="onNetworkPropertyChange_"
-        hidden$="[[!showCellularSim_(networkProperties)]]"
-        network-properties="[[networkProperties]]"
-        networking-private="[[networkingPrivate]]">
-    </network-siminfo>
-
-    <!-- IP Address. -->
-    <div class="settings-box two-line single-column" hidden$="[[!IPAddress_]]">
-      <div>$i18n{networkIPAddress}</div>
-      <div class="secondary">[[IPAddress_]]</div>
-    </div>
-
-    <!-- Properties to always show if present. -->
-    <network-property-list hidden$="[[!hasInfoFields_(networkProperties)]]"
-        fields="[[getInfoFields_(networkProperties)]]"
-        property-dict="[[networkProperties]]">
-    </network-property-list>
-
     <!-- Advanced toggle. -->
     <div class="settings-box" actionable on-tap="toggleAdvancedExpanded_"
         hidden$="[[!hasAdvancedOrDeviceFields_(networkProperties)]]">
       <div class="start">$i18n{networkSectionAdvanced}</div>
       <cr-expand-button id="expandButton" expanded="{{advancedExpanded_}}">
       </cr-expand-button>
     </div>
 
     <!-- Advanced section -->
     <iron-collapse opened="[[advancedExpanded_]]">
@@ skipping 41 matching lines @@
           <div class="subtitle">$i18n{networkSectionProxy}</div>
           <network-proxy editable on-proxy-change="onProxyChange_"
               network-properties="[[networkProperties]]">
           </network-proxy>
         </div>
       </div>
     </iron-collapse>
   </template>
   <script src="internet_detail_page.js"></script>
 </dom-module>