redesign and reimplement proxy config service and tracker, revise proxy ui on cros

chrome/browser/resources/options/chromeos/proxy_options.js

 // Copyright (c) 2011 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.
 
 cr.define('options', function() {
 
   var OptionsPage = options.OptionsPage;
   var Preferences = options.Preferences;
 
   /////////////////////////////////////////////////////////////////////////////
@@ skipping 25 matching lines @@
   }
 
   ProxyOptions.prototype = {
     // Inherit ProxyOptions from OptionsPage.
     __proto__: OptionsPage.prototype,
 
     /**
      * Initializes ProxyOptions page.
      */
     initializePage: function() {
-      // Call base class implementation to starts preference initialization.
+      // Call base class implementation to start preference initialization.
       OptionsPage.prototype.initializePage.call(this);
 
       // Set up ignored page.
       options.proxyexceptions.ProxyExceptions.decorate($('ignoredHostList'));
 
       this.addEventListener('visibleChange', this.handleVisibleChange_);
       $('removeHost').addEventListener('click', this.handleRemoveExceptions_);
       $('addHost').addEventListener('click', this.handleAddException_);
       $('directProxy').addEventListener('click', this.disableManual_);
       $('manualProxy').addEventListener('click', this.enableManual_);
       $('autoProxy').addEventListener('click', this.disableManual_);
       $('proxyAllProtocols').addEventListener('click', this.toggleSingle_);
 
       observePrefsUI($('directProxy'));
       observePrefsUI($('manualProxy'));
       observePrefsUI($('autoProxy'));
       observePrefsUI($('proxyAllProtocols'));
     },
 
-    proxyListInitalized_: false,
+    proxyListInitialized_: false,
 
     /**
      * Update controls state.
      * @public
      */
     updateControls: function() {
+      this.updateBannerVisibility_();
       this.toggleSingle_();
       if ($('manualProxy').checked) {
         this.enableManual_();
       } else {
         this.disableManual_();
       }
-      if (!this.proxyListInitalized_ && this.visible) {
-        this.proxyListInitalized_ = true;
+      if (!this.proxyListInitialized_ && this.visible) {
+        this.proxyListInitialized_ = true;
         $('ignoredHostList').redraw();
       }
     },
 
     /**
      * Handler for OptionsPage's visible property change event.
      * @private
      * @param {Event} e Property change event.
      */
     handleVisibleChange_: function(e) {
       this.updateControls();
     },
 
     /**
+     * Updates info banner visibility state. This function shows the banner
+     * if proxy is managed or shared-proxies is off for shared network.
+     * @private
+     */
+    updateBannerVisibility_: function() {
+      var bannerDiv = $('info-banner');
+      var controlledBy = $('directProxy').controlledBy;
+      var clickable = false;
+      if (controlledBy == '') {
+        bannerDiv.hidden = true;
+      } else {
+        bannerDiv.hidden = false;
+        $('banner-text').textContent =
+              localStrings.getString(controlledBy);

[xiyuan, 2011/10/04 20:28:25]

Let's put some comments here that controlledBy must match in
proxy_cros_settings_provider.cc and proxy_handler.cc

[kuan, 2011/10/04 21:45:50]

Done.

+        clickable = controlledBy == "enableSharedProxiesBannerText";
+      }
+      if (clickable) {
+        bannerDiv.classList.add("clickable");
+        bannerDiv.addEventListener('click', this.handleSharedProxiesHint_);
+      } else {
+        bannerDiv.classList.remove("clickable");
+        bannerDiv.removeEventListener('click', this.handleSharedProxiesHint_);

[xiyuan, 2011/10/04 20:28:25]

Let's do this block before we add class/event listener.

addEventListener does not check if the handler is already in the listener list.
So if updateBannerVisibility_ is called multiple times, you may end up add
this.handleSharedProxiesHint_ multiple times and it will be called multiple
times on 'click' event.

[kuan, 2011/10/04 21:45:50]

Done.

+      }
+    },
+
+    /**
+     * Handler for "click" event on yellow banner with enable-shared-proxies
+     * hint.
+     * @private
+     * @param {Event} e Click event fired from info-banner.
+     */
+    handleSharedProxiesHint_: function(e) {
+      OptionsPage.navigateToPage("internet");
+    },
+
+    /**
      * Handler for when the user clicks on the checkbox to allow a
      * single proxy usage.
      * @private
      * @param {Event} e Click Event.
      */
     toggleSingle_: function(e) {
       if ($('proxyAllProtocols').checked) {
         $('multiProxy').style.display = 'none';
         $('singleProxy').style.display = 'block';
       } else {
         $('multiProxy').style.display = 'block';
         $('singleProxy').style.display = 'none';
       }
     },
 
     /**
      * Handler for selecting a radio button that will disable the manual
      * controls.
      * @private
      * @param {Event} e Click event.
      */
     disableManual_: function(e) {
+      $('advancedConfig').style.display = 'none';

[xiyuan, 2011/10/04 20:28:25]

nit: $('advancedConfig').hidden = true;

[kuan, 2011/10/04 21:45:50]

Done.

       $('proxyAllProtocols').disabled = true;
       $('proxyHostName').disabled = true;
       $('proxyHostPort').disabled = true;
       $('proxyHostSingleName').disabled = true;
       $('proxyHostSinglePort').disabled = true;
       $('secureProxyHostName').disabled = true;
       $('secureProxyPort').disabled = true;
       $('ftpProxy').disabled = true;
       $('ftpProxyPort').disabled = true;
       $('socksHost').disabled = true;
       $('socksPort').disabled = true;
-      $('newHost').disabled = true;
-      $('removeHost').disabled = true;
-      $('addHost').disabled = true;
-      $('advancedConfig').style.display = 'none';
-      $('proxyConfig').disabled = !$('autoProxy').checked;
+      $('proxyConfig').disabled = $('autoProxy').disabled ||
+                                  !$('autoProxy').checked;
     },
 
     /**
      * Handler for selecting a radio button that will enable the manual
      * controls.
      * @private
      * @param {Event} e Click event.
      */
     enableManual_: function(e) {
-      $('proxyAllProtocols').disabled = false;
-      $('proxyHostName').disabled = false;
-      $('proxyHostPort').disabled = false;
-      $('proxyHostSingleName').disabled = false;
-      $('proxyHostSinglePort').disabled = false;
-      $('secureProxyHostName').disabled = false;
-      $('secureProxyPort').disabled = false;
-      $('ftpProxy').disabled = false;
-      $('ftpProxyPort').disabled = false;
-      $('socksHost').disabled = false;
-      $('socksPort').disabled = false;
-      $('newHost').disabled = false;
-      $('removeHost').disabled = false;
-      $('addHost').disabled = false;
       $('advancedConfig').style.display = '-webkit-box';

[xiyuan, 2011/10/04 20:28:25]

nit: $('advancedConfig').hidden = false;

[kuan, 2011/10/04 21:45:50]

Done.

       $('ignoredHostList').redraw();
+      var all_disabled = $('manualProxy').disabled;
+      $('newHost').disabled = all_disabled;
+      $('removeHost').disabled = all_disabled;
+      $('addHost').disabled = all_disabled;
+      $('proxyAllProtocols').disabled = all_disabled;
+      $('proxyHostName').disabled = all_disabled;
+      $('proxyHostPort').disabled = all_disabled;
+      $('proxyHostSingleName').disabled = all_disabled;
+      $('proxyHostSinglePort').disabled = all_disabled;
+      $('secureProxyHostName').disabled = all_disabled;
+      $('secureProxyPort').disabled = all_disabled;
+      $('ftpProxy').disabled = all_disabled;
+      $('ftpProxyPort').disabled = all_disabled;
+      $('socksHost').disabled = all_disabled;
+      $('socksPort').disabled = all_disabled;
       $('proxyConfig').disabled = true;
     },
 
     /**
      * Handler for "add" event fired from userNameEdit.
      * @private
      * @param {Event} e Add event fired from userNameEdit.
      */
     handleAddException_: function(e) {
       var exception = $('newHost').value;
@@ skipping 29 matching lines @@
   ProxyOptions.setNetworkName = function(network) {
     ProxyOptions.getInstance().setNetworkName(network);
   };
 
   // Export
   return {
     ProxyOptions: ProxyOptions
   };
 
 });