Replace in-session header with auto-hide tool-bar.

remoting/webapp/me2mom/remoting.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.
 
 var remoting = remoting || {};
 
 (function() {
-"use strict";
+'use strict';
 
 window.addEventListener('blur', pluginLostFocus_, false);
 
 function pluginLostFocus_() {
   // If the plug loses input focus, release all keys as a precaution against
   // leaving them 'stuck down' on the host.
   if (remoting.session && remoting.session.plugin) {
     remoting.session.plugin.releaseAllKeys();
   }
 }
@@ skipping 25 matching lines @@
 var kDigitsPerGroup = 4;
 
 function retrieveEmail_(access_token) {
   var headers = {
     'Authorization': 'OAuth ' + remoting.oauth2.getAccessToken()
   };
 
   var onResponse = function(xhr) {
     if (xhr.status != 200) {
       // TODO(ajwong): Have a better way of showing an error.
-      window.alert("Unable to get e-mail");
+      window.alert('Unable to get e-mail');
       return;
     }
 
     // TODO(ajwong): See if we can't find a JSON endpoint.
     setEmail(xhr.responseText.split('&')[0].split('=')[1]);
   };
 
   // TODO(ajwong): Update to new v2 API.
   remoting.xhr.get('https://www.googleapis.com/userinfo/email',
                    onResponse, '', headers);
@@ skipping 37 matching lines @@
   }
   updateControls_(disableControls);
 }
 
 function setEmail(value) {
   window.localStorage.setItem(KEY_EMAIL_, value);
   updateAuthStatus_();
 }
 
 /**
- * @return {string}
+ * @return {string} The email address associated with the auth credentials.
  */
 function getEmail() {
   return window.localStorage.getItem(KEY_EMAIL_);
 }
 
 function exchangedCodeForToken_() {
   if (!remoting.oauth2.isAuthenticated()) {
     alert('Your OAuth2 token was invalid. Please try again.');
   }
   remoting.oauth2.callWithToken(function(token) {
       retrieveEmail_(token);
       updateAuthStatus_();
   });
 }
 
 remoting.clearOAuth2 = function() {
   remoting.oauth2.clear();
   updateAuthStatus_();
 }
 
 // Show the div with id |mode| and hide those with other ids in |modes|.
 function setMode_(mode, modes) {
   for (var i = 0; i < modes.length; ++i) {
     modes[i].hidden = (mode != modes[i].id);
   }
 }
 
 remoting.toggleDebugLog = function() {
   var debugLog = document.getElementById('debug-log');
-  var toggleButton = document.getElementById('debug-log-toggle');
-
-  if (!debugLog.style.display || debugLog.style.display == 'none') {
-    debugLog.style.display = 'block';
-    toggleButton.value = 'Hide Debug Log';
+  if (debugLog.hidden) {
+    debugLog.hidden = false;
   } else {
-    debugLog.style.display = 'none';
-    toggleButton.value = 'Show Debug Log';
+    debugLog.hidden = true;
   }
 }
 
 remoting.init = function() {
   // Create global objects.
   remoting.oauth2 = new remoting.OAuth2();
-  remoting.debug = new remoting.DebugLog(document.getElementById('debug-log'));
+  remoting.debug =
+      new remoting.DebugLog(document.getElementById('debug-messages'));
 
   updateAuthStatus_();
   refreshEmail_();
   remoting.setHostMode('unshared');
   remoting.setClientMode('unconnected');
   setGlobalMode(getAppStartupMode());
   document.getElementById('loading-mode').hidden = true;
   document.getElementById('choice-mode').hidden = false;
 }
 
@@ skipping 124 matching lines @@
 * This is that callback that the host plugin invokes to indicate that there
 * is additional debug log info to display.
 */
 function debugInfoCallback_(msg) {
   remoting.debug.log('plugin: ' + msg);
 }
 
 function showShareError_(errorCode) {
   var errorDiv = document.getElementById(errorCode);
   errorDiv.style.display = 'block';
-  remoting.debug.log("Sharing error: " + errorCode);
+  remoting.debug.log('Sharing error: ' + errorCode);
   remoting.setHostMode('share-failed');
 }
 
 remoting.cancelShare = function() {
   remoting.debug.log('Canceling share...');
   var plugin = document.getElementById(remoting.HOST_PLUGIN_ID);
   plugin.disconnect();
 }
 
 /**
  * Show a client message that stays on the screeen until the state changes.
  *
  * @param {string} message The message to display.
+ * @param {string} opt_host The host to display after the message.
  */
-function setClientStateMessage(message) {
-  var msg = document.getElementById('session-status-message');
-  msg.innerText = message;
+function setClientStateMessage(message, opt_host) {
+  document.getElementById('session-status-message').innerText = message;
+  opt_host = opt_host || '';
+  document.getElementById('connected-to').innerText = opt_host;
 }
 
-function updateStatusBarStats() {
+function updateStatistics() {
   if (remoting.session.state != remoting.ClientSession.State.CONNECTED)
     return;
   var stats = remoting.session.stats();
 
   var units = '';
   var videoBandwidth = stats['video_bandwidth'];
   if (videoBandwidth < 1024) {
     units = 'Bps';
   } else if (videoBandwidth < 1048576) {
     units = 'KiBps';
     videoBandwidth = videoBandwidth / 1024;
   } else if (videoBandwidth < 1073741824) {
     units = 'MiBps';
     videoBandwidth = videoBandwidth / 1048576;
   } else {
     units = 'GiBps';
     videoBandwidth = videoBandwidth / 1073741824;
   }
 
-  setClientStateMessage(
+  var statistics = document.getElementById('statistics');
+  statistics.innerText =
       'Bandwidth: ' + videoBandwidth.toFixed(2) + units +
       ', Capture: ' + stats['capture_latency'].toFixed(2) + 'ms' +
       ', Encode: ' + stats['encode_latency'].toFixed(2) + 'ms' +
       ', Decode: ' + stats['decode_latency'].toFixed(2) + 'ms' +
       ', Render: ' + stats['render_latency'].toFixed(2) + 'ms' +
-      ', Latency: ' + stats['roundtrip_latency'].toFixed(2) + 'ms');
+      ', Latency: ' + stats['roundtrip_latency'].toFixed(2) + 'ms';
 
   // Update the stats once per second.
-  window.setTimeout(updateStatusBarStats, 1000);
+  window.setTimeout(updateStatistics, 1000);
 }
 
 function onClientStateChange_(state) {
   if (state == remoting.ClientSession.State.UNKNOWN) {
     setClientStateMessage('Unknown');
   } else if (state == remoting.ClientSession.State.CREATED) {
     setClientStateMessage('Created');
   } 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.');
   } else if (state == remoting.ClientSession.State.CONNECTING) {
     setClientStateMessage('Connecting as ' + remoting.username);
   } else if (state == remoting.ClientSession.State.INITIALIZING) {
     setClientStateMessage('Initializing connection');
   } else if (state == remoting.ClientSession.State.CONNECTED) {
-    updateStatusBarStats();
+    var split = remoting.hostJid.split('/');
+    var host = null;
+    if (split.length == 2) {
+      host = split[0];
+    }
+    setClientStateMessage('Connected to', host);
+    updateStatistics();
   } else if (state == remoting.ClientSession.State.CLOSED) {
     setClientStateMessage('Closed');
   } else if (state == remoting.ClientSession.State.CONNECTION_FAILED) {
     setClientStateMessage('Failed');
   } else {
-    setClientStateMessage('Bad State!!');
+    setClientStateMessage('Bad State: ' + state);
   }
 }
 
 function startSession_() {
   remoting.debug.log('Starting session...');
   remoting.username = getEmail();
   setGlobalMode(remoting.AppMode.IN_SESSION);
   remoting.session =
       new remoting.ClientSession(remoting.hostJid, remoting.hostPublicKey,
                                  remoting.accessCode, getEmail(),
@@ skipping 81 matching lines @@
   document.getElementById('cancel-button').disabled = true;
   if (remoting.currentMode == remoting.AppMode.HOST) {
     remoting.cancelShare();
   }
 }
 
 /**
  * Changes the major-mode of the application (Eg., client or host).
  *
  * @param {remoting.AppMode} mode The mode to shift the application into.
- * @return {void}
+ * @return {void} Nothing.
  */
 remoting.setAppMode = function(mode) {
   setGlobalMode(mode);
   window.localStorage.setItem(KEY_APP_MODE_, mode);
 }
 
 /**
  * Gets the major-mode that this application should start up in.
  *
- * @return {remoting.AppMode}
+ * @return {remoting.AppMode} The mode (client or host) to start in.
  */
 function getAppStartupMode() {
   var mode = window.localStorage.getItem(KEY_APP_MODE_);
   if (!mode) {
     mode = remoting.AppMode.HOST;
   }
   return mode;
 }
 
 remoting.toggleScaleToFit = function() {
   remoting.scaleToFit = !remoting.scaleToFit;
-  document.getElementById('scale-to-fit-toggle').value =
-      remoting.scaleToFit ? 'No scaling' : 'Scale to fit';
   remoting.session.toggleScaleToFit(remoting.scaleToFit);
 }
 
 }());