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..462ec1c647b68a7aa593dbfee5898066139c3884 100644
--- a/chrome/browser/resources/chromeos/diagnostics/main.js
+++ b/chrome/browser/resources/chromeos/diagnostics/main.js
@@ -2,38 +2,265 @@
 // 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;
+var localStrings = new LocalStrings();
+
+cr.define('diag', function() {
+  /**
+   * Encapsulated handling of the diagnostics page.
+   */
+  function DiagPage() {}
+
+  /*
+   * Remove all children nodes for an element.
+   * @param {element} parent of the elements to be removed.
+   */
+  function removeChildren(element) {
+    element.textContent = '';
+  }
+
+  /**
+   * Creates an element named |elementName| containing the content |text|.
+   * @param {string} elementName Name of the new element to be created.
+   * @param {string} text Text to be contained in the new element.
+   * @return {HTMLElement} The newly created HTML element.
+   */
+  function createElementFromText(elementName, text) {
+    var element = document.createElement(elementName);
+    element.appendChild(document.createTextNode(text));
+    return element;
+  }
+
+  cr.addSingletonGetter(DiagPage);
+
+  /**
+   * List of network adapter types.
+   */
+  DiagPage.AdapterType = [
+      {adapter: 'wlan0', name: localStrings.getString('wlan0')},
+      {adapter: 'eth0', name: localStrings.getString('eth0')},
+      {adapter: 'eth1', name: localStrings.getString('eth1')},
+      {adapter: 'wwan0', name: localStrings.getString('wwan0')},
+  ];
+
+  /**
+   * 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').hidden = true;
+
+      // 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() {
+      // Determine active adapter.
+      if (this.activeAdapter_ == -1)
+        this.activeAdapter_ = this.getActiveAdapter_();
+      // Create HTML radio input elements.
+      var adapterSelectionElement = $('adapter-selection');
+      removeChildren(adapterSelectionElement);
+      for (var i = 0; i < DiagPage.AdapterType.length; i++) {
+        if (this.adapterStatus_[i] == DiagPage.AdapterStatus.NOT_FOUND)
+          continue;
+        var radioElement = document.createElement('input');
+        radioElement.setAttribute('type', 'radio');
+        radioElement.setAttribute('name', 'adapter');
+        radioElement.setAttribute('id', this.getAdapterElementId_(i));
+        if (i == this.activeAdapter_)
+          radioElement.setAttribute('checked', 'true');
+        radioElement.onclick = function(adapter) {
+          this.activeAdapter_ = adapter;
+          this.updateConnectivityStatus_();
+        }.bind(this, i);
+        adapterSelectionElement.appendChild(radioElement);
+        adapterSelectionElement.appendChild(
+          document.createTextNode(DiagPage.AdapterType[i].name));
+        adapterSelectionElement.appendChild(document.createElement('br'));
+      }
+    },
+
+    /**
+     * 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 performedTestsElement = document.createElement('div');
+      var pendingTestsElement = document.createElement('div');
+      var errorElement = document.createElement('div');
+      var recommendationElement = document.createElement('div');
+      var failIconElement = document.createElement('img');
+      var tickIconElement = document.createElement('img');
+
+      performedTestsElement.setAttribute('class', 'test-performed');
+      pendingTestsElement.setAttribute('class', 'test-pending');
+      errorElement.setAttribute('class', 'test-error');
+      recommendationElement.setAttribute('class', 'recommendation');
+      failIconElement.setAttribute('src', 'fail.png');
+      tickIconElement.setAttribute('src', 'tick.png');
+
+      performedTestsElement.appendChild(createElementFromText('b', '1. '));
+      performedTestsElement.appendChild(document.createTextNode(
+          localStrings.getStringF('testing-hardware', name)));
+
+      if (status == DiagPage.AdapterStatus.DISABLED) {
+        errorElement.appendChild(failIconElement.cloneNode());
+        errorElement.appendChild(document.createTextNode(
+            localStrings.getStringF('adapter-disabled', name)));
+
+        recommendationElement.appendChild(createElementFromText(
+            'b', localStrings.getString('recommendation')));
+        recommendationElement.appendChild(document.createTextNode(
+            localStrings.getStringF('enable-adapter', name)));
+
+        pendingTestsElement.appendChild(createElementFromText('b', '2. '));
+        pendingTestsElement.appendChild(document.createTextNode(
+            localStrings.getString('testing-connection-to-router')));
+        pendingTestsElement.appendChild(document.createElement('br'));
+        pendingTestsElement.appendChild(createElementFromText('b', '3. '));
+        pendingTestsElement.appendChild(document.createTextNode(
+            localStrings.getString('testing-connection-to-internet')));
+      } else {
+        performedTestsElement.appendChild(tickIconElement.cloneNode());
+        performedTestsElement.appendChild(document.createElement('br'));
+        performedTestsElement.appendChild(createElementFromText('b', '2. '));
+        performedTestsElement.appendChild(document.createTextNode(
+            localStrings.getString('testing-connection-to-router')));
+
+        if (status == DiagPage.AdapterStatus.NO_IP) {
+          errorElement.appendChild(failIconElement.cloneNode());
+          errorElement.appendChild(document.createTextNode(
+              localStrings.getStringF('adapter-no-ip', name)));
+
+          recommendationElement.appendChild(createElementFromText(
+            'b', localStrings.getString('recommendation')));
+          // TODO: i18n string
+          recommendationElement.innerHTML +=
+            '<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>';

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

How would you suggest to handle i18n strings like this one? It is not only a
very long paragraph but also contains formatting (such as <i> and <br>). I have
looked at the GRD file and haven't found anything like this.

[xiyuan, 2012/08/15 16:36:07]

Sorry that I was not clear enough. What I suggested to do is something like
this:
- Define a template in grd file.
  e.g.
  This shows a <ph name="BEGIN_BOLD">&lt;b&gt;</ph>bold text<ph
name="END_BOLD">&lt;/b&gt;</ph>, and a replacable <ph name="NAME">$1<ex>a
name</ex></ph>
  The above example template has a bold tag to mark "bold text" and has a "$1"
placeholder which you could replace with the string you needed.
- Export the template via addLocalizedString etc;
- Use localString.getStringF to format the string in js; (or format the string
in C++ then export it).

The following is another example:

https://cs.corp.google.com/#chrome/src/net/base/dir_header.html&sq=package:ch...

where listingParsingErrorBoxText is a formatted string using
IDS_DIRECTORY_LISTING_PARSING_ERROR_BOX_TEXT as a template.

Ping me if you have more questions. Think you need to use this method for all
the text in this function. "appendChild" is not the right way to do i18n.

[hshi1, 2012/08/15 22:59:25]

Done.

+
+          pendingTestsElement.appendChild(createElementFromText('b', '3. '));
+          pendingTestsElement.appendChild(document.createTextNode(
+              localStrings.getString('testing-connection-to-internet')));
+        } else {
+          performedTestsElement.appendChild(tickIconElement.cloneNode());
+          performedTestsElement.appendChild(document.createElement('br'));
+          performedTestsElement.appendChild(createElementFromText('b', '3. '));
+          performedTestsElement.appendChild(document.createTextNode(
+            localStrings.getString('testing-connection-to-internet')));
+          performedTestsElement.appendChild(tickIconElement.cloneNode());
+
+          errorElement.hidden = true;
+          recommendationElement.hidden = true;
+          pendingTestsElement.hidden = true;
+        }
+      }
+
+      var connectivityStatusElement = $('connectivity-status');
+      removeChildren(connectivityStatusElement);
+      connectivityStatusElement.appendChild(performedTestsElement);
+      connectivityStatusElement.appendChild(errorElement);
+      connectivityStatusElement.appendChild(recommendationElement);
+      connectivityStatusElement.appendChild(pendingTestsElement);
     }
-    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();
 });