Finished changing output widget logic.

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

@@ -1,644 +1,645 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 /**
  *
  *
  * @module codecell
  * @namespace codecell
  * @class CodeCell
  */
 
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'base/js/keyboard',
     'services/config',
     'notebook/js/cell',
     'notebook/js/outputarea',
     'notebook/js/completer',
     'notebook/js/celltoolbar',
     'codemirror/lib/codemirror',
     'codemirror/mode/python/python',
     'notebook/js/codemirror-ipython'
 ], function(IPython,
     $,
     utils,
     keyboard,
     configmod,
     cell,
     outputarea,
     completer,
     celltoolbar,
     CodeMirror,
     cmpython,
     cmip
     ) {
     "use strict";
     
     var Cell = cell.Cell;
 
     /* 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 keycodes = keyboard.keycodes;
 
     var CodeCell = function (kernel, options) {
         /**
          * Constructor
          *
          * A Cell conceived to write code.
          *
          * Parameters:
          *  kernel: Kernel instance
          *      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.
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance 
          *          config: dictionary
          *          keyboard_manager: KeyboardManager instance 
          *          notebook: Notebook instance
          *          tooltip: Tooltip instance
          */
         this.kernel = kernel || null;
         this.notebook = options.notebook;
         this.collapsed = false;
         this.events = options.events;
         this.tooltip = options.tooltip;
         this.config = options.config;
         this.class_config = new configmod.ConfigWithDefaults(this.config,
                                         CodeCell.config_defaults, 'CodeCell');
 
         // 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;
         this.widget_views = [];
         this._widgets_live = true;
 
         Cell.apply(this,[{
             config: $.extend({}, CodeCell.options_default), 
             keyboard_manager: options.keyboard_manager, 
             events: this.events}]);
 
         // Attributes we want to override in this subclass.
         this.cell_type = "code";
+        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.config_defaults = {
         highlight_modes : {
             'magic_javascript'    :{'reg':[/^%%javascript/]},
             'magic_perl'          :{'reg':[/^%%perl/]},
             'magic_ruby'          :{'reg':[/^%%ruby/]},
             'magic_python'        :{'reg':[/^%%python3?/]},
             'magic_shell'         :{'reg':[/^%%bash/]},
             'magic_r'             :{'reg':[/^%%R/]},
             'magic_text/x-cython' :{'reg':[/^%%cython/]},
         },
     };
 
     CodeCell.msg_cells = {};
 
     CodeCell.prototype = Object.create(Cell.prototype);
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
         Cell.prototype.create_element.apply(this, arguments);
 
         var cell =  $('<div></div>').addClass('cell code_cell');
         cell.attr('tabindex','2');
 
         var input = $('<div></div>').addClass('input');
         var prompt = $('<div/>').addClass('prompt input_prompt');
         var inner_cell = $('<div/>').addClass('inner_cell');
         this.celltoolbar = new celltoolbar.CellToolbar({
             cell: this, 
             notebook: this.notebook});
         inner_cell.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
         this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
         this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this));
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         inner_cell.append(input_area);
         input.append(prompt).append(inner_cell);
 
         var widget_area = $('<div/>')
             .addClass('widget-area')
             .hide();
         this.widget_area = widget_area;
         var widget_prompt = $('<div/>')
             .addClass('prompt')
             .appendTo(widget_area);
         var widget_subarea = $('<div/>')
             .addClass('widget-subarea')
             .appendTo(widget_area);
         this.widget_subarea = widget_subarea;
         var that = this;
         var widget_clear_buton = $('<button />')
             .addClass('close')
             .html('&times;')
             .click(function() {
                 widget_area.slideUp('', function(){ 
                     for (var i = 0; i < that.widget_views.length; i++) {
                         var view = that.widget_views[i];
                         view.remove();
 
                         // Remove widget live events.
                         view.off('comm:live', that._widget_live);
                         view.off('comm:dead', that._widget_dead);
                     }
                     that.widget_views = [];
                     widget_subarea.html(''); 
                 });
             })
             .appendTo(widget_prompt);
 
         var output = $('<div></div>');
         cell.append(input).append(widget_area).append(output);
         this.element = cell;
         this.output_area = new outputarea.OutputArea({
             selector: output, 
             prompt_area: true, 
             events: this.events, 
             keyboard_manager: this.keyboard_manager});
         this.completer = new completer.Completer(this, this.events);
     };
 
     /**
     *  Display a widget view in the cell.
     */
     CodeCell.prototype.display_widget_view = function(view_promise) {
 
         // Display a dummy element
         var dummy = $('<div/>');
         this.widget_subarea.append(dummy);
 
         // Display the view.
         var that = this;
         return view_promise.then(function(view) {
             that.widget_area.show();
             dummy.replaceWith(view.$el);
             that.widget_views.push(view);
 
             // Check the live state of the view's model.
             if (view.model.comm_live) {
                 that._widget_live(view);
             } else {
                 that._widget_dead(view);
             }
 
             // Listen to comm live events for the view.
             view.on('comm:live', that._widget_live, that);
             view.on('comm:dead', that._widget_dead, that);
             return view;
         });
     };
 
     /**
      * Handles when a widget loses it's comm connection.
      * @param  {WidgetView} view
      */
     CodeCell.prototype._widget_dead = function(view) {
         if (this._widgets_live) {
             this._widgets_live = false;
             this.widget_area.addClass('connection-problems');
         }
 
     };
 
     /**
      * Handles when a widget is connected to a live comm.
      * @param  {WidgetView} view
      */
     CodeCell.prototype._widget_live = function(view) {
         if (!this._widgets_live) {
             // Check that the other widgets are live too.  O(N) operation.
             // Abort the function at the first dead widget found.
             for (var i = 0; i < this.widget_views.length; i++) {
                 if (!this.widget_views[i].model.comm_live) return;
             }
             this._widgets_live = true;
             this.widget_area.removeClass('connection-problems');
         }
     };
 
     /** @method bind_events */
     CodeCell.prototype.bind_events = function () {
         Cell.prototype.bind_events.apply(this);
         var that = this;
 
         this.element.focusout(
             function() { that.auto_highlight(); }
         );
     };
 
 
     /**
      *  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
         var tooltip_closed = null;
         if (event.type === 'keydown' && event.which !== keycodes.tab ) {
             tooltip_closed = this.tooltip.remove_and_cancel_tooltip();
         }
 
         var cur = editor.getCursor();
         if (event.keyCode === keycodes.enter){
             this.auto_highlight();
         }
 
         if (event.which === keycodes.down && event.type === 'keypress' && this.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
             this.tooltip.pending(that, true);
         } else if ( tooltip_closed && event.which === keycodes.esc && event.type === 'keydown') {
             // If tooltip is active, cancel it.  The call to
             // remove_and_cancel_tooltip above doesn't pass, force=true.
             // Because of this it won't actually close the tooltip
             // if it is in sticky mode. Thus, we have to check again if it is open
             // and close it with force=true.
             if (!this.tooltip._hidden) {
                 this.tooltip.remove_and_cancel_tooltip(true);
             }
             // If we closed the tooltip, don't let CM or the global handlers
             // handle this event.
             event.codemirrorIgnore = true;
             event.preventDefault();
             return true;
         } else if (event.keyCode === keycodes.tab && event.type === 'keydown' && event.shiftKey) {
                 if (editor.somethingSelected() || editor.getSelections().length !== 1){
                     var anchor = editor.getCursor("anchor");
                     var head = editor.getCursor("head");
                     if( anchor.line !== head.line){
                         return false;
                     }
                 }
                 this.tooltip.request(that);
                 event.codemirrorIgnore = true;
                 event.preventDefault();
                 return true;
         } else if (event.keyCode === keycodes.tab && event.type === 'keydown') {
             // Tab completion.
             this.tooltip.remove_and_cancel_tooltip();
 
             // completion does not work on multicursor, it might be possible though in some cases
             if (editor.somethingSelected() || editor.getSelections().length > 1) {
                 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.codemirrorIgnore = true;
                 event.preventDefault();
                 this.completer.startCompletion();
                 return true;
             }
         } 
         
         // keyboard event wasn't one of those unique to code cells, let's see
         // if it's one of the generic ones (i.e. check edit mode shortcuts)
         return Cell.prototype.handle_codemirror_keyevent.apply(this, [editor, event]);
     };
 
     // 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 (stop_on_error) {
         if (!this.kernel || !this.kernel.is_connected()) {
             console.log("Can't execute, kernel is not connected.");
             return;
         }
 
         this.output_area.clear_output(false, true);
 
         if (stop_on_error === undefined) {
             stop_on_error = true;
         }
 
         // Clear widget area
         for (var i = 0; i < this.widget_views.length; i++) {
             var view = this.widget_views[i];
             view.remove();
 
             // Remove widget live events.
             view.off('comm:live', this._widget_live);
             view.off('comm:dead', this._widget_dead);
         }
         this.widget_views = [];
         this.widget_subarea.html('');
         this.widget_subarea.height('');
         this.widget_area.height('');
         this.widget_area.hide();
 
         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();
         
         var old_msg_id = this.last_msg_id;
         this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true,
             stop_on_error : stop_on_error});
         if (old_msg_id) {
             delete CodeCell.msg_cells[old_msg_id];
         }
         CodeCell.msg_cells[this.last_msg_id] = this;
         this.render();
         this.events.trigger('execute.CodeCell', {cell: this});
     };
     
     /**
      * Construct the default callbacks for
      * @method get_callbacks
      */
     CodeCell.prototype.get_callbacks = function () {
         var that = this;
         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 : function() { 
                     that.output_area.handle_output.apply(that.output_area, arguments);
                 }, 
                 clear_output : function() { 
                     that.output_area.handle_clear_output.apply(that.output_area, arguments);
                 }, 
             },
             input : $.proxy(this._handle_input_request, this)
         };
     };
     
     CodeCell.prototype._open_with_pager = function (payload) {
         this.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");
         this.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, replace: payload.replace};
         this.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 () {
         var cont = Cell.prototype.select.apply(this);
         if (cont) {
             this.code_mirror.refresh();
             this.auto_highlight();
         }
         return cont;
     };
 
     CodeCell.prototype.render = function () {
         var cont = Cell.prototype.render.apply(this);
         // Always execute, even if we are already in the rendered state
         return cont;
     };
     
     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_output = function () {
         this.output_area.collapse();
     };
 
 
     CodeCell.prototype.expand_output = function () {
         this.output_area.expand();
         this.output_area.unscroll_area();
     };
 
     CodeCell.prototype.scroll_output = function () {
         this.output_area.expand();
         this.output_area.scroll_if_long();
     };
 
     CodeCell.prototype.toggle_output = function () {
         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;
         if (prompt_value === undefined || prompt_value === null) {
             ns = "&nbsp;";
         } else {
             ns = encodeURIComponent(prompt_value);
         }
         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 HTML call is okay because the user contents are escaped.
         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.clear_output = function (wait) {
         this.output_area.clear_output(wait);
         this.set_input_prompt();
     };
 
 
     // JSON serialization
 
     CodeCell.prototype.fromJSON = function (data) {
         Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === 'code') {
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // 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();
             }
             this.set_input_prompt(data.execution_count);
             this.output_area.trusted = data.metadata.trusted || false;
             this.output_area.fromJSON(data.outputs);
             if (data.metadata.collapsed !== undefined) {
                 if (data.metadata.collapsed) {
                     this.collapse_output();
                 } else {
                     this.expand_output();
                 }
             }
         }
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = Cell.prototype.toJSON.apply(this);
         data.source = this.get_text();
         // is finite protect against undefined and '*' value
         if (isFinite(this.input_prompt_number)) {
             data.execution_count = this.input_prompt_number;
         } else {
             data.execution_count = null;
         }
         var outputs = this.output_area.toJSON();
         data.outputs = outputs;
         data.metadata.trusted = this.output_area.trusted;
         data.metadata.collapsed = this.output_area.collapsed;
         return data;
     };
 
     /**
      * handle cell level logic when a cell is unselected
      * @method unselect
      * @return is the action being taken
      */
     CodeCell.prototype.unselect = function () {
         var cont = Cell.prototype.unselect.apply(this);
         if (cont) {
             // When a code cell is usnelected, make sure that the corresponding
             // tooltip and completer to that cell is closed.
             this.tooltip.remove_and_cancel_tooltip(true);
             if (this.completer !== null) {
                 this.completer.close();
             }
         }
         return cont;
     };
 
     // Backwards compatability.
     IPython.CodeCell = CodeCell;
 
     return {'CodeCell': CodeCell};
 });

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

