Diagnostics UI: more UI implementation.

chrome/browser/resources/chromeos/diagnostics/main.js

Index: chrome/browser/resources/chromeos/diagnostics/main.js
diff --git a/chrome/browser/resources/chromeos/diagnostics/main.js b/chrome/browser/resources/chromeos/diagnostics/main.js
index d39ca3c880c6b791f9975975e5f05a58aaece3ec..c69a0b4395800fe47846907e286ad4efa4c03093 100644
--- a/chrome/browser/resources/chromeos/diagnostics/main.js
+++ b/chrome/browser/resources/chromeos/diagnostics/main.js
@@ -2,38 +2,198 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * Updates the Connectivity Status section.
- * @param {String} connStatus Dictionary containing connectivity status.
- */
-function updateConnectivityStatus(connStatus) {
-  var deviceTypes = ['wlan0', 'wwan0', 'eth0', 'eth1'];
-  var deviceNames = ['Wi-Fi', '3G', 'Ethernet0', 'Ethernet1'];
-  for (var i = 0; i < deviceTypes.length; i++) {
-    var deviceName = deviceNames[i];
-    var nameElement = document.createElement('h2');
-    nameElement.appendChild(document.createTextNode(deviceName));
-    $('connectivity-status').appendChild(nameElement);
-
-    var deviceType = deviceTypes[i];
-    var deviceStatus = connStatus[deviceType];
-    var statusMessage;
-    if (!deviceStatus) {
-      statusMessage = 'Device not found.';
-    } else if (!deviceStatus.flags ||
-               deviceStatus.flags.indexOf('up') == -1) {
-      statusMessage = 'Device disabled.';
-    } else if (!deviceStatus.ipv4) {
-      statusMessage = 'IPv4 address unavailable.';
-    } else {
-      statusMessage = 'IPv4 address: ' + deviceStatus.ipv4.addrs;
+cr.define('diag', function() {
+  /**
+   * Encapsulated handling of the diagnostics page.
+   */
+  function DiagPage() {}
+
+  cr.addSingletonGetter(DiagPage);
+
+  /**
+   * List of network adapter types.
+   */
+  DiagPage.AdapterType = [
+      {adapter: 'wlan0', name: 'Wi-Fi'},
+      {adapter: 'eth0', name: 'Ethernet 1'},
+      {adapter: 'eth1', name: 'Ethernet 2'},
+      {adapter: 'wwan0', name: '3G'},

[xiyuan, 2012/08/14 17:00:01]

Do we need to worry about i18n for the names?

[hshi1, 2012/08/14 20:09:28]

Yes I think all strings should be localized.

Can you recommend an example that shows how best to get localized strings from
within the JS? Thanks.

On 2012/08/14 17:00:01, xiyuan wrote:

[xiyuan, 2012/08/14 23:00:39]

Include local_strings.js and you can get i18n strings via LocalStrings.

e.g.
- Define your string in one of the grd file;
- Export the string in C++ code, using AddLocalizedString etc;
- In JS, you can get the string 
  var localStrings = new LocalStrings();
  localStrings.getString('your_exported_string_name');

[hshi1, 2012/08/15 00:44:32]

Done.

+  ];
+
+  /**
+   * List of network adapter status.
+   * The numeric value assigned to each status reflects how healthy the network
+   * adapter is.
+   *
+   * @enum {int}
+   */
+  DiagPage.AdapterStatus = {
+      NOT_FOUND: 0,
+      DISABLED: 1,
+      NO_IP: 2,
+      VALID_IP: 3
+  };
+
+  DiagPage.prototype = {
+    /**
+     * Perform initial setup.
+     */
+    initialize: function() {
+      // Initialize member variables.
+      this.activeAdapter_ = -1;
+      this.adapterStatus_ = new Array();
+
+      // Attempt to update.
+      chrome.send('pageLoaded');
+    },
+
+    /**
+     * Updates the connectivity status with netif information.
+     * @param {String} netifStatus Dictionary of network adapter status.
+     */
+    setNetifStatus_: function(netifStatus) {
+      // Hide the "loading" message.
+      $('loading').setAttribute('style', 'display:none');

[xiyuan, 2012/08/14 17:00:01]

$('loading').hidden = true;

[hshi1, 2012/08/14 20:09:28]

Done.

+
+      // Update netif state.
+      for (var i = 0; i < DiagPage.AdapterType.length; i++) {
+        var adapterType = DiagPage.AdapterType[i];
+        var status = netifStatus[adapterType.adapter];
+        if (!status)
+          this.adapterStatus_[i] = DiagPage.AdapterStatus.NOT_FOUND;
+        else if (!status.flags || status.flags.indexOf('up') == -1)
+          this.adapterStatus_[i] = DiagPage.AdapterStatus.DISABLED;
+        else if (!status.ipv4)
+          this.adapterStatus_[i] = DiagPage.AdapterStatus.NO_IP;
+        else
+          this.adapterStatus_[i] = DiagPage.AdapterStatus.VALID_IP;
+      }
+
+      // Update UI
+      this.updateAdapterSelection_();
+      this.updateConnectivityStatus_();
+    },
+
+    /**
+     * Gets the HTML radio input element id for a network adapter.
+     * @private
+     */
+    getAdapterElementId_: function(adapter) {
+      return 'adapter-' + DiagPage.AdapterType[adapter].adapter;
+    },
+
+    /**
+     * Gets the most active adapter based on their status.
+     * @private
+     */
+    getActiveAdapter_: function() {
+      var activeAdapter = -1;
+      var activeAdapterStatus = DiagPage.AdapterStatus.NOT_FOUND;
+      for (var i = 0; i < DiagPage.AdapterType.length; i++) {
+        var status = this.adapterStatus_[i];
+        if (status == DiagPage.AdapterStatus.NOT_FOUND)
+          continue;
+        if (activeAdapter == -1 || status > activeAdapterStatus) {
+          activeAdapter = i;
+          activeAdapterStatus = status;
+        }
+      }
+      return activeAdapter;
+    },
+
+    /**
+     * Update the adapter selection section.
+     * @private
+     */
+    updateAdapterSelection_: function() {
+      // Create HTML radio input elements.
+      var adapterSelectionHTML = '';
+      for (var i = 0; i < DiagPage.AdapterType.length; i++) {
+        if (this.adapterStatus_[i] != DiagPage.AdapterStatus.NOT_FOUND) {
+          adapterSelectionHTML +=
+            '<input type="radio" name="adapter" id="' +
+            this.getAdapterElementId_(i) + '">' + DiagPage.AdapterType[i].name +
+            '</input><br />';
+        }
+      }
+      // Set click handlers for adapter selection.
+      $('adapter-selection').innerHTML = adapterSelectionHTML;

[xiyuan, 2012/08/14 17:00:01]

Is it possible to use our js list instead of doing this?

[hshi1, 2012/08/14 20:09:28]

Can you please elaborate what does it mean to use the JS list? Do you mean to
explicitly create <input> elements and then append them to the DOM?

[xiyuan, 2012/08/14 23:00:39]

Search for "cr.ui.List" in js files and you could see a bunch of places where it
is used. 
e.g.
https://cs.corp.google.com/#chrome/src/chrome/browser/resources/options2/chro...

Basically, you derive your js class from cr.ui.List, bind it with DOM node (i.e.
cr.ui.List.decorate(domElement)) or create it then appendChild to DOM tree. And
in your list class, you an override createListItem and provide your own item
there.

If you don't want go this approach, then we should explicitly create <input> and
appendChild like you mentioned.

[hshi1, 2012/08/15 00:44:32]

I'll explicitly create the DOM elements and appendChild.

On 2012/08/14 23:00:39, xiyuan wrote:

+      for (var i = 0; i < DiagPage.AdapterType.length; i++) {
+        var radioElement = $(this.getAdapterElementId_(i));
+        if (radioElement) {
+          radioElement.onclick = function(adapter) {
+            this.activeAdapter_ = adapter;
+            this.updateConnectivityStatus_();
+          }.bind(this, i);
+        }
+      }
+      if (this.activeAdapter_ == -1) {
+        this.activeAdapter_ = this.getActiveAdapter_();
+        $(this.getAdapterElementId_(this.activeAdapter_)).setAttribute(
+          'checked', 'true');
+      }
+    },
+
+    /**
+     * Update the connectivity status for the specified network interface.
+     * @private
+     */
+    updateConnectivityStatus_: function() {
+      var adapter = this.activeAdapter_;
+      var status = this.adapterStatus_[adapter];
+      var name = DiagPage.AdapterType[adapter].name;
+      var statusHTML = '<div class="test-performed">' +
+                       '<b>1. </b>Testing ' + name + ' hardware...';
+      if (status == DiagPage.AdapterStatus.DISABLED) {
+        statusHTML += '</div><div class="test-error"><img src="fail.png" />' +
+                      'The ' + name + ' adapter was not enabled.</div>' +
+                      '<div class="recommendation"><b>Recommendation: </b>' +
+                      'Enable the ' + name + ' adapter.</div>' +
+                      '<div class="test-pending">' +
+                      '<b>2. </b>Testing connection to router<br />' +
+                      '<b>3. </b>Testing connection to internet</div>';
+      } else {
+        statusHTML += '<img src="tick.png" /><br />' +
+                      '<b>2. </b>Testing connection to router...';
+        if (status == DiagPage.AdapterStatus.NO_IP) {
+          statusHTML +=
+            '</div><div class="test-error"><img src="fail.png" />' +
+            'The ' + name + ' adapter does not have an IP address and cannot ' +
+            'connect to the internet.</div>' +
+            '<div class="recommendation"><b>Recommendation: </b>' +
+            '<i>Please ensure that</i><br />' +
+            '1) you are trying to connect to the right network<br />' +
+            '2) you are using the right authentication method<br />' +
+            '3) your router is configured correctly<br />' +
+            '<i>Try to</i><br />' +
+            '1) connect to a different network<br />' +
+            '2) reboot your router<br /></div>' +
+            '<div class="test-pending"><b>3. </b>Testing connection to ' +
+            'internet</div>';
+        } else {
+          statusHTML +=
+            '<img src="tick.png" /><br />' +
+            '<b>3. </b>Testing connection to internet...' +
+            '<img src="tick.png" /></div>';
+        }
+      }
+      $('connectivity-status').innerHTML = statusHTML;

[xiyuan, 2012/08/14 17:00:01]

i18n?

And in general, we should avoid manipulating innerHTML directly.

     }
-    var statusElement = document.createElement('p');
-    statusElement.appendChild(document.createTextNode(statusMessage));
-    $('connectivity-status').appendChild(statusElement);
+  };
+
+  DiagPage.setNetifStatus = function(netifStatus) {
+    DiagPage.getInstance().setNetifStatus_(netifStatus);
   }
-}
 
+  // Export
+  return {
+    DiagPage: DiagPage
+  };
+});
+
+/**
+ * Initialize the DiagPage upon DOM content loaded.
+ */
 document.addEventListener('DOMContentLoaded', function() {
-  chrome.send('pageLoaded');
+  diag.DiagPage.getInstance().initialize();
 });