Work on the notebook's code cell.

* Cleaned up the js code for creating the code cell.
* Added a div around the input text area to allow the text area
  to have a width of 100%.
* Added CodeCell.toJSON.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -188,7 +188,17 @@ div.input_prompt {
     color: blue;
 }
 
-textarea.input_area {
+div.input_area {
+    box-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+textarea.input_textarea {
+    width: 100%;
     text-align: left;
     font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
     font-size: inherit;
@@ -199,13 +209,6 @@ textarea.input_area {
     overflow: auto;
     outline: none;
     resize: none;
-    
-    box-flex: 1;
-    -webkit-box-flex: 1;
-    -moz-box-flex: 1;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
 }
 
 div.output {

IPython/frontend/html/notebook/static/js/notebook.js

@@ -546,21 +546,14 @@ CodeCell.prototype = new Cell();
 
 
 CodeCell.prototype.create_element = function () {
-    var cell =  $('<div></div>').addClass('cell code_cell')
-    var input = $('<div></div>').addClass('input').append(
-                    $('<div/>').addClass('prompt input_prompt')
-                ).append(
-                    $('<textarea/>').addClass('input_area').
-                    attr('rows',1).
-                    attr('cols',80).
-                    attr('wrap','hard').
-                    autoGrow()
-                );
-    var output = $('<div></div>').addClass('output').append(
-                    $('<div/>').addClass('prompt output_prompt')
-                ).append(
-                    $('<div/>').addClass('output_area')
-                );
+    var cell =  $('<div></div>').addClass('cell code_cell');
+    var input = $('<div></div>').addClass('input');
+    input.append($('<div/>').addClass('prompt input_prompt'));
+    var input_textarea = $('<textarea/>').addClass('input_textarea').attr('rows',1).attr('wrap','hard').autoGrow();
+    input.append($('<div/>').addClass('input_area').append(input_textarea));
+    var output = $('<div></div>').addClass('output');
+    output.append($('<div/>').addClass('prompt output_prompt'));
+    output.append($('<div/>').addClass('output_area'));
     cell.append(input).append(output);
     this.element = cell;
     this.collapse()
@@ -635,11 +628,18 @@ CodeCell.prototype.show_output_prompt = function () {
     this.element.find('div.output_prompt').show();
 };
 
-
 CodeCell.prototype.get_code = function () {
     return this.element.find("textarea.input_area").val();
 };
 
+
+CodeCell.prototype.toJSON = function () {
+    return {
+        code : this.get_code(),
+        cell_type : 'code',
+        prompt_number : this.input_prompt_number
+    };
+};
 //============================================================================
 // TextCell
 //============================================================================