Fix up remoting UI to make it closer to spec

remoting/webapp/me2mom/remoting_session.js

Index: remoting/webapp/me2mom/remoting_session.js
diff --git a/remoting/webapp/me2mom/remoting_session.js b/remoting/webapp/me2mom/remoting_session.js
index 1177ca5c503a271636c37e16a02f29577b47034a..24d7988a58df7cfa441fa56213df4a08e4de3fdc 100644
--- a/remoting/webapp/me2mom/remoting_session.js
+++ b/remoting/webapp/me2mom/remoting_session.js
@@ -29,6 +29,8 @@ 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() {
@@ -111,7 +113,7 @@ function checkVersion(plugin) {
       plugin.apiVersion >= remoting.apiMinVersion;
 }
 
-function init() {
+function init_() {
   // Kick off the connection.
   var plugin = document.getElementById('remoting');
 
@@ -158,8 +160,8 @@ function init() {
 }
 
 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';
@@ -172,7 +174,7 @@ function toggleDebugLog() {
 
 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);
 }
@@ -233,7 +235,7 @@ function setClientStateMessage(message) {
   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 = '';
@@ -249,7 +251,7 @@ 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);
 }
@@ -281,7 +283,7 @@ function fade(name, id, val, delta, delay) {
     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 {
@@ -306,7 +308,7 @@ function debugInfoCallback(msg) {
  * @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) {
@@ -335,22 +337,22 @@ function updateStatusBarStats() {
   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);