Fix up remoting UI to make it closer to spec

remoting/webapp/me2mom/remoting_session.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.
 
 // Maximum numer of lines to record in the debug log.
 // Only the most recent <n> lines are displayed.
 var MAX_DEBUG_LOG_SIZE = 1000;
 
 var remoting = chrome.extension.getBackgroundPage().remoting;
 
@@ skipping 11 matching lines @@
 // old messages.  This starts at 1 and is incremented for each new message.
 remoting.messageId = 1;
 
 remoting.scaleToFit = false;
 
 // Default to trying to sandboxed connections.
 remoting.connectMethod = 'sandboxed';
 remoting.httpXmppProxy =
     'https://chromoting-httpxmpp-oauth2-dev.corp.google.com';
 
+window.addEventListener("load", init_, false);
+
 // This executes a poll loop on the server for more Iq packets, and feeds them
 // to the plugin.
 function feedIq() {
   var xhr = new XMLHttpRequest();
   xhr.open('GET', remoting.httpXmppProxy + '/readIq?host_jid=' +
            encodeURIComponent(remoting.hostjid), true);
   xhr.withCredentials = true;
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
@@ skipping 62 matching lines @@
            '&payload_xml=' + encodeURIComponent(payload_xml) +
            '&id=' + id + '&type=' + type +
            '&host_jid=' + encodeURIComponent(remoting.hostjid));
 }
 
 function checkVersion(plugin) {
   return remoting.apiVersion >= plugin.apiMinVersion &&
       plugin.apiVersion >= remoting.apiMinVersion;
 }
 
