Merge pull request #4515 from Carreau/load-speedup

Spring Cleaning, and  Load speedup

0) prompt '*' strore fix + tab remove tooltip
tab was not cancelling tooltip bringing to cases where you could have
tooltip andcompleter open.

Do not store '*' when serializing cells.

get rid of most slowdown at notebook loading.
1) Do not setOption('mode',new_mode) on CM if new and old mode are the
same. It triggert a lot of calculation of bounding box in the
end.

2) Do not select cell when loading the notebook it triggers
a lot of CM even that check visible things and so on and so
forth. So add a option to add_cell_at_index not to select it

3) jQuery $.attr has some magics, but has a slight overhead on
real native ELEM.setAttribute DOM method. Seem slight improvement
when loads of PNGs on one page

IPython/html/static/notebook/js/cell.js

@@ -1,350 +1,370 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Cell
 //============================================================================
 /**
  * An extendable module that provide base functionnality to create cell for notebook.
  * @module IPython
  * @namespace IPython
  * @submodule Cell
  */
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * The Base `Cell` class from which to inherit
      * @class Cell
      **/
 
     /*
      * @constructor
      *
      * @param {object|undefined} [options]
      *     @param [options.cm_config] {object} config to pass to CodeMirror, will extend default parameters
      */
     var Cell = function (options) {
 
         options = this.mergeopt(Cell, options)
         // superclass default overwrite our default
 
         this.placeholder = options.placeholder || '';
         this.read_only = options.cm_config.readOnly;
         this.selected = false;
-        this.element = null;
         this.metadata = {};
         // load this from metadata later ?
         this.user_highlight = 'auto';
         this.cm_config = options.cm_config;
+        this.cell_id = utils.uuid();
+        this._options = options;
+
+        // For JS VM engines optimisation, attributes should be all set (even
+        // to null) in the constructor, and if possible, if different subclass
+        // have new attributes with same name, they should be created in the
+        // same order. Easiest is to create and set to null in parent class.
+
+        this.element = null;
+        this.cell_type = null;
+        this.code_mirror = null;
+
+
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
         }
-        this.cell_id = utils.uuid();
-        this._options = options;
     };
 
     Cell.options_default = {
         cm_config : {
             indentUnit : 4,
             readOnly: false,
             theme: "default"
         }
     };
     
     // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
     // by disabling drag/drop altogether on Safari
     // https://github.com/marijnh/CodeMirror/issues/332
     
     if (utils.browser[0] == "Safari") {
         Cell.options_default.cm_config.dragDrop = false;
     }
 
     Cell.prototype.mergeopt = function(_class, options, overwrite){
         overwrite = overwrite || {};
         return $.extend(true, {}, _class.options_default, options, overwrite)
 
     }
 
 
 
     /**
      * Empty. Subclasses must implement create_element.
      * This should contain all the code to create the DOM element in notebook
      * and will be called by Base Class constructor.
      * @method create_element
      */
     Cell.prototype.create_element = function () {
     };
 
 
     /**
      * Subclasses can implement override bind_events.
      * Be carefull to call the parent method when overwriting as it fires event.
      * this will be triggerd after create_element in constructor.
      * @method bind_events
      */
     Cell.prototype.bind_events = function () {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
             if (that.selected === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
         that.element.focusin(function (event) {
             if (that.selected === false) {
                 $([IPython.events]).trigger('select.Cell', {'cell':that});
             }
         });
         if (this.code_mirror) {
             this.code_mirror.on("change", function(cm, change) {
                 $([IPython.events]).trigger("set_dirty.Notebook", {value: true});
             });
         }
     };
 
     /**
      * Triger typsetting of math by mathjax on current cell element
      * @method typeset
      */
     Cell.prototype.typeset = function () {
         if (window.MathJax){
             var cell_math = this.element.get(0);
             MathJax.Hub.Queue(["Typeset", MathJax.Hub, cell_math]);
         }
     };
 
     /**
      * should be triggerd when cell is selected
      * @method select
      */
     Cell.prototype.select = function () {
         this.element.addClass('selected');
         this.selected = true;
     };
 
 
     /**
      * should be triggerd when cell is unselected
      * @method unselect
      */
     Cell.prototype.unselect = function () {
         this.element.removeClass('selected');
         this.selected = false;
     };
 
     /**
      * should be overritten by subclass
      * @method get_text
      */
     Cell.prototype.get_text = function () {
     };
 
     /**
      * should be overritten by subclass
      * @method set_text
      * @param {string} text
      */
     Cell.prototype.set_text = function (text) {
     };
 
     /**
      * Refresh codemirror instance
      * @method refresh
      */
     Cell.prototype.refresh = function () {
         this.code_mirror.refresh();
     };
 
 
     /**
      * should be overritten by subclass
      * @method  edit
      **/
     Cell.prototype.edit = function () {
     };
 
 
     /**
      * should be overritten by subclass
      * @method render
      **/
     Cell.prototype.render = function () {
     };
 
     /**
      * should be overritten by subclass
      * serialise cell to json.
      * @method toJSON
      **/
     Cell.prototype.toJSON = function () {
         var data = {};
         data.metadata = this.metadata;
         return data;
     };
 
 
     /**
      * should be overritten by subclass
      * @method fromJSON
      **/
     Cell.prototype.fromJSON = function (data) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
         this.celltoolbar.rebuild();
     };
 
 
     /**
      * can the cell be split into two cells
      * @method is_splittable
      **/
     Cell.prototype.is_splittable = function () {
         return true;
     };
 
 
     /**
      * can the cell be merged with other cells
      * @method is_mergeable
      **/
     Cell.prototype.is_mergeable = function () {
         return true;
     };
 
 
     /**
      * @return {String} - the text before the cursor
      * @method get_pre_cursor
      **/
     Cell.prototype.get_pre_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     }
 
 
     /**
      * @return {String} - the text after the cursor
      * @method get_post_cursor
      **/
     Cell.prototype.get_post_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var last_line_num = this.code_mirror.lineCount()-1;
         var last_line_len = this.code_mirror.getLine(last_line_num).length;
         var end = {line:last_line_num, ch:last_line_len}
         var text = this.code_mirror.getRange(cursor, end);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
     /**
      * Show/Hide CodeMirror LineNumber
      * @method show_line_numbers
      *
      * @param value {Bool}  show (true), or hide (false) the line number in CodeMirror
      **/
     Cell.prototype.show_line_numbers = function (value) {
         this.code_mirror.setOption('lineNumbers', value);
         this.code_mirror.refresh();
     };
 
     /**
      * Toggle  CodeMirror LineNumber
      * @method toggle_line_numbers
      **/
     Cell.prototype.toggle_line_numbers = function () {
         var val = this.code_mirror.getOption('lineNumbers');
         this.show_line_numbers(!val);
     };
 
     /**
      * Force codemirror highlight mode
      * @method force_highlight
      * @param {object} - CodeMirror mode
      **/
     Cell.prototype.force_highlight = function(mode) {
         this.user_highlight = mode;
         this.auto_highlight();
     };
 
     /**
      * Try to autodetect cell highlight mode, or use selected mode
      * @methods _auto_highlight
      * @private
      * @param {String|object|undefined} - CodeMirror mode | 'auto'
      **/
     Cell.prototype._auto_highlight = function (modes) {
         //Here we handle manually selected modes
         if( this.user_highlight != undefined &&  this.user_highlight != 'auto' )
         {
             var mode = this.user_highlight;
             CodeMirror.autoLoadMode(this.code_mirror, mode);
             this.code_mirror.setOption('mode', mode);
             return;
         }
+        var current_mode = this.code_mirror.getOption('mode', mode);
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for( var mode in modes) {
             var regs = modes[mode]['reg'];
             // only one key every time but regexp can't be keys...
             for(var reg in regs ) {
                 // here we handle non magic_modes
                 if(first_line.match(regs[reg]) != null) {
+                    if(current_mode == mode){
+                        return;
+                    }
                     if (mode.search('magic_') != 0) {
                         this.code_mirror.setOption('mode', mode);
                         CodeMirror.autoLoadMode(this.code_mirror, mode);
                         return;
                     }
                     var open = modes[mode]['open']|| "%%";
                     var close = modes[mode]['close']|| "%%end";
                     var mmode = mode;
                     mode = mmode.substr(6);
+                    if(current_mode == mode){
+                        return;
+                    }
                     CodeMirror.autoLoadMode(this.code_mirror, mode);
                     // create on the fly a mode that swhitch between
                     // plain/text and smth else otherwise `%%` is
                     // source of some highlight issues.
                     // we use patchedGetMode to circumvent a bug in CM
                     CodeMirror.defineMode(mmode , function(config) {
                         return CodeMirror.multiplexingMode(
                         CodeMirror.patchedGetMode(config, 'text/plain'),
                             // always set someting on close
                             {open: open, close: close,
                              mode: CodeMirror.patchedGetMode(config, mode),
                              delimStyle: "delimit"
                             }
                         );
                     });
                     this.code_mirror.setOption('mode', mmode);
                     return;
                 }
             }
         }
         // fallback on default
         var default_mode
         try {
             default_mode = this._options.cm_config.mode;
         } catch(e) {
             default_mode = 'text/plain';
         }
+        if( current_mode === default_mode){
+            return
+        }
         this.code_mirror.setOption('mode', default_mode);
     };
 
     IPython.Cell = Cell;
 
     return IPython;
 
 }(IPython));
 

IPython/html/static/notebook/js/codecell.js

