Merge pull request #4853 from minrk/imgmd

fix setting image height/width from metadata

IPython/html/tests/casperjs/test_cases/display_image.js

@@ -0,0 +1,64
+//
+// Test display of images
+//
+// The effect of shape metadata is validated,
+// using Image(retina=True)
+//
+
+
+// 2x2 black square in b64 jpeg and png
+b64_image_data = {
+    "image/png" : "b'iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAC0lEQVR4nGNgQAYAAA4AAamRc7EA\\nAAAASUVORK5CYII='",
+    "image/jpeg" : "b'/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a\\nHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy\\nMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAACAAIDASIA\\nAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQA\\nAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3\\nODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWm\\np6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEA\\nAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSEx\\nBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElK\\nU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3\\nuLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5/ooo\\noA//2Q=='"
+}
+
+
+casper.notebook_test(function () {
+    // this.printLog();
+    this.test_img_shape = function(fmt, retina) {
+        this.thenEvaluate(function (b64data, retina) {
+            IPython.notebook.get_cell(0).clear_output();
+            var cell = IPython.notebook.get_cell(0);
+            cell.set_text([
+                "import base64",
+                "from IPython.display import display, Image",
+                "data = base64.decodestring(" + b64data + ")",
+                "retina = bool(" + retina + ")",
+                "display(Image(data, retina=retina))"
+            ].join("\n"));
+            cell.execute();
+        }, {b64data : b64_image_data[fmt], retina : retina ? 1:0 });
+        
+        this.wait_for_output(0);
+        
+        this.then(function() {
+            var img = this.evaluate(function() {
+                // get a summary of the image that was just displayed
+                var cell = IPython.notebook.get_cell(0);
+                var img = $(cell.output_area.element.find("img")[0]);
+                return {
+                    src : img.attr("src"),
+                    width : img.width(),
+                    height : img.height(),
+                    width_attr : img.attr("width"),
+                    height_attr : img.attr("height")
+                };
+            });
+            var prefix = "Image('" + fmt + "', retina=" + retina + ") ";
+            this.test.assertType(img, "object", prefix + "img was displayed");
+            this.test.assertEquals(img.src.split(',')[0], "data:" + fmt + ";base64",
+                prefix + "data-uri prefix"
+            );
+            var sz = retina ? 1 : 2;
+            var sz_attr = retina ? "1" : undefined;
+            this.test.assertEquals(img.height, sz, prefix + "measured height");
+            this.test.assertEquals(img.width, sz, prefix + "measured width");
+            this.test.assertEquals(img.height_attr, sz_attr, prefix + "height attr");
+            this.test.assertEquals(img.width_attr, sz_attr, prefix + "width attr");
+        });
+    };
+    this.test_img_shape("image/png", false);
+    this.test_img_shape("image/png", true);
+    this.test_img_shape("image/jpeg", false);
+    this.test_img_shape("image/jpeg", true);
+});

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

@@ -1,819 +1,815
 //----------------------------------------------------------------------------
 //  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.text('. . .');
         
         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 = content.data;
             json.output_type = msg_type;
             json.metadata = content.metadata;
         } else if (msg_type === "pyout") {
             json = content.data;
             json.output_type = msg_type;
             json.metadata = content.metadata;
             json.prompt_number = content.execution_count;
         } else if (msg_type === "pyerr") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         }
         this.append_output(json);
     };
 
     OutputArea.mime_map = {
         "text/plain" : "text",
         "text/html" : "html",
         "image/svg+xml" : "svg",
         "image/png" : "png",
         "image/jpeg" : "jpeg",
         "text/latex" : "latex",
         "application/json" : "json",
         "application/javascript" : "javascript",
     };
     
     OutputArea.mime_map_r = {
         "text" : "text/plain",
         "html" : "text/html",
         "svg" : "image/svg+xml",
         "png" : "image/png",
         "jpeg" : "image/jpeg",
         "latex" : "text/latex",
         "json" : "application/json",
         "javascript" : "application/javascript",
     };
     
     OutputArea.prototype.rename_keys = function (data, key_map) {
         var remapped = {};
         for (var key in data) {
             var new_key = key_map[key] || key;
             remapped[new_key] = data[key];
         }
         return remapped;
     };
 
 
     OutputArea.output_types = [
         'application/javascript',
         'text/html',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'text/plain'
     ];
 
     OutputArea.prototype.validate_output = function (json) {
         // scrub invalid outputs
         // TODO: right now everything is a string, but JSON really shouldn't be.
         // nbformat 4 will fix that.
         $.map(OutputArea.output_types, function(key){
             if (json[key] !== undefined && typeof json[key] !== 'string') {
                 console.log("Invalid type for " + key, json[key]);
                 delete json[key];
             }
         });
         return json;
     };
 
     OutputArea.prototype.append_output = function (json) {
         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;
         }
         
         // validate output data types
         json = this.validate_output(json);
 
         if (json.output_type === 'pyout') {
             this.append_pyout(json);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json);
         } 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;
     };
 
 
     function _get_metadata_key(metadata, key, mime) {
         var mime_md = metadata[mime];
         // mime-specific higher priority
         if (mime_md && mime_md[key] !== undefined) {
             return mime_md[key];
         }
         // fallback on global
         return metadata[key];
     }
 
     OutputArea.prototype.create_output_subarea = function(md, classes, mime) {
         var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
         if (_get_metadata_key(md, 'isolated', mime)) {
             // 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, element) {
         // display a message when a javascript error occurs in display output
         var msg = "Javascript error adding output!"
         if ( element === undefined ) return;
         element.append(
             $('<div/>').html(msg + "<br/>" +
                 err.toString() +
                 '<br/>See your browser Javascript console for more details.'
             ).addClass('js-error')
         );
     };
     
     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);
             // Create an actual output_area and output_subarea, which creates
             // the prompt area and the proper indentation.
             var toinsert = this.create_output_area();
             var subarea = $('<div/>').addClass('output_subarea');
             toinsert.append(subarea);
             this._append_javascript_error(err, subarea);
             this.element.append(toinsert);
         }
     };
 
 
     OutputArea.prototype.append_pyout = function (json) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:');
         }
         this.append_mime_type(json, toinsert);
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json['text/latex'] !== undefined) || (json['text/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) {
         var toinsert = this.create_output_area();
         if (this.append_mime_type(json, toinsert)) {
             this._safe_append(toinsert);
             // If we just output latex, typeset it.
             if ((json['text/latex'] !== undefined) || (json['text/html'] !== undefined)) {
                 this.typeset();
             }
         }
     };
 
     OutputArea.display_order = [
         'application/javascript',
         'text/html',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'text/plain'
     ];
 
     OutputArea.prototype.append_mime_type = function (json, element) {
 
         for (var type_i in OutputArea.display_order) {
             var type = OutputArea.display_order[type_i];
             var append = OutputArea.append_map[type];
             if ((json[type] !== undefined) && append) {
                 var md = json.metadata || {};
                 append.apply(this, [json[type], md, element]);
                 return true;
             }
         }
         return false;
     };
 
 
     OutputArea.prototype.append_html = function (html, md, element) {
         var type = 'text/html';
         var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
         IPython.keyboard_manager.register_events(toinsert);
         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 type = 'application/javascript';
         var element = this.create_output_subarea(md, "output_javascript", type);
         IPython.keyboard_manager.register_events(element);
         container.append(element);
         try {
             eval(js);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, element);
         }
     };
 
 
     OutputArea.prototype.append_text = function (data, md, element, extra_class) {
         var type = 'text/plain';
         var toinsert = this.create_output_subarea(md, "output_text", type);
         // 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 type = 'image/svg+xml';
         var toinsert = this.create_output_subarea(md, "output_svg", type);
         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);
     };
