From af37dd33abe9a55633aa557b98ec6d4d787e6f35 2014-01-16 16:48:14
From: Jonathan Frederic <jdfreder@calpoly.edu>
Date: 2014-01-16 16:48:14
Subject: [PATCH] Added PEP8 style comments to all of the JS code.

---

diff --git a/IPython/html/static/notebook/js/widgets/widget.js b/IPython/html/static/notebook/js/widgets/widget.js
index 95fca66..e5d68c7 100644
--- a/IPython/html/static/notebook/js/widgets/widget.js
+++ b/IPython/html/static/notebook/js/widgets/widget.js
@@ -18,10 +18,7 @@ define(["notebook/js/widgetmanager",
         "underscore",
         "backbone"], 
 function(widget_manager, underscore, backbone){
-    
-    //--------------------------------------------------------------------
-    // WidgetModel class
-    //--------------------------------------------------------------------
+
     var WidgetModel = Backbone.Model.extend({
         constructor: function (widget_manager, model_id, comm) {
             // Construcctor
@@ -55,14 +52,15 @@ function(widget_manager, underscore, backbone){
         },
 
         send: function (content, callbacks) {
+            // Send a custom msg over the comm.
             if (this.comm !== undefined) {
                 var data = {method: 'custom', custom_content: content};
                 this.comm.send(data, callbacks);
             }
         },
 
-        // Handle when a widget is closed.
         _handle_comm_closed: function (msg) {
+            // Handle when a widget is closed.
             this.trigger('comm:close');
             delete this.comm.model; // Delete ref so GC will collect widget model.
             delete this.comm;
@@ -70,9 +68,8 @@ function(widget_manager, underscore, backbone){
             // TODO: Handle deletion, like this.destroy(), and delete views, etc.
         },
 
-
-        // Handle incoming comm msg.
         _handle_comm_msg: function (msg) {
+            // Handle incoming comm msg.
             var method = msg.content.data.method;
             switch (method) {
                 case 'update':
@@ -87,9 +84,8 @@ function(widget_manager, underscore, backbone){
             }
         },
 
-
-        // Handle when a widget is updated via the python side.
         apply_update: function (state) {
+            // Handle when a widget is updated via the python side.
             for (var key in state) {
                 if (state.hasOwnProperty(key)) {
                     var value = state[key];
@@ -105,9 +101,10 @@ function(widget_manager, underscore, backbone){
             this.save();
         },
 
-
         _handle_status: function (msg, callbacks) {
-            //execution_state : ('busy', 'idle', 'starting')
+            // Handle status msgs.
+
+            // execution_state : ('busy', 'idle', 'starting')
             if (this.comm !== undefined) {
                 if (msg.content.execution_state ==='idle') {
                     // Send buffer if this message caused another message to be
@@ -124,9 +121,8 @@ function(widget_manager, underscore, backbone){
             }
         },
 
-
-        // Custom syncronization logic.
         _handle_sync: function (method, options) {
+            // Custom syncronization logic.
             var model_json = this.toJSON();
             var attr;
 
@@ -176,6 +172,7 @@ function(widget_manager, underscore, backbone){
         },
 
         _pack_models: function(value) {
+            // Replace models with model ids recursively.
             if (value instanceof Backbone.Model) {
                 return value.id;
             } else if (value instanceof Object) {
@@ -190,6 +187,7 @@ function(widget_manager, underscore, backbone){
         },
 
         _unpack_models: function(value) {
+            // Replace model ids with models recursively.
             if (value instanceof Object) {
                 var unpacked = {};
                 for (var key in value) {
@@ -210,11 +208,9 @@ function(widget_manager, underscore, backbone){
     widget_manager.register_widget_model('WidgetModel', WidgetModel);
 
 
-    //--------------------------------------------------------------------
-    // WidgetView class
-    //--------------------------------------------------------------------
     var WidgetView = Backbone.View.extend({
         initialize: function(parameters) {
+            // Public constructor.
             this.model.on('change',this.update,this);
             this.options = parameters.options;
             this.child_views = [];
@@ -222,19 +218,23 @@ function(widget_manager, underscore, backbone){
         },
 
         update: function(){
-            // update view to be consistent with this.model
-            // triggered on model change
+            // Triggered on model change.
+            //
+            // Update view to be consistent with this.model
         },
 
         create_child_view: function(child_model, options) {
-            // create and return a child view, given a model and (optionally) a view name
-            // if the view name is not given, it defaults to the model's default view attribute
+            // Create and return a child view.
+            //
+            // - given a model and (optionally) a view name if the view name is 
+            // not given, it defaults to the model's default view attribute.
             var child_view = this.model.widget_manager.create_view(child_model, options);
             this.child_views[child_model.id] = child_view;
             return child_view;
         },
 
         delete_child_view: function(child_model, options) {
+            // Delete a child view that was previously created using create_child_view.
             var view = this.child_views[child_model.id];
             delete this.child_views[child_model.id];
             view.remove();
@@ -266,31 +266,42 @@ function(widget_manager, underscore, backbone){
         },
 
         callbacks: function(){
+            // Create msg callbacks for a comm msg.
             return this.model.widget_manager.callbacks(this);
         },
 
         render: function(){
-            // render the view.  By default, this is only called the first time the view is created
+            // Render the view.
+            //
+            // By default, this is only called the first time the view is created
         },
+
         send: function (content) {
+            // Send a custom msg associated with this view.
             this.model.send(content, this.callbacks());
         },
 
         touch: function () {
+            // Associate recent model changes with this notebook.
             this.model.save(this.model.changedAttributes(), {patch: true, callbacks: this.callbacks()});
         },
 
     });
 
+
     var DOMWidgetView = WidgetView.extend({
         initialize: function (options) {
-            // TODO: make changes more granular (e.g., trigger on visible:change)
+            // Public constructor
+
+            // In the future we may want to make changes more granular 
+            // (e.g., trigger on visible:change).
             this.model.on('change', this.update, this);
             this.model.on('msg:custom', this.on_msg, this);
             DOMWidgetView.__super__.initialize.apply(this, arguments);
         },
         
         on_msg: function(msg) {
+            // Handle DOM specific msgs.
             switch(msg.msg_type) {
                 case 'add_class':
                     this.add_class(msg.selector, msg.class_list);
@@ -302,10 +313,12 @@ function(widget_manager, underscore, backbone){
         },
 
         add_class: function (selector, class_list) {
+            // Add a DOM class to an element.
             this._get_selector_element(selector).addClass(class_list);
         },
         
         remove_class: function (selector, class_list) {
+            // Remove a DOM class from an element.
             this._get_selector_element(selector).removeClass(class_list);
         },
     
@@ -340,10 +353,11 @@ function(widget_manager, underscore, backbone){
         },
 
         _get_selector_element: function (selector) {
-            // Get the elements via the css selector.  If the selector is
-            // blank, apply the style to the $el_to_style element.  If
-            // the $el_to_style element is not defined, use apply the 
-            // style to the view's element.
+            // Get the elements via the css selector.  
+
+            // If the selector is blank, apply the style to the $el_to_style 
+            // element.  If the $el_to_style element is not defined, use apply 
+            // the style to the view's element.
             var elements;
             if (selector === undefined || selector === null || selector === '') {
                 if (this.$el_to_style === undefined) {
@@ -362,5 +376,6 @@ function(widget_manager, underscore, backbone){
     IPython.WidgetView = WidgetView;
     IPython.DOMWidgetView = DOMWidgetView;
 
+    // Pass through widget_manager instance (probably not a good practice).
     return widget_manager;
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_bool.js b/IPython/html/static/notebook/js/widgets/widget_bool.js
index 8f3365f..1c2569f 100644
--- a/IPython/html/static/notebook/js/widgets/widget_bool.js
+++ b/IPython/html/static/notebook/js/widgets/widget_bool.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
+
     var CheckBoxView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -35,6 +35,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         handle_click: function() {
+            // Handles when the checkbox is clicked.
+
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
@@ -65,13 +67,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
         
     });
-
     widget_manager.register_widget_view('CheckBoxView', CheckBoxView);
 
+
     var ToggleButtonView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
         render : function() {
+            // Called when view is rendered.
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn')
@@ -110,8 +111,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return ToggleButtonView.__super__.update.apply(this);
         },
         
-        // Handles and validates user input.
         handle_click: function(e) { 
+            // Handles and validates user input.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
@@ -120,7 +121,5 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.touch();
         },
     });
-
     widget_manager.register_widget_view('ToggleButtonView', ToggleButtonView);
-
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_button.js b/IPython/html/static/notebook/js/widgets/widget_button.js
index 1c7de73..f2df595 100644
--- a/IPython/html/static/notebook/js/widgets/widget_button.js
+++ b/IPython/html/static/notebook/js/widgets/widget_button.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
-    var ButtonView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+
+    var ButtonView = IPython.DOMWidgetView.extend({  
         render : function(){
+            // Called when view is rendered.
             this.setElement($("<button />")
                 .addClass('btn'));
 
@@ -49,14 +49,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         events: {
+            // Dictionary of events and their handlers.
             'click': '_handle_click',
         },
         
         _handle_click: function(){
+            // Handles when the button is clicked.
             this.send({event: 'click'});
         },
     });
-
     widget_manager.register_widget_view('ButtonView', ButtonView);
-
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_container.js b/IPython/html/static/notebook/js/widgets/widget_container.js
index 88ad035..41ec0d4 100644
--- a/IPython/html/static/notebook/js/widgets/widget_container.js
+++ b/IPython/html/static/notebook/js/widgets/widget_container.js
@@ -15,9 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager) {
-    var ContainerView = IPython.DOMWidgetView.extend({
-        
+
+    var ContainerView = IPython.DOMWidgetView.extend({    
         render: function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-container');
             this.children={};
@@ -29,6 +30,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
         
         update_children: function(old_list, new_list) {
+            // Called when the children list changes.
             this.do_diff(old_list, 
                 new_list, 
                 $.proxy(this.remove_child_model, this),
@@ -36,11 +38,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
 
         remove_child_model: function(model) {
+            // Called when a model is removed from the children list.
             this.child_views[model.id].remove();
             this.delete_child_view(model);
         },
 
         add_child_model: function(model) {
+            // Called when a model is added to the children list.
             var view = this.create_child_view(model);
             this.$el.append(view.$el);
         },
@@ -53,13 +57,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
             return ContainerView.__super__.update.apply(this);
         },
     });
-
     widget_manager.register_widget_view('ContainerView', ContainerView);
 
 
-    var ModalView = IPython.DOMWidgetView.extend({
-        
+    var ModalView = IPython.DOMWidgetView.extend({ 
         render: function(){
+            // Called when view is rendered.
             var that = this;
             this.children={};
             this.update_children([], this.model.get('children'));
@@ -160,13 +163,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
         
         hide: function() {
+            // Called when the modal hide button is clicked.
             this.$window.hide();
             this.$show_button.removeClass('btn-info');
         },
         
         show: function() {
+            // Called when the modal show button is clicked.
             this.$show_button.addClass('btn-info');
-
             this.$window.show();
             if (this.popped_out) {
                 this.$window.css("positon", "absolute");
@@ -178,6 +182,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
         
         bring_to_front: function() {
+            // Make the modal top-most, z-ordered about the other modals.
             var $widget_modals = $(".widget-modal");
             var max_zindex = 0;
             $widget_modals.each(function (index, el){
@@ -197,6 +202,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
         
         update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
             this.do_diff(old_list, 
                 new_list, 
                 $.proxy(this.remove_child_model, this),
@@ -204,11 +210,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
 
         remove_child_model: function(model) {
+            // Called when a child is removed from children list.
             this.child_views[model.id].remove();
             this.delete_child_view(model);
         },
 
         add_child_model: function(model) {
+            // Called when a child is added to children list.
             var view = this.create_child_view(model);
             this.$body.append(view.$el);
         },
@@ -245,7 +253,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
         },
         
         _get_selector_element: function(selector) {
-
+            // Get an element view a 'special' jquery selector.  (see widget.js)
+            //
             // Since the modal actually isn't within the $el in the DOM, we need to extend
             // the selector logic to allow the user to set css on the modal if need be.
             // The convention used is:
@@ -263,8 +272,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager) {
                 return ModalView.__super__._get_selector_element.apply(this, [selector]);
             }
         },
-        
     });
-
     widget_manager.register_widget_view('ModalView', ModalView);
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_float_range.js b/IPython/html/static/notebook/js/widgets/widget_float_range.js
index c454956..b2a3349 100644
--- a/IPython/html/static/notebook/js/widgets/widget_float_range.js
+++ b/IPython/html/static/notebook/js/widgets/widget_float_range.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
+
     var FloatSliderView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -107,24 +107,26 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return FloatSliderView.__super__.update.apply(this);
         },
         
-        // Handles: User input
-        events: { "slide" : "handleSliderChange" }, 
+        events: {
+            // Dictionary of events and their handlers.
+            "slide" : "handleSliderChange" 
+        }, 
+
         handleSliderChange: function(e, ui) { 
-            
+            // Handle when the slider value is changed.
+
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', ui.value, {updated_view: this}); 
             this.touch();
         },
     });
-
     widget_manager.register_widget_view('FloatSliderView', FloatSliderView);
 
 
-    var FloatTextView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+    var FloatTextView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -144,7 +146,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
-
             if (options === undefined || options.updated_view != this) {
                 var value = this.model.get('value');
                 if (parseFloat(this.$textbox.val()) != value) {
@@ -168,15 +169,20 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return FloatTextView.__super__.update.apply(this);
         },
         
+        events: {
+            // Dictionary of events and their handlers.
+
+            "keyup input" : "handleChanging",
+            "paste input" : "handleChanging",
+            "cut input" : "handleChanging",
+
+            // Fires only when control is validated or looses focus.
+            "change input" : "handleChanged"
+        }, 
         
-        events: {"keyup input" : "handleChanging",
-                "paste input" : "handleChanging",
-                "cut input" : "handleChanging",
-                "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
-        
-        // Handles and validates user input.
         handleChanging: function(e) { 
-            
+            // Handles and validates user input.
+        
             // Try to parse value as a float.
             var numericalValue = 0.0;
             if (e.target.value !== '') {
@@ -205,22 +211,19 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             }
         },
         
-        // Applies validated input.
         handleChanged: function(e) { 
-            // Update the textbox
+            // Applies validated input.
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
-
     widget_manager.register_widget_view('FloatTextView', FloatTextView);
 
 
-    var ProgressView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+    var ProgressView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -258,9 +261,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
                 this.$label.show();
             }
             return ProgressView.__super__.update.apply(this);
-        },
-        
+        }, 
     });
-
     widget_manager.register_widget_view('ProgressView', ProgressView);
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_image.js b/IPython/html/static/notebook/js/widgets/widget_image.js
index d167756..b2b1045 100644
--- a/IPython/html/static/notebook/js/widgets/widget_image.js
+++ b/IPython/html/static/notebook/js/widgets/widget_image.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
-    var ImageView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+
+    var ImageView = IPython.DOMWidgetView.extend({  
         render : function(){
+            // Called when view is rendered.
             this.setElement($("<img />"));
             this.update(); // Set defaults.
         },
@@ -46,9 +46,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             }
             return ImageView.__super__.update.apply(this);
         },
-        
     });
-
     widget_manager.register_widget_view('ImageView', ImageView);
-
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_int_range.js b/IPython/html/static/notebook/js/widgets/widget_int_range.js
index fabe9ac..1930dcd 100644
--- a/IPython/html/static/notebook/js/widgets/widget_int_range.js
+++ b/IPython/html/static/notebook/js/widgets/widget_int_range.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
-    var IntSliderView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+
+    var IntSliderView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -106,23 +106,26 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return IntSliderView.__super__.update.apply(this);
         },
         
-        // Handles: User input
-        events: { "slide" : "handleSliderChange" }, 
+        events: {
+            // Dictionary of events and their handlers.
+            "slide" : "handleSliderChange"
+        }, 
+
         handleSliderChange: function(e, ui) { 
-            
+            // Called when the slider value is changed.
+
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', ~~ui.value, {updated_view: this}); // Double bit-wise not to truncate decimel
             this.touch();
         },
     });
-
     widget_manager.register_widget_view('IntSliderView', IntSliderView);
 
-    var IntTextView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+
+    var IntTextView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -164,15 +167,19 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             }
             return IntTextView.__super__.update.apply(this);
         },
+
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup input" : "handleChanging",
+            "paste input" : "handleChanging",
+            "cut input" : "handleChanging",
+
+            // Fires only when control is validated or looses focus.
+            "change input" : "handleChanged"
+        }, 
         
-        
-        events: {"keyup input" : "handleChanging",
-                "paste input" : "handleChanging",
-                "cut input" : "handleChanging",
-                "change input" : "handleChanged"}, // Fires only when control is validated or looses focus.
-        
-        // Handles and validates user input.
         handleChanging: function(e) { 
+            // Handles and validates user input.
             
             // Try to parse value as a float.
             var numericalValue = 0;
@@ -202,14 +209,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             }
         },
         
-        // Applies validated input.
         handleChanged: function(e) { 
-            // Update the textbox
+            // Applies validated input.
             if (this.model.get('value') != e.target.value) {
                 e.target.value = this.model.get('value');
             }
         }
     });
-
     widget_manager.register_widget_view('IntTextView', IntTextView);
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_selection.js b/IPython/html/static/notebook/js/widgets/widget_selection.js
index 19ac592..08af062 100644
--- a/IPython/html/static/notebook/js/widgets/widget_selection.js
+++ b/IPython/html/static/notebook/js/widgets/widget_selection.js
@@ -15,11 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
+
     var DropdownView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
         render : function(){
-            
+            // Called when view is rendered.            
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
@@ -101,8 +100,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return DropdownView.__super__.update.apply(this);
         },
 
-        // Handle when a value is clicked.
         handle_click: function (e) {
+            // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
@@ -111,13 +110,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
         
     });
-
     widget_manager.register_widget_view('DropdownView', DropdownView);
 
-    var RadioButtonsView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+
+    var RadioButtonsView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
@@ -193,8 +191,8 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return RadioButtonsView.__super__.update.apply(this);
         },
 
-        // Handle when a value is clicked.
         handle_click: function (e) {
+            // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
@@ -202,14 +200,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.touch();
         },
     });
-
     widget_manager.register_widget_view('RadioButtonsView', RadioButtonsView);
 
 
-    var ToggleButtonsView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+    var ToggleButtonsView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single');
             this.$label = $('<div />')
@@ -280,23 +276,21 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return ToggleButtonsView.__super__.update.apply(this);
         },
 
-        // Handle when a value is clicked.
         handle_click: function (e) {
+            // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).html(), {updated_view: this});
             this.touch();
-        },
-        
+        },    
     });
-
     widget_manager.register_widget_view('ToggleButtonsView', ToggleButtonsView);
 
-    var ListBoxView = IPython.DOMWidgetView.extend({
-        
-        // Called when view is rendered.
+
+    var ListBoxView = IPython.DOMWidgetView.extend({    
         render : function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox');
             this.$label = $('<div />')
@@ -364,16 +358,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return ListBoxView.__super__.update.apply(this);
         },
 
-        // Handle when a value is clicked.
         handle_click: function (e) {
+            // Handle when a value is clicked.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             this.model.set('value', $(e.target).html(), {updated_view: this});
             this.touch();
-        },
-        
+        },    
     });
-
     widget_manager.register_widget_view('ListBoxView', ListBoxView);
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js b/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js
index e0a4e31..3bd6ce3 100644
--- a/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js
+++ b/IPython/html/static/notebook/js/widgets/widget_selectioncontainer.js
@@ -15,9 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
+
     var AccordionView = IPython.DOMWidgetView.extend({
-        
         render: function(){
+            // Called when view is rendered.
             var guid = 'accordion' + IPython.utils.uuid();
             this.$el
                 .attr('id', guid)
@@ -35,7 +36,6 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
-            
             if (options === undefined || options.updated_view != this) {
                 // Set tab titles
                 var titles = this.model.get('_titles');
@@ -67,6 +67,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
         
         update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
             this.do_diff(old_list, 
                 new_list, 
                 $.proxy(this.remove_child_model, this),
@@ -74,6 +75,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         remove_child_model: function(model) {
+            // Called when a child is removed from children list.
             var accordion_group = this.model_containers[model.id];
             this.containers.splice(accordion_group.container_index, 1);
             delete this.model_containers[model.id];
@@ -82,6 +84,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         add_child_model: function(model) {
+            // Called when a child is added to children list.
             var view = this.create_child_view(model);
             var index = this.containers.length;
             var uuid = IPython.utils.uuid();
@@ -126,17 +129,18 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             setTimeout(function(){ that.update(); }, 500);
         },
     });
-
     widget_manager.register_widget_view('AccordionView', AccordionView);
     
-    var TabView = IPython.DOMWidgetView.extend({
-        
+
+    var TabView = IPython.DOMWidgetView.extend({    
         initialize: function() {
+            // Public constructor.
             this.containers = [];
             TabView.__super__.initialize.apply(this, arguments);
         },
 
         render: function(){
+            // Called when view is rendered.
             var uuid = 'tabs'+IPython.utils.uuid();
             var that = this;
             this.$tabs = $('<div />', {id: uuid})
@@ -152,19 +156,9 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
                 this.update_children(model.previous('children'), value);
             }, this);
         },
-        
-        update_children: function(old_list, new_list) {
-            _.each(this.containers, function(element, index, list) {
-                element.remove();
-            }, this);
-            this.containers = [];
-            this.update_child_views(old_list, new_list);
-            _.each(new_list, function(element, index, list) {
-                this.add_child_view(this.child_views[element]);
-            }, this)
-        },
-        
+
         update_children: function(old_list, new_list) {
+            // Called when the children list is modified.
             this.do_diff(old_list, 
                 new_list, 
                 $.proxy(this.remove_child_model, this),
@@ -172,6 +166,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         remove_child_model: function(model) {
+            // Called when a child is removed from children list.
             var view = this.child_views[model.id];
             this.containers.splice(view.parent_tab.tab_text_index, 1);
             view.parent_tab.remove();
@@ -181,6 +176,7 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         add_child_model: function(model) {
+            // Called when a child is added to children list.
             var view = this.create_child_view(model);
             var index = this.containers.length;
             var uuid = IPython.utils.uuid();
@@ -238,11 +234,11 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
         },
 
         select_page: function(index) {
+            // Select a page.
             this.$tabs.find('li')
                 .removeClass('active');
             this.containers[index].tab('show');
         },
     });
-
     widget_manager.register_widget_view('TabView', TabView);
 });
diff --git a/IPython/html/static/notebook/js/widgets/widget_string.js b/IPython/html/static/notebook/js/widgets/widget_string.js
index 4ed650a..7866e77 100644
--- a/IPython/html/static/notebook/js/widgets/widget_string.js
+++ b/IPython/html/static/notebook/js/widgets/widget_string.js
@@ -15,10 +15,10 @@
  **/
 
 define(["notebook/js/widgets/widget"], function(widget_manager){
-    var HTMLView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+
+    var HTMLView = IPython.DOMWidgetView.extend({  
         render : function(){
+            // Called when view is rendered.
             this.update(); // Set defaults.
         },
         
@@ -30,16 +30,13 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.$el.html(this.model.get('value'));
             return HTMLView.__super__.update.apply(this);
         },
-        
     });
-
     widget_manager.register_widget_view('HTMLView', HTMLView);
 
 
-    var LatexView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+    var LatexView = IPython.DOMWidgetView.extend({  
         render : function(){
+            // Called when view is rendered.
             this.update(); // Set defaults.
         },
         
@@ -52,16 +49,14 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$el.get(0)]);
 
             return LatexView.__super__.update.apply(this);
-        },
-        
+        }, 
     });
-
     widget_manager.register_widget_view('LatexView', LatexView);
 
-    var TextAreaView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+
+    var TextAreaView = IPython.DOMWidgetView.extend({  
         render: function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox')
                 .html('');
@@ -79,19 +74,18 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.model.on('msg:custom', $.proxy(this._handle_textarea_msg, this));
         },
 
-
         _handle_textarea_msg: function (content){
+            // Handle when a custom msg is recieved from the back-end.
             if (content.method == "scroll_to_bottom") {
                 this.scroll_to_bottom();                
             }
         },
 
-
         scroll_to_bottom: function (){
+            // Scroll the text-area view to the bottom.
             this.$textbox.scrollTop(this.$textbox[0].scrollHeight);
         },
 
-        
         update: function(options){
             // Update the contents of this view
             //
@@ -114,12 +108,15 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return TextAreaView.__super__.update.apply(this);
         },
         
-        events: {"keyup textarea": "handleChanging",
-                "paste textarea": "handleChanging",
-                "cut textarea": "handleChanging"},
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup textarea": "handleChanging",
+            "paste textarea": "handleChanging",
+            "cut textarea": "handleChanging"
+        },
         
-        // Handles and validates user input.
         handleChanging: function(e) { 
+            // Handles and validates user input.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
@@ -127,13 +124,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.touch();
         },
     });
-
     widget_manager.register_widget_view('TextAreaView', TextAreaView);
 
-    var TextBoxView = IPython.DOMWidgetView.extend({
-      
-        // Called when view is rendered.
+
+    var TextBoxView = IPython.DOMWidgetView.extend({  
         render: function(){
+            // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox-single')
                 .html('');
@@ -173,13 +169,16 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             return TextBoxView.__super__.update.apply(this);
         },
         
-        events: {"keyup input": "handleChanging",
-                "paste input": "handleChanging",
-                "cut input": "handleChanging",
-                "keypress input": "handleKeypress"},
+        events: {
+            // Dictionary of events and their handlers.
+            "keyup input": "handleChanging",
+            "paste input": "handleChanging",
+            "cut input": "handleChanging",
+            "keypress input": "handleKeypress"
+        },
         
-        // Handles and validates user input.
         handleChanging: function(e) { 
+            // Handles and validates user input.
             
             // Calling model.set will trigger all of the other views of the 
             // model to update.
@@ -187,13 +186,12 @@ define(["notebook/js/widgets/widget"], function(widget_manager){
             this.touch();
         },
         
-        // Handles text submition
         handleKeypress: function(e) { 
+            // Handles text submition
             if (e.keyCode == 13) { // Return key
                 this.send({event: 'submit'});
             }
         },
     });
-
     widget_manager.register_widget_view('TextBoxView', TextBoxView);
 });