@@ -1,988 +1,986 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jqueryui',
     'base/js/utils',
     'base/js/security',
     'base/js/keyboard',
     'notebook/js/mathjaxutils',
     'components/marked/lib/marked',
 ], function(IPython, $, utils, security, keyboard, mathjaxutils, marked) {
     "use strict";
 
     /**
      * @class OutputArea
      *
      * @constructor
      */
 
     var OutputArea = function (options) {
         this.selector = options.selector;
         this.events = options.events;
         this.keyboard_manager = options.keyboard_manager;
         this.wrapper = $(options.selector);
         this.outputs = [];
         this.collapsed = false;
         this.scrolled = false;
         this.trusted = true;
         this.clear_queued = null;
         if (options.prompt_area === undefined) {
             this.prompt_area = true;
         } else {
             this.prompt_area = options.prompt_area;
         }
         this.create_elements();
         this.style();
         this.bind_events();
     };
 
 
     /**
      * Class prototypes
      **/
 
     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 btn-default 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 ( 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;
     };
 
     /**
      *
      * 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 () {
         utils.typeset(this.element);
     };
 
 
     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.text;
             json.name = content.name;
         } else if (msg_type === "display_data") {
             json.data = content.data;
-            json.output_type = msg_type;
             json.metadata = content.metadata;
         } else if (msg_type === "execute_result") {
             json.data = content.data;
-            json.output_type = msg_type;
             json.metadata = content.metadata;
             json.execution_count = content.execution_count;
         } else if (msg_type === "error") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         } else {
             console.log("unhandled output message", msg);
             return;
         }
         this.append_output(json);
     };
     
     
     OutputArea.output_types = [
         'application/javascript',
         'text/html',
         'text/markdown',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'application/pdf',
         'text/plain'
     ];
 
     OutputArea.prototype.validate_mimebundle = function (bundle) {
         /** scrub invalid outputs */
         if (typeof bundle.data !== 'object') {
             console.warn("mimebundle missing data", bundle);
             bundle.data = {};
         }
         if (typeof bundle.metadata !== 'object') {
             console.warn("mimebundle missing metadata", bundle);
             bundle.metadata = {};
         }
         var data = bundle.data;
         $.map(OutputArea.output_types, function(key){
             if (key !== 'application/json' &&
                 data[key] !== undefined &&
                 typeof data[key] !== 'string'
             ) {
                 console.log("Invalid type for " + key, data[key]);
                 delete data[key];
             }
         });
         return bundle;
     };
     
     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;
         }
 
         var record_output = true;
         switch(json.output_type) {
             case 'execute_result':
                 json = this.validate_mimebundle(json);
                 this.append_execute_result(json);
                 break;
             case 'stream':
                 // append_stream might have merged the output with earlier stream output
                 record_output = this.append_stream(json);
                 break;
             case 'error':
                 this.append_error(json);
                 break;
             case 'display_data':
                 // append handled below
                 json = this.validate_mimebundle(json);
                 break;
             default:
                 console.log("unrecognized output type: " + json.output_type);
                 this.append_unrecognized(json);
         }
 
         // We must release the animation fixed height in a callback since Gecko
         // (FireFox) doesn't render the image immediately as the data is 
         // available.
         var that = this;
         var handle_appended = function ($el) {
             /**
              * Only reset the height to automatic if the height is currently
              * fixed (done by wait=True flag on clear_output).
              */
             if (needs_height_reset) {
                 that.element.height('');
             }
             that.element.trigger('resize');
         };
         if (json.output_type === 'display_data') {
             this.append_display_data(json, handle_appended);
         } else {
             handle_appended();
         }
         
         if (record_output) {
             this.outputs.push(json);
         }
     };
 
 
     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.  At this point, subarea doesn't
                 // contain any user content.
                 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/>').text(msg).addClass('js-error'))
             .append($('<div/>').text(err.toString()).addClass('js-error'))
             .append($('<div/>').text('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);
         }
 
         // Notify others of changes.
         this.element.trigger('changed');
     };
 
 
     OutputArea.prototype.append_execute_result = function (json) {
         var n = json.execution_count || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').text('Out[' + n + ']:');
         }
         var inserted = this.append_mime_type(json, toinsert);
         if (inserted) {
             inserted.addClass('output_result');
         }
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json.data['text/latex'] !== undefined) ||
             (json.data['text/html'] !== undefined) ||
             (json.data['text/markdown'] !== undefined)) {
             this.typeset();
         }
     };
 
 
     OutputArea.prototype.append_error = 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();
             var append_text = OutputArea.append_map['text/plain'];
             if (append_text) {
                 append_text.apply(this, [s, {}, toinsert]).addClass('output_error');
             }
             this._safe_append(toinsert);
         }
     };
 
 
     OutputArea.prototype.append_stream = function (json) {
         var text = json.text;
         if (typeof text !== 'string') {
             console.error("Stream output is invalid (missing text)", json);
             return false;
         }
         var subclass = "output_"+json.name;
         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.name == last.name){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 last.text = utils.fixCarriageReturn(last.text + json.text);
                 var pre = this.element.find('div.'+subclass).last().find('pre');
                 var html = utils.fixConsole(last.text);
                 // The only user content injected with this HTML call is
                 // escaped by the fixConsole() method.
                 pre.html(html);
                 // return false signals that we merged this output with the previous one,
                 // and the new output shouldn't be recorded.
                 return false;
             }
         }
 
         if (!text.replace("\r", "")) {
             // text is nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             // return true to indicate the output should be recorded.
             return true;
         }
 
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         var append_text = OutputArea.append_map['text/plain'];
         if (append_text) {
             append_text.apply(this, [text, {}, toinsert]).addClass("output_stream " + subclass);
         }
         this._safe_append(toinsert);
         return true;
     };
 
 
     OutputArea.prototype.append_unrecognized = function (json) {
         var that = this;
         var toinsert = this.create_output_area();
         var subarea = $('<div/>').addClass('output_subarea output_unrecognized');
         toinsert.append(subarea);
         subarea.append(
             $("<a>")
                 .attr("href", "#")
                 .text("Unrecognized output: " + json.output_type)
                 .click(function () {
                     that.events.trigger('unrecognized_output.OutputArea', {output: json})
                 })
         );
         this._safe_append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, handle_inserted) {
         var toinsert = this.create_output_area();
         if (this.append_mime_type(json, toinsert, handle_inserted)) {
             this._safe_append(toinsert);
             // If we just output latex, typeset it.
             if ((json.data['text/latex'] !== undefined) ||
                 (json.data['text/html'] !== undefined) ||
                 (json.data['text/markdown'] !== undefined)) {
                 this.typeset();
             }
         }
     };
 
 
     OutputArea.safe_outputs = {
         'text/plain' : true,
         'text/latex' : true,
         'image/png' : true,
         'image/jpeg' : true
     };
     
     OutputArea.prototype.append_mime_type = function (json, element, handle_inserted) {
         for (var i=0; i < OutputArea.display_order.length; i++) {
             var type = OutputArea.display_order[i];
             var append = OutputArea.append_map[type];
             if ((json.data[type] !== undefined) && append) {
                 var value = json.data[type];
                 if (!this.trusted && !OutputArea.safe_outputs[type]) {
                     // not trusted, sanitize HTML
                     if (type==='text/html' || type==='text/svg') {
                         value = security.sanitize_html(value);
                     } else {
                         // don't display if we don't know how to sanitize it
                         console.log("Ignoring untrusted " + type + " output.");
                         continue;
                     }
                 }
                 var md = json.metadata || {};
                 var toinsert = append.apply(this, [value, md, element, handle_inserted]);
                 // Since only the png and jpeg mime types call the inserted
                 // callback, if the mime type is something other we must call the 
                 // inserted callback only when the element is actually inserted
                 // into the DOM.  Use a timeout of 0 to do this.
                 if (['image/png', 'image/jpeg'].indexOf(type) < 0 && handle_inserted !== undefined) {
                     setTimeout(handle_inserted, 0);
                 }
                 this.events.trigger('output_appended.OutputArea', [type, value, md, toinsert]);
                 return toinsert;
             }
         }
         return null;
     };
 
 
     var append_html = function (html, md, element) {
         var type = 'text/html';
         var toinsert = this.create_output_subarea(md, "output_html rendered_html", type);
         this.keyboard_manager.register_events(toinsert);
         toinsert.append(html);
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_markdown = function(markdown, md, element) {
         var type = 'text/markdown';
         var toinsert = this.create_output_subarea(md, "output_markdown", type);
         var text_and_math = mathjaxutils.remove_math(markdown);
         var text = text_and_math[0];
         var math = text_and_math[1];
         marked(text, function (err, html) {
             html = mathjaxutils.replace_math(html, math);
             toinsert.append(html);
         });
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_javascript = function (js, md, element) {
         /**
          * We just eval the JS code, element appears in the local scope.
          */
         var type = 'application/javascript';
         var toinsert = this.create_output_subarea(md, "output_javascript", type);
         this.keyboard_manager.register_events(toinsert);
         element.append(toinsert);
 
         // Fix for ipython/issues/5293, make sure `element` is the area which
         // output can be inserted into at the time of JS execution.
         element = toinsert;
         try {
             eval(js);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, toinsert);
         }
         return toinsert;
     };
 
 
     var append_text = function (data, md, element) {
         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);
         // The only user content injected with this HTML call is
         // escaped by the fixConsole() method.
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_svg = function (svg_html, md, element) {
         var type = 'image/svg+xml';
         var toinsert = this.create_output_subarea(md, "output_svg", type);
 
         // Get the svg element from within the HTML.
         var svg = $('<div />').html(svg_html).find('svg');
         var svg_area = $('<div />');
         var width = svg.attr('width');
         var height = svg.attr('height');
         svg
             .width('100%')
             .height('100%');
         svg_area
             .width(width)
             .height(height);
 
         // The jQuery resize handlers don't seem to work on the svg element.
         // When the svg renders completely, measure it's size and set the parent
         // div to that size.  Then set the svg to 100% the size of the parent
         // div and make the parent div resizable.  
         this._dblclick_to_reset_size(svg_area, true, false);
 
         svg_area.append(svg);
         toinsert.append(svg_area);
         element.append(toinsert);
 
         return toinsert;
     };
 
     OutputArea.prototype._dblclick_to_reset_size = function (img, immediately, resize_parent) {
         /**
          * Add a resize handler to an element
          *
          * img: jQuery element
          * immediately: bool=False
          *      Wait for the element to load before creating the handle.
          * resize_parent: bool=True
          *      Should the parent of the element be resized when the element is
          *      reset (by double click).
          */
         var callback = function (){
             var h0 = img.height();
             var w0 = img.width();
             if (!(h0 && w0)) {
                 // zero size, don't make it resizable
                 return;
             }
             img.resizable({
                 aspectRatio: true,
                 autoHide: true
             });
             img.dblclick(function () {
                 // resize wrapper & image together for some reason:
                 img.height(h0);
                 img.width(w0);
                 if (resize_parent === undefined || resize_parent) {
                     img.parent().height(h0);
                     img.parent().width(w0);
                 }
             });
         };
 
         if (immediately) {
             callback();
         } else {
             img.on("load", callback);
         }
     };
     
     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);
     };
     
     var append_png = function (png, md, element, handle_inserted) {
         var type = 'image/png';
         var toinsert = this.create_output_subarea(md, "output_png", type);
         var img = $("<img/>");
         if (handle_inserted !== undefined) {
             img.on('load', function(){
                 handle_inserted(img);
             });
         }
         img[0].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);
         return toinsert;
     };
 
 
     var append_jpeg = function (jpeg, md, element, handle_inserted) {
         var type = 'image/jpeg';
         var toinsert = this.create_output_subarea(md, "output_jpeg", type);
         var img = $("<img/>");
         if (handle_inserted !== undefined) {
             img.on('load', function(){
                 handle_inserted(img);
             });
         }
         img[0].src = 'data:image/jpeg;base64,'+ jpeg;
         set_width_height(img, md, 'image/jpeg');
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
         return toinsert;
     };
 
 
     var append_pdf = function (pdf, md, element) {
         var type = 'application/pdf';
         var toinsert = this.create_output_subarea(md, "output_pdf", type);
         var a = $('<a/>').attr('href', 'data:application/pdf;base64,'+pdf);
         a.attr('target', '_blank');
         a.text('View PDF');
         toinsert.append(a);
         element.append(toinsert);
         return toinsert;
      };
 
     var 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);
         return 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_container").remove();
         
         var input_type = content.password ? 'password' : 'text';
         
         area.append(
             $("<div/>")
             .addClass("box-flex1 output_subarea raw_input_container")
             .append(
                 $("<span/>")
                 .addClass("raw_input_prompt")
                 .text(content.prompt)
             )
             .append(
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', input_type)
                 .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 === keyboard.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.
         this.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_container");
         var theprompt = container.find("span.raw_input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var echo  = value;
         // don't echo if it's a password
         if (theinput.attr('type') == 'password') {
             echo = '········';
         }
         var content = {
             output_type : 'stream',
             name : 'stdout',
             text : theprompt.text() + echo + '\n'
         };
         // remove form container
         container.parent().remove();
         // replace with plaintext version in stdout
         this.append_output(content, false);
         this.events.trigger('send_input_reply.Kernel', value);
     };
 
 
     OutputArea.prototype.handle_clear_output = function (msg) {
         /**
          * msg spec v4 had stdout, stderr, display keys
          * v4.1 replaced these with just wait
          * The default behavior is the same (stdout=stderr=display=True, wait=False),
          * so v4 messages will still be properly handled,
          * except for the rarely used clearing less than all output.
          */
         this.clear_output(msg.content.wait || false);
     };
 
 
     OutputArea.prototype.clear_output = function(wait, ignore_que) {
         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 (!ignore_que && this.clear_queued) {
                 var height = this.element.height();
                 this.element.height(height);
                 this.clear_queued = false;
             }
             
             // Clear all
             // Remove load event handlers from img tags because we don't want
             // them to fire if the image is never added to the page.
             this.element.find('img').off('load');
             this.element.html("");
 
             // Notify others of changes.
             this.element.trigger('changed');
             
             this.outputs = [];
             this.trusted = true;
             this.unscroll_area();
             return;
         }
     };
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs, metadata) {
         var len = outputs.length;
         metadata = metadata || {};
 
         for (var i=0; i<len; i++) {
             this.append_output(outputs[i]);
         }
 
         if (metadata.collapsed !== undefined) {
             this.collapsed = metadata.collapsed;
             if (metadata.collapsed) {
                 this.collapse_output();
             }
         }
         if (metadata.autoscroll !== undefined) {
             this.collapsed = metadata.collapsed;
             if (metadata.collapsed) {
                 this.collapse_output();
             } else {
                 this.expand_output();
             }
         }
     };
 
 
     OutputArea.prototype.toJSON = function () {
         return this.outputs;
     };
 
     /**
      * Class properties
      **/
 
     /**
      * 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;
 
 
     OutputArea.display_order = [
         'application/javascript',
         'text/html',
         'text/markdown',
         'text/latex',
         'image/svg+xml',
         'image/png',
         'image/jpeg',
         'application/pdf',
         'text/plain'
     ];
 
     OutputArea.append_map = {
         "text/plain" : append_text,
         "text/html" : append_html,
         "text/markdown": append_markdown,
         "image/svg+xml" : append_svg,
         "image/png" : append_png,
         "image/jpeg" : append_jpeg,
         "text/latex" : append_latex,
         "application/javascript" : append_javascript,
         "application/pdf" : append_pdf
     };
 
     // For backwards compatability.
     IPython.OutputArea = OutputArea;
 
     return {'OutputArea': OutputArea};
 });

IPython/html/static/widgets/js/widget_output.js

@@ -1,79 +1,80 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     'notebook/js/outputarea',
 ], function(widget, $, outputarea) {
     'use strict';
 
     var OutputView = widget.DOMWidgetView.extend({
-        initialize: function (parameters) {
             /**
              * Public constructor
              */