-
-
+    
+    var set_width_height = function (img, md, mime) {
+        // set width and height of an img element from metadata
+        var height = _get_metadata_key(md, 'height', mime);
+        if (height !== undefined) img.attr('height', height);
+        var width = _get_metadata_key(md, 'width', mime);
+        if (width !== undefined) img.attr('width', width);
+    };
+    
     OutputArea.prototype.append_png = function (png, md, element) {
         var type = 'image/png';
         var toinsert = this.create_output_subarea(md, "output_png", type);
-        var img = $("<img/>");
-        img[0].setAttribute('src','data:image/png;base64,'+png);
-        if (md['height']) {
-            img[0].setAttribute('height', md['height']);
-        }
-        if (md['width']) {
-            img[0].setAttribute('width', md['width']);
-        }
+        var img = $("<img/>").attr('src','data:image/png;base64,'+png);
+        set_width_height(img, md, 'image/png');
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
         var type = 'image/jpeg';
         var toinsert = this.create_output_subarea(md, "output_jpeg", type);
         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']);
-        }
+        set_width_height(img, md, 'image/jpeg');
         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 type = 'text/latex';
         var toinsert = this.create_output_subarea(md, "output_latex", type);
         toinsert.append(latex);
         element.append(toinsert);
     };
 
     OutputArea.append_map = {
         "text/plain" : OutputArea.prototype.append_text,
         "text/html" : OutputArea.prototype.append_html,
         "image/svg+xml" : OutputArea.prototype.append_svg,
         "image/png" : OutputArea.prototype.append_png,
         "image/jpeg" : OutputArea.prototype.append_jpeg,
         "text/latex" : OutputArea.prototype.append_latex,
         "application/json" : OutputArea.prototype.append_json,
         "application/javascript" : OutputArea.prototype.append_javascript,
     };
 
     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);
         var raw_input = area.find('input.raw_input');
         // Register events that enable/disable the keyboard manager while raw
         // input is focused.
         IPython.keyboard_manager.register_events(raw_input);
         // Note, the following line used to read raw_input.focus().focus().
         // This seemed to be needed otherwise only the cell would be focused.
         // But with the modal UI, this seems to work fine with one call to focus().
         raw_input.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;
         var data;
 
         // We don't want to display javascript on load, so remove it from the
         // display order for the duration of this function call, but be sure to
         // put it back in there so incoming messages that contain javascript
         // representations get displayed
         var js_index = OutputArea.display_order.indexOf('application/javascript');
         OutputArea.display_order.splice(js_index, 1);
 
         for (var i=0; i<len; i++) {
             data = outputs[i];
             var msg_type = data.output_type;
             if (msg_type === "display_data" || msg_type === "pyout") {
                 // convert short keys to mime keys
                 // TODO: remove mapping of short keys when we update to nbformat 4
                  data = this.rename_keys(data, OutputArea.mime_map_r);
                  data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map_r);
             }
             
             this.append_output(data);
         }
 
         // reinsert javascript into display order, see note above
         OutputArea.display_order.splice(js_index, 0, 'application/javascript');
     };
 
 
     OutputArea.prototype.toJSON = function () {
         var outputs = [];
         var len = this.outputs.length;
         var data;
         for (var i=0; i<len; i++) {
             data = this.outputs[i];
             var msg_type = data.output_type;
             if (msg_type === "display_data" || msg_type === "pyout") {
                   // convert mime keys to short keys
                  data = this.rename_keys(data, OutputArea.mime_map);
                  data.metadata = this.rename_keys(data.metadata, OutputArea.mime_map);
             }
             outputs[i] = data;
         }
         return outputs;
     };
 
 
     IPython.OutputArea = OutputArea;
 
     return IPython;
 
 }(IPython));