Move home-screen functionality into separate file.

BUG=None
TEST=Manual

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

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

4 files changed, 215 insertions, 168 deletions

diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index 22da18d..c74e07b 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -322,6 +322,10 @@ label {
   width: 640px;
 }
 
+#host-list-error {
+  margin-__MSG_@@bidi_start_edge__: 40px;
+}
+
 #session-mode {
   position: absolute;
   -webkit-box-shadow: 0 0 8px 0 black;
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index bd4cc4e..5dcfa4e 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -18,6 +18,7 @@ found in the LICENSE file.
     <script src="client_screen.js"></script>
     <script src="client_session.js"></script>
     <script src="debug_log.js"></script>
+    <script src="home_screen.js"></script>
     <script src="host_screen.js"></script>
     <script src="host_session.js"></script>
     <script src="l10n.js"></script>
@@ -152,8 +153,8 @@ found in the LICENSE file.
              hidden>
           <img src="dividerbottom.png">
           <h1 i18n-content="HOME_MY_COMPUTERS_TITLE"></h1>
-          <table id="host-list" class="host-list-table">
-          </table> <!-- host-list -->
+          <table id="host-list" class="host-list-table"></table>
+          <div id="host-list-error" class="error-state"></div>
         </div> <!-- host-list-div -->
 
       </div> <!-- home -->
