Add network proxy input to md-settings internet details

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

Index: chrome/browser/resources/settings/internet_page/network_proxy.js
diff --git a/chrome/browser/resources/settings/internet_page/network_proxy.js b/chrome/browser/resources/settings/internet_page/network_proxy.js
new file mode 100644
index 0000000000000000000000000000000000000000..94f1bfca1bdbdd1d39d67001eb5f3c552b789ef5
--- /dev/null
+++ b/chrome/browser/resources/settings/internet_page/network_proxy.js
@@ -0,0 +1,231 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element for displaying and editing network proxy
+ * values.
+ */
+Polymer({
+  is: 'network-proxy',
+
+  properties: {
+    /**
+     * The current state containing the IP Config properties to display and
+     * modify.
+     * @type {?CrOnc.NetworkStateProperties}
+     */
+    networkState: {
+      type: Object,
+      value: null,
+      observer: 'networkStateChanged_'
+    },
+
+    /**
+     * Whether or not the proxy values can be edited.
+     */
+    editable: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * UI visible / edited proxy configuration.
+     * @type {!CrOnc.ProxySettings}
+     */
+    proxy: {
+      type: Object,
+      value: function() { return this.createDefaultProxySettings_(); }
+    },
+
+    /**
+     * The Web Proxy Auto Discovery URL extracted from networkState.
+     */
+    WPAD: {
+      type: String,
+      value: ''
+    },
+
+    /**
+     * Whetner or not to use the same manual proxy for all protocols.
+     */
+    useSameProxy: {
+      type: Boolean,
+      value: false
+    },
+
+    /**
+     * Array of proxy configuration types.
+     * @type {!Array<string>}
+     * @const
+     */
+    proxyTypes_: {
+      type: Array,
+      value: [
+        CrOnc.ProxySettingsType.DIRECT,
+        CrOnc.ProxySettingsType.PAC,
+        CrOnc.ProxySettingsType.WPAD,
+        CrOnc.ProxySettingsType.MANUAL
+      ],
+      readOnly: true
+    },
+
+    /**
+     * Object providing proxy type values for data binding.
+     * @type {!Object}
+     * @const
+     */
+    ProxySettingsType: {
+      type: Object,
+      value: {
+        DIRECT: CrOnc.ProxySettingsType.DIRECT,

[michaelpg, 2015/07/10 00:38:30]

It's sad that we have to do this :-(

[stevenjb, 2015/07/10 17:31:59]

Acknowledged.

+        PAC: CrOnc.ProxySettingsType.PAC,
+        MANUAL: CrOnc.ProxySettingsType.MANUAL,
+        WPAD: CrOnc.ProxySettingsType.WPAD
+      },
+      readOnly: true
+    },
+  },
+
+  /**
+   * Polymer networkState changed method.
+   */
+  networkStateChanged_: function() {
+    console.log('NetworkProxy.networkStateChanged_');
+    if (!this.networkState)
+      return;
+
+    var defaultProxy = this.createDefaultProxySettings_();
+    var proxy = this.networkState.ProxySettings || {};
+
+    // Ensure that all proxy settings object properties are specified.
+    proxy.ExcludeDomains = proxy.ExcludeDomains || defaultProxy.ExcludeDomains;
+    proxy.Manual = proxy.Manual || {};
+    proxy.Manual.HTTPProxy =
+        proxy.Manual.HTTPProxy || defaultProxy.Manual.HTTPProxy;
+    proxy.Manual.SecureHTTPProxy =
+        proxy.Manual.SecureHTTPProxy || defaultProxy.Manual.SecureHTTPProxy;
+    proxy.Manual.FTPProxy =
+        proxy.Manual.FTPProxy || defaultProxy.Manual.FTPProxy;
+    proxy.Manual.SOCKS = proxy.Manual.SOCKS || defaultProxy.Manual.SOCKS;
+    proxy.PAC = proxy.PAC || defaultProxy.PAC;
+    proxy.Type = proxy.Type || defaultProxy.Type;
+
+    this.set('proxy', proxy);
+    this.$$('#selectType').value = proxy.Type;

[michaelpg, 2015/07/10 00:38:30]

this.$.selectType

[stevenjb, 2015/07/10 17:31:59]

Done.

+
+    // Set the Web Proxy Auto Discovery URL.
+    var ipv4 = CrOnc.getIPConfigForType(this.networkState, CrOnc.IPType.IPV4);
+    this.WPAD = ipv4.WebProxyAutoDiscoveryUrl;
+  },
+
+  /**
+   * @return {CrOnc.ManualProxySettings} An empty/default proxy settings object.
+   */
+  createDefaultProxySettings_: function() {
+    return {
+      Type: CrOnc.ProxySettingsType.DIRECT,
+      ExcludeDomains: [],
+      Manual: {
+        HTTPProxy: { Host: '', Port: 80 },
+        SecureHTTPProxy: { Host: '', Port: 80 },
+        FTPProxy: { Host: '', Port: 80 },
+        SOCKS: { Host: '', Port: 1080 }
+      },
+      PAC: ''
+    };
+  },
+
+  /**
+   * Called when the proxy is changed in the UI.
+   */
+  sendProxyChanged_: function() {
+    this.fire('changed', {
+      field: 'ProxySettings',
+      value: this.proxy
+    });
+  },
+
+  /**
+   * Event triggered when the selected proxy type changes.
+   * @param {Event} event The select node changed event.
+   * @private
+   */
+  onTypeChange_: function(event) {
+    var type = this.proxyTypes_[event.target.selectedIndex];
+    console.debug('Proxy type changed: ' + type);
+    this.set('proxy.Type', type);
+    if (type != CrOnc.ProxySettingsType.MANUAL)
+      this.sendProxyChanged_();
+  },
+
+  /**
+   * Event triggered when a proxy value changes.
+   * @param {Event} event The proxy value changed event.
+   * @private
+   */
+  onProxyInputChanged_: function(event) {
+    console.debug('Proxy input changed');
+    console.debug(this.proxy);
+    if (this.useSameProxy) {
+      var defaultProxy = this.proxy.Manual.HTTPProxy;
+      this.copyProxyLocation_(defaultProxy, this.proxy.Manual.SecureHTTPProxy);

[michaelpg, 2015/07/10 00:38:30]

Does setting this way break data binding?

[stevenjb, 2015/07/10 17:31:59]

Good catch, you're right, it won't trigger a change notification, which could
result in a subtle bug. Changed to use set() and Object.assign.

+      this.copyProxyLocation_(defaultProxy, this.proxy.Manual.FTPProxy);
+      this.copyProxyLocation_(defaultProxy, this.proxy.Manual.SOCKS);
+    }
+    this.sendProxyChanged_();
+  },
+
+  /**
+   * @param {CrOnc.ProxyLocation} src The proxy location to copy.
+   * @param {CrOnc.ProxyLocation} dst The proxy location to set.
+   * @private
+   */
+  copyProxyLocation_: function(src, dst) {
+    dst.Host = src.Host;
+    dst.Port = src.Port;
+  },
+
+  onAddProxyExclusion_: function(event) {

[michaelpg, 2015/07/10 00:38:30]

nit: annotate this & below

[stevenjb, 2015/07/10 17:31:59]

Done.

+    var value = this.$$('#proxyExclusion').value;

[michaelpg, 2015/07/10 00:38:30]

this.$

[stevenjb, 2015/07/10 17:31:59]

Done.

+    if (!value)
+      return;
+    this.push('proxy.ExcludeDomains', value);
+    // Clear input.
+    this.$$('#proxyExclusion').value = '';

[michaelpg, 2015/07/10 00:38:30]

this.$

[stevenjb, 2015/07/10 17:31:59]

Done.

+    this.sendProxyChanged_();
+  },
+
+  onRemoveProxyExclusion_: function(event) {
+    var index = event.detail;
+    console.debug('onRemoveProxyExclusion: ' + index);
+    this.splice('proxy.ExcludeDomains', index, 1);
+    this.sendProxyChanged_();
+  },
+
+  /**
+   * @param {string} proxyType The proxy type.
+   * @return {string} The description for |proxyType|.
+   * @private
+   */
+  proxyTypeDesc_: function(proxyType) {
+    // TODO(stevenjb): Translate.
+    if (proxyType == CrOnc.ProxySettingsType.MANUAL)
+      return 'Manual proxy configuration';
+    if (proxyType == CrOnc.ProxySettingsType.PAC)
+      return 'Automatic proxy configuration';
+    if (proxyType == CrOnc.ProxySettingsType.WPAD)
+      return 'Web proxy autodiscovery';
+    return 'Direct Internet connection';
+  },
+
+  /**
+   * @param {string} property The property to test
+   * @param {string} value The value to test against
+   * @return {boolean} True if property == value
+   * @private
+   */
+  matches_: function(property, value) {
+    return property == value;
+  }
+});