Improve client error logging consistency and UI.

BUG=None
TEST=Manual

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

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

4 files changed, 62 insertions, 49 deletions

diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index eff6410..2830c7e 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -129,6 +129,16 @@ label {
   */
 }
 
+.error-state {
+  background-image: url('icon_warning.png');
+  background-repeat: no-repeat;
+  background-position: top left;
+  padding-left: 30px;
+  padding-top: 3px;
+  color: #900;
+  display: inline-block;
+}
+
 .expiring {
     color: #900 !important;
 }
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 5c83cca..03c510a 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -176,7 +176,7 @@ found in the LICENSE file.
 
         <div id="connecting" class="mode">
           <div class="message">
-            Verifying access code...
+            Verifying access code&hellip;
             <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
                  the eventual server response not to ignore responses for any
                  subsequent requests. This should be unified with the host-side
@@ -185,17 +185,8 @@ found in the LICENSE file.
           </div>
         </div> <!-- connecting -->
 
-        <div id="connect-failed" class="mode">
-          <div id="no-response" class="message">
-            Failed to get response from server.
-          </div>
-          <div id="invalid-access-code" class="message">
-            Invalid access code.
-          </div>
-          <div id="other-connect-error" class="message">
-            An error occurred. The server response was
-            <div id="server-response"></div>.
-          </div>
+        <div id="connect-failed" class="mode message">
+          <span id="connect-error-message" class="error-state"></span>
           <div class="centered-button">
             <button type="button" class="auth-status-control big-button"
                     onclick="remoting.setClientMode('unconnected');">
diff --git a/remoting/webapp/me2mom/client_session.js b/remoting/webapp/me2mom/client_session.js
index 6a38e26..e42c170 100644
--- a/remoting/webapp/me2mom/client_session.js
+++ b/remoting/webapp/me2mom/client_session.js
@@ -120,7 +120,7 @@ remoting.ClientSession.prototype.createPluginAndConnect =
   if (!this.isPluginVersionSupported_(this.plugin)) {
     // TODO(ajwong): Remove from parent.
     delete this.plugin;
-    this.setState_(remoting.ClientSession.BAD_PLUGIN_VERSION);
+    this.setState_(remoting.ClientSession.State.BAD_PLUGIN_VERSION);
     return;
   }
 
