Create HostList class to facilitate future work.

BUG=None
TEST=Manual

Review URL: http://codereview.chromium.org/8568038

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

6 files changed, 152 insertions, 112 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index bbaa905..496b0ea 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -110,6 +110,7 @@
       'webapp/me2mom/dividerbottom.png',
       'webapp/me2mom/dividertop.png',
       'webapp/me2mom/home_screen.js',
+      'webapp/me2mom/host_list.js',
       'webapp/me2mom/host_screen.js',
       'webapp/me2mom/host_session.js',
       'webapp/me2mom/l10n.js',
@@ -339,7 +340,7 @@
             'webapp/verify-webapp.py',
             'webapp/me2mom/_locales/en/messages.json',
             'webapp/me2mom/choice.html',
-            'webapp/me2mom/home_screen.js',
+            'webapp/me2mom/host_list.js',
             'webapp/me2mom/manifest.json',
             'webapp/me2mom/remoting.js',
             'host/plugin/host_script_object.cc',
@@ -353,7 +354,7 @@
             '<(PRODUCT_DIR)/remoting/it2me_verified.stamp',
             'webapp/me2mom/_locales/en/messages.json',
             'webapp/me2mom/choice.html',
-            'webapp/me2mom/home_screen.js',
+            'webapp/me2mom/host_list.js',
             'webapp/me2mom/manifest.json',
             'webapp/me2mom/remoting.js',
             'host/plugin/host_script_object.cc',
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 5dcfa4e..9a8cc04 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -19,6 +19,7 @@ found in the LICENSE file.
     <script src="client_session.js"></script>
     <script src="debug_log.js"></script>
     <script src="home_screen.js"></script>
+    <script src="host_list.js"></script>
     <script src="host_screen.js"></script>
     <script src="host_session.js"></script>
     <script src="l10n.js"></script>