+        initialize: function (parameters) {
             OutputView.__super__.initialize.apply(this, [parameters]);
             this.model.on('msg:custom', this._handle_route_msg, this);
         },
 
-        render: function(){
             /**
              * Called when view is rendered.
              */
+        render: function(){
             this.output_area = new outputarea.OutputArea({
                 selector: this.$el, 
                 prompt_area: false, 
                 events: this.model.widget_manager.notebook.events, 
                 keyboard_manager: this.model.widget_manager.keyboard_manager });
 
             // Make output area reactive.
             var that = this;
             this.output_area.element.on('changed', function() {
                 that.model.set('contents', that.output_area.element.html());
             });
             this.model.on('change:contents', function(){
                 var html = this.model.get('contents');
                 if (this.output_area.element.html() != html) {
                     this.output_area.element.html(html);
                 }
             }, this);
 
             // Set initial contents.
             this.output_area.element.html(this.model.get('contents'));
         },
         
+        /**
+         * Handles re-routed iopub messages.
+         */
         _handle_route_msg: function(content) {
             if (content) {
-    //     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 : function() { 
-    //                 that.output_area.handle_output.apply(that.output_area, arguments);
-    //             }, 
-    //             clear_output : function() { 
-    //                 that.output_area.handle_clear_output.apply(that.output_area, arguments);
-    //             }, 
-    //         },
-    //         input : $.proxy(this._handle_input_request, this)
-    //     };
-    // };
-                if (content.method == 'push') {
-                    cell.push_output_area(this.output_area);
-                } else if (content.method == 'pop') {
-                    cell.pop_output_area(this.output_area);
+                var msg_type = content.type;
+                var json = {
+                    output_type: msg_type
+                };
+
+                var data = content.args[0];
+                if (msg_type=='clear_output') {
+                    this.output_area.clear_output(data.wait || false);
+                    return;
+                } else if (msg_type === "stream") {
+                    data = content.kwargs.content;
+                    json.text = data.text;
+                    json.name = data.name;
+                } else if (msg_type === "display_data") {
+                    json.data = data.data;
+                    json.metadata = data.metadata;
+                } else {
+                    console.log("unhandled output message", msg);
+                    return;
                 }
+
+                this.output_area.append_output(json);    
             }
         },
     });
 
     return {
         'OutputView': OutputView,
     };
 });

