Fixed css to make host list prettier.

remoting/webapp/me2mom/client_screen.js

 // 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 'client screen' for Chromoting.
  */
 
 'use strict';
@@ skipping 446 matching lines @@
       } else {
         remoting.debug.log('Error response: ' + xhr.responseText);
       }
 
       // If the error is unlikely to be recoverable then notify the user.
       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) {
-    // Error parsing response...
-    remoting.debug.log('Error: Error processing response: "' +
-                xhr.status + ' ' + xhr.statusText);
-    remoting.debug.log(xhr.responseText);
+  } catch (er) {
+    console.error('Error processing response: ', xhr);

[Wez, 2011/11/12 01:12:42]

You don't want this showing in the debug log?

[Jamie, 2011/11/14 18:28:16]

TBH, I'm doubting the value of the debug log. console.error does a much better
job of presenting structured data and has proper throwback support. As it
stands, we're inconsistent, but I think console.error is a clear winner in this
case.

   }
 }
 
 /**
  * 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 = '';
 
-  // Show/hide the div depending on whether there are hosts to list.
-  hostListDiv.hidden = (hostList.length == 0);
-
   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_;
@@ skipping 40 matching lines @@
   var createPluginAndConnect = function(token) {
     remoting.clientSession.createPluginAndConnect(
         document.getElementById('session-mode'),
         token);
   };
 
   remoting.setMode(remoting.AppMode.CLIENT_CONNECTING);
   remoting.oauth2.callWithToken(createPluginAndConnect);
 }
 
-// Don't delete this!
 }());