Settings: Network: Fix flex layout

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/hidden_style_css.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/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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/iron-flex-layout/iron-flex-layout-classes.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">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../prefs/prefs_behavior.html">
 <link rel="import" href="../settings_vars_css.html">
 <link rel="import" href="internet_shared_css.html">
 <link rel="import" href="network_proxy_exclusions.html">
 <link rel="import" href="network_proxy_input.html">
 
 <dom-module id="network-proxy">
   <template>
-    <style include="internet-shared md-select cr-hidden-style">
+    <style include="internet-shared md-select cr-hidden-style iron-flex">
       cr-policy-network-indicator {
         -webkit-margin-end: 10px;
       }
 
       extension-controlled-indicator {
         -webkit-margin-start: 0;
         width: 100%;
       }
 
       network-proxy-input {
         margin-bottom: 10px;
       }
 
       #exceptionsDiv {
         padding: 10px 0;
       }
 
       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="list-frame">
         <div class="layout horizontal center">

[dschuyler, 2017/05/16 23:19:53]

Will .settings-row work here in place of "layout horizontal center" (and avoid
importing the extra iron-flex-layout-classes.html).

[stevenjb, 2017/05/16 23:35:05]

Not exactly. It adds some other stuff that doesn't quite work right here.
Network layout is kind of unique.

           <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)]]">
@@ skipping 61 matching lines @@
       </div>
       <paper-toggle-button checked="{{useSameProxy_}}"
           disabled="[[!isEditable_('Type', networkProperties, editable,
               useSharedProxies_)]]"
           aria-labelledby="networkProxyToggleLabel">
       </paper-toggle-button>
     </div>
 
     <div class="list-frame"
         hidden$="[[!matches_(proxy_.Type, ProxySettingsType_.MANUAL)]]">
       <div hidden$="[[!useSameProxy_]]" class="layout vertical">

[dschuyler, 2017/05/16 23:19:53]

.single-column may work in place of "layout vertical".

[stevenjb, 2017/05/16 23:35:05]

Again, that also sets a couple of extra properties that I'm not sure about.

         <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">
         <network-proxy-input
@@ 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>