-function init() {
+function init_() {
   // Kick off the connection.
   var plugin = document.getElementById('remoting');
 
   remoting.plugin = plugin;
 
   // Only allow https connections to the httpXmppProxy.
   var regExp = /^ *https:\/\//;
   if (remoting.httpXmppProxy.search(regExp) == -1) {
     addToDebugLog('Aborting. httpXmppProxy does not specify https protocol: ' +
                   remoting.httpXmppProxy);
@@ skipping 26 matching lines @@
                                 remoting.accessCode);
     }
   } else {
     addToDebugLog('ERROR: remoting plugin not loaded');
     setClientStateMessage('Plugin not loaded');
   }
 
 }
 
 function toggleDebugLog() {
-  debugLog = document.getElementById('debug_log');
-  toggleButton = document.getElementById('debug_log_toggle');
+  debugLog = document.getElementById('debug-log');
+  toggleButton = document.getElementById('debug-log-toggle');
 
   if (!debugLog.style.display || debugLog.style.display == 'none') {
     debugLog.style.display = 'block';
     toggleButton.value = 'Hide Debug Log';
   } else {
     debugLog.style.display = 'none';
     toggleButton.value = 'Show Debug Log';
   }
 }
 
 function toggleScaleToFit() {
   remoting.scaleToFit = !remoting.scaleToFit;
-  document.getElementById('scale_to_fit_toggle').value =
+  document.getElementById('scale-to-fit-toggle').value =
       remoting.scaleToFit ? 'No scaling' : 'Scale to fit';
   remoting.plugin.setScaleToFit(remoting.scaleToFit);
 }
 
 /**
  * This is the callback method that the plugin calls to request username and
  * password for logging into the remote host. For Me2Mom we are pre-authorized
  * so this is a no-op.
  */
 function loginChallengeCallback() {
@@ skipping 40 matching lines @@
 /**
  * Show a client message that stays on the screeen until the state changes.
  *
  * @param {string} message The message to display.
  */
 function setClientStateMessage(message) {
   // Increment message id to ignore any previous fadeout requests.
   remoting.messageId++;
 
   // Update the status message.
-  var msg = document.getElementById('status_msg');
+  var msg = document.getElementById('status-msg');
   msg.innerText = message;
   msg.style.opacity = 1;
   msg.style.display = '';
 }
 
 /**
  * Show a client message for the specified amount of time.
  *
  * @param {string} message The message to display.
  * @param {number} duration Milliseconds to show message before fading.
  */
 function setClientStateMessageFade(message, duration) {
   setClientStateMessage(message);
 
   // Set message duration.
-  window.setTimeout("fade('status_msg', " + remoting.messageId + ', ' +
+  window.setTimeout("fade('status-msg', " + remoting.messageId + ', ' +
                           '100, 10, 200)',
                     duration);
 }
 
 /**
  * Fade the specified element.
  * For example, to have element 'foo' fade away over 2 seconds, you could use
  * either:
  *   fade('foo', 100, 10, 200)
  *     - Start at 100%, decrease by 10% each time, wait 200ms between updates.
@@ skipping 11 matching lines @@
   if (id != remoting.messageId) {
     return;
   }
 
   var e = document.getElementById(name);
   if (e) {
     var newVal = val - delta;
     if (newVal > 0) {
       // Decrease opacity and set timer for next fade event.
       e.style.opacity = newVal / 100;
-      window.setTimeout("fade('status_msg', " + id + ', ' + newVal + ', ' +
+      window.setTimeout("fade('status-msg', " + id + ', ' + newVal + ', ' +
                               delta + ', ' + delay + ')',
                         delay);
     } else {
       // Completely hide the text and stop fading.
       e.style.opacity = 0;
       e.style.display = 'none';
     }
   }
 }
 
 /**
  * This is that callback that the plugin invokes to indicate that there
  * is additional debug log info to display.
  */
 function debugInfoCallback(msg) {
   addToDebugLog('plugin: ' + msg);
 }
 
 /**
  * Add the given message to the debug log.
  *
  * @param {string} message The debug info to add to the log.
  */
 function addToDebugLog(message) {
-  var debugLog = document.getElementById('debug_log');
+  var debugLog = document.getElementById('debug-log');
 
   // Remove lines from top if we've hit our max log size.
   if (debugLog.childNodes.length == MAX_DEBUG_LOG_SIZE) {
     debugLog.removeChild(debugLog.firstChild);
   }
 
   // Add the new <p> to the end of the debug log.
   var p = document.createElement('p');
   p.appendChild(document.createTextNode(message));
   debugLog.appendChild(p);
 
   // Scroll to bottom of div
   debugLog.scrollTop = debugLog.scrollHeight;
 }
 
 function updateStatusBarStats() {
   if (remoting.plugin.status != remoting.plugin.STATUS_CONNECTED)
     return;
   var videoBandwidth = remoting.plugin.videoBandwidth;
   var videoCaptureLatency = remoting.plugin.videoCaptureLatency;
   var videoEncodeLatency = remoting.plugin.videoEncodeLatency;
   var videoDecodeLatency = remoting.plugin.videoDecodeLatency;
   var videoRenderLatency = remoting.plugin.videoRenderLatency;
 
   var units = '';
   if (videoBandwidth < 1024) {
     units = 'Bps';
   } else if (videoBandwidth < 1048576) {
-    units = 'KBps';
+    units = 'KiBps';
     videoBandwidth = videoBandwidth / 1024;
   } else if (videoBandwidth < 1073741824) {
-    units = 'MBps';
+    units = 'MiBps';
     videoBandwidth = videoBandwidth / 1048576;
   } else {
-    units = 'GBps';
+    units = 'GiBps';
     videoBandwidth = videoBandwidth / 1073741824;
   }
 
   setClientStateMessage(
-      'Video stats: bandwidth: ' + videoBandwidth.toFixed(2) + units +
-      ', Latency: capture: ' + videoCaptureLatency.toFixed(2) + 'ms' +
-      ', encode: ' + videoEncodeLatency.toFixed(2) + 'ms' +
-      ', decode: ' + videoDecodeLatency.toFixed(2) + 'ms' +
-      ', render: ' + videoRenderLatency.toFixed(2) + 'ms');
+      'Bandwidth: ' + videoBandwidth.toFixed(2) + units +
+      ', Capture: ' + videoCaptureLatency.toFixed(2) + 'ms' +
+      ', Encode: ' + videoEncodeLatency.toFixed(2) + 'ms' +
+      ', Decode: ' + videoDecodeLatency.toFixed(2) + 'ms' +
+      ', Render: ' + videoRenderLatency.toFixed(2) + 'ms');
 
   // Update the stats once per second.
   window.setTimeout('updateStatusBarStats()', 1000);
 }