@@ -159,6 +159,7 @@ remoting.ClientSession.prototype.disconnect = function() {
   var plugin = document.getElementById(this.PLUGIN_ID);
   if (plugin) {
     plugin.parentNode.removeChild(plugin);
+    plugin = null;
   }
   var parameters = {
     'to': this.hostJid,
@@ -192,7 +193,7 @@ remoting.ClientSession.prototype.sendIq_ = function(msg) {
   var jingleNode = iqNode.firstChild;
   var serializer = new XMLSerializer();
   var parameters = {
-    'to': iqNode.getAttribute('to') || "",
+    'to': iqNode.getAttribute('to') || '',
     'payload_xml': serializer.serializeToString(jingleNode),
     'id': iqNode.getAttribute('id') || '1',
     'type': iqNode.getAttribute('type'),
@@ -351,7 +352,7 @@ remoting.ClientSession.prototype.onDesktopSizeChanged_ = function() {
  * @param {boolean} shouldScale If the plugin should scale itself.
  * @return {void} Nothing.
  */
-remoting.ClientSession.prototype.toggleScaleToFit = function (shouldScale) {
+remoting.ClientSession.prototype.toggleScaleToFit = function(shouldScale) {
   if (shouldScale) {
     remoting.debug.log('scale to fit is turned on.');
 
@@ -388,7 +389,7 @@ remoting.ClientSession.prototype.toggleScaleToFit = function (shouldScale) {
     this.plugin.height = this.plugin.desktopHeight;
   }
   remoting.debug.log('plugin size is now: ' +
-                     this.plugin.width + " x " + this.plugin.height + '.');
+                     this.plugin.width + ' x ' + this.plugin.height + '.');
   this.plugin.setScaleToFit(shouldScale);
 };
 
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index b220502..f000fcd 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -27,6 +27,18 @@ remoting.AppMode = {
 remoting.EMAIL = 'email';
 remoting.HOST_PLUGIN_ID = 'host-plugin-id';
 
+// TODO(jamiewalch): Replace this with a proper l10n strategy.
+/** @enum {string} */
+remoting.ClientError = {
+  NO_RESPONSE: 'Failed to get response from server.',
+  INVALID_ACCESS_CODE: 'Invalid access code.',
+  MISSING_PLUGIN: 'The viewer plugin is missing or out-of-date. Please ' +
+      'upgrade to a more recent version of Chrome.',
+  OAUTH_FETCH_FAILED: 'Unable to fetch OAuth2 token. Try revoking the ' +
+      'token and authenticating again.',
+  OTHER_ERROR: 'An error occurred.'
+};
+
 /**
  * Whether or not the plugin should scale itself.
  * @type {boolean}
@@ -439,18 +451,14 @@ function updateStatistics() {
 
 function onClientStateChange_(oldState) {
   var state = remoting.session.state;
-  if (state == remoting.ClientSession.State.UNKNOWN) {
-    setClientStateMessage('Unknown');
-  } else if (state == remoting.ClientSession.State.CREATED) {
-    setClientStateMessage('Created');
+  if (state == remoting.ClientSession.State.CREATED) {
+    remoting.debug.log('Created plugin');
   } else if (state == remoting.ClientSession.State.BAD_PLUGIN_VERSION) {
-    setClientStateMessage('Incompatible Plugin Version');
-  } else if (state == remoting.ClientSession.State.UNKNOWN_PLUGIN_ERROR) {
-    setClientStateMessage('Unknown error with plugin.');
+    showConnectError_(remoting.ClientError.MISSING_PLUGIN);
   } else if (state == remoting.ClientSession.State.CONNECTING) {
-    setClientStateMessage('Connecting as ' + remoting.username);
+    remoting.debug.log('Connecting as ' + remoting.username);
   } else if (state == remoting.ClientSession.State.INITIALIZING) {
-    setClientStateMessage('Initializing connection');
+    remoting.debug.log('Initializing connection');
   } else if (state == remoting.ClientSession.State.CONNECTED) {
     var split = remoting.hostJid.split('/');
     var host = null;
@@ -461,17 +469,21 @@ function onClientStateChange_(oldState) {
     setGlobalMode(remoting.AppMode.IN_SESSION);
     updateStatistics();
   } else if (state == remoting.ClientSession.State.CLOSED) {
-    setClientStateMessage('Closed');
     if (oldState != remoting.ClientSession.State.CONNECTED) {
       // TODO(jamiewalch): This is not quite correct, as it will report
       // "Invalid access code", regardless of what actually went wrong.
       // Fix this up by having the host send a suitable error code.
-      showConnectError_(404);
+      showConnectError_(remoting.ClientError.INVALID_ACCESS_CODE);
+    } else {
+      remoting.debug.log('Connection closed');
+      remoting.setClientMode('unconnected');
     }
   } else if (state == remoting.ClientSession.State.CONNECTION_FAILED) {
-    setClientStateMessage('Failed');
+    remoting.debug.log('Client plugin reported connection failed');
+    showConnectError_(remoting.ClientError.OTHER_ERROR);
   } else {
-    setClientStateMessage('Bad State: ' + state);
+    remoting.debug.log('Unexpected client plugin state: ' + state);
+    showConnectError_(remoting.ClientError.OTHER_ERROR);
   }
 }
 
@@ -489,24 +501,13 @@ function startSession_() {
   });
 }
 
-function showConnectError_(responseCode, responseString) {
-  var errors = [
-    document.getElementById('no-response'),
-    document.getElementById('invalid-access-code'),
-    document.getElementById('other-connect-error')
-  ];
-  var showError = null;
-  if (responseCode == 0) {
-    showError = errors[0];
-  } else if (responseCode == 404) {
-    showError = errors[1];
-  } else {
-    showError = errors[2];
-    var responseNode = document.getElementById('server-response');
-    responseNode.innerText = responseString + ' (' + responseCode + ')';
-  }
-  setMode_(showError.id, errors);
+function showConnectError_(errorMsg) {
+  remoting.debug.log('Connection failed: ' + errorMsg);
+  var errorNode =  document.getElementById('connect-error-message');
+  errorNode.innerText = errorMsg;
   remoting.accessCode = '';
+  remoting.session.disconnect();
+  remoting.session = null;
   remoting.setClientMode('connect-failed');
 }
 
@@ -521,7 +522,15 @@ function parseServerResponse_(xhr) {
       return;
     }
   }
-  showConnectError_(xhr.status, xhr.responseText);
+  var errorMsg = remoting.ClientError.OTHER_ERROR;
+  if (xhr.status == 404) {
+    errorMsg = remoting.ClientError.INVALID_ACCESS_CODE;
+  } else if (xhr.status == 0) {
+    errorMsg = remoting.ClientError.NO_RESPONSE;
+  } else {
+    remoting.debug.log('The server responded: ' + xhr.responseText);
+  }
+  showConnectError_(errorMsg);
 }
 
 function normalizeAccessCode_(accessCode) {
@@ -549,7 +558,8 @@ remoting.doTryConnect = function() {
   // At present, only 12-digit access codes are supported, of which the first
   // 7 characters are the supportId.
   if (remoting.accessCode.length != kAccessCodeLen) {
-    showConnectError_(404);
+    remoting.debug.log('Bad access code length');
+    showConnectError_(remoting.ClientError.INVALID_ACCESS_CODE);
   } else {
     var supportId = remoting.accessCode.substring(0, kSupportIdLen);
     remoting.setClientMode('connecting');
@@ -562,7 +572,8 @@ remoting.tryConnect = function() {
     remoting.oauth2.refreshAccessToken(function(xhr) {
       if (remoting.oauth2.needsNewAccessToken()) {
         // Failed to get access token
-        showConnectError_(xhr.status);
+        remoting.debug.log('tryConnect: OAuth2 token fetch failed');
+        showConnectError_(remoting.ClientError.OAUTH_FETCH_FAILED);
         return;
       }
       remoting.doTryConnect();