Add basic debug log to host page.

remoting/webapp/me2mom/debug_log.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;
+
+function toggleDebugLog() {
+  debugLog = document.getElementById('debug-log');
+  toggleButton = document.getElementById('debug-log-toggle');
+
+  if (!debugLog.style.display || debugLog.style.display == 'none') {

[Jamie, 2011/06/07 18:58:32]

I've used class='hidden' elsewhere to avoid changing the style directly. I'm not
really sure which is better TBH, but if you want to be consistent, we should do
the same in both places. Adopting the class-based approach will entail moving
the add/removeClass functions into the remoting namespace so that they're
accessible here,

[garykac, 2011/06/07 20:44:32]

Good point. However, it doesn't seem worth entangling this code with the
add/remove class code -- especially since it's debug code.

+    debugLog.style.display = 'block';
+    toggleButton.value = 'Hide Debug Log';

[Jamie, 2011/06/07 18:58:32]

Is this the only place we have display strings in both the HTML and the JS? I
know we haven't really decided on a localisation strategy yet, but I think I'd
be happier if all our user-facing strings were in the HTML. Perhaps just change
the button to say "Toggle debug log" and don't both changing the string.

[garykac, 2011/06/07 20:44:32]

Changed to simply "Debug log" so that the button isn't too large.

+  } else {
+    debugLog.style.display = 'none';
+    toggleButton.value = 'Show Debug Log';
+  }
+}
+
+/**
+ * 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');
+
+  // 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;
+}