@@ -1,460 +1,463 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 /**
  * An extendable module that provide base functionnality to create cell for notebook.
  * @module IPython
  * @namespace IPython
  * @submodule CodeCell
  */
 
 
 /* local util for codemirror */
 var posEq = function(a, b) {return a.line == b.line && a.ch == b.ch;};
 
 /**
  *
  * function to delete until previous non blanking space character
  * or first multiple of 4 tabstop.
  * @private
  */
 CodeMirror.commands.delSpaceToPrevTabStop = function(cm){
     var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
     if (!posEq(from, to)) { cm.replaceRange("", from, to); return; }
     var cur = cm.getCursor(), line = cm.getLine(cur.line);
     var tabsize = cm.getOption('tabSize');
     var chToPrevTabStop = cur.ch-(Math.ceil(cur.ch/tabsize)-1)*tabsize;
     from = {ch:cur.ch-chToPrevTabStop,line:cur.line};
     var select = cm.getRange(from,cur);
     if( select.match(/^\ +$/) !== null){
         cm.replaceRange("",from,cur);
     } else {
         cm.deleteH(-1,"char");
     }
 };
 
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
 
     /**
      * A Cell conceived to write code.
      *
      * The kernel doesn't have to be set at creation time, in that case
      * it will be null and set_kernel has to be called later.
      * @class CodeCell
      * @extends IPython.Cell
      *
      * @constructor
      * @param {Object|null} kernel
      * @param {object|undefined} [options]
      *      @param [options.cm_config] {object} config to pass to CodeMirror
      */
     var CodeCell = function (kernel, options) {
         this.kernel = kernel || null;
-        this.code_mirror = null;
-        this.input_prompt_number = null;
         this.collapsed = false;
         this.cell_type = "code";
 
+        // create all attributed in constructor function
+        // even if null for V8 VM optimisation
+        this.input_prompt_number = null;
+        this.celltoolbar = null;
+        this.output_area = null;
+        this.last_msg_id = null;
+        this.completer = null;
+
 
         var cm_overwrite_options  = {
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         };
 
         options = this.mergeopt(CodeCell, options, {cm_config:cm_overwrite_options});
 
         IPython.Cell.apply(this,[options]);
 
         var that = this;
         this.element.focusout(
             function() { that.auto_highlight(); }
         );
     };
 
     CodeCell.options_default = {
         cm_config : {
             extraKeys: {
                 "Tab" :  "indentMore",
                 "Shift-Tab" : "indentLess",
                 "Backspace" : "delSpaceToPrevTabStop",
                 "Cmd-/" : "toggleComment",
                 "Ctrl-/" : "toggleComment"
             },
             mode: 'ipython',
             theme: 'ipython',
             matchBrackets: true
         }
     };
 
 
     CodeCell.prototype = new IPython.Cell();
 
     /**
      * @method auto_highlight
      */
     CodeCell.prototype.auto_highlight = function () {
         this._auto_highlight(IPython.config.cell_magic_highlight);
     };
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
         IPython.Cell.prototype.create_element.apply(this, arguments);
 
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell');
         cell.attr('tabindex','2');
 
         this.celltoolbar = new IPython.CellToolbar(this);
 
         var input = $('<div></div>').addClass('input');
         var vbox = $('<div/>').addClass('vbox box-flex1');
         input.append($('<div/>').addClass('prompt input_prompt'));
         vbox.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
         this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         vbox.append(input_area);
         input.append(vbox);
         var output = $('<div></div>');
         cell.append(input).append(output);
         this.element = cell;
         this.output_area = new IPython.OutputArea(output, true);
-
-        // construct a completer only if class exist
-        // otherwise no print view
-        if (IPython.Completer !== undefined)
-        {
-            this.completer = new IPython.Completer(this);
-        }
+        this.completer = new IPython.Completer(this);
     };
 
     /**
      *  This method gets called in CodeMirror's onKeyDown/onKeyPress
      *  handlers and is used to provide custom key handling. Its return
      *  value is used to determine if CodeMirror should ignore the event:
      *  true = ignore, false = don't ignore.
      *  @method handle_codemirror_keyevent
      */
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any, except for tab again
         if (event.type === 'keydown' && event.which != key.TAB ) {
             IPython.tooltip.remove_and_cancel_tooltip();
         }
 
         var cur = editor.getCursor();
         if (event.keyCode === key.ENTER){
             this.auto_highlight();
         }
 
         if (event.keyCode === key.ENTER && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         } else if (event.which === 40 && event.type === 'keypress' && IPython.tooltip.time_before_tooltip >= 0) {
             // triger on keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
             // The second argument says to hide the tooltip if the docstring
             // is actually empty
             IPython.tooltip.pending(that, true);
         } else if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             }
         } else if (event.which === key.ESC) {
             return IPython.tooltip.remove_and_cancel_tooltip(true);
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             }
         } else if (event.keyCode === key.TAB && event.type == 'keydown' && event.shiftKey) {
                 if (editor.somethingSelected()){
                     var anchor = editor.getCursor("anchor");
                     var head = editor.getCursor("head");
                     if( anchor.line != head.line){
                         return false;
                     }
                 }
                 IPython.tooltip.request(that);
                 event.stop();
                 return true;
         } else if (event.keyCode === key.TAB && event.type == 'keydown') {
             // Tab completion.
-            //Do not trim here because of tooltip
-            if (editor.somethingSelected()) { return false; }
+            IPython.tooltip.remove_and_cancel_tooltip();
+            if (editor.somethingSelected()) {
+                return false;
+            }
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
             if (pre_cursor.trim() === "") {
                 // Don't autocomplete if the part of the line before the cursor
                 // is empty.  In this case, let CodeMirror handle indentation.
                 return false;
             } else {
                 event.stop();
                 this.completer.startCompletion();
                 return true;
             }
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to
             // use those to disable tab completion.
             return false;
         }
         return false;
     };
 
 
     // Kernel related calls.
 
     CodeCell.prototype.set_kernel = function (kernel) {
         this.kernel = kernel;
     };
 
     /**
      * Execute current code cell to the kernel
      * @method execute
      */
     CodeCell.prototype.execute = function () {
         this.output_area.clear_output();
         this.set_input_prompt('*');
         this.element.addClass("running");
         if (this.last_msg_id) {
             this.kernel.clear_callbacks_for_msg(this.last_msg_id);
         }
         var callbacks = this.get_callbacks();
         
         this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true});
     };
     
     /**
      * Construct the default callbacks for
      * @method get_callbacks
      */
     CodeCell.prototype.get_callbacks = function () {
         return {
             shell : {
                 reply : $.proxy(this._handle_execute_reply, this),
                 payload : {
                     set_next_input : $.proxy(this._handle_set_next_input, this),
                     page : $.proxy(this._open_with_pager, this)
                 }
             },
             iopub : {
                 output : $.proxy(this.output_area.handle_output, this.output_area),
                 clear_output : $.proxy(this.output_area.handle_clear_output, this.output_area),
             },
             input : $.proxy(this._handle_input_request, this)
         };
     };
     
     CodeCell.prototype._open_with_pager = function (payload) {
         $([IPython.events]).trigger('open_with_text.Pager', payload);
     };
 
     /**
      * @method _handle_execute_reply
      * @private
      */
     CodeCell.prototype._handle_execute_reply = function (msg) {
         this.set_input_prompt(msg.content.execution_count);
         this.element.removeClass("running");
         $([IPython.events]).trigger('set_dirty.Notebook', {value: true});
     };
 
     /**
      * @method _handle_set_next_input
      * @private
      */
     CodeCell.prototype._handle_set_next_input = function (payload) {
         var data = {'cell': this, 'text': payload.text};
         $([IPython.events]).trigger('set_next_input.Notebook', data);
     };
 
     /**
      * @method _handle_input_request
      * @private
      */
     CodeCell.prototype._handle_input_request = function (msg) {
         this.output_area.append_raw_input(msg);
     };
 
 
     // Basic cell manipulation.
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
         this.auto_highlight();
         // We used to need an additional refresh() after the focus, but
         // it appears that this has been fixed in CM. This bug would show
         // up on FF when a newly loaded markdown cell was edited.
     };
 
 
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.collapse = function () {
         this.collapsed = true;
         this.output_area.collapse();
     };
 
 
     CodeCell.prototype.expand = function () {
         this.collapsed = false;
         this.output_area.expand();
     };
 
 
     CodeCell.prototype.toggle_output = function () {
         this.collapsed = Boolean(1 - this.collapsed);
         this.output_area.toggle_output();
     };
 
 
     CodeCell.prototype.toggle_output_scroll = function () {
     this.output_area.toggle_scroll();
     };
 
 
     CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
         var ns = prompt_value || "&nbsp;";
         return 'In&nbsp;[' + ns + ']:';
     };
 
     CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
         var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
         for(var i=1; i < lines_number; i++) {
             html.push(['...:']);
         }
         return html.join('<br/>');
     };
 
     CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
 
 
     CodeCell.prototype.set_input_prompt = function (number) {
         var nline = 1;
         if (this.code_mirror !== undefined) {
            nline = this.code_mirror.lineCount();
         }
         this.input_prompt_number = number;
         var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
         this.element.find('div.input_prompt').html(prompt_html);
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1) && cursor.ch === this.code_mirror.getLine(cursor.line).length) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.clear_output = function (wait) {
         this.output_area.clear_output(wait);
     };
 
 
     // JSON serialization
 
     CodeCell.prototype.fromJSON = function (data) {
         IPython.Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_text(data.input);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 this.auto_highlight();
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             }
             this.output_area.fromJSON(data.outputs);
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 } else {
                     this.expand();
                 }
             }
         }
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = IPython.Cell.prototype.toJSON.apply(this);
         data.input = this.get_text();
         data.cell_type = 'code';
-        if (this.input_prompt_number) {
+        // is finite protect against undefined and '*' value
+        if (isFinite(this.input_prompt_number)) {
             data.prompt_number = this.input_prompt_number;
         }
         var outputs = this.output_area.toJSON();
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));

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

