Port network options to DOM UI. Hook up all the functionality. UI touchup work will be in another changelist.

BUG=chromium-os:4744
BUG=49030
TEST=manual
Review URL: http://codereview.chromium.org/3036020

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@53919 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 228 insertions, 0 deletions

diff --git a/chrome/browser/resources/options.html b/chrome/browser/resources/options.html
index f239394..a1856b4 100644
--- a/chrome/browser/resources/options.html
+++ b/chrome/browser/resources/options.html
@@ -21,6 +21,8 @@
 <script src="options/pref_ui.js"></script>
 <script src="options/options_page.js"></script>
 <if expr="pp_ifdef('chromeos')">
+  <script src="options/chromeos_internet_network_list.js"></script>
+  <script src="options/chromeos_internet_options.js"></script>
   <script src="options/chromeos_language_list.js"></script>
   <script src="options/chromeos_language_options.js"></script>
   <script src="options/chromeos_system_options.js"></script>
@@ -50,6 +52,7 @@ function load() {
 
   if (cr.isChromeOS) {
     OptionsPage.register(SystemOptions.getInstance());
+    OptionsPage.register(InternetOptions.getInstance());
     OptionsPage.register(AccountsOptions.getInstance());
     // TODO(mazda): uncomment this once the language options is ready
     // OptionsPage.register(new OptionsPage(
@@ -118,6 +121,7 @@ window.onpopstate = function(e) {
 <link rel="stylesheet" href="options/clear_browser_data_overlay.css">
 <if expr="pp_ifdef('chromeos')">
   <link rel="stylesheet" href="options/chromeos_accounts_options_page.css">
+  <link rel="stylesheet" href="options/chromeos_internet_options_page.css">
   <link rel="stylesheet" href="options/chromeos_language_options.css">
 </if>
 <link rel="stylesheet" href="options/personal_options.css">
@@ -147,6 +151,7 @@ window.onpopstate = function(e) {
   <div id="mainview">
      <if expr="pp_ifdef('chromeos')">
         <include src="options/chromeos_system_options.html">
+        <include src="options/chromeos_internet_options.html">
         <include src="options/chromeos_language_options.html">
         <include src="options/chromeos_labs.html">
         <include src="options/chromeos_accounts_options.html">
diff --git a/chrome/browser/resources/options/chromeos_internet_network_list.js b/chrome/browser/resources/options/chromeos_internet_network_list.js
new file mode 100644
index 0000000..3536c37
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_internet_network_list.js
@@ -0,0 +1,127 @@
+// Copyright (c) 2010 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.internet', function() {
+  const List = cr.ui.List;
+  const ListItem = cr.ui.ListItem;
+  const ArrayDataModel = cr.ui.ArrayDataModel;
+
+  /**
+   * Creates a new network list.
+   * @param {Object=} opt_propertyBag Optional properties.
+   * @constructor
+   * @extends {cr.ui.List}
+   */
+  var NetworkList = cr.ui.define('list');
+
+  NetworkList.prototype = {
+    __proto__: List.prototype,
+
+    createItem: function(network) {
+      return new NetworkListItem(network);
+    },
+
+    /**
+     * Loads given network list.
+     * @param {Array} users An array of user object.
+     */
+    load: function(networks) {
+      this.dataModel = new ArrayDataModel(networks);
+    },
+
+  };
+
+  /**
+   * Creates a new network list item.
+   * @param {!ListValue} network The network this represents.
+   * @constructor
+   * @extends {cr.ui.ListItem}
+   */
+  function NetworkListItem(network) {
+    var el = cr.doc.createElement('div');
+    el.servicePath = network[0];
+    el.networkName = network[1];
+    el.networkStatus = network[2];
+    el.networkType = network[3];
+    el.connected = network[4];
+    el.connecting = network[5];
+    el.iconURL = network[6];
+    el.remembered = network[7];
+    NetworkListItem.decorate(el);
+    return el;
+  }
+
+  /**
+   * Decorates an element as a network list item.
+   * @param {!HTMLElement} el The element to decorate.
+   */
+  NetworkListItem.decorate = function(el) {
+    el.__proto__ = NetworkListItem.prototype;
+    el.decorate();
+  };
+
+  NetworkListItem.prototype = {
+    __proto__: ListItem.prototype,
+
+    /** @inheritDoc */
+    decorate: function() {
+      ListItem.prototype.decorate.call(this);
+
+      // icon and name
+      var nameEl = this.ownerDocument.createElement('span');
+      nameEl.className = 'label';
+      // TODO(xiyuan): Use css for this.
+      if (this.connected)
+        nameEl.style.fontWeight = 'bold';
+      nameEl.textContent = this.networkName;
+      nameEl.style.backgroundImage = url(this.iconURL);
+      this.appendChild(nameEl);
+
+      // status
+      var statusEl = this.ownerDocument.createElement('span');
+      statusEl.className = 'label';
+      statusEl.textContent = this.networkStatus;
+      this.appendChild(statusEl);
+
+      if (!this.remembered) {
+        if (this.connected) {
+          // disconnect button (if not ethernet)
+          if (this.networkType != 1)
+             this.appendChild(this.createButton_('disconnect_button',
+                 'disconnect'));
+
+          // options button
+          this.appendChild(this.createButton_('options_button', 'options'));
+        } else if (!this.connecting) {
+          // connect button
+          this.appendChild(this.createButton_('connect_button', 'connect'));
+        }
+      } else {
+        // forget button
+        this.appendChild(this.createButton_('forget_button', 'forget'));
+      }
+    },
+
+    /**
+     * Creates a button for interacting with a network.
+     * @param {Object} name The name of the localStrings to use for the text.
+     * @param {Object} type The type of button.
+     */
+    createButton_: function(name, type) {
+        var buttonEl = this.ownerDocument.createElement('button');
+        buttonEl.textContent = localStrings.getString(name);
+        var networkType = this.networkType;
+        var servicePath = this.servicePath;
+        buttonEl.onclick = function(event) {
+            chrome.send('buttonClickCallback',
+                [String(networkType), String(servicePath), String(type)]);
+        };
+        return buttonEl;
+    }
+  };
+
+  return {
+    NetworkList: NetworkList
+  };
+});
diff --git a/chrome/browser/resources/options/chromeos_internet_options.html b/chrome/browser/resources/options/chromeos_internet_options.html
new file mode 100644
index 0000000..ffbecea
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_internet_options.html
@@ -0,0 +1,15 @@
+<div class="page hidden" id="internetPage">
+  <h1 i18n-content="internetPage"></h1>
+  <section>
+    <h3 i18n-content="wired_title"></h3>
+    <list class="network-list" id="wiredList"></list>
+  </section>
+  <section>
+    <h3 i18n-content="wireless_title"></h3>
+    <list class="network-list" id="wirelessList"></list>
+  </section>
+  <section>
+    <h3 i18n-content="remembered_title"></h3>
+    <list class="network-list" id="rememberedList"></list>
+  </section>
+</div>
diff --git a/chrome/browser/resources/options/chromeos_internet_options.js b/chrome/browser/resources/options/chromeos_internet_options.js
new file mode 100644
index 0000000..60eca9a
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_internet_options.js
@@ -0,0 +1,64 @@
+// Copyright (c) 2010 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.
+
+///////////////////////////////////////////////////////////////////////////////
+// InternetOptions class:
+
+/**
+ * Encapsulated handling of ChromeOS internet options page.
+ * @constructor
+ */
+function InternetOptions() {
+  OptionsPage.call(this, 'internet', localStrings.getString('internetPage'),
+      'internetPage');
+}
+
+cr.addSingletonGetter(InternetOptions);
+
+// Inherit InternetOptions from OptionsPage.
+InternetOptions.prototype = {
+  __proto__: OptionsPage.prototype,
+
+  /**
+   * Initializes InternetOptions page.
+   * Calls base class implementation to starts preference initialization.
+   */
+  initializePage: function() {
+    // Call base class implementation to starts preference initialization.
+    OptionsPage.prototype.initializePage.call(this);
+
+    options.internet.NetworkList.decorate($('wiredList'));
+    $('wiredList').load(templateData.wiredList);
+    options.internet.NetworkList.decorate($('wirelessList'));
+    $('wirelessList').load(templateData.wirelessList);
+    options.internet.NetworkList.decorate($('rememberedList'));
+    $('rememberedList').load(templateData.rememberedList);
+
+    this.addEventListener('visibleChange', this.handleVisibleChange_);
+  },
+
+  networkListInitalized_: false,
+
+  /**
+   * Handler for OptionsPage's visible property change event.
+   * @param {Event} e Property change event.
+   */
+  handleVisibleChange_ : function(e) {
+    if (!this.networkListInitalized_ && this.visible) {
+      this.networkListInitalized_ = true;
+      $('wiredList').redraw();
+      $('wirelessList').redraw();
+      $('rememberedList').redraw();
+    }
+  }
+};
+
+//
+//Chrome callbacks
+//
+function refreshNetworkData(data) {
+  $('wiredList').load(data.wiredList);
+  $('wirelessList').load(data.wirelessList);
+  $('rememberedList').load(data.rememberedList);
+}
diff --git a/chrome/browser/resources/options/chromeos_internet_options_page.css b/chrome/browser/resources/options/chromeos_internet_options_page.css
new file mode 100644
index 0000000..9e42189
--- /dev/null
+++ b/chrome/browser/resources/options/chromeos_internet_options_page.css
@@ -0,0 +1,17 @@
+.network-list {
+  border: 1px solid lightgrey;
+  padding: 2px;
+  width: 600px;
+  height: 200px;
+}
+
+.network-list > * > .label {
+  -webkit-padding-start: 30px;
+  background: 0 50% no-repeat;
+}
+
+.network-list > * > button {
+  border: 1px solid hsl(214, 91%, 85%);
+  border-radius: 3px;
+  width: 150px;
+}