MD Settings: Internet details: Fix proxy toggle and polish

This CL:
* Moves the 'Use same proxy for all protocols' into a separate settings-box and removes the custom formatting
* Uses more standard vars for spacing

BUG=698008
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2723403004
Cr-Commit-Position: refs/heads/master@{#454931}

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

@@ -32,10 +32,6 @@
         -webkit-padding-end: 8px;
       }
 
-      cr-policy-network-indicator {
-        -webkit-margin-start: 10px;
-      }
-
       iron-collapse {
         margin: 10px 0;
       }
@@ -44,6 +40,11 @@
         -webkit-margin-end: 10px;
       }
 
+      paper-toggle-button,
+      cr-policy-network-indicator {
+        -webkit-margin-start: var(--checkbox-spacing);
+      }
+
       /* Use <span> for subtitles so as not to interfere with
        * settings-box:first-of-type. */
       span.subtitle {
@@ -81,10 +82,6 @@
       #networkState[connected] {
         color: var(--google-green-500);
       }
-
-      #proxyDiv {
-        max-width: 500px;
-      }
     </style>
     <!-- Title section: Icon + name + connection state. -->
     <div class="settings-box first">

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

@@ -25,7 +25,7 @@
       }
 
       cr-policy-network-indicator {
-        padding: 0 var(--cr-icon-padding);
+        -webkit-margin-start: var(--checkbox-spacing);
       }
     </style>
     <template is="dom-repeat" items="[[fields]]"

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

@@ -47,10 +47,6 @@
       #exceptionsDiv network-proxy-exclusions {
         margin: 10px 0;
       }
-
-      #proxyDiv paper-toggle-button {
-        padding: 10px 0;
-      }
     </style>
 
     <!-- Policy indicator. Only one dom-if below will be shown. -->
@@ -124,18 +120,20 @@
     </div>
 
     <!-- Manual -->
-    <div id="proxyDiv" class="settings-box continuation single-column indent"
+    <div class="settings-box continuation indent"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
-      <div class="flex layout horizontal">
-        <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 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"
+        hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
       <div hidden$="[[!useSameProxy_]]" class="layout vertical">
         <network-proxy-input
             on-proxy-change="onProxyInputChange_"

ui/webui/resources/cr_elements/policy/cr_policy_network_indicator.html

@@ -17,10 +17,11 @@
     }
   </style>
   <template>
-    <iron-icon id="indicator" tabindex="0" hidden$="[[!indicatorVisible]]"
-        icon="[[indicatorIcon]]">
+    <iron-icon id="indicator" tabindex="0" aria-describedby="tooltip"
+        hidden$="[[!indicatorVisible]]" icon="[[indicatorIcon]]">
     </iron-icon>
-    <paper-tooltip for="indicator" position="top" fit-to-visible-bounds>
+    <paper-tooltip id="tooltip" for="indicator" position="top"
+        fit-to-visible-bounds>
       [[indicatorTooltip]]
     </paper-tooltip>
   </template>