Added debug logging to across the classes.

To turn on logging, add Debug=true to the url, like http://localhost:3000/frontend/1#Debug=true.  Lots of logging information will be dumped to you JS console.

app/views/layouts/frontend.html.erb

@@ -7,6 +7,8 @@
   <script type="text/javascript">
     goog.require('goog.events.EventTarget');
     goog.require('goog.events.Event');
+    goog.require('goog.debug.Logger');
+    goog.require('goog.debug.Console');
   </script>
   <script src="/frontend_js/content.js"></script>
   <script src="/frontend_js/contents/random_text.js"></script>
@@ -36,6 +38,7 @@
   <script type="text/javascript">
     var s;
     function load(){
+      goog.debug.Console.autoInstall();
       s1 = new concerto.frontend.Screen(1, document.getElementById('scr1'));
       s2 = new concerto.frontend.Screen(1, document.getElementById('scr2'));
       s3 = new concerto.frontend.Screen(1, document.getElementById('scr3'));

public/frontend_js/content.js

@@ -3,6 +3,7 @@ goog.provide('concerto.frontend.Content.EventType');
 
 goog.require('goog.async.Delay');
 goog.require('goog.date.DateTime');
+goog.require('goog.debug.Logger');
 goog.require('goog.events');
 goog.require('goog.events.Event');
 goog.require('goog.events.EventTarget');
@@ -34,6 +35,15 @@ concerto.frontend.Content = function(data) {
 goog.inherits(concerto.frontend.Content, goog.events.EventTarget);
 
 
+/**
+ * The logger for this class.
+ * @type {goog.debug.Logger}
+ * @private
+ */
+concerto.frontend.Content.prototype.logger_ = goog.debug.Logger.getLogger(
+    'concerto.frontend.Content');
+
+
 /**
  * Start loading a piece of content.
  * Construct a div for the piece of content, request the
@@ -43,6 +53,8 @@ goog.inherits(concerto.frontend.Content, goog.events.EventTarget);
  * This dispatches the START_LOAD event.
  */
 concerto.frontend.Content.prototype.startLoad = function() {
+  this.logger_.info('Content ' + this.id + ' is starting to load.');
+
   /**
    * Div to hold this content.
    * @type {Element}
@@ -89,6 +101,9 @@ concerto.frontend.Content.prototype.finishLoad = function() {
    * @private
    */
   this.end_ = new goog.date.DateTime();
+  var loadTime = this.end_.getMilliseconds() - this.start_.getMilliseconds();
+  this.logger_.info('Content ' + this.id + ' is done loading. Took: ' +
+      loadTime + 'ms.');
 
   this.dispatchEvent(concerto.frontend.Content.EventType.FINISH_LOAD);
 };
@@ -100,6 +115,7 @@ concerto.frontend.Content.prototype.finishLoad = function() {
  * the field in some capacity.  We must stage the div in this.div.
  */
 concerto.frontend.Content.prototype.render = function() {
+  this.logger_.info('Content ' + this.id + ' is being rendered.');
   /**
    * A public element with the content.
    * @type {Element}

public/frontend_js/field.js

@@ -3,6 +3,7 @@ goog.provide('concerto.frontend.Field');
 goog.require('concerto.frontend.Content.ClientTime');
 goog.require('concerto.frontend.Content.RandomText');
 goog.require('concerto.frontend.Transition.Fade');
+goog.require('goog.debug.Logger');
 goog.require('goog.dom');
 goog.require('goog.events');
 goog.require('goog.events.EventTarget');
@@ -77,6 +78,15 @@ concerto.frontend.Field = function(position, id, opt_transition) {
 goog.inherits(concerto.frontend.Field, goog.events.EventTarget);
 
 
+/**
+ * The logger for this class.
+ * @type {goog.debug.Logger}
+ * @private
+ */
+concerto.frontend.Field.prototype.logger_ = goog.debug.Logger.getLogger(
+    'concerto.frontend.Field');
+
+
 /**
  * Create a div for the field.
  */
@@ -109,6 +119,7 @@ concerto.frontend.Field.prototype.inject = function(div) {
  * load a new piece of content.
  */
 concerto.frontend.Field.prototype.loadContent = function() {
+  this.logger_.info('Field ' + this.id + ' is looking for new content.');
   var random_duration = Math.floor(Math.random() * 11);
   var data = { duration: random_duration };
 
@@ -139,6 +150,7 @@ concerto.frontend.Field.prototype.loadContent = function() {
  * the current field state.
  */
 concerto.frontend.Field.prototype.showContent = function() {
+  this.logger_.info('Field ' + this.id + ' is showing new content.');
   // Render the HTML for the div into content.div
   this.next_content_.render();
 
@@ -156,6 +168,8 @@ concerto.frontend.Field.prototype.showContent = function() {
  * Advance content.
  */
 concerto.frontend.Field.prototype.nextContent = function() {
+  this.logger_.info('Field ' + this.id +
+      ' would like a new piece of content.');
   // If a piece of content is already in the queue, use that.
   if (!goog.isDefAndNotNull(this.next_content_)) {
     this.loadContent();
@@ -169,6 +183,9 @@ concerto.frontend.Field.prototype.nextContent = function() {
  */
 concerto.frontend.Field.prototype.autoAdvance = function() {
   if (this.auto_advance_) {
+    this.logger_.info('Field ' + this.id + ' is auto-advancing.');
     this.nextContent();
+  } else {
+    this.logger_.info('Field ' + this.id + ' is not advancing.');
   }
 };

public/frontend_js/position.js

@@ -2,6 +2,7 @@ goog.provide('concerto.frontend.Position');
 
 goog.require('concerto.frontend.Field');
 goog.require('goog.array');
+goog.require('goog.debug.Logger');
 goog.require('goog.dom');
 goog.require('goog.object');
 goog.require('goog.style');
@@ -38,6 +39,15 @@ concerto.frontend.Position = function(template, opt_div) {
 };
 
 
+/**
+ * The logger for this class.
+ * @type {goog.debug.Logger}
+ * @private
+ */
+concerto.frontend.Position.prototype.logger_ = goog.debug.Logger.getLogger(
+    'concerto.frontend.Position');
+
+
 /**
  * Create the div to use for the position.
  *

public/frontend_js/screen.js

@@ -1,6 +1,7 @@
 goog.provide('concerto.frontend.Screen');
 
 goog.require('concerto.frontend.Template');
+goog.require('goog.debug.Logger');
 goog.require('goog.dom');
 goog.require('goog.net.XhrIo');
 goog.require('goog.net.XhrManager');
@@ -47,6 +48,15 @@ concerto.frontend.Screen = function(screen_id, opt_div) {
 goog.exportSymbol('concerto.frontend.Screen', concerto.frontend.Screen);
 
 
+/**
+ * The logger for this class.
+ * @type {goog.debug.Logger}
+ * @private
+ */
+concerto.frontend.Screen.prototype.logger_ = goog.debug.Logger.getLogger(
+    'concerto.frontend.Screen');
+
+
 /**
  * Configuration URL.
  * A temporary method to build the URL used for downloading
@@ -74,6 +84,7 @@ concerto.frontend.Screen.prototype.setup = function() {
   this.div_ = div;
 
   var url = this.configUrl();
+  this.logger_.info('Requesting screen config from ' + url);
   this.connection.send('setup', url, 'GET', '', null, 1, goog.bind(function(e) {
     var xhr = e.target;
     var obj = xhr.getResponseJson();

public/frontend_js/template.js

@@ -2,6 +2,7 @@ goog.provide('concerto.frontend.Template');
 
 goog.require('concerto.frontend.Position');
 goog.require('goog.array');
+goog.require('goog.debug.Logger');
 goog.require('goog.dom');
 goog.require('goog.style');
 
@@ -44,6 +45,15 @@ concerto.frontend.Template = function(screen, opt_div) {
 };
 
 
+/**
+ * The logger for this class.
+ * @type {goog.debug.Logger}
+ * @private
+ */
+concerto.frontend.Template.prototype.logger_ = goog.debug.Logger.getLogger(
+    'concerto.frontend.Template');
+
+
 /**
  * Create the template div.
  * Create a default div to hold the template, and set it to