MD Settings: Fix Network section styling

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

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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/md_select_css.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input-container.html">
@@ skipping 17 matching lines @@
 
       extension-controlled-indicator {
         -webkit-margin-start: 0;
         width: 100%;
       }
 
       network-proxy-input {
         margin-bottom: 10px;
       }
 
-      /* Use .middle spacing but no flex. */
-      .settings-box .middle {
-        flex: none;
-      }
-
       #exceptionsDiv {
         padding: 10px 0;
       }
 
-      #exceptionsDiv network-proxy-exclusions {
+      network-proxy-exclusions {
         margin: 10px 0;
       }
     </style>
 
     <!-- Policy indicator. Only one dom-if below will be shown. -->
     <template is="dom-if"
         if="[[shouldShowNetworkPolicyIndicator_(networkProperties)]]">
-      <div class="settings-box continuation single-column">
+      <div class="list-frame">
         <div class="layout horizontal center">
           <cr-policy-network-indicator
               property="[[networkProperties.ProxySettings.Type]]"
               no-extension-indicator>
           </cr-policy-network-indicator>
           <div>$i18n{networkProxyEnforcedPolicy}</div>
         </div>
       </div>
     </template>
     <template is="dom-if"
         if="[[shouldShowExtensionIndicator_(networkProperties)]]">
-      <div class="settings-box continuation single-column">
+      <div class="list-frame">
         <extension-controlled-indicator
             extension-id="[[prefs.proxy.extensionId]]"
             extension-name="[[prefs.proxy.controlledByName]]"
             extension-can-be-disabled="[[prefs.proxy.extensionCanBeDisabled]]">
         </extension-controlled-indicator>
       </div>
     </template>
 
     <!-- Allow shared proxies -->
-    <div class="settings-box continuation"
+    <div class="settings-box continuation indent"

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

I'm glad the .list-frame worked out in the cases above. Can it be further
applied here and below?

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

This one would work, but only because the single control spans the entire width.
The others would break. I'd rather keep all of the "control" boxes as
settings-box.

         hidden$="[[!shouldShowAllowShared_(
             networkProperties.ProxySettings.Type)]]">
       <settings-toggle-button id="allowShared" class="start"
           pref="{{prefs.settings.use_shared_proxies}}"
           label="$i18n{networkProxyAllowShared}"
           on-settings-boolean-control-change="onAllowSharedProxiesChange_"
           no-set-pref>
       </settings-toggle-button>
     </div>
 
     <!-- Proxy type dropdown -->
-    <div class="settings-box continuation">
+    <div class="settings-box continuation indent">
       <div class="start">$i18n{networkProxyConnectionType}</div>
       <div class="md-select-wrapper">
         <select id="proxyType" class="md-select" on-change="onTypeChange_"
             value="[[proxy_.Type]]"
             disabled="[[!isEditable_('Type', networkProperties, editable,
                 useSharedProxies_)]]">
           <template is="dom-repeat" items="[[proxyTypes_]]">
             <option value="[[item]]">[[getProxyTypeDesc_(item)]]</option>
           </template>
         </select>
         <span class="md-select-underline"></span>
       </div>
     </div>
 
     <!-- Autoconfiguration (PAC) -->
     <div class="settings-box continuation indent"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.PAC)]]">
       <div>$i18n{networkProxyAutoConfig}</div>
-      <paper-input no-label-float class="middle flex" value="{{proxy_.PAC}}"
+      <paper-input no-label-float class="middle" value="{{proxy_.PAC}}"
           disabled="[[!isEditable_('PAC', networkProperties, editable,
               useSharedProxies_)]]"
           on-change="onPACChange_">
       </paper-input>
     </div>
 
     <!-- Web Proxy Auto Discovery (WPAD) -->
     <div class="settings-box continuation indent"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.WPAD)]]">
       <div>$i18n{networkSectionWpad}</div>
-      <div class="middle flex">[[WPAD_]]</div>
+      <div class="middle">[[WPAD_]]</div>
     </div>
 
     <!-- Manual -->
     <div class="settings-box continuation indent"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
       <div id="networkProxyToggleLabel" class="flex">
         $i18n{networkProxyUseSame}
       </div>
       <paper-toggle-button checked="{{useSameProxy_}}"
           disabled="[[!isEditable_('Type', networkProperties, editable,
               useSharedProxies_)]]"
           aria-labelledby="networkProxyToggleLabel">
       </paper-toggle-button>
     </div>
 
-    <div class="settings-box continuation single-column indent"
+    <div class="list-frame"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
       <div hidden$="[[!useSameProxy_]]" class="layout vertical">
         <network-proxy-input
             on-proxy-change="onProxyInputChange_"
             editable="[[isEditable_('Manual.HTTPProxy.Host', networkProperties,
                 editable, useSharedProxies_)]]"
             value="{{proxy_.Manual.HTTPProxy}}"
             label="$i18n{networkProxy}">
         </network-proxy-input>
       </div>
@@ skipping 68 matching lines @@
         </paper-button>
         <paper-button class="action-button"
             on-tap="onAllowSharedDialogConfirm_">
           $i18n{confirm}
         </paper-button>
       </div>
     </dialog>
   </template>
   <script src="network_proxy.js"></script>
 </dom-module>