Diagnostics UI: more UI implementation.

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

 // Copyright (c) 2012 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.
 
+var localStrings = new LocalStrings();
+
+cr.define('diag', function() {
+  /**
+   * Encapsulated handling of the diagnostics page.
+   */
+  function DiagPage() {}

[xiyuan, 2012/08/15 23:41:28]

nit: Move this down to be with cr.addSingletonGetter

[hshi1, 2012/08/16 00:29:17]

Done.

+
+  /*
+   * 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));

[xiyuan, 2012/08/15 23:41:28]

nit: Maybe use a <label for="radio_element_id">xxx</label> for easier access for
the radio button? Otherwise, user has to click precisely on the little radio
button.

[hshi1, 2012/08/16 00:29:17]

Done.

+        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;
+
+      // Status messages for individual tests.
+      var connectivityStatusElement = $('connectivity-status');
+      var testStatusElements = new Array();
+      removeChildren(connectivityStatusElement);
+      for (var i = 0; i < 3; i++) {
+        testStatusElements[i] = document.createElement('div');
+        connectivityStatusElement.appendChild(testStatusElements[i]);
+      }
+      testStatusElements[0].innerHTML =
+        localStrings.getStringF('testing-hardware', 1, name);
+      testStatusElements[1].innerHTML =
+        localStrings.getStringF('testing-connection-to-router', 2);
+      testStatusElements[2].innerHTML =
+        localStrings.getStringF('testing-connection-to-internet', 3);

[xiyuan, 2012/08/15 23:41:28]

nit: It seems to be that your cuold make step number 1, 2 and 3 as part of the
string and just use localStrings.getString when you can.

[hshi1, 2012/08/16 00:29:17]

Done.

+
+      // Error and recommendation messages may be inserted in test status
+      // elements.
+      var errorElement = document.createElement('div');
+      var recommendationElement = document.createElement('div');
+      var failIconElement = document.createElement('img');
+      var tickIconElement = document.createElement('img');

[xiyuan, 2012/08/15 23:41:28]

nit: Since we are cloneNode of the two image element, could we move it out of
this function so that we don't createElement every time when this function is
called.

[hshi1, 2012/08/16 00:29:17]

Done.

+      errorElement.setAttribute('class', 'test-error');

[xiyuan, 2012/08/15 23:41:28]

nit: errorElement.className = 'test-error';
or errorElement.classList.add('test-error');

[hshi1, 2012/08/16 00:29:17]

Done.

+      recommendationElement.setAttribute('class', 'recommendation');
+      failIconElement.setAttribute('src', 'fail.png');
+      tickIconElement.setAttribute('src', 'tick.png');
+
+      testStatusElements[0].setAttribute('class', 'test-performed');
+      if (status == DiagPage.AdapterStatus.DISABLED) {
+        errorElement.appendChild(failIconElement.cloneNode());
+        errorElement.appendChild(document.createTextNode(
+            localStrings.getStringF('adapter-disabled', name)));
+        recommendationElement.innerHTML =
+            localStrings.getStringF('enable-adapter', name);
+        connectivityStatusElement.insertBefore(errorElement,
+            testStatusElements[1]);
+        connectivityStatusElement.insertBefore(recommendationElement,
+            testStatusElements[1]);
+        testStatusElements[1].setAttribute('class', 'test-pending');
+        testStatusElements[2].setAttribute('class', 'test-pending');
+      } else {
+        testStatusElements[0].appendChild(tickIconElement.cloneNode());
+        testStatusElements[1].setAttribute('class', 'test-performed');
+        if (status == DiagPage.AdapterStatus.NO_IP) {
+          errorElement.appendChild(failIconElement.cloneNode());
+          errorElement.appendChild(document.createTextNode(
+              localStrings.getStringF('adapter-no-ip', name)));
+          recommendationElement.innerHTML =
+              localStrings.getStringF('fix-connection-to-router');
+          connectivityStatusElement.insertBefore(errorElement,
+            testStatusElements[2]);
+        connectivityStatusElement.insertBefore(recommendationElement,
+            testStatusElements[2]);
+          testStatusElements[2].setAttribute('class', 'test-pending');
+        } else {
+          testStatusElements[1].appendChild(tickIconElement.cloneNode());
+          testStatusElements[2].setAttribute('class', 'test-performed');
+          testStatusElements[2].appendChild(tickIconElement.cloneNode());
+        }
+      }
+    }
+  };
+
+  DiagPage.setNetifStatus = function(netifStatus) {
+    DiagPage.getInstance().setNetifStatus_(netifStatus);
+  }
+
+  // Export
+  return {
+    DiagPage: DiagPage
+  };
+});
+
 /**
- * Updates the Connectivity Status section.
- * @param {String} connStatus Dictionary containing connectivity status.
+ * Initialize the DiagPage upon DOM content loaded.
  */
-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 statusElement = document.createElement('p');
-    statusElement.appendChild(document.createTextNode(statusMessage));
-    $('connectivity-status').appendChild(statusElement);
-  }
-}
-
 document.addEventListener('DOMContentLoaded', function() {
-  chrome.send('pageLoaded');
+  diag.DiagPage.getInstance().initialize();
 });