@@ -1,2262 +1,2262 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Notebook
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
 
     /**
      * A notebook contains and manages cells.
      * 
      * @class Notebook
      * @constructor
      * @param {String} selector A jQuery selector for the notebook's DOM element
      * @param {Object} [options] A config object
      */
     var Notebook = function (selector, options) {
         var options = options || {};
         this._baseProjectUrl = options.baseProjectUrl;
         this.notebook_path = options.notebookPath;
         this.notebook_name = options.notebookName;
         this.element = $(selector);
         this.element.scroll();
         this.element.data("notebook", this);
         this.next_prompt_number = 1;
         this.session = null;
         this.kernel = null;
         this.clipboard = null;
         this.undelete_backup = null;
         this.undelete_index = null;
         this.undelete_below = false;
         this.paste_enabled = false;
         this.set_dirty(false);
         this.metadata = {};
         this._checkpoint_after_save = false;
         this.last_checkpoint = null;
         this.checkpoints = [];
         this.autosave_interval = 0;
         this.autosave_timer = null;
         // autosave *at most* every two minutes
         this.minimum_autosave_interval = 120000;
         // single worksheet for now
         this.worksheet_metadata = {};
         this.control_key_active = false;
         this.notebook_name_blacklist_re = /[\/\\:]/;
         this.nbformat = 3 // Increment this when changing the nbformat
         this.nbformat_minor = 0 // Increment this when changing the nbformat
         this.style();
         this.create_elements();
         this.bind_events();
     };
 
     /**
      * Tweak the notebook's CSS style.
      * 
      * @method style
      */
     Notebook.prototype.style = function () {
         $('div#notebook').addClass('border-box-sizing');
     };
 
     /**
      * Get the root URL of the notebook server.
      * 
      * @method baseProjectUrl
      * @return {String} The base project URL
      */
     Notebook.prototype.baseProjectUrl = function(){
         return this._baseProjectUrl || $('body').data('baseProjectUrl');
     };
 
     Notebook.prototype.notebookName = function() {
         var name = $('body').data('notebookName');
         name = decodeURIComponent(name);
         return name;  
     };
     
     Notebook.prototype.notebookPath = function() {
         var path = $('body').data('notebookPath');
         path = decodeURIComponent(path);
         return path
     };
     
     /**
      * Create an HTML and CSS representation of the notebook.
      * 
      * @method create_elements
      */
     Notebook.prototype.create_elements = function () {
         // We add this end_space div to the end of the notebook div to:
         // i) provide a margin between the last cell and the end of the notebook
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         var that = this;
         this.container = $("<div/>").addClass("container").attr("id", "notebook-container");
         var end_space = $('<div/>').addClass('end_space');
         end_space.dblclick(function (e) {
             var ncells = that.ncells();
             that.insert_cell_below('code',ncells-1);
         });
         this.element.append(this.container);
         this.container.append(end_space);
         $('div#notebook').addClass('border-box-sizing');
     };
 
     /**
      * Bind JavaScript events: key presses and custom IPython events.
      * 
      * @method bind_events
      */
     Notebook.prototype.bind_events = function () {
         var that = this;
 
         $([IPython.events]).on('set_next_input.Notebook', function (event, data) {
             var index = that.find_cell_index(data.cell);
             var new_cell = that.insert_cell_below('code',index);
             new_cell.set_text(data.text);
             that.dirty = true;
         });
 
         $([IPython.events]).on('set_dirty.Notebook', function (event, data) {
             that.dirty = data.value;
         });
 
         $([IPython.events]).on('select.Cell', function (event, data) {
             var index = that.find_cell_index(data.cell);
             that.select(index);
         });
         
         $([IPython.events]).on('status_autorestarting.Kernel', function () {
             IPython.dialog.modal({
                 title: "Kernel Restarting",
                 body: "The kernel appears to have died. It will restart automatically.",
                 buttons: {
                     OK : {
                         class : "btn-primary"
                     }
                 }
             });
         });
 
 
         $(document).keydown(function (event) {
 
             // Save (CTRL+S) or (AppleKey+S)
             //metaKey = applekey on mac
             if ((event.ctrlKey || event.metaKey) && event.keyCode==83) {
                 that.save_checkpoint();
                 event.preventDefault();
                 return false;
             } else if (event.which === key.ESC) {
                 // Intercept escape at highest level to avoid closing
                 // websocket connection with firefox
                 IPython.pager.collapse();
                 event.preventDefault();
             } else if (event.which === key.SHIFT) {
                 // ignore shift keydown
                 return true;
             }
             if (event.which === key.UPARROW && !event.shiftKey) {
                 var cell = that.get_selected_cell();
                 if (cell && cell.at_top()) {
                     event.preventDefault();
                     that.select_prev();
                 };
             } else if (event.which === key.DOWNARROW && !event.shiftKey) {
                 var cell = that.get_selected_cell();
                 if (cell && cell.at_bottom()) {
                     event.preventDefault();
                     that.select_next();
                 };
             } else if (event.which === key.ENTER && event.shiftKey) {
                 that.execute_selected_cell();
                 return false;
             } else if (event.which === key.ENTER && event.altKey) {
                 // Execute code cell, and insert new in place
                 that.execute_selected_cell();
                  // Only insert a new cell, if we ended up in an already populated cell
                 if (/\S/.test(that.get_selected_cell().get_text()) == true) {
                     that.insert_cell_above('code');
                 }
                 return false;
             } else if (event.which === key.ENTER && event.ctrlKey) {
                 that.execute_selected_cell({terminal:true});
                 return false;
             } else if (event.which === 77 && event.ctrlKey && that.control_key_active == false) {
                 that.control_key_active = true;
                 return false;
             } else if (event.which === 88 && that.control_key_active) {
                 // Cut selected cell = x
                 that.cut_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 67 && that.control_key_active) {
                 // Copy selected cell = c
                 that.copy_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 86 && that.control_key_active) {
                 // Paste below selected cell = v
                 that.paste_cell_below();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 68 && that.control_key_active) {
                 // Delete selected cell = d
                 that.delete_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 65 && that.control_key_active) {
                 // Insert code cell above selected = a
                 that.insert_cell_above('code');
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 66 && that.control_key_active) {
                 // Insert code cell below selected = b
                 that.insert_cell_below('code');
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 89 && that.control_key_active) {
                 // To code = y
                 that.to_code();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 77 && that.control_key_active) {
                 // To markdown = m
                 that.to_markdown();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 84 && that.control_key_active) {
                 // To Raw = t
                 that.to_raw();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 49 && that.control_key_active) {
                 // To Heading 1 = 1
                 that.to_heading(undefined, 1);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 50 && that.control_key_active) {
                 // To Heading 2 = 2
                 that.to_heading(undefined, 2);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 51 && that.control_key_active) {
                 // To Heading 3 = 3
                 that.to_heading(undefined, 3);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 52 && that.control_key_active) {
                 // To Heading 4 = 4
                 that.to_heading(undefined, 4);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 53 && that.control_key_active) {
                 // To Heading 5 = 5
                 that.to_heading(undefined, 5);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 54 && that.control_key_active) {
                 // To Heading 6 = 6
                 that.to_heading(undefined, 6);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 79 && that.control_key_active) {
                 // Toggle output = o
                 if (event.shiftKey){
                     that.toggle_output_scroll();
                 } else {
                     that.toggle_output();
                 }
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 83 && that.control_key_active) {
                 // Save notebook = s
                 that.save_checkpoint();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 74 && that.control_key_active) {
                 // Move cell down = j
                 that.move_cell_down();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 75 && that.control_key_active) {
                 // Move cell up = k
                 that.move_cell_up();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 80 && that.control_key_active) {
                 // Select previous = p
                 that.select_prev();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 78 && that.control_key_active) {
                 // Select next = n
                 that.select_next();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 76 && that.control_key_active) {
                 // Toggle line numbers = l
                 that.cell_toggle_line_numbers();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 73 && that.control_key_active) {
                 // Interrupt kernel = i
                 that.session.interrupt_kernel();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 190 && that.control_key_active) {
                 // Restart kernel = .  # matches qt console
                 that.restart_kernel();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 72 && that.control_key_active) {
                 // Show keyboard shortcuts = h
                 IPython.quick_help.show_keyboard_shortcuts();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 90 && that.control_key_active) {
                 // Undo last cell delete = z
                 that.undelete();
                 that.control_key_active = false;
                 return false;
             } else if ((event.which === 189 || event.which === 173) &&
                     that.control_key_active) {
                 // how fun! '-' is 189 in Chrome, but 173 in FF and Opera
                 // Split cell = -
                 that.split_cell();
                 that.control_key_active = false;
                 return false;                                               
             } else if (that.control_key_active) {
                 that.control_key_active = false;
                 return true;
             }
             return true;
         });
         
         var collapse_time = function(time){
             var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
         }
 
         this.element.bind('collapse_pager', function (event,extrap) {
             var time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             collapse_time(time);
         });
 
         var expand_time = function(time) {
             var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
         }
 
         this.element.bind('expand_pager', function (event, extrap) {
             var time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             expand_time(time);
         });
         
         // Firefox 22 broke $(window).on("beforeunload")
         // I'm not sure why or how.
         window.onbeforeunload = function (e) {
             // TODO: Make killing the kernel configurable.
             var kill_kernel = false;
             if (kill_kernel) {
                 that.session.kill_kernel();
             }
             // if we are autosaving, trigger an autosave on nav-away.
             // still warn, because if we don't the autosave may fail.
             if (that.dirty) {
                 if ( that.autosave_interval ) {
                     // schedule autosave in a timeout
                     // this gives you a chance to forcefully discard changes
                     // by reloading the page if you *really* want to.
                     // the timer doesn't start until you *dismiss* the dialog.
                     setTimeout(function () {
                         if (that.dirty) {
                             that.save_notebook();
                         }
                     }, 1000);
                     return "Autosave in progress, latest changes may be lost.";
                 } else {
                     return "Unsaved changes will be lost.";
                 }
             };
             // Null is the *only* return value that will make the browser not
             // pop up the "don't leave" dialog.
             return null;
         };
     };
 
     /**
      * Set the dirty flag, and trigger the set_dirty.Notebook event
      * 
      * @method set_dirty
      */
     Notebook.prototype.set_dirty = function (value) {
         if (value === undefined) {
             value = true;
         }
         if (this.dirty == value) {
             return;
         }
         $([IPython.events]).trigger('set_dirty.Notebook', {value: value});
     };
 
     /**
      * Scroll the top of the page to a given cell.
      * 
      * @method scroll_to_cell
      * @param {Number} cell_number An index of the cell to view
      * @param {Number} time Animation time in milliseconds
      * @return {Number} Pixel offset from the top of the container
      */
     Notebook.prototype.scroll_to_cell = function (cell_number, time) {
         var cells = this.get_cells();
         var time = time || 0;
         cell_number = Math.min(cells.length-1,cell_number);
         cell_number = Math.max(0             ,cell_number);
         var scroll_value = cells[cell_number].element.position().top-cells[0].element.position().top ;
         this.element.animate({scrollTop:scroll_value}, time);
         return scroll_value;
     };
 
     /**
      * Scroll to the bottom of the page.
      * 
      * @method scroll_to_bottom
      */
     Notebook.prototype.scroll_to_bottom = function () {
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };
 
     /**
      * Scroll to the top of the page.
      * 
      * @method scroll_to_top
      */
     Notebook.prototype.scroll_to_top = function () {
         this.element.animate({scrollTop:0}, 0);
     };
 
     // Edit Notebook metadata
 
     Notebook.prototype.edit_metadata = function () {
         var that = this;
         IPython.dialog.edit_metadata(this.metadata, function (md) {
             that.metadata = md;
         }, 'Notebook');
     };
 
     // Cell indexing, retrieval, etc.
 
     /**
      * Get all cell elements in the notebook.
      * 
      * @method get_cell_elements
      * @return {jQuery} A selector of all cell elements
      */
     Notebook.prototype.get_cell_elements = function () {
         return this.container.children("div.cell");
     };
 
     /**
      * Get a particular cell element.
      * 
      * @method get_cell_element
      * @param {Number} index An index of a cell to select
      * @return {jQuery} A selector of the given cell.
      */
     Notebook.prototype.get_cell_element = function (index) {
         var result = null;
         var e = this.get_cell_elements().eq(index);
         if (e.length !== 0) {
             result = e;
         }
         return result;
     };
 
     /**
      * Count the cells in this notebook.
      * 
      * @method ncells
      * @return {Number} The number of cells in this notebook
      */
     Notebook.prototype.ncells = function () {
         return this.get_cell_elements().length;
     };
 
     /**
      * Get all Cell objects in this notebook.
      * 
      * @method get_cells
      * @return {Array} This notebook's Cell objects
      */
     // TODO: we are often calling cells as cells()[i], which we should optimize
     // to cells(i) or a new method.
     Notebook.prototype.get_cells = function () {
         return this.get_cell_elements().toArray().map(function (e) {
             return $(e).data("cell");
         });
     };
 
     /**
      * Get a Cell object from this notebook.
      * 
      * @method get_cell
      * @param {Number} index An index of a cell to retrieve
      * @return {Cell} A particular cell
      */
     Notebook.prototype.get_cell = function (index) {
         var result = null;
         var ce = this.get_cell_element(index);
         if (ce !== null) {
             result = ce.data('cell');
         }
         return result;
     }
 
     /**
      * Get the cell below a given cell.
      * 
      * @method get_next_cell
      * @param {Cell} cell The provided cell
      * @return {Cell} The next cell
      */
     Notebook.prototype.get_next_cell = function (cell) {
         var result = null;
         var index = this.find_cell_index(cell);
         if (this.is_valid_cell_index(index+1)) {
             result = this.get_cell(index+1);
         }
         return result;
     }
 
     /**
      * Get the cell above a given cell.
      * 
      * @method get_prev_cell
      * @param {Cell} cell The provided cell
      * @return {Cell} The previous cell
      */
     Notebook.prototype.get_prev_cell = function (cell) {
         // TODO: off-by-one
         // nb.get_prev_cell(nb.get_cell(1)) is null
         var result = null;
         var index = this.find_cell_index(cell);
         if (index !== null && index > 1) {
             result = this.get_cell(index-1);
         }
         return result;
     }
     
     /**
      * Get the numeric index of a given cell.
      * 
      * @method find_cell_index
      * @param {Cell} cell The provided cell
      * @return {Number} The cell's numeric index
      */
     Notebook.prototype.find_cell_index = function (cell) {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell") === cell) {
                 result = index;
             };
         });
         return result;
     };
 
     /**
      * Get a given index , or the selected index if none is provided.
      * 
      * @method index_or_selected
      * @param {Number} index A cell's index
      * @return {Number} The given index, or selected index if none is provided.
      */
     Notebook.prototype.index_or_selected = function (index) {
         var i;
         if (index === undefined || index === null) {
             i = this.get_selected_index();
             if (i === null) {
                 i = 0;
             }
         } else {
             i = index;
         }
         return i;
     };
 
     /**
      * Get the currently selected cell.
      * @method get_selected_cell
      * @return {Cell} The selected cell
      */
     Notebook.prototype.get_selected_cell = function () {
         var index = this.get_selected_index();
         return this.get_cell(index);
     };
 
     /**
      * Check whether a cell index is valid.
      * 
      * @method is_valid_cell_index
      * @param {Number} index A cell index
      * @return True if the index is valid, false otherwise
      */
     Notebook.prototype.is_valid_cell_index = function (index) {
         if (index !== null && index >= 0 && index < this.ncells()) {
             return true;
         } else {
             return false;
         };
     }
 
     /**
      * Get the index of the currently selected cell.
      
      * @method get_selected_index
      * @return {Number} The selected cell's numeric index
      */
     Notebook.prototype.get_selected_index = function () {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell").selected === true) {
                 result = index;
             };
         });
         return result;
     };
 
 
     // Cell selection.
 
     /**
      * Programmatically select a cell.
      * 
      * @method select
      * @param {Number} index A cell's index
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select = function (index) {
         if (this.is_valid_cell_index(index)) {
             var sindex = this.get_selected_index()
             if (sindex !== null && index !== sindex) {
                 this.get_cell(sindex).unselect();
             };
             var cell = this.get_cell(index);
             cell.select();
             if (cell.cell_type === 'heading') {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type,level:cell.level}
                 );
             } else {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type}
                 );
             };
         };
         return this;
     };
 
     /**
      * Programmatically select the next cell.
      *
      * @method select_next
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select_next = function () {
         var index = this.get_selected_index();
         this.select(index+1);
         return this;
     };
 
     /**
      * Programmatically select the previous cell.
      *
      * @method select_prev
      * @return {Notebook} This notebook
      */
     Notebook.prototype.select_prev = function () {
         var index = this.get_selected_index();
         this.select(index-1);
         return this;
     };
 
 
     // Cell movement
 
     /**
      * Move given (or selected) cell up and select it.
      * 
      * @method move_cell_up
      * @param [index] {integer} cell index
      * @return {Notebook} This notebook
      **/
     Notebook.prototype.move_cell_up = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i) && i > 0) {
             var pivot = this.get_cell_element(i-1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.before(tomove);
                 this.select(i-1);
             };
             this.set_dirty(true);
         };
         return this;
     };
 
 
     /**
      * Move given (or selected) cell down and select it
      * 
      * @method move_cell_down
      * @param [index] {integer} cell index
      * @return {Notebook} This notebook
      **/
     Notebook.prototype.move_cell_down = function (index) {
         var i = this.index_or_selected(index);
         if ( this.is_valid_cell_index(i) && this.is_valid_cell_index(i+1)) {
             var pivot = this.get_cell_element(i+1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.after(tomove);
                 this.select(i+1);
             };
         };
         this.set_dirty();
         return this;
     };
 
 
     // Insertion, deletion.
 
     /**
      * Delete a cell from the notebook.
      * 
      * @method delete_cell
      * @param [index] A cell's numeric index
      * @return {Notebook} This notebook
      */
     Notebook.prototype.delete_cell = function (index) {
         var i = this.index_or_selected(index);
         var cell = this.get_selected_cell();
         this.undelete_backup = cell.toJSON();
         $('#undelete_cell').removeClass('disabled');
         if (this.is_valid_cell_index(i)) {
             var ce = this.get_cell_element(i);
             ce.remove();
             if (i === (this.ncells())) {
                 this.select(i-1);
                 this.undelete_index = i - 1;
                 this.undelete_below = true;
             } else {
                 this.select(i);
                 this.undelete_index = i;
                 this.undelete_below = false;
             };
             $([IPython.events]).trigger('delete.Cell', {'cell': cell, 'index': i});
             this.set_dirty(true);
         };
         return this;
     };
 
     /**
      * Insert a cell so that after insertion the cell is at given index.
      *
      * Similar to insert_above, but index parameter is mandatory
      *
      * Index will be brought back into the accissible range [0,n]
      *
      * @method insert_cell_at_index
      * @param type {string} in ['code','markdown','heading']
      * @param [index] {int} a valid index where to inser cell
      *
      * @return cell {cell|null} created cell or null
      **/
     Notebook.prototype.insert_cell_at_index = function(type, index){
 
         var ncells = this.ncells();
         var index = Math.min(index,ncells);
             index = Math.max(index,0);
         var cell = null;
 
         if (ncells === 0 || this.is_valid_cell_index(index) || index === ncells) {
             if (type === 'code') {
                 cell = new IPython.CodeCell(this.kernel);
                 cell.set_input_prompt();
             } else if (type === 'markdown') {
                 cell = new IPython.MarkdownCell();
             } else if (type === 'raw') {
                 cell = new IPython.RawCell();
             } else if (type === 'heading') {
                 cell = new IPython.HeadingCell();
             }
 
             if(this._insert_element_at_index(cell.element,index)){
                 cell.render();
                 this.select(this.find_cell_index(cell));
                 $([IPython.events]).trigger('create.Cell', {'cell': cell, 'index': index});
                 this.set_dirty(true);
             }
         }
         return cell;
 
     };
 
     /**
      * Insert an element at given cell index.
      *
      * @method _insert_element_at_index
      * @param element {dom element} a cell element
      * @param [index] {int} a valid index where to inser cell
      * @private
      *
      * return true if everything whent fine.
      **/
     Notebook.prototype._insert_element_at_index = function(element, index){
         if (element === undefined){
             return false;
         }
 
         var ncells = this.ncells();
 
         if (ncells === 0) {
             // special case append if empty
             this.element.find('div.end_space').before(element);
         } else if ( ncells === index ) {
             // special case append it the end, but not empty
             this.get_cell_element(index-1).after(element);
         } else if (this.is_valid_cell_index(index)) {
             // otherwise always somewhere to append to
             this.get_cell_element(index).before(element);
         } else {
             return false;
         }
 
         if (this.undelete_index !== null && index <= this.undelete_index) {
             this.undelete_index = this.undelete_index + 1;
             this.set_dirty(true);
         }
         return true;
     };
 
     /**
      * Insert a cell of given type above given index, or at top
      * of notebook if index smaller than 0.
      *
      * default index value is the one of currently selected cell
      *
      * @method insert_cell_above
      * @param type {string} cell type
      * @param [index] {integer}
      *
      * @return handle to created cell or null
      **/
     Notebook.prototype.insert_cell_above = function (type, index) {
         index = this.index_or_selected(index);
         return this.insert_cell_at_index(type, index);
     };
 
     /**
      * Insert a cell of given type below given index, or at bottom
      * of notebook if index greater thatn number of cell
      *
      * default index value is the one of currently selected cell
      *
      * @method insert_cell_below
      * @param type {string} cell type
      * @param [index] {integer}
      *
      * @return handle to created cell or null
      *
      **/
     Notebook.prototype.insert_cell_below = function (type, index) {
         index = this.index_or_selected(index);
         return this.insert_cell_at_index(type, index+1);
     };
 
 
     /**
      * Insert cell at end of notebook
      *
      * @method insert_cell_at_bottom
      * @param {String} type cell type
      *
      * @return the added cell; or null
      **/
     Notebook.prototype.insert_cell_at_bottom = function (type){
         var len = this.ncells();
         return this.insert_cell_below(type,len-1);
     };
 
     /**
      * Turn a cell into a code cell.
      * 
      * @method to_code
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_code = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.CodeCell)) {
                 var target_cell = this.insert_cell_below('code',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 }
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a Markdown cell.
      * 
      * @method to_markdown
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_markdown = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.MarkdownCell)) {
                 var target_cell = this.insert_cell_below('markdown',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a raw text cell.
      * 
      * @method to_raw
      * @param {Number} [index] A cell's index
      */
     Notebook.prototype.to_raw = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (!(source_cell instanceof IPython.RawCell)) {
                 target_cell = this.insert_cell_below('raw',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.set_dirty(true);
             };
         };
     };
 
     /**
      * Turn a cell into a heading cell.
      * 
      * @method to_heading
      * @param {Number} [index] A cell's index
      * @param {Number} [level] A heading level (e.g., 1 becomes &lt;h1&gt;)
      */
     Notebook.prototype.to_heading = function (index, level) {
         level = level || 1;
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (source_cell instanceof IPython.HeadingCell) {
                 source_cell.set_level(level);
             } else {
                 target_cell = this.insert_cell_below('heading',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.set_level(level);
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.set_dirty(true);
             };
             $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                 {'cell_type':'heading',level:level}
             );
         };
     };
 
 
     // Cut/Copy/Paste
 
     /**
      * Enable UI elements for pasting cells.
      * 
      * @method enable_paste
      */
     Notebook.prototype.enable_paste = function () {
         var that = this;
         if (!this.paste_enabled) {
             $('#paste_cell_replace').removeClass('disabled')
                 .on('click', function () {that.paste_cell_replace();});
             $('#paste_cell_above').removeClass('disabled')
                 .on('click', function () {that.paste_cell_above();});
             $('#paste_cell_below').removeClass('disabled')
                 .on('click', function () {that.paste_cell_below();});
             this.paste_enabled = true;
         };
     };
 
     /**
      * Disable UI elements for pasting cells.
      * 
      * @method disable_paste
      */
     Notebook.prototype.disable_paste = function () {
         if (this.paste_enabled) {
             $('#paste_cell_replace').addClass('disabled').off('click');
             $('#paste_cell_above').addClass('disabled').off('click');
             $('#paste_cell_below').addClass('disabled').off('click');
             this.paste_enabled = false;
         };
     };
 
     /**
      * Cut a cell.
      * 
      * @method cut_cell
      */
     Notebook.prototype.cut_cell = function () {
         this.copy_cell();
         this.delete_cell();
     }
 
     /**
      * Copy a cell.
      * 
      * @method copy_cell
      */
     Notebook.prototype.copy_cell = function () {
         var cell = this.get_selected_cell();
         this.clipboard = cell.toJSON();
         this.enable_paste();
     };
 
     /**
      * Replace the selected cell with a cell in the clipboard.
      * 
      * @method paste_cell_replace
      */
     Notebook.prototype.paste_cell_replace = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
             var old_cell = this.get_next_cell(new_cell);
             this.delete_cell(this.find_cell_index(old_cell));
             this.select(this.find_cell_index(new_cell));
         };
     };
 
     /**
      * Paste a cell from the clipboard above the selected cell.
      * 
      * @method paste_cell_above
      */
     Notebook.prototype.paste_cell_above = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
     /**
      * Paste a cell from the clipboard below the selected cell.
      * 
      * @method paste_cell_below
      */
     Notebook.prototype.paste_cell_below = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_below(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
     // Cell undelete
 
     /**
      * Restore the most recently deleted cell.
      * 
      * @method undelete
      */
     Notebook.prototype.undelete = function() {
         if (this.undelete_backup !== null && this.undelete_index !== null) {
             var current_index = this.get_selected_index();
             if (this.undelete_index < current_index) {
                 current_index = current_index + 1;
             }
             if (this.undelete_index >= this.ncells()) {
                 this.select(this.ncells() - 1);
             }
             else {
                 this.select(this.undelete_index);
             }
             var cell_data = this.undelete_backup;
             var new_cell = null;
             if (this.undelete_below) {
                 new_cell = this.insert_cell_below(cell_data.cell_type);
             } else {
                 new_cell = this.insert_cell_above(cell_data.cell_type);
             }
             new_cell.fromJSON(cell_data);
             this.select(current_index);
             this.undelete_backup = null;
             this.undelete_index = null;
         }
         $('#undelete_cell').addClass('disabled');
     }
 
     // Split/merge
 
     /**
      * Split the selected cell into two, at the cursor.
      * 
      * @method split_cell
      */
     Notebook.prototype.split_cell = function () {
         // Todo: implement spliting for other cell types.
         var cell = this.get_selected_cell();
         if (cell.is_splittable()) {
             var texta = cell.get_pre_cursor();
             var textb = cell.get_post_cursor();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(textb);
                 var new_cell = this.insert_cell_above('code');
                 new_cell.set_text(texta);
                 this.select_next();
             } else if (cell instanceof IPython.MarkdownCell) {
                 cell.set_text(textb);
                 cell.render();
                 var new_cell = this.insert_cell_above('markdown');
                 new_cell.edit(); // editor must be visible to call set_text
                 new_cell.set_text(texta);
                 new_cell.render();
                 this.select_next();
             }
         };
     };
 
     /**
      * Combine the selected cell into the cell above it.
      * 
      * @method merge_cell_above
      */
     Notebook.prototype.merge_cell_above = function () {
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         if (!cell.is_mergeable()) {
             return;
         }
         if (index > 0) {
             var upper_cell = this.get_cell(index-1);
             if (!upper_cell.is_mergeable()) {
                 return;
             }
             var upper_text = upper_cell.get_text();
             var text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(upper_text+'\n'+text);
             } else if (cell instanceof IPython.MarkdownCell) {
                 cell.edit();
                 cell.set_text(upper_text+'\n'+text);
                 cell.render();
             };
             this.delete_cell(index-1);
             this.select(this.find_cell_index(cell));
         };
     };
 
     /**
      * Combine the selected cell into the cell below it.
      * 
      * @method merge_cell_below
      */
     Notebook.prototype.merge_cell_below = function () {
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         if (!cell.is_mergeable()) {
             return;
         }
         if (index < this.ncells()-1) {
             var lower_cell = this.get_cell(index+1);
             if (!lower_cell.is_mergeable()) {
                 return;
             }
             var lower_text = lower_cell.get_text();
             var text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(text+'\n'+lower_text);
             } else if (cell instanceof IPython.MarkdownCell) {
                 cell.edit();
                 cell.set_text(text+'\n'+lower_text);
                 cell.render();
             };
             this.delete_cell(index+1);
             this.select(this.find_cell_index(cell));
         };
     };
 
 
     // Cell collapsing and output clearing
 
     /**
      * Hide a cell's output.
      * 
      * @method collapse
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.collapse = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).collapse();
         this.set_dirty(true);
     };
 
     /**
      * Show a cell's output.
      * 
      * @method expand
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.expand = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).expand();
         this.set_dirty(true);
     };
 
     /** Toggle whether a cell's output is collapsed or expanded.
      * 
      * @method toggle_output
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.toggle_output = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).toggle_output();
         this.set_dirty(true);
     };
 
     /**
      * Toggle a scrollbar for long cell outputs.
      * 
      * @method toggle_output_scroll
      * @param {Number} index A cell's numeric index
      */
     Notebook.prototype.toggle_output_scroll = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).toggle_output_scroll();
     };
 
     /**
      * Hide each code cell's output area.
      * 
      * @method collapse_all_output
      */
     Notebook.prototype.collapse_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.collapse();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Expand each code cell's output area, and add a scrollbar for long output.
      * 
      * @method scroll_all_output
      */
     Notebook.prototype.scroll_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.expand();
                 cells[i].output_area.scroll_if_long();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Expand each code cell's output area, and remove scrollbars.
      * 
      * @method expand_all_output
      */
     Notebook.prototype.expand_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].output_area.expand();
                 cells[i].output_area.unscroll_area();
             }
         };
         // this should not be set if the `collapse` key is removed from nbformat
         this.set_dirty(true);
     };
 
     /**
      * Clear each code cell's output area.
      * 
      * @method clear_all_output
      */
     Notebook.prototype.clear_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].clear_output();
                 // Make all In[] prompts blank, as well
                 // TODO: make this configurable (via checkbox?)
                 cells[i].set_input_prompt();
             }
         };
         this.set_dirty(true);
     };
 
 
     // Other cell functions: line numbers, ...
 
     /**
      * Toggle line numbers in the selected cell's input area.
      * 
      * @method cell_toggle_line_numbers
      */
     Notebook.prototype.cell_toggle_line_numbers = function() {
         this.get_selected_cell().toggle_line_numbers();
     };
 
     // Session related things
 
     /**
      * Start a new session and set it on each code cell.
      * 
      * @method start_session
      */
     Notebook.prototype.start_session = function () {
         this.session = new IPython.Session(this.notebook_name, this.notebook_path, this);
         this.session.start($.proxy(this._session_started, this));
     };
 
 
     /**
      * Once a session is started, link the code cells to the kernel
      *
      */
     Notebook.prototype._session_started = function(){
         this.kernel = this.session.kernel;
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             var cell = this.get_cell(i);
             if (cell instanceof IPython.CodeCell) {
                 cell.set_kernel(this.session.kernel);
             };
         };  
     };
     
     /**
      * Prompt the user to restart the IPython kernel.
      * 
      * @method restart_kernel
      */
     Notebook.prototype.restart_kernel = function () {
         var that = this;
         IPython.dialog.modal({
             title : "Restart kernel or continue running?",
             body : $("<p/>").html(
                 'Do you want to restart the current kernel?  You will lose all variables defined in it.'
             ),
             buttons : {
                 "Continue running" : {},
                 "Restart" : {
                     "class" : "btn-danger",
                     "click" : function() {
                         that.session.restart_kernel();
                     }
                 }
             }
         });
     };
     
     /**
      * Run the selected cell.
      * 
      * Execute or render cell outputs.
      * 
      * @method execute_selected_cell
      * @param {Object} options Customize post-execution behavior
      */
     Notebook.prototype.execute_selected_cell = function (options) {
         // add_new: should a new cell be added if we are at the end of the nb
         // terminal: execute in terminal mode, which stays in the current cell
         var default_options = {terminal: false, add_new: true};
         $.extend(default_options, options);
         var that = this;
         var cell = that.get_selected_cell();
         var cell_index = that.find_cell_index(cell);
         if (cell instanceof IPython.CodeCell) {
             cell.execute();
         }
         if (default_options.terminal) {
             cell.select_all();
         } else {
             if ((cell_index === (that.ncells()-1)) && default_options.add_new) {
                 that.insert_cell_below('code');
                 // If we are adding a new cell at the end, scroll down to show it.
                 that.scroll_to_bottom();
             } else {
                 that.select(cell_index+1);
             };
         };
         this.set_dirty(true);
     };
 
     /**
      * Execute all cells below the selected cell.
      * 
      * @method execute_cells_below
      */
     Notebook.prototype.execute_cells_below = function () {
         this.execute_cell_range(this.get_selected_index(), this.ncells());
         this.scroll_to_bottom();
     };
 
     /**
      * Execute all cells above the selected cell.
      * 
      * @method execute_cells_above
      */
     Notebook.prototype.execute_cells_above = function () {
         this.execute_cell_range(0, this.get_selected_index());
     };
 
     /**
      * Execute all cells.
      * 
      * @method execute_all_cells
      */
     Notebook.prototype.execute_all_cells = function () {
         this.execute_cell_range(0, this.ncells());
         this.scroll_to_bottom();
     };
 
     /**
      * Execute a contiguous range of cells.
      * 
      * @method execute_cell_range
      * @param {Number} start Index of the first cell to execute (inclusive)
      * @param {Number} end Index of the last cell to execute (exclusive)
      */
     Notebook.prototype.execute_cell_range = function (start, end) {
         for (var i=start; i<end; i++) {
             this.select(i);
             this.execute_selected_cell({add_new:false});
         };
     };
 
     // Persistance and loading
 
     /**
      * Getter method for this notebook's name.
      * 
      * @method get_notebook_name
      * @return {String} This notebook's name
      */
     Notebook.prototype.get_notebook_name = function () {
         var nbname = this.notebook_name.substring(0,this.notebook_name.length-6);
         return nbname;
     };
 
     /**
      * Setter method for this notebook's name.
      *
      * @method set_notebook_name
      * @param {String} name A new name for this notebook
      */
     Notebook.prototype.set_notebook_name = function (name) {
         this.notebook_name = name;
     };
 
     /**
      * Check that a notebook's name is valid.
      * 
      * @method test_notebook_name
      * @param {String} nbname A name for this notebook
      * @return {Boolean} True if the name is valid, false if invalid
      */
     Notebook.prototype.test_notebook_name = function (nbname) {
         nbname = nbname || '';
         if (this.notebook_name_blacklist_re.test(nbname) == false && nbname.length>0) {
             return true;
         } else {
             return false;
         };
     };
 
     /**
      * Load a notebook from JSON (.ipynb).
      * 
      * This currently handles one worksheet: others are deleted.
      * 
      * @method fromJSON
      * @param {Object} data JSON representation of a notebook
      */
     Notebook.prototype.fromJSON = function (data) {
         var content = data.content;
         var ncells = this.ncells();
         var i;
         for (i=0; i<ncells; i++) {
             // Always delete cell 0 as they get renumbered as they are deleted.
             this.delete_cell(0);
         };
         // Save the metadata and name.
         this.metadata = content.metadata;
         this.notebook_name = data.name;
         // Only handle 1 worksheet for now.
         var worksheet = content.worksheets[0];
         if (worksheet !== undefined) {
             if (worksheet.metadata) {
                 this.worksheet_metadata = worksheet.metadata;
             }
             var new_cells = worksheet.cells;
             ncells = new_cells.length;
             var cell_data = null;
             var new_cell = null;
             for (i=0; i<ncells; i++) {
                 cell_data = new_cells[i];
                 // VERSIONHACK: plaintext -> raw
                 // handle never-released plaintext name for raw cells
                 if (cell_data.cell_type === 'plaintext'){
                     cell_data.cell_type = 'raw';
                 }
 
-                new_cell = this.insert_cell_below(cell_data.cell_type);
+                new_cell = this.insert_cell_at_bottom(cell_data.cell_type);
                 new_cell.fromJSON(cell_data);
             };
         };
         if (content.worksheets.length > 1) {
             IPython.dialog.modal({
                 title : "Multiple worksheets",
                 body : "This notebook has " + data.worksheets.length + " worksheets, " +
                     "but this version of IPython can only handle the first.  " +
                     "If you save this notebook, worksheets after the first will be lost.",
                 buttons : {
                     OK : {
                         class : "btn-danger"
                     }
                 }
             });
         }
     };
 
     /**
      * Dump this notebook into a JSON-friendly object.
      * 
      * @method toJSON
      * @return {Object} A JSON-friendly representation of this notebook.
      */
     Notebook.prototype.toJSON = function () {
         var cells = this.get_cells();
         var ncells = cells.length;
         var cell_array = new Array(ncells);
         for (var i=0; i<ncells; i++) {
             cell_array[i] = cells[i].toJSON();
         };
         var data = {
             // Only handle 1 worksheet for now.
             worksheets : [{
                 cells: cell_array,
                 metadata: this.worksheet_metadata
             }],
             metadata : this.metadata
         };
         return data;
     };
 
     /**
      * Start an autosave timer, for periodically saving the notebook.
      * 
      * @method set_autosave_interval
      * @param {Integer} interval the autosave interval in milliseconds
      */
     Notebook.prototype.set_autosave_interval = function (interval) {
         var that = this;
         // clear previous interval, so we don't get simultaneous timers
         if (this.autosave_timer) {
             clearInterval(this.autosave_timer);
         }
         
         this.autosave_interval = this.minimum_autosave_interval = interval;
         if (interval) {
             this.autosave_timer = setInterval(function() {
                 if (that.dirty) {
                     that.save_notebook();
                 }
             }, interval);
             $([IPython.events]).trigger("autosave_enabled.Notebook", interval);
         } else {
             this.autosave_timer = null;
             $([IPython.events]).trigger("autosave_disabled.Notebook");
         };
     };
     
     /**
      * Save this notebook on the server.
      * 
      * @method save_notebook
      */
     Notebook.prototype.save_notebook = function (extra_settings) {
         // Create a JSON model to be sent to the server.
         var model = {};
         model.name = this.notebook_name;
         model.path = this.notebook_path;
         model.content = this.toJSON();
         model.content.nbformat = this.nbformat;
         model.content.nbformat_minor = this.nbformat_minor;
         // time the ajax call for autosave tuning purposes.
         var start =  new Date().getTime();
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "PUT",
             data : JSON.stringify(model),
             headers : {'Content-Type': 'application/json'},
             success : $.proxy(this.save_notebook_success, this, start),
             error : $.proxy(this.save_notebook_error, this)
         };
         if (extra_settings) {
             for (var key in extra_settings) {
                 settings[key] = extra_settings[key];
             }
         }
         $([IPython.events]).trigger('notebook_saving.Notebook');
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name
         );
         $.ajax(url, settings);
     };
     
     /**
      * Success callback for saving a notebook.
      * 
      * @method save_notebook_success
      * @param {Integer} start the time when the save request started
      * @param {Object} data JSON representation of a notebook
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.save_notebook_success = function (start, data, status, xhr) {
         this.set_dirty(false);
         $([IPython.events]).trigger('notebook_saved.Notebook');
         this._update_autosave_interval(start);
         if (this._checkpoint_after_save) {
             this.create_checkpoint();
             this._checkpoint_after_save = false;
         };
     };
     
     /**
      * update the autosave interval based on how long the last save took
      * 
      * @method _update_autosave_interval
      * @param {Integer} timestamp when the save request started
      */
     Notebook.prototype._update_autosave_interval = function (start) {
         var duration = (new Date().getTime() - start);
         if (this.autosave_interval) {
             // new save interval: higher of 10x save duration or parameter (default 30 seconds)
             var interval = Math.max(10 * duration, this.minimum_autosave_interval);
             // round to 10 seconds, otherwise we will be setting a new interval too often
             interval = 10000 * Math.round(interval / 10000);
             // set new interval, if it's changed
             if (interval != this.autosave_interval) {
                 this.set_autosave_interval(interval);
             }
         }
     };
     
     /**
      * Failure callback for saving a notebook.
      * 
      * @method save_notebook_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.save_notebook_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('notebook_save_failed.Notebook');
     };
 
     Notebook.prototype.new_notebook = function(){
         var path = this.notebookPath();
         var base_project_url = this.baseProjectUrl();
         var settings = {
             processData : false,
             cache : false,
             type : "POST",
             dataType : "json",
             async : false,
             success : function (data, status, xhr){
                 var notebook_name = data.name;
                 window.open(
                     utils.url_path_join(
                         base_project_url,
                         'notebooks',
                         path,
                         notebook_name
                     ),
                     '_blank'
                 );
             }
         };
         var url = utils.url_path_join(
             base_project_url,
             'api/notebooks',
             path
         );
         $.ajax(url,settings);
     };
 
 
     Notebook.prototype.copy_notebook = function(){
         var path = this.notebookPath();
         var base_project_url = this.baseProjectUrl();
         var settings = {
             processData : false,
             cache : false,
             type : "POST",
             dataType : "json",
             data : JSON.stringify({copy_from : this.notebook_name}),
             async : false,
             success : function (data, status, xhr) {
                 window.open(utils.url_path_join(
                     base_project_url,
                     'notebooks',
                     data.path,
                     data.name
                 ), '_blank');
             }
         };
         var url = utils.url_path_join(
             base_project_url,
             'api/notebooks',
             path
         );
         $.ajax(url,settings);
     };
 
     Notebook.prototype.rename = function (nbname) {
         var that = this;
         var data = {name: nbname + '.ipynb'};
         var settings = {
             processData : false,
             cache : false,
             type : "PATCH",
             data : JSON.stringify(data),
             dataType: "json",
             headers : {'Content-Type': 'application/json'},
             success : $.proxy(that.rename_success, this),
             error : $.proxy(that.rename_error, this)
         };
         $([IPython.events]).trigger('rename_notebook.Notebook', data);
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name
         );
         $.ajax(url, settings);
     };
     
     
     Notebook.prototype.rename_success = function (json, status, xhr) {
         this.notebook_name = json.name
         var name = this.notebook_name
         var path = json.path
         this.session.rename_notebook(name, path);
         $([IPython.events]).trigger('notebook_renamed.Notebook', json);
     }
 
     Notebook.prototype.rename_error = function (json, status, xhr) {
         var that = this;
         var dialog = $('<div/>').append(
             $("<p/>").addClass("rename-message")
             .html('This notebook name already exists.')
         )
         IPython.dialog.modal({
             title: "Notebook Rename Error!",
             body: dialog,
             buttons : {
                 "Cancel": {},
                 "OK": {
                     class: "btn-primary",
                     click: function () {
                         IPython.save_widget.rename_notebook();
                 }}
                 },
             open : function (event, ui) {
                 var that = $(this);
                 // Upon ENTER, click the OK button.
                 that.find('input[type="text"]').keydown(function (event, ui) {
                     if (event.which === utils.keycodes.ENTER) {
                         that.find('.btn-primary').first().click();
                     }
                 });
                 that.find('input[type="text"]').focus();
             }
         });
     }
 
     /**
      * Request a notebook's data from the server.
      * 
      * @method load_notebook
      * @param {String} notebook_name and path A notebook to load
      */
     Notebook.prototype.load_notebook = function (notebook_name, notebook_path) {
         var that = this;
         this.notebook_name = notebook_name;
         this.notebook_path = notebook_path;
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "GET",
             dataType : "json",
             success : $.proxy(this.load_notebook_success,this),
             error : $.proxy(this.load_notebook_error,this),
         };
         $([IPython.events]).trigger('notebook_loading.Notebook');
         var url = utils.url_path_join(
             this._baseProjectUrl,
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name
         );
         $.ajax(url, settings);
     };
 
     /**
      * Success callback for loading a notebook from the server.
      * 
      * Load notebook data from the JSON response.
      * 
      * @method load_notebook_success
      * @param {Object} data JSON representation of a notebook
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.load_notebook_success = function (data, status, xhr) {
         this.fromJSON(data);
         if (this.ncells() === 0) {
             this.insert_cell_below('code');
         };
         this.set_dirty(false);
         this.select(0);
         this.scroll_to_top();
         if (data.orig_nbformat !== undefined && data.nbformat !== data.orig_nbformat) {
             var msg = "This notebook has been converted from an older " +
             "notebook format (v"+data.orig_nbformat+") to the current notebook " +
             "format (v"+data.nbformat+"). The next time you save this notebook, the " +
             "newer notebook format will be used and older versions of IPython " +
             "may not be able to read it. To keep the older version, close the " +
             "notebook without saving it.";
             IPython.dialog.modal({
                 title : "Notebook converted",
                 body : msg,
                 buttons : {
                     OK : {
                         class : "btn-primary"
                     }
                 }
             });
         } else if (data.orig_nbformat_minor !== undefined && data.nbformat_minor !== data.orig_nbformat_minor) {
             var that = this;
             var orig_vs = 'v' + data.nbformat + '.' + data.orig_nbformat_minor;
             var this_vs = 'v' + data.nbformat + '.' + this.nbformat_minor;
             var msg = "This notebook is version " + orig_vs + ", but we only fully support up to " +
             this_vs + ".  You can still work with this notebook, but some features " +
             "introduced in later notebook versions may not be available."
 
             IPython.dialog.modal({
                 title : "Newer Notebook",
                 body : msg,
                 buttons : {
                     OK : {
                         class : "btn-danger"
                     }
                 }
             });
 
         }
         
         // Create the session after the notebook is completely loaded to prevent
         // code execution upon loading, which is a security risk.
         if (this.session == null) {
             this.start_session();
         }
         // load our checkpoint list
         IPython.notebook.list_checkpoints();
         $([IPython.events]).trigger('notebook_loaded.Notebook');
     };
 
     /**
      * Failure callback for loading a notebook from the server.
      * 
      * @method load_notebook_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} textStatus Description of response status
      * @param {String} errorThrow HTTP error message
      */
     Notebook.prototype.load_notebook_error = function (xhr, textStatus, errorThrow) {
         if (xhr.status === 400) {
             var msg = errorThrow;
         } else if (xhr.status === 500) {
             var msg = "An unknown error occurred while loading this notebook. " +
             "This version can load notebook formats " +
             "v" + this.nbformat + " or earlier.";
         }
         IPython.dialog.modal({
             title: "Error loading notebook",
             body : msg,
             buttons : {
                 "OK": {}
             }
         });
     }
 
     /*********************  checkpoint-related  *********************/
     
     /**
      * Save the notebook then immediately create a checkpoint.
      * 
      * @method save_checkpoint
      */
     Notebook.prototype.save_checkpoint = function () {
         this._checkpoint_after_save = true;
         this.save_notebook();
     };
     
     /**
      * Add a checkpoint for this notebook.
      * for use as a callback from checkpoint creation.
      * 
      * @method add_checkpoint
      */
     Notebook.prototype.add_checkpoint = function (checkpoint) {
         var found = false;
         for (var i = 0; i < this.checkpoints.length; i++) {
             var existing = this.checkpoints[i];
             if (existing.id == checkpoint.id) {
                 found = true;
                 this.checkpoints[i] = checkpoint;
                 break;
             }
         }
         if (!found) {
             this.checkpoints.push(checkpoint);
         }
         this.last_checkpoint = this.checkpoints[this.checkpoints.length - 1];
     };
     
     /**
      * List checkpoints for this notebook.
      * 
      * @method list_checkpoints
      */
     Notebook.prototype.list_checkpoints = function () {
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints'
         );
         $.get(url).done(
             $.proxy(this.list_checkpoints_success, this)
         ).fail(
             $.proxy(this.list_checkpoints_error, this)
         );
     };
 
     /**
      * Success callback for listing checkpoints.
      * 
      * @method list_checkpoint_success
      * @param {Object} data JSON representation of a checkpoint
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.list_checkpoints_success = function (data, status, xhr) {
         var data = $.parseJSON(data);
         this.checkpoints = data;
         if (data.length) {
             this.last_checkpoint = data[data.length - 1];
         } else {
             this.last_checkpoint = null;
         }
         $([IPython.events]).trigger('checkpoints_listed.Notebook', [data]);
     };
 
     /**
      * Failure callback for listing a checkpoint.
      * 
      * @method list_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.list_checkpoints_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('list_checkpoints_failed.Notebook');
     };
     
     /**
      * Create a checkpoint of this notebook on the server from the most recent save.
      * 
      * @method create_checkpoint
      */
     Notebook.prototype.create_checkpoint = function () {
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints'
         );
         $.post(url).done(
             $.proxy(this.create_checkpoint_success, this)
         ).fail(
             $.proxy(this.create_checkpoint_error, this)
         );
     };
 
     /**
      * Success callback for creating a checkpoint.
      * 
      * @method create_checkpoint_success
      * @param {Object} data JSON representation of a checkpoint
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.create_checkpoint_success = function (data, status, xhr) {
         var data = $.parseJSON(data);
         this.add_checkpoint(data);
         $([IPython.events]).trigger('checkpoint_created.Notebook', data);
     };
 
     /**
      * Failure callback for creating a checkpoint.
      * 
      * @method create_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.create_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_failed.Notebook');
     };
     
     Notebook.prototype.restore_checkpoint_dialog = function (checkpoint) {
         var that = this;
         var checkpoint = checkpoint || this.last_checkpoint;
         if ( ! checkpoint ) {
             console.log("restore dialog, but no checkpoint to restore to!");
             return;
         }
         var body = $('<div/>').append(
             $('<p/>').addClass("p-space").text(
                 "Are you sure you want to revert the notebook to " +
                 "the latest checkpoint?"
             ).append(
                 $("<strong/>").text(
                     " This cannot be undone."
                 )
             )
         ).append(
             $('<p/>').addClass("p-space").text("The checkpoint was last updated at:")
         ).append(
             $('<p/>').addClass("p-space").text(
                 Date(checkpoint.last_modified)
             ).css("text-align", "center")
         );
         
         IPython.dialog.modal({
             title : "Revert notebook to checkpoint",
             body : body,
             buttons : {
                 Revert : {
                     class : "btn-danger",
                     click : function () {
                         that.restore_checkpoint(checkpoint.id);
                     }
                 },
                 Cancel : {}
                 }
         });
     }
     
     /**
      * Restore the notebook to a checkpoint state.
      * 
      * @method restore_checkpoint
      * @param {String} checkpoint ID
      */
     Notebook.prototype.restore_checkpoint = function (checkpoint) {
         $([IPython.events]).trigger('notebook_restoring.Notebook', checkpoint);
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints',
             checkpoint
         );
         $.post(url).done(
             $.proxy(this.restore_checkpoint_success, this)
         ).fail(
             $.proxy(this.restore_checkpoint_error, this)
         );
     };
     
     /**
      * Success callback for restoring a notebook to a checkpoint.
      * 
      * @method restore_checkpoint_success
      * @param {Object} data (ignored, should be empty)
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.restore_checkpoint_success = function (data, status, xhr) {
         $([IPython.events]).trigger('checkpoint_restored.Notebook');
         this.load_notebook(this.notebook_name, this.notebook_path);
     };
 
     /**
      * Failure callback for restoring a notebook to a checkpoint.
      * 
      * @method restore_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.restore_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_restore_failed.Notebook');
     };
     
     /**
      * Delete a notebook checkpoint.
      * 
      * @method delete_checkpoint
      * @param {String} checkpoint ID
      */
     Notebook.prototype.delete_checkpoint = function (checkpoint) {
         $([IPython.events]).trigger('notebook_restoring.Notebook', checkpoint);
         var url = utils.url_path_join(
             this.baseProjectUrl(),
             'api/notebooks',
             this.notebookPath(),
             this.notebook_name,
             'checkpoints',
             checkpoint
         );
         $.ajax(url, {
             type: 'DELETE',
             success: $.proxy(this.delete_checkpoint_success, this),
             error: $.proxy(this.delete_notebook_error,this)
         });
     };
     
     /**
      * Success callback for deleting a notebook checkpoint
      * 
      * @method delete_checkpoint_success
      * @param {Object} data (ignored, should be empty)
      * @param {String} status Description of response status
      * @param {jqXHR} xhr jQuery Ajax object
      */
     Notebook.prototype.delete_checkpoint_success = function (data, status, xhr) {
         $([IPython.events]).trigger('checkpoint_deleted.Notebook', data);
         this.load_notebook(this.notebook_name, this.notebook_path);
     };
 
     /**
      * Failure callback for deleting a notebook checkpoint.
      * 
      * @method delete_checkpoint_error
      * @param {jqXHR} xhr jQuery Ajax object
      * @param {String} status Description of response status
      * @param {String} error_msg HTTP error message
      */
     Notebook.prototype.delete_checkpoint_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('checkpoint_delete_failed.Notebook');
     };
 
 
     IPython.Notebook = Notebook;
 
 
     return IPython;
 
 }(IPython));

