MD Settings: Internet: Fix Proxy UI

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
index e3defda2468a441c81fdac3dfcb06bc213a54eab..01a2a083aa86c49d0377a5ceafb262fe7df20f1b 100644
--- a/chrome/browser/resources/settings/internet_page/network_proxy.js
+++ b/chrome/browser/resources/settings/internet_page/network_proxy.js
@@ -9,7 +9,12 @@
 Polymer({
   is: 'network-proxy',
 
-  behaviors: [CrPolicyNetworkBehavior, I18nBehavior, PrefsBehavior],
+  behaviors: [
+    CrPolicyNetworkBehavior,
+    I18nBehavior,
+    PrefsBehavior,
+    settings.RouteObserverBehavior,
+  ],
 
   properties: {
     /**
@@ -30,17 +35,20 @@ Polymer({
 
     /**
      * UI visible / edited proxy configuration.
-     * @type {!CrOnc.ProxySettings}
+     * @private {!CrOnc.ProxySettings}
      */
-    proxy: {
+    proxy_: {
       type: Object,
       value: function() {
         return this.createDefaultProxySettings_();
       },
     },
 
-    /** The Web Proxy Auto Discovery URL extracted from networkProperties. */
-    WPAD: {
+    /**
+     * The Web Proxy Auto Discovery URL extracted from networkProperties.
+     * @private
+     */
+    WPAD_: {
       type: String,
       value: '',
     },
@@ -113,14 +121,24 @@ Polymer({
   savedExcludeDomains_: undefined,
 
   /**
-   * Set to true the first time we receive a manual proxy. Used to set the
-   * initial |useSameProxy_| value.
+   * Set to true while modifying proxy values so that an update does not
+   * override the edited values.
    * @private {boolean}
    */
-  receivedManualProxy_: false,
+  proxyModified_: false,
+
+  /** @protected settings.RouteObserverBehavior */
+  currentRouteChanged: function(newRoute) {
+    this.proxyModified_ = false;
+    this.proxy_ = this.createDefaultProxySettings_();
+    if (newRoute == settings.Route.NETWORK_DETAIL)
+      this.updateProxy_();
+  },
 
   /** @private */
   networkPropertiesChanged_: function() {
+    if (this.proxyModified_)
+      return;  // Ignore update.
     this.updateProxy_();
   },
 
@@ -149,23 +167,28 @@ Polymer({
           CrOnc.getActiveValue(proxySettings.Type));
       if (proxySettings.Manual) {
         proxy.Manual.HTTPProxy = /** @type {!CrOnc.ProxyLocation|undefined} */ (
-            CrOnc.getSimpleActiveProperties(proxySettings.Manual.HTTPProxy));
+                                     CrOnc.getSimpleActiveProperties(
+                                         proxySettings.Manual.HTTPProxy)) ||
+            {Host: '', Port: 80};
         proxy.Manual.SecureHTTPProxy =
             /** @type {!CrOnc.ProxyLocation|undefined} */ (
                 CrOnc.getSimpleActiveProperties(
-                    proxySettings.Manual.SecureHTTPProxy));
-        proxy.Manual.FTPProxy = /** @type {!CrOnc.ProxyLocation|undefined} */ (
-            CrOnc.getSimpleActiveProperties(proxySettings.Manual.FTPProxy));
-        proxy.Manual.SOCKS = /** @type {!CrOnc.ProxyLocation|undefined} */ (
-            CrOnc.getSimpleActiveProperties(proxySettings.Manual.SOCKS));
-        if (!this.receivedManualProxy_) {
-          let json_http = JSON.stringify(proxy.Manual.HTTPProxy);
-          this.useSameProxy_ =
-              json_http == JSON.stringify(proxy.Manual.SecureHTTPProxy) &&
-              json_http == JSON.stringify(proxy.Manual.FTPProxy) &&
-              json_http == JSON.stringify(proxy.Manual.SOCKS);
-          this.receivedManualProxy_ = true;
-        }
+                    proxySettings.Manual.SecureHTTPProxy)) ||
+            proxy.Manual.HTTPProxy;
+        proxy.Manual.FTPProxy =
+            /** @type {!CrOnc.ProxyLocation|undefined} */ (
+                CrOnc.getSimpleActiveProperties(
+                    proxySettings.Manual.FTPProxy)) ||
+            proxy.Manual.HTTPProxy;
+        proxy.Manual.SOCKS =
+            /** @type {!CrOnc.ProxyLocation|undefined} */ (
+                CrOnc.getSimpleActiveProperties(proxySettings.Manual.SOCKS)) ||
+            proxy.Manual.HTTPProxy;
+        let json_http = JSON.stringify(proxy.Manual.HTTPProxy);
+        this.useSameProxy_ =
+            json_http == JSON.stringify(proxy.Manual.SecureHTTPProxy) &&
+            json_http == JSON.stringify(proxy.Manual.FTPProxy) &&
+            json_http == JSON.stringify(proxy.Manual.SOCKS);
       }
       if (proxySettings.ExcludeDomains) {
         proxy.ExcludeDomains = /** @type {!Array<string>|undefined} */ (
@@ -181,7 +204,7 @@ Polymer({
     // Set the Web Proxy Auto Discovery URL.
     var ipv4 =
         CrOnc.getIPConfigForType(this.networkProperties, CrOnc.IPType.IPV4);
-    this.WPAD = (ipv4 && ipv4.WebProxyAutoDiscoveryUrl) || '';
+    this.WPAD_ = (ipv4 && ipv4.WebProxyAutoDiscoveryUrl) || '';
 
     this.setProxyAsync_(proxy);
   },
@@ -191,17 +214,16 @@ Polymer({
    * @private
    */
   setProxyAsync_: function(proxy) {
-    // Set this.proxy after dom-repeat has been stamped.
+    // Set this.proxy_ after dom-repeat has been stamped.
     this.async(function() {
-      this.proxy = proxy;
+      this.proxy_ = proxy;
+      this.proxyModified_ = false;
     }.bind(this));
   },
 
   /** @private */
   useSameProxyChanged_: function() {
-    if (!this.receivedManualProxy_)
-      return;
-    this.sendProxyChange_();
+    this.proxyModified_ = true;
   },
 
   /** @private */
@@ -234,32 +256,34 @@ Polymer({
    * @private
    */
   sendProxyChange_: function() {
-    if (this.proxy.Type == CrOnc.ProxySettingsType.MANUAL) {
-      var proxy =
-          /** @type {!CrOnc.ProxySettings} */ (Object.assign({}, this.proxy));
-      var defaultProxy = proxy.Manual.HTTPProxy;
+    if (this.proxy_.Type == CrOnc.ProxySettingsType.MANUAL) {
+      let proxy =
+          /** @type {!CrOnc.ProxySettings} */ (Object.assign({}, this.proxy_));
+      let manual = proxy.Manual;
+      let defaultProxy = manual.HTTPProxy;
       if (!defaultProxy || !defaultProxy.Host)
         return;
-      if (this.useSameProxy_ || !proxy.Manual.SecureHTTPProxy) {
+      if (this.useSameProxy_ || !this.get('SecureHTTPProxy.Host', manual)) {
         proxy.Manual.SecureHTTPProxy = /** @type {!CrOnc.ProxyLocation} */ (
             Object.assign({}, defaultProxy));
       }
-      if (this.useSameProxy_ || !proxy.Manual.FTPProxy) {
+      if (this.useSameProxy_ || !this.get('FTPProxy.Host', manual)) {
         proxy.Manual.FTPProxy = /** @type {!CrOnc.ProxyLocation} */ (
             Object.assign({}, defaultProxy));
       }
-      if (this.useSameProxy_ || !proxy.Manual.SOCKS) {
+      if (this.useSameProxy_ || !this.get('SOCKS.Host', manual)) {
         proxy.Manual.SOCKS = /** @type {!CrOnc.ProxyLocation} */ (
             Object.assign({}, defaultProxy));
       }
       this.savedManual_ = Object.assign({}, proxy.Manual);
       this.savedExcludeDomains_ = proxy.ExcludeDomains;
-      this.proxy = proxy;
-    } else if (this.proxy.Type == CrOnc.ProxySettingsType.PAC) {
-      if (!this.proxy.PAC)
+      this.proxy_ = proxy;
+    } else if (this.proxy_.Type == CrOnc.ProxySettingsType.PAC) {
+      if (!this.proxy_.PAC)
         return;
     }
-    this.fire('proxy-change', {field: 'ProxySettings', value: this.proxy});
+    this.fire('proxy-change', {field: 'ProxySettings', value: this.proxy_});
+    this.proxyModified_ = false;
   },
 
   /**
@@ -271,19 +295,23 @@ Polymer({
     let target = /** @type {!HTMLSelectElement} */ (event.target);
     var type = /** @type {chrome.networkingPrivate.ProxySettingsType} */ (
         target.value);
-    this.set('proxy.Type', type);
-    this.sendProxyChange_();
+    this.set('proxy_.Type', type);
+    if (type == CrOnc.ProxySettingsType.MANUAL)
+      this.proxyModified_ = true;
+    else
+      this.sendProxyChange_();
   },
 
-  /**
-   * Event triggered when a proxy value changes.
-   * @param {Event} event The proxy value change event.
-   * @private
-   */
-  onProxyInputChange_: function(event) {
+  /** @private */
+  onPACChange_: function() {
     this.sendProxyChange_();
   },
 
+  /** @private */
+  onProxyInputChange_: function() {
+    this.proxyModified_ = true;
+  },
+
   /**
    * Event triggered when a proxy exclusion is added.
    * @param {Event} event The add proxy exclusion event.
@@ -293,10 +321,10 @@ Polymer({
     var value = this.$.proxyExclusion.value;
     if (!value)
       return;
-    this.push('proxy.ExcludeDomains', value);
+    this.push('proxy_.ExcludeDomains', value);
     // Clear input.
     this.$.proxyExclusion.value = '';
-    this.sendProxyChange_();
+    this.proxyModified_ = true;
   },
 
   /**
@@ -305,6 +333,11 @@ Polymer({
    * @private
    */
   onProxyExclusionsChange_: function(event) {
+    this.proxyModified_ = true;
+  },
+
+  /** @private */
+  onSaveProxyTap_: function() {
     this.sendProxyChange_();
   },
 
@@ -361,14 +394,30 @@ Polymer({
   },
 
   /**
+   * @param {string} propertyName
+   * @return {boolean} Whether the named property setting is editable.
+   * @private
+   */
+  isEditable_: function(propertyName) {
+    if (!this.editable || (this.isShared_() && !this.useSharedProxies_))
+      return false;
+    if (!this.networkProperties.hasOwnProperty('ProxySettings'))
+      return true;  // No proxy settings defined, so not enforced.
+    let property = /** @type {!CrOnc.ManagedProperty|undefined} */ (
+        this.get('ProxySettings.' + propertyName, this.networkProperties));
+    if (!property)
+      return true;
+    return this.isPropertyEditable_(property);
+  },
+
+  /**
    * @param {!CrOnc.ManagedProperty|undefined} property
-   * @return {boolean} Whether the property setting is enforced.
+   * @return {boolean} Whether |property| is editable.
    * @private
    */
-  isEditable_: function(property) {
-    return this.editable && !this.isNetworkPolicyEnforced(property) &&
-        !this.isExtensionControlled(property) &&
-        (!this.isShared_() || this.useSharedProxies_);
+  isPropertyEditable_: function(property) {
+    return !this.isNetworkPolicyEnforced(property) &&
+        !this.isExtensionControlled(property);
   },
 
   /**
@@ -381,15 +430,13 @@ Polymer({
   },
 
   /**
-   * Used to check the editable state for proxy related UI that may or may
-   * not be directly controlled by a policy. We use the enforced state of the
-   * 'ProxySettings.Type' property for these controls.
-   * @return {boolean} Whether the proxy control is editable.
+   * @return {boolean}
    * @private
    */
-  isProxyEditable_: function() {
-    let property = this.getProxySettingsTypeProperty_();
-    return !property || this.isEditable_(property);
+  isSaveManualProxyEnabled_: function() {
+    if (!this.proxyModified_)
+      return false;
+    return !!this.get('HTTPProxy.Host', this.proxy_.Manual);
   },
 
   /**