Settings > Network > Proxy: Use 'suffix' slot

Bug: 829272
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I79f0be1b2c5751cf62a5c4cfed1dad30fe1f6358
Reviewed-on: https://chromium-review.googlesource.com/1096285
Commit-Queue: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#567031}

ui/webui/resources/cr_components/chromeos/network/network_proxy.html

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -18,7 +19,7 @@
 
 <dom-module id="network-proxy">
   <template>
-    <style include="network-shared md-select cr-hidden-style iron-flex iron-flex-alignment">
+    <style include="network-shared cr-hidden-style iron-flex iron-flex-alignment md-select paper-button-style">
       network-proxy-input {
         margin-bottom: 10px;
       }
@@ -28,11 +29,7 @@
       }
 
       #addException {
-        margin-top: 8px;
-      }
-
-      #addException cr-input {
-        margin-bottom: 0;
+        margin-top: 10px;
       }
 
       #manualProxy {
@@ -137,13 +134,13 @@
         </network-proxy-exclusions>
         <div id="addException" class="layout horizontal center">
           <cr-input id="proxyExclusion" class="flex">
+            <paper-button on-tap="onAddProxyExclusionTap_" slot="suffix">
+              [[i18n('networkProxyAddException')]]
+            </paper-button>
             <iron-a11y-keys keys="enter"
                 on-keys-pressed="onAddProxyExclusionTap_">
             </iron-a11y-keys>
           </cr-input>
-          <paper-button on-tap="onAddProxyExclusionTap_">
-            [[i18n('networkProxyAddException')]]
-          </paper-button>
         </div>
       </div>
 

ui/webui/resources/cr_elements/cr_input/cr_input.html

@@ -33,6 +33,11 @@
         pointer-events: none;
       }
 
+      /* Margin between <input> and <paper-button> in the 'suffix' slot */
+      :host ::slotted(paper-button[slot=suffix]) {
+        -webkit-margin-start: var(--cr-button-edge-spacing);
+      }
+
       :host([invalid]) #label {
         color: var(--cr-input-error-color);
       }