IPython/html/static/notebook/js/outputarea.js

@@ -1,728 +1,729 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008 The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // OutputArea
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  * @submodule OutputArea
  */
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * @class OutputArea
      *
      * @constructor
      */
 
     var OutputArea = function (selector, prompt_area) {
         this.selector = selector;
         this.wrapper = $(selector);
         this.outputs = [];
         this.collapsed = false;
         this.scrolled = false;
         this.clear_queued = null;
         if (prompt_area === undefined) {
             this.prompt_area = true;
         } else {
             this.prompt_area = prompt_area;
         }
         this.create_elements();
         this.style();
         this.bind_events();
     };
     
     OutputArea.prototype.create_elements = function () {
         this.element = $("<div/>");
         this.collapse_button = $("<div/>");
         this.prompt_overlay = $("<div/>");
         this.wrapper.append(this.prompt_overlay);
         this.wrapper.append(this.element);
         this.wrapper.append(this.collapse_button);
     };
 
 
     OutputArea.prototype.style = function () {
         this.collapse_button.hide();
         this.prompt_overlay.hide();
         
         this.wrapper.addClass('output_wrapper');
         this.element.addClass('output');
         
         this.collapse_button.addClass("btn output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.html('. . .');
         
         this.prompt_overlay.addClass('out_prompt_overlay prompt');
         this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
         
         this.collapse();
     };
 
     /**
      * Should the OutputArea scroll?
      * Returns whether the height (in lines) exceeds a threshold.
      *
      * @private
      * @method _should_scroll
      * @param [lines=100]{Integer}
      * @return {Bool}
      *
      */
     OutputArea.prototype._should_scroll = function (lines) {
         if (lines <=0 ){ return }
         if (!lines) {
             lines = 100;
         }
         // line-height from http://stackoverflow.com/questions/1185151
         var fontSize = this.element.css('font-size');
         var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
         
         return (this.element.height() > lines * lineHeight);
     };
 
 
     OutputArea.prototype.bind_events = function () {
         var that = this;
         this.prompt_overlay.dblclick(function () { that.toggle_output(); });
         this.prompt_overlay.click(function () { that.toggle_scroll(); });
 
         this.element.resize(function () {
             // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
             if ( IPython.utils.browser[0] === "Firefox" ) {
                 return;
             }
             // maybe scroll output,
             // if it's grown large enough and hasn't already been scrolled.
             if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
                 that.scroll_area();
             }
         });
         this.collapse_button.click(function () {
             that.expand();
         });
     };
 
 
     OutputArea.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.hide();
             this.prompt_overlay.hide();
             if (this.element.html()){
                 this.collapse_button.show();
             }
             this.collapsed = true;
         }
     };
 
 
     OutputArea.prototype.expand = function () {
         if (this.collapsed) {
             this.collapse_button.hide();
             this.element.show();
             this.prompt_overlay.show();
             this.collapsed = false;
         }
     };
 
 
     OutputArea.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         }
     };
 
 
     OutputArea.prototype.scroll_area = function () {
         this.element.addClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
         this.scrolled = true;
     };
 
 
     OutputArea.prototype.unscroll_area = function () {
         this.element.removeClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
         this.scrolled = false;
     };
 
     /**
      * Threshold to trigger autoscroll when the OutputArea is resized,
      * typically when new outputs are added.
      *
      * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
      * unless it is < 0, in which case autoscroll will never be triggered
      *
      * @property auto_scroll_threshold
      * @type Number
      * @default 100
      *
      **/
     OutputArea.auto_scroll_threshold = 100;
 
 
     /**
      * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
      * shorter than this are never scrolled.
      *
      * @property minimum_scroll_threshold
      * @type Number
      * @default 20
      *
      **/
     OutputArea.minimum_scroll_threshold = 20;
 
 
     /**
      *
      * Scroll OutputArea if height supperior than a threshold (in lines).
      *
      * Threshold is a maximum number of lines. If unspecified, defaults to
      * OutputArea.minimum_scroll_threshold.
      *
      * Negative threshold will prevent the OutputArea from ever scrolling.
      *
      * @method scroll_if_long
      *
      * @param [lines=20]{Number} Default to 20 if not set,
      * behavior undefined for value of `0`.
      *
      **/
     OutputArea.prototype.scroll_if_long = function (lines) {
         var n = lines | OutputArea.minimum_scroll_threshold;
         if(n <= 0){
             return
         }
 
         if (this._should_scroll(n)) {
             // only allow scrolling long-enough output
             this.scroll_area();
         }
     };
 
 
     OutputArea.prototype.toggle_scroll = function () {
         if (this.scrolled) {
             this.unscroll_area();
         } else {
             // only allow scrolling long-enough output
             this.scroll_if_long();
         }
     };
 
 
     // typeset with MathJax if MathJax is available
     OutputArea.prototype.typeset = function () {
         if (window.MathJax){
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         }
     };
 
 
     OutputArea.prototype.handle_output = function (msg) {
         var json = {};
         var msg_type = json.output_type = msg.header.msg_type;
         var content = msg.content;
         if (msg_type === "stream") {
             json.text = content.data;
             json.stream = content.name;
         } else if (msg_type === "display_data") {
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyout") {
             json.prompt_number = content.execution_count;
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyerr") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         }
         // append with dynamic=true
         this.append_output(json, true);
     };
 
 
     OutputArea.prototype.convert_mime_types = function (json, data) {
         if (data === undefined) {
             return json;
         }
         if (data['text/plain'] !== undefined) {
             json.text = data['text/plain'];
         }
         if (data['text/html'] !== undefined) {
             json.html = data['text/html'];
         }
         if (data['image/svg+xml'] !== undefined) {
             json.svg = data['image/svg+xml'];
         }
         if (data['image/png'] !== undefined) {
             json.png = data['image/png'];
         }
         if (data['image/jpeg'] !== undefined) {
             json.jpeg = data['image/jpeg'];
         }
         if (data['text/latex'] !== undefined) {
             json.latex = data['text/latex'];
         }
         if (data['application/json'] !== undefined) {
             json.json = data['application/json'];
         }
         if (data['application/javascript'] !== undefined) {
             json.javascript = data['application/javascript'];
         }
         return json;
     };
 
 
     OutputArea.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
         // Clear the output if clear is queued.
         var needs_height_reset = false;
         if (this.clear_queued) {
             this.clear_output(false);
             needs_height_reset = true;
         }
 
         if (json.output_type === 'pyout') {
             this.append_pyout(json, dynamic);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json, dynamic);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         }
         this.outputs.push(json);
         
         // Only reset the height to automatic if the height is currently
         // fixed (done by wait=True flag on clear_output).
         if (needs_height_reset) {
             this.element.height('');    
         }
 
         var that = this;
         setTimeout(function(){that.element.trigger('resize');}, 100);
     };
 
 
     OutputArea.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
         return oa;
     };
 
 
     OutputArea.prototype.create_output_subarea = function(md, classes) {
         var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
         if (md['isolated']) {
             // Create an iframe to isolate the subarea from the rest of the
             // document
             var iframe = $('<iframe/>').addClass('box-flex1');
             iframe.css({'height':1, 'width':'100%', 'display':'block'});
             iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'auto');
 
             // Once the iframe is loaded, the subarea is dynamically inserted
             iframe.on('load', function() {
                 // Workaround needed by Firefox, to properly render svg inside
                 // iframes, see http://stackoverflow.com/questions/10177190/
                 // svg-dynamically-added-to-iframe-does-not-render-correctly
                 this.contentDocument.open();
 
                 // Insert the subarea into the iframe
                 // We must directly write the html. When using Jquery's append
                 // method, javascript is evaluated in the parent document and
                 // not in the iframe document.
                 this.contentDocument.write(subarea.html());
 
                 this.contentDocument.close();
 
                 var body = this.contentDocument.body;
                 // Adjust the iframe height automatically
                 iframe.height(body.scrollHeight + 'px');
             });
 
             // Elements should be appended to the inner subarea and not to the
             // iframe
             iframe.append = function(that) {
                 subarea.append(that);
             };
 
             return iframe;
         } else {
             return subarea;
         }
     }
 
 
     OutputArea.prototype._append_javascript_error = function (err, container) {
         // display a message when a javascript error occurs in display output
         var msg = "Javascript error adding output!"
         console.log(msg, err);
         if ( container === undefined ) return;
         container.append(
             $('<div/>').html(msg + "<br/>" +
                 err.toString() +
                 '<br/>See your browser Javascript console for more details.'
             ).addClass('js-error')
         );
         container.show();
     };
     
     OutputArea.prototype._safe_append = function (toinsert) {
         // safely append an item to the document
         // this is an object created by user code,
         // and may have errors, which should not be raised
         // under any circumstances.
         try {
             this.element.append(toinsert);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, this.element);
         }
     };
 
 
     OutputArea.prototype.append_pyout = function (json, dynamic) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         }
         this.append_mime_type(json, toinsert, dynamic);
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         }
     };
 
 
     OutputArea.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             this.append_text(s, {}, toinsert);
             this._safe_append(toinsert);
         }
     };
 
 
     OutputArea.prototype.append_stream = function (json) {
         // temporary fix: if stream undefined (json file written prior to this patch),
         // default to most likely stdout:
         if (json.stream == undefined){
             json.stream = 'stdout';
         }
         var text = json.text;
         var subclass = "output_"+json.stream;
         if (this.outputs.length > 0){
             // have at least one output to consider
             var last = this.outputs[this.outputs.length-1];
             if (last.output_type == 'stream' && json.stream == last.stream){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 var pre = this.element.find('div.'+subclass).last().find('pre');
                 var html = utils.fixCarriageReturn(
                     pre.html() + utils.fixConsole(text));
                 pre.html(html);
                 return;
             }
         }
 
         if (!text.replace("\r", "")) {
             // text is nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             return;
         }
 
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         this.append_text(text, {}, toinsert, "output_stream "+subclass);
         this._safe_append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         if (this.append_mime_type(json, toinsert, dynamic)) {
             this._safe_append(toinsert);
             // If we just output latex, typeset it.
             if ( (json.latex !== undefined) || (json.html !== undefined) ) {
                 this.typeset();
             }
         }
     };
 
     OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
 
     OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
         for(var type_i in OutputArea.display_order){
             var type = OutputArea.display_order[type_i];
             if(json[type] != undefined ){
                 var md = {};
                 if (json.metadata && json.metadata[type]) {
                     md = json.metadata[type];
                 };
                 if(type == 'javascript'){
                     if (dynamic) {
                         this.append_javascript(json.javascript, md, element, dynamic);
                         return true;
                     }
                 } else {
                     this['append_'+type](json[type], md, element);
                     return true;
                 }
                 return false;
             }
         }
         return false;
     };
 
 
     OutputArea.prototype.append_html = function (html, md, element) {
         var toinsert = this.create_output_subarea(md, "output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_javascript = function (js, md, container) {
         // We just eval the JS code, element appears in the local scope.
         var element = this.create_output_subarea(md, "");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
         // If the Javascript appends content to `element` that should be drawn, then
         // it must also call `container.show()`.
         try {
             eval(js);
         } catch(err) {
             this._append_javascript_error(err, container);
         }
     };
 
 
     OutputArea.prototype.append_text = function (data, md, element, extra_class) {
         var toinsert = this.create_output_subarea(md, "output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
         data = utils.autoLinkUrls(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
         var toinsert = this.create_output_subarea(md, "output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype._dblclick_to_reset_size = function (img) {
         // schedule wrapping image in resizable after a delay,
         // so we don't end up calling resize on a zero-size object
         var that = this;
         setTimeout(function () {
             var h0 = img.height();
             var w0 = img.width();
             if (!(h0 && w0)) {
                 // zero size, schedule another timeout
                 that._dblclick_to_reset_size(img);
                 return;
             }
             img.resizable({
                 aspectRatio: true,
                 autoHide: true
             });
             img.dblclick(function () {
                 // resize wrapper & image together for some reason:
                 img.parent().height(h0);
                 img.height(h0);
                 img.parent().width(w0);
                 img.width(w0);
             });
         }, 250);
     };
 
 
     OutputArea.prototype.append_png = function (png, md, element) {
         var toinsert = this.create_output_subarea(md, "output_png");
-        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+        var img = $("<img/>");
+        img[0].setAttribute('src','data:image/png;base64,'+png);
         if (md['height']) {
-            img.attr('height', md['height']);
+            img[0].setAttribute('height', md['height']);
         }
         if (md['width']) {
-            img.attr('width', md['width']);
+            img[0].setAttribute('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
         var toinsert = this.create_output_subarea(md, "output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
         if (md['height']) {
             img.attr('height', md['height']);
         }
         if (md['width']) {
             img.attr('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_latex = function (latex, md, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         var toinsert = this.create_output_subarea(md, "output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };
 
     OutputArea.prototype.append_raw_input = function (msg) {
         var that = this;
         this.expand();
         var content = msg.content;
         var area = this.create_output_area();
         
         // disable any other raw_inputs, if they are left around
         $("div.output_subarea.raw_input").remove();
         
         area.append(
             $("<div/>")
             .addClass("box-flex1 output_subarea raw_input")
             .append(
                 $("<span/>")
                 .addClass("input_prompt")
                 .text(content.prompt)
             )
             .append(
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', 'text')
                 .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
                     if (event.which === utils.keycodes.ENTER) {
                         that._submit_raw_input();
                         return false;
                     }
                 })
             )
         );
         this.element.append(area);
         // weirdly need double-focus now,
         // otherwise only the cell will be focused
         area.find("input.raw_input").focus().focus();
     }
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input");
         var theprompt = container.find("span.input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var content = {
             output_type : 'stream',
             name : 'stdout',
             text : theprompt.text() + value + '\n'
         }
         // remove form container
         container.parent().remove();
         // replace with plaintext version in stdout
         this.append_output(content, false);
         $([IPython.events]).trigger('send_input_reply.Kernel', value);
     }
 
 
     OutputArea.prototype.handle_clear_output = function (msg) {
         this.clear_output(msg.content.wait);
     };
 
 
     OutputArea.prototype.clear_output = function(wait) {
         if (wait) {
 
             // If a clear is queued, clear before adding another to the queue.
             if (this.clear_queued) {
                 this.clear_output(false);
             };
 
             this.clear_queued = true;
         } else {
 
             // Fix the output div's height if the clear_output is waiting for
             // new output (it is being used in an animation).
             if (this.clear_queued) {
                 var height = this.element.height();
                 this.element.height(height);
                 this.clear_queued = false;
             }
             
             // clear all, no need for logic
             this.element.html("");
             this.outputs = [];
             this.unscroll_area();
             return;
         };
     };
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs) {
         var len = outputs.length;
         for (var i=0; i<len; i++) {
             // append with dynamic=false.
             this.append_output(outputs[i], false);
         }
     };
 
 
     OutputArea.prototype.toJSON = function () {
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         }
         return outputs;
     };
 
 
     IPython.OutputArea = OutputArea;
 
     return IPython;
 
 }(IPython));