diff --git a/remoting/webapp/me2mom/client_screen.js b/remoting/webapp/me2mom/client_screen.js
index f7f15df..3342d95 100644
--- a/remoting/webapp/me2mom/client_screen.js
+++ b/remoting/webapp/me2mom/client_screen.js
@@ -392,8 +392,9 @@ function recenterToolbar_() {
  * @return {void} Nothing.
  */
 remoting.connectHost = function(hostId) {
-  for (var i = 0; i < remoting.hostList.length; ++i) {
-    var host = remoting.hostList[i];
+  for (var i = 0; i < remoting.hostList.hosts.length; ++i) {
+    /** @type {remoting.Host} */
+    var host = remoting.hostList.hosts[i];
     if (host.hostId != hostId)
       continue;
 
diff --git a/remoting/webapp/me2mom/home_screen.js b/remoting/webapp/me2mom/home_screen.js
index 8a107ea..8660fce 100644
--- a/remoting/webapp/me2mom/home_screen.js
+++ b/remoting/webapp/me2mom/home_screen.js
@@ -12,15 +12,6 @@
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
-/**
- * Cache of the latest host list and status information.
- *
- * @type {Array.<{hostName: string, hostId: string, status: string,
- *                jabberId: string, publicKey: string}>}
- *
- */
-remoting.hostList = new Array();
-
 (function() {
 
 /**
@@ -35,7 +26,7 @@ remoting.refreshHostList = function() {
         if (remoting.oauth2.needsNewAccessToken()) {
           // Failed to get access token
           console.error('refreshHostList: OAuth2 token fetch failed');
-          showHostListError_(remoting.Error.AUTHENTICATION_FAILED);
+          remoting.hostList.showError(remoting.Error.AUTHENTICATION_FAILED);
           return;
         }
         remoting.refreshHostList();
@@ -78,7 +69,7 @@ function parseHostListResponse_(xhr) {
       var parsed_response =
           /** @type {{data: {items: Array}}} */ JSON.parse(xhr.responseText);
       if (parsed_response.data && parsed_response.data.items) {
-        replaceHostList_(parsed_response.data.items);
+        remoting.hostList.update(parsed_response.data.items);
       }
     } else {
       // Some other error.  Log for now, pretty-print in future.
@@ -99,7 +90,7 @@ function parseHostListResponse_(xhr) {
       if (xhr.status == 403) {
         // The user's account is not enabled for Me2Me, so fail silently.
       } else if (xhr.status >= 400 && xhr.status <= 499) {
-        showHostListError_(remoting.Error.GENERIC);
+        remoting.hostList.showError(remoting.Error.GENERIC);
       }
     }
   } catch (er) {
@@ -107,100 +98,4 @@ function parseHostListResponse_(xhr) {
   }
 }
 
-/**
- * Refresh the host list display with up to date host details.
- *
- * @param {Array.<{hostName: string, hostId: string, status: string,
- *                jabberId: string, publicKey: string}>} hostList
- *     The new list of registered hosts.
- * @return {void} Nothing.
- */
-function replaceHostList_(hostList) {
-  var hostListDiv = document.getElementById('host-list-div');
-  var hostListTable = document.getElementById('host-list');
-
-  remoting.hostList = hostList;
-
-  // Clear the table before adding the host info.
-  hostListTable.innerHTML = '';
-  showHostListError_(null);
-
-  for (var i = 0; i < hostList.length; ++i) {
-    var host = hostList[i];
-    if (!host.hostName || !host.hostId || !host.status || !host.jabberId ||
-        !host.publicKey)
-      continue;
-    var hostEntry = document.createElement('tr');
-    addClass(hostEntry, 'host-list-row');
-
-    var hostIcon = document.createElement('td');
-    var hostIconImage = document.createElement('img');
-    hostIconImage.src = 'icon_host.png';
-    hostIcon.className = 'host-list-row-start';
-    hostIcon.appendChild(hostIconImage);
-    hostEntry.appendChild(hostIcon);
-
-    var hostName = document.createElement('td');
-    hostName.setAttribute('class', 'mode-select-label');
-    hostName.appendChild(document.createTextNode(host.hostName));
-    hostEntry.appendChild(hostName);
-
-    var hostStatus = document.createElement('td');
-    if (host.status == 'ONLINE') {
-      var connectButton = document.createElement('button');
-      connectButton.setAttribute('class', 'mode-select-button');
-      connectButton.setAttribute('type', 'button');
-      connectButton.setAttribute('onclick',
-                                 'remoting.connectHost("'+host.hostId+'")');
-      connectButton.innerHTML =
-          chrome.i18n.getMessage(/*i18n-content*/'CONNECT_BUTTON');
-      hostStatus.appendChild(connectButton);
-    } else {
-      addClass(hostEntry, 'host-offline');
-      hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
-    }
-    hostStatus.className = 'host-list-row-end';
-    hostEntry.appendChild(hostStatus);
-
-    hostListTable.appendChild(hostEntry);
-  }
-
-  showHostList_(hostList.length != 0);
-}
-
-/**
- * Show or hide the host list.
- * @param {boolean} show True to show the list or false to hide it.
- * @return {void}
- */
-function showHostList_(show) {
-  var hostListDiv = document.getElementById('host-list-div');
-  hostListDiv.hidden = (!show);
-  if (show) {
-    hostListDiv.style.height = hostListDiv.scrollHeight + 'px';
-    removeClass(hostListDiv, 'collapsed');
-  } else {
-    addClass(hostListDiv, 'collapsed');
-  }
-}
-
-/**
- * Show an error message in the host list portion of the UI.
- *
- * @param {remoting.Error?} errorTag The error to display, or NULL to clear any
- *     previous error.
- * @return {void} Nothing.
- */
-function showHostListError_(errorTag) {
-  var hostListTable = document.getElementById('host-list');
-  hostListTable.innerHTML = '';
-  var errorDiv = document.getElementById('host-list-error');
-  if (errorTag) {
-    l10n.localizeElementFromTag(errorDiv, /** @type {string} */ (errorTag));
-    showHostList_(true);
-  } else {
-    errorDiv.innerText = '';
-  }
-}
-
 }());
\ No newline at end of file
diff --git a/remoting/webapp/me2mom/host_list.js b/remoting/webapp/me2mom/host_list.js
new file mode 100644
index 0000000..d84d73e
--- /dev/null
+++ b/remoting/webapp/me2mom/host_list.js
@@ -0,0 +1,139 @@
+// 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.
+
+/**
+ * @fileoverview
+ * Class representing the host-list portion of the home screen UI.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ */
+remoting.Host = function() {
+  /** @type {string} */
+  this.hostName = '';
+  /** @type {string} */
+  this.hostId = '';
+  /** @type {string} */
+  this.status = '';
+  /** @type {string} */
+  this.jabberId = '';
+  /** @type {string} */
+  this.publicKey = '';
+}
+
+
+/**
+ * @constructor
+ * @param {Element} table The HTML <table> to contain host-list.
+ * @param {Element} errorDiv The HTML <div> to display error messages.
+ */
+remoting.HostList = function(table, errorDiv) {
+  this.table = table;
+  this.errorDiv = errorDiv;
+  /** @type {Array.<remoting.Host>} */
+  this.hosts = null;
+}
+
+/**
+ * Refresh the host list with up-to-date details.
+ * @param {Array.<remoting.Host>} hosts The new host list.
+ * @return {void} Nothing.
+ */
+remoting.HostList.prototype.update = function(hosts) {
+  this.table.innerHTML = '';
+  this.showError(null);
+  this.hosts = hosts;
+
+  for (var i = 0; i < hosts.length; ++i) {
+    var host = hosts[i];
+    if (!host.hostName || !host.hostId || !host.status || !host.jabberId ||
+        !host.publicKey)
+      continue;
+
+    var hostEntry = document.createElement('tr');
+    addClass(hostEntry, 'host-list-row');
+
+    var hostIcon = document.createElement('td');
+    var hostIconImage = document.createElement('img');
+    hostIconImage.src = 'icon_host.png';
+    hostIcon.className = 'host-list-row-start';
+    hostIcon.appendChild(hostIconImage);
+    hostEntry.appendChild(hostIcon);
+
+    var hostName = document.createElement('td');
+    hostName.setAttribute('class', 'mode-select-label');
+    hostName.appendChild(document.createTextNode(host.hostName));
+    hostEntry.appendChild(hostName);
+
+    var hostStatus = document.createElement('td');
+    if (host.status == 'ONLINE') {
+      var connectButton = document.createElement('button');
+      connectButton.setAttribute('class', 'mode-select-button');
+      connectButton.setAttribute('type', 'button');
+      connectButton.setAttribute('onclick',
+                                 'remoting.connectHost("'+host.hostId+'")');
+      connectButton.innerHTML =
+          chrome.i18n.getMessage(/*i18n-content*/'CONNECT_BUTTON');
+      hostStatus.appendChild(connectButton);
+    } else {
+      addClass(hostEntry, 'host-offline');
+      hostStatus.innerHTML = chrome.i18n.getMessage(/*i18n-content*/'OFFLINE');
+    }
+    hostStatus.className = 'host-list-row-end';
+    hostEntry.appendChild(hostStatus);
+
+    this.table.appendChild(hostEntry);
+  }
+
+  this.showOrHide_(this.hosts.length != 0);
+}
+
+/**
+ * Display a localized error message.
+ * @param {remoting.Error?} errorTag The error to display, or NULL to clear any
+ *     previous error.
+ * @return {void} Nothing.
+ */
+remoting.HostList.prototype.showError = function(errorTag) {
+  this.table.innerHTML = '';
+  if (errorTag) {
+    l10n.localizeElementFromTag(this.errorDiv,
+                                /** @type {string} */ (errorTag));
+    this.showOrHide_(true);
+  } else {
+    this.errorDiv.innerText = '';
+  }
+}
+
+/**
+ * Show or hide the host-list UI.
+ * @param {boolean} show True to show the UI, or false to hide it.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostList.prototype.showOrHide_ = function(show) {
+  var parent = /** @type {Element} */ (this.table.parentNode);
+  parent.hidden = !show;
+  if (show) {
+    parent.style.height = parent.scrollHeight + 'px';
+    removeClass(parent, remoting.HostList.COLLAPSED_);
+  } else {
+    addClass(parent, remoting.HostList.COLLAPSED_);
+  }
+}
+
+/**
+ * Class name for the host list when it is collapsed.
+ * @private
+ */
+remoting.HostList.COLLAPSED_ = 'collapsed';
+
+/** @type {remoting.HostList} */
+remoting.hostList = null;
\ No newline at end of file
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index 9fb2639..8dead6e 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -37,6 +37,9 @@ remoting.init = function() {
   remoting.debug = new remoting.DebugLog(
       document.getElementById('debug-messages'),
       document.getElementById('statistics'));
+  remoting.hostList = new remoting.HostList(
+      document.getElementById('host-list'),
+      document.getElementById('host-list-error'));
 
   refreshEmail_();
   var email = remoting.oauth2.getCachedEmail();