diff --git a/remoting/webapp/me2mom/client_screen.js b/remoting/webapp/me2mom/client_screen.js
index e722ec5..f7f15df 100644
--- a/remoting/webapp/me2mom/client_screen.js
+++ b/remoting/webapp/me2mom/client_screen.js
@@ -386,178 +386,14 @@ function recenterToolbar_() {
 }
 
 /**
- * Query the Remoting Directory for the user's list of hosts.
- *
- * @return {void} Nothing.
- */
-remoting.refreshHostList = function() {
-  // Fetch a new Access Token for the user, if necessary.
-  if (remoting.oauth2.needsNewAccessToken()) {
-    remoting.oauth2.refreshAccessToken(function(xhr) {
-        if (remoting.oauth2.needsNewAccessToken()) {
-          // Failed to get access token
-          remoting.debug.log('tryConnect: OAuth2 token fetch failed');
-          showConnectError_(remoting.Error.AUTHENTICATION_FAILED);
-          return;
-        }
-        remoting.refreshHostList();
-      });
-    return;
-  }
-
-  var headers = {
-    'Authorization': 'OAuth ' + remoting.oauth2.getAccessToken()
-  };
-
-  var xhr = remoting.xhr.get(
-      'https://www.googleapis.com/chromoting/v1/@me/hosts',
-      parseHostListResponse_,
-      '',
-      headers);
-}
-
-/**
- * Handle the results of the host list request.  A success response will
- * include a JSON-encoded list of host descriptions, which we display if we're
- * able to successfully parse it.
- *
- * @param {XMLHttpRequest} xhr The XHR object for the host list request.
- * @return {void} Nothing.
- */
-function parseHostListResponse_(xhr) {
-  // Ignore host list responses if we're not on the Home screen. This mainly
-  // ensures that errors don't cause an unexpected mode switch.
-  if (remoting.currentMode != remoting.AppMode.HOME) {
-    return;
-  }
-
-  if (xhr.readyState != 4) {
-    return;
-  }
-
-  try {
-    if (xhr.status == 200) {
-      var parsed_response =
-          /** @type {{data: {items: Array}}} */ JSON.parse(xhr.responseText);
-      if (parsed_response.data && parsed_response.data.items) {
-        replaceHostList_(parsed_response.data.items);
-      }
-    } else {
-      // Some other error.  Log for now, pretty-print in future.
-      remoting.debug.log('Error: Bad status on host list query: ' +
-                  xhr.status + ' ' + xhr.statusText);
-      var errorResponse =
-          /** @type {{error: {code: *, message: *}}} */
-          JSON.parse(xhr.responseText);
-      if (errorResponse.error &&
-          errorResponse.error.code &&
-          errorResponse.error.message) {
-        remoting.debug.log('Error code ' + errorResponse.error.code);
-        remoting.debug.log('Error message ' + errorResponse.error.message);
-      } else {
-        remoting.debug.log('Error response: ' + xhr.responseText);
-      }
-
-      // For most errors in the 4xx range, tell the user to re-authorize us.
-      if (xhr.status == 403) {
-        // The user's account is not enabled for Me2Me, so fail silently.
-      } else if (xhr.status >= 400 && xhr.status <= 499) {
-        // TODO(wez): We need to replace this with a more general showError_().
-        showConnectError_(remoting.Error.GENERIC);
-      }
-    }
-  } catch (er) {
-    console.error('Error processing response: ', xhr);
-  }
-}
-
-/**
- * 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();
-
-/**
- * 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 = '';
-
-  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);
-  }
-
-  // Show/hide the div depending on whether there are hosts to list.
-  hostListDiv.hidden = (hostList.length == 0);
-  if (hostList.length == 0) {
-    addClass(hostListDiv, 'collapsed');
-  } else {
-    hostListDiv.style.height = hostListDiv.scrollHeight + 'px';
-    removeClass(hostListDiv, 'collapsed');
-  }
-
-}
-
-/**
  * Start a connection to the specified host, using the stored details.
  *
  * @param {string} hostId The Id of the host to connect to.
  * @return {void} Nothing.
  */
 remoting.connectHost = function(hostId) {
-  var hostList = remoting.hostList_;
-  for (var i = 0; i < hostList.length; ++i) {
-    var host = remoting.hostList_[i];
+  for (var i = 0; i < remoting.hostList.length; ++i) {
+    var host = remoting.hostList[i];
     if (host.hostId != hostId)
       continue;
 
diff --git a/remoting/webapp/me2mom/home_screen.js b/remoting/webapp/me2mom/home_screen.js
new file mode 100644
index 0000000..8a107ea
--- /dev/null
+++ b/remoting/webapp/me2mom/home_screen.js
@@ -0,0 +1,206 @@
+// 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
+ * Functions related to the 'home screen' for Chromoting.
+ */
+
+'use strict';
+
+/** @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() {
+
+/**
+ * Query the Remoting Directory for the user's list of hosts.
+ *
+ * @return {void} Nothing.
+ */
+remoting.refreshHostList = function() {
+  // Fetch a new Access Token for the user, if necessary.
+  if (remoting.oauth2.needsNewAccessToken()) {
+    remoting.oauth2.refreshAccessToken(function(xhr) {
+        if (remoting.oauth2.needsNewAccessToken()) {
+          // Failed to get access token
+          console.error('refreshHostList: OAuth2 token fetch failed');
+          showHostListError_(remoting.Error.AUTHENTICATION_FAILED);
+          return;
+        }
+        remoting.refreshHostList();
+      });
+    return;
+  }
+
+  var headers = {
+    'Authorization': 'OAuth ' + remoting.oauth2.getAccessToken()
+  };
+
+  var xhr = remoting.xhr.get(
+      'https://www.googleapis.com/chromoting/v1/@me/hosts',
+      parseHostListResponse_,
+      '',
+      headers);
+}
+
+/**
+ * Handle the results of the host list request.  A success response will
+ * include a JSON-encoded list of host descriptions, which we display if we're
+ * able to successfully parse it.
+ *
+ * @param {XMLHttpRequest} xhr The XHR object for the host list request.
+ * @return {void} Nothing.
+ */
+function parseHostListResponse_(xhr) {
+  // Ignore host list responses if we're not on the Home screen. This mainly
+  // ensures that errors don't cause an unexpected mode switch.
+  if (remoting.currentMode != remoting.AppMode.HOME) {
+    return;
+  }
+
+  if (xhr.readyState != 4) {
+    return;
+  }
+
+  try {
+    if (xhr.status == 200) {
+      var parsed_response =
+          /** @type {{data: {items: Array}}} */ JSON.parse(xhr.responseText);
+      if (parsed_response.data && parsed_response.data.items) {
+        replaceHostList_(parsed_response.data.items);
+      }
+    } else {
+      // Some other error.  Log for now, pretty-print in future.
+      console.error('Bad status on host list query: ', xhr);
+      var errorResponse =
+          /** @type {{error: {code: *, message: *}}} */
+          JSON.parse(xhr.responseText);
+      if (errorResponse.error &&
+          errorResponse.error.code &&
+          errorResponse.error.message) {
+        remoting.debug.log('Error code ' + errorResponse.error.code);
+        remoting.debug.log('Error message ' + errorResponse.error.message);
+      } else {
+        remoting.debug.log('Error response: ' + xhr.responseText);
+      }
+
+      // For most errors in the 4xx range, tell the user to re-authorize us.
+      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);
+      }
+    }
+  } catch (er) {
+    console.error('Error processing response: ', 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