IPython/html/widgets/widget_output.py

@@ -1,50 +1,67 b''
 """Output class.  
 
 Represents a widget that can be used to display output within the widget area.
 """
 
 # Copyright (c) IPython Development Team.
 # Distributed under the terms of the Modified BSD License.
 
 from .widget import DOMWidget
 import sys
 from IPython.utils.traitlets import Unicode, List
 from IPython.display import clear_output
 from IPython.testing.skipdoctest import skip_doctest
 
 @skip_doctest
 class Output(DOMWidget):
     """Widget used as a context manager to display output.
 
     This widget can capture and display stdout, stderr, and rich output.  To use
     it, create an instance of it and display it.  Then use it as a context
     manager.  Any output produced while in it's context will be captured and
     displayed in it instead of the standard output area.
 
     Example
         from IPython.html import widgets
         from IPython.display import display
         out = widgets.Output()
         display(out)
         
         print('prints to output area')
 
         with out:
             print('prints to output widget')"""
     _view_name = Unicode('OutputView', sync=True)
 
     def clear_output(self, *pargs, **kwargs):
         with self:
             clear_output(*pargs, **kwargs)
 
     def __enter__(self):
+        """Called upon entering output widget context manager."""
         self._flush()
-        self.send({'method': 'push'})
+        kernel = get_ipython().kernel
+        session = kernel.session
+        send = session.send
+        self._original_send = send
+        self._session = session
+
+        def send_hook(stream, msg_or_type, *args, **kwargs):            
+            if stream is kernel.iopub_socket and msg_or_type in ['clear_output', 'stream', 'display_data']:
+                msg = {'type': msg_or_type, 'args': args, 'kwargs': kwargs}
+                self.send(msg)
+            else:
+                send(stream, msg_or_type, *args, **kwargs)
+                return
+
+        session.send = send_hook
 
     def __exit__(self, exception_type, exception_value, traceback):
+        """Called upon exiting output widget context manager."""
         self._flush()
-        self.send({'method': 'pop'})
+        self._session.send = self._original_send
 
     def _flush(self):
+        """Flush stdout and stderr buffers."""
         sys.stdout.flush()
         sys.stderr.flush()