MD Settings: Internet details: Fix proxy toggle and polish

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 29 matching lines @@
         flex: none;
       }
 
       #exceptionsDiv {
         padding: 10px 0;
       }
 
       #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. -->
     <template is="dom-if"
         if="[[shouldShowNetworkPolicyIndicator_(networkProperties)]]">
       <div class="settings-box continuation single-column">
         <div class="layout horizontal center">
           <cr-policy-network-indicator
               property="[[networkProperties.ProxySettings.Type]]">
           </cr-policy-network-indicator>
@@ skipping 52 matching lines @@
     </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>
 
     <!-- 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)]]">

[Dan Beam, 2017/03/04 02:25:55]

every time i see a hidden$= instead of a dom-if, and angel loses its wings

[stevenjb, 2017/03/06 18:33:49]

If it helps you feel better, all of network-proxy is inside a dom-if :)

FWIW, I have a mental to-do to selectively replace hidden$ with dom-if
throughout Internet (which predates our use of dom-if), but will do so
separately (and it's not super high priority). I think we want to un-inline this
UI at the same time. I've introduced bugs by switching from hidden$ without
carefully auditing the JS (e.g. $. may not work, and properties need default
values).

       <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>
       <div hidden$="[[useSameProxy_]]" class="layout vertical">
@@ skipping 67 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>