Merge pull request #1825 from minrk/elide2

second attempt at scrolled long output

Some amount of CSS tweaking will probably want to be done before 0.13 final,
but this is good enough for beta.

closes  #1553

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

@@ -1,345 +1,383 b''
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 
 
 body {
     overflow: hidden;
 }
 
 span#save_widget {
     padding: 5px;
     margin: 0px 0px 0px 300px;
     display:inline-block;
 }
 
 span#notebook_name {
     height: 1em;
     line-height: 1em;
     padding: 3px;
     border: none;
     font-size: 146.5%;
 }
 
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
 }
 
 .ui-menu {
   -moz-box-shadow:    0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow:         0px 6px 10px -1px #adadad;
 }
 
 .ui-menu .ui-menu-item a {
     border: 1px solid transparent;
     padding: 2px 1.6em;
 }
 
 .ui-menu .ui-menu-item a.ui-state-focus {
     margin: 0;
 }
 
 .ui-menu hr {
     margin: 0.3em 0;
 }
 
 #menubar_container {
     position: relative;
 }
 
 #notification {
     position: absolute;
     right: 3px;
     top: 3px;
     height: 25px;
     padding: 3px 6px;
     z-index: 10;
 }
 
 #toolbar {
     padding: 3px 15px;
 }
 
 #cell_type {
     font-size: 85%;
 }
 
 
 div#main_app {
     width: 100%;
     position: relative;
 }
 
 span#quick_help_area {
     position: static;
     padding: 5px 0px;
     margin: 0px 0px 0px 0px;
 }
 
 .help_string {
     float: right;
     width: 170px;
     padding: 0px 5px;
     text-align: left;
     font-size: 85%;
 }
 
 .help_string_label {
     float: right;
     font-size: 85%;
 }
 
 div#notebook_panel {
     margin: 0px 0px 0px 0px;
     padding: 0px;
 }
 
 div#notebook {
     overflow-y: scroll;
     overflow-x: auto;
     width: 100%;
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
-    margin: 0px
+    margin: 0px;
     background-color: white;
 }
 
 div#pager_splitter {
     height: 8px;
 }
 
 div#pager {
     padding: 15px;
     overflow: auto;
     display: none;
 }
 
 div.ui-widget-content {
     border: 1px solid #aaa;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
 }
 
 div.cell {
     width: 100%;
     padding: 5px 5px 5px 0px;
     /* This acts as a spacer between cells, that is outside the border */
     margin: 2px 0px 2px 0px;
 }
 
 div.code_cell {
     background-color: white;
 }
+
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
 
 div.prompt {
     /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
     width: 11ex;
     /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
     padding: 0.4em;
     margin: 0px;
     font-family: monospace;
     text-align:right;
 }
 
 div.input {
     page-break-inside: avoid;
 }
 
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.input_prompt {
     color: navy;
     border-top: 1px solid transparent;
 }
 
-div.output {
+div.output_wrapper {
     /* This is a spacer between the input and output of each cell */
     margin-top: 5px;
+    margin-left: 5px;
+    /* FF needs explicit width to stretch */
+    width: 100%;
+    /* this position must be relative to enable descendents to be absolute within it */
+    position: relative;
+}
+
+/* class for the output area when it should be height-limited */
+div.output_scroll {
+  /* ideally, this would be max-height, but FF barfs all over that */
+  height: 24em;
+  /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
+  width: 100%;
+  
+  overflow: auto;
+  border-radius: 3px;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
+}
+
+/* output div while it is collapsed */
+div.output_collapsed {
+  margin-right: 5px;
+}
+
+div.out_prompt_overlay {
+  height: 100%;
+  padding: 0px;
+  position: absolute;
+  border-radius: 3px;
+}
+
+div.out_prompt_overlay:hover {
+  /* use inner shadow to get border that is computed the same on WebKit/FF */
+  box-shadow: inset 0 0 1px #000;
+  background: rgba(240, 240, 240, 0.5);
 }
 
 div.output_prompt {
     color: darkred;
+    /* 5px right shift to account for margin in parent container */
+    margin: 0 5px 0 -5px;
 }
 
 /* This class is the outer container of all output sections. */
 div.output_area {
     padding: 0px;
     page-break-inside: avoid;
 }
 
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
     padding: 0.4em 0.4em 0.4em 0.4em;
 }
 
 /* The rest of the output_* classes are for special styling of the different
    output types */
 
 /* all text output has this class: */
 div.output_text {
     text-align: left;
     color: black;
     font-family: monospace;
 }
 
 /* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
 div.output_stream {
     padding-top: 0.0em;
     padding-bottom: 0.0em;
 }
 div.output_stdout {
 }
 div.output_stderr {
     background: #fdd; /* very light red background for stderr */
 }
 
 div.output_latex {
     text-align: left;
     color: black;
 }
 
 div.output_html {
 }
 
 div.output_png {
 }
 
 div.output_jpeg {
 }
 
 div.text_cell {
     background-color: white;
     padding: 5px 5px 5px 5px;
 }
 
 div.text_cell_input {
     color: black;
     border: 1px solid #ddd;
     border-radius: 3px;
     background: #f7f7f7;
 }
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
     color: black;
 }
 
 .CodeMirror span {
     vertical-align: bottom;
 }
 
 .CodeMirror {
     line-height: 1.231;  /* Changed from 1em to our global default */
 }
 
 .CodeMirror-scroll {
     height: auto;     /* Changed to auto to autogrow */
     /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
     /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
     overflow-y: hidden;
     overflow-x: auto; /* Changed from auto to remove scrollbar */
 }
 
 /* CSS font colors for translated ANSI colors. */
 
 
 .ansiblack {color: black;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
 .ansiblue {color: darkblue;}
 .ansipurple {color: darkviolet;}
 .ansicyan {color: steelblue;}
 .ansigrey {color: grey;}
 .ansibold {font-weight: bold;}
 
 .completions {
     position: absolute;
     z-index: 10;
     overflow: hidden;
     border: 1px solid grey;
 }
 
 .completions select {
     background: white;
     outline: none;
     border: none;
     padding: 0px;
     margin: 0px;
     overflow: auto;
     font-family: monospace;
 }
 
 option.context {
   background-color: #DEF7FF;
 }
 option.introspection {
   background-color: #EBF4EB;
 }
 
 /*fixed part of the completion*/
 .completions p b {
     font-weight:bold;
 }
 
 .completions p {
     background: #DDF;
     /*outline: none;
     padding: 0px;*/
     border-bottom: black solid 1px;
     padding: 1px;
     font-family: monospace;
 }
 
 pre.dialog {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
     border-radius: 3px;
     padding: 0.4em;
     padding-left: 2em;
 }
 
 p.dialog {
     padding : 0.2em;
 }
 
 .shortcut_key {
     display: inline-block;
     width: 15ex;
     text-align: right;
     font-family: monospace;
 }
 
 .shortcut_descr {
 }
 
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre, code, kbd, samp { white-space: pre-wrap; }
 
 #fonttest {
     font-family: monospace;
 }

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

@@ -1,314 +1,319 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CodeCell
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
 
     var CodeCell = function (kernel) {
         // 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.
         this.kernel = kernel || null;
         this.code_mirror = null;
         this.input_prompt_number = null;
         this.tooltip_on_tab = true;
         this.collapsed = false;
         IPython.Cell.apply(this, arguments);
     };
 
 
     CodeCell.prototype = new IPython.Cell();
 
 
     CodeCell.prototype.create_element = function () {
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
         var input_area = $('<div/>').addClass('input_area box-flex1');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             mode: 'python',
             theme: 'ipython',
             readOnly: this.read_only,
             onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
         });
         input.append(input_area);
         var output = $('<div></div>');
         cell.append(input).append(output);
         this.element = cell;
         this.output_area = new IPython.OutputArea(output, true);
 
         // construct a completer only if class exist
         // otherwise no print view
         if (IPython.Completer !== undefined)
         {
             this.completer = new IPython.Completer(this);
         }
     };
 
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
         // 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.
 
         if (this.read_only){
             return false;
         }
 
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any, except for tab again
         if (event.type === 'keydown' && event.which != key.TAB ) {
             IPython.tooltip.remove_and_cancel_tooltip();
         };
 
         var cur = editor.getCursor();
 
         if (event.keyCode === key.ENTER && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         } else if (event.which === 40 && event.type === 'keypress' && IPython.tooltip.time_before_tooltip >= 0) {
             // triger on keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
             IPython.tooltip.pending(that);
         } else if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.which === key.ESC) {
             IPython.tooltip.remove_and_cancel_tooltip(true);
             return true;
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.keyCode === key.TAB && event.type == 'keydown') {
             // Tab completion.
             //Do not trim here because of tooltip
             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 if ((pre_cursor.substr(-1) === "("|| pre_cursor.substr(-1) === " ") && that.tooltip_on_tab ) {
                 IPython.tooltip.request(that);
                 // Prevent the event from bubbling up.
                 event.stop();
                 // Prevent CodeMirror from handling the tab.
                 return true;
             } else {
                 event.stop();
                 this.completer.startCompletion();
                 return true;
             };
         } else if (event.keyCode === key.BACKSPACE && event.type == 'keydown') {
             // If backspace and the line ends with 4 spaces, remove them.
             var line = editor.getLine(cur.line);
             var ending = line.slice(-4);
             if (ending === '    ') {
                 editor.replaceRange('',
                     {line: cur.line, ch: cur.ch-4},
                     {line: cur.line, ch: cur.ch}
                 );
                 event.stop();
                 return true;
             } else {
                 return false;
             };
         } else {
             // keypress/keyup also trigger on TAB press, and we don't want to
             // use those to disable tab completion.
             return false;
         };
         return false;
     };
 
 
     // Kernel related calls.
 
     CodeCell.prototype.set_kernel = function (kernel) {
         this.kernel = kernel;
     }
 
 
     CodeCell.prototype.execute = function () {
         this.output_area.clear_output(true, true, true);
         this.set_input_prompt('*');
         this.element.addClass("running");
         var callbacks = {
             'execute_reply': $.proxy(this._handle_execute_reply, this),
             'output': $.proxy(this.output_area.handle_output, this.output_area),
             'clear_output': $.proxy(this.output_area.handle_clear_output, this.output_area),
             'set_next_input': $.proxy(this._handle_set_next_input, this)
         };
         var msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false});
     };
 
 
     CodeCell.prototype._handle_execute_reply = function (content) {
         this.set_input_prompt(content.execution_count);
         this.element.removeClass("running");
         $([IPython.events]).trigger('set_dirty.Notebook', {'value': true});
     }
 
     CodeCell.prototype._handle_set_next_input = function (text) {
         var data = {'cell': this, 'text': text}
         $([IPython.events]).trigger('set_next_input.Notebook', data);
     }
 
     // Basic cell manipulation.
 
     CodeCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
         // We used to need an additional refresh() after the focus, but
         // it appears that this has been fixed in CM. This bug would show
         // up on FF when a newly loaded markdown cell was edited.
     };
 
 
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.collapse = function () {
         this.collapsed = true;
         this.output_area.collapse();
     };
 
 
     CodeCell.prototype.expand = function () {
         this.collapsed = false;
         this.output_area.expand();
     };
 
 
     CodeCell.prototype.toggle_output = function () {
         this.collapsed = Boolean(1 - this.collapsed);
         this.output_area.toggle_output();
     };
 
 
+    CodeCell.prototype.toggle_output_scroll = function () {
+    this.output_area.toggle_scroll();
+    };
+
+
     CodeCell.prototype.set_input_prompt = function (number) {
         this.input_prompt_number = number;
         var ns = number || "&nbsp;";
         this.element.find('div.input_prompt').html('In&nbsp;[' + ns + ']:');
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1)) {
             return true;
         } else {
             return false;
         }
     };
 
 
     CodeCell.prototype.clear_output = function (stdout, stderr, other) {
         this.output_area.clear_output(stdout, stderr, other);
     };
 
 
     // JSON serialization
 
     CodeCell.prototype.fromJSON = function (data) {
         IPython.Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === 'code') {
             if (data.input !== undefined) {
                 this.set_text(data.input);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
             }
             if (data.prompt_number !== undefined) {
                 this.set_input_prompt(data.prompt_number);
             } else {
                 this.set_input_prompt();
             };
             this.output_area.fromJSON(data.outputs);
             if (data.collapsed !== undefined) {
                 if (data.collapsed) {
                     this.collapse();
                 } else {
                     this.expand();
                 };
             };
         };
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = IPython.Cell.prototype.toJSON.apply(this);
         data.input = this.get_text();
         data.cell_type = 'code';
         if (this.input_prompt_number) {
             data.prompt_number = this.input_prompt_number;
         };
         var outputs = this.output_area.toJSON();
         data.outputs = outputs;
         data.language = 'python';
         data.collapsed = this.collapsed;
         return data;
     };
 
 
     IPython.CodeCell = CodeCell;
 
     return IPython;
 }(IPython));

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

@@ -1,182 +1,191 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // MenuBar
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var MenuBar = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
     };
 
 
     MenuBar.prototype.style = function () {
         this.element.addClass('border-box-sizing');
         $('ul#menus').menubar({
             select : function (event, ui) {
                 // The selected cell loses focus when the menu is entered, so we
                 // re-select it upon selection.
                 var i = IPython.notebook.get_selected_index();
                 IPython.notebook.select(i);
             }
         });
     };
 
 
     MenuBar.prototype.bind_events = function () {
         //  File
         this.element.find('#new_notebook').click(function () {
             window.open($('body').data('baseProjectUrl')+'new');
         });
         this.element.find('#open_notebook').click(function () {
             window.open($('body').data('baseProjectUrl'));
         });
         this.element.find('#rename_notebook').click(function () {
             IPython.save_widget.rename_notebook();
         });
         this.element.find('#copy_notebook').click(function () {
             var notebook_id = IPython.notebook.get_notebook_id();
             var url = $('body').data('baseProjectUrl') + notebook_id + '/copy';
             window.open(url,'_newtab');
         });
         this.element.find('#save_notebook').click(function () {
             IPython.notebook.save_notebook();
         });
         this.element.find('#download_ipynb').click(function () {
             var notebook_id = IPython.notebook.get_notebook_id();
             var url = $('body').data('baseProjectUrl') + 'notebooks/' +
                       notebook_id + '?format=json';
             window.open(url,'_newtab');
         });
         this.element.find('#download_py').click(function () {
             var notebook_id = IPython.notebook.get_notebook_id();
             var url = $('body').data('baseProjectUrl') + 'notebooks/' +
                       notebook_id + '?format=py';
             window.open(url,'_newtab');
         });
         this.element.find('button#print_notebook').click(function () {
             IPython.print_widget.print_notebook();
         });
         this.element.find('#kill_and_exit').click(function () {
             IPython.notebook.kernel.kill();
             setTimeout(function(){window.close();}, 200);
         });
         // Edit
         this.element.find('#cut_cell').click(function () {
             IPython.notebook.cut_cell();
         });
         this.element.find('#copy_cell').click(function () {
             IPython.notebook.copy_cell();
         });
         this.element.find('#delete_cell').click(function () {
             IPython.notebook.delete_cell();
         });
         this.element.find('#split_cell').click(function () {
             IPython.notebook.split_cell();
         });
         this.element.find('#merge_cell_above').click(function () {
             IPython.notebook.merge_cell_above();
         });
         this.element.find('#merge_cell_below').click(function () {
             IPython.notebook.merge_cell_below();
         });
         this.element.find('#move_cell_up').click(function () {
             IPython.notebook.move_cell_up();
         });
         this.element.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
         this.element.find('#select_previous').click(function () {
             IPython.notebook.select_prev();
         });
         this.element.find('#select_next').click(function () {
             IPython.notebook.select_next();
         });
         // View
         this.element.find('#toggle_header').click(function () {
             $('div#header').toggle();
             IPython.layout_manager.do_resize();
         });
         this.element.find('#toggle_toolbar').click(function () {
             IPython.toolbar.toggle();
         });
         // Insert
         this.element.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_cell_above('code');
         });
         this.element.find('#insert_cell_below').click(function () {
             IPython.notebook.insert_cell_below('code');
         });
         // Cell
         this.element.find('#run_cell').click(function () {
             IPython.notebook.execute_selected_cell();
         });
         this.element.find('#run_cell_in_place').click(function () {
             IPython.notebook.execute_selected_cell({terminal:true});
         });
         this.element.find('#run_all_cells').click(function () {
             IPython.notebook.execute_all_cells();
         });
         this.element.find('#to_code').click(function () {
             IPython.notebook.to_code();
         });
         this.element.find('#to_markdown').click(function () {
             IPython.notebook.to_markdown();
         });
         this.element.find('#to_raw').click(function () {
             IPython.notebook.to_raw();
         });
         this.element.find('#to_heading1').click(function () {
             IPython.notebook.to_heading(undefined, 1);
         });
         this.element.find('#to_heading2').click(function () {
             IPython.notebook.to_heading(undefined, 2);
         });
         this.element.find('#to_heading3').click(function () {
             IPython.notebook.to_heading(undefined, 3);
         });
         this.element.find('#to_heading4').click(function () {
             IPython.notebook.to_heading(undefined, 4);
         });
         this.element.find('#to_heading5').click(function () {
             IPython.notebook.to_heading(undefined, 5);
         });
         this.element.find('#to_heading6').click(function () {
             IPython.notebook.to_heading(undefined, 6);
         });
         this.element.find('#toggle_output').click(function () {
             IPython.notebook.toggle_output();
         });
+        this.element.find('#collapse_all_output').click(function () {
+            IPython.notebook.collapse_all_output();
+        });
+        this.element.find('#scroll_all_output').click(function () {
+            IPython.notebook.scroll_all_output();
+        });
+        this.element.find('#expand_all_output').click(function () {
+            IPython.notebook.expand_all_output();
+        });
         this.element.find('#clear_all_output').click(function () {
             IPython.notebook.clear_all_output();
         });
         // Kernel
         this.element.find('#int_kernel').click(function () {
             IPython.notebook.kernel.interrupt();
         });
         this.element.find('#restart_kernel').click(function () {
             IPython.notebook.restart_kernel();
         });
         // Help
         this.element.find('#keyboard_shortcuts').click(function () {
             IPython.quick_help.show_keyboard_shortcuts();
         });
     };
 
 
     IPython.MenuBar = MenuBar;
 
     return IPython;
 
 }(IPython));

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

@@ -1,1233 +1,1284 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Notebook
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
     var key   = IPython.utils.keycodes;
 
     var Notebook = function (selector) {
         this.read_only = IPython.read_only;
         this.element = $(selector);
         this.element.scroll();
         this.element.data("notebook", this);
         this.next_prompt_number = 1;
         this.kernel = null;
         this.clipboard = null;
         this.paste_enabled = false;
         this.dirty = false;
         this.metadata = {};
         // single worksheet for now
         this.worksheet_metadata = {};
         this.control_key_active = false;
         this.notebook_id = null;
         this.notebook_name = null;
         this.notebook_name_blacklist_re = /[\/\\:]/;
         this.nbformat = 3 // Increment this when changing the nbformat
         this.nbformat_minor = 0 // Increment this when changing the nbformat
         this.style();
         this.create_elements();
         this.bind_events();
     };
 
 
     Notebook.prototype.style = function () {
         $('div#notebook').addClass('border-box-sizing');
     };
 
 
     Notebook.prototype.create_elements = function () {
         // We add this end_space div to the end of the notebook div to:
         // i) provide a margin between the last cell and the end of the notebook
         // ii) to prevent the div from scrolling up when the last cell is being
         // edited, but is too low on the page, which browsers will do automatically.
         var that = this;
         var end_space = $('<div/>').addClass('end_space').height("30%");
         end_space.dblclick(function (e) {
             if (that.read_only) return;
             var ncells = that.ncells();
             that.insert_cell_below('code',ncells-1);
         });
         this.element.append(end_space);
         $('div#notebook').addClass('border-box-sizing');
     };
 
 
     Notebook.prototype.bind_events = function () {
         var that = this;
 
         $([IPython.events]).on('set_next_input.Notebook', function (event, data) {
             var index = that.find_cell_index(data.cell);
             var new_cell = that.insert_cell_below('code',index);
             new_cell.set_text(data.text);
             that.dirty = true;
         });
 
         $([IPython.events]).on('set_dirty.Notebook', function (event, data) {
             that.dirty = data.value;
         });
 
         $([IPython.events]).on('select.Cell', function (event, data) {
             var index = that.find_cell_index(data.cell);
             that.select(index);
         });
 
 
         $(document).keydown(function (event) {
             // console.log(event);
             if (that.read_only) return true;
             
             // Save (CTRL+S) or (AppleKey+S) 
             //metaKey = applekey on mac
             if ((event.ctrlKey || event.metaKey) && event.keyCode==83) { 
                 that.save_notebook();
                 event.preventDefault();
                 return false;
             } else if (event.which === key.ESC) {
                 // Intercept escape at highest level to avoid closing 
                 // websocket connection with firefox
                 event.preventDefault();
             }
             if (event.which === key.UPARROW && !event.shiftKey) {
                 var cell = that.get_selected_cell();
                 if (cell.at_top()) {
                     event.preventDefault();
                     that.select_prev();
                 };
             } else if (event.which === key.DOWNARROW && !event.shiftKey) {
                 var cell = that.get_selected_cell();
                 if (cell.at_bottom()) {
                     event.preventDefault();
                     that.select_next();
                 };
             } else if (event.which === key.ENTER && event.shiftKey) {
                 that.execute_selected_cell();
                 return false;
             } else if (event.which === key.ENTER && event.ctrlKey) {
                 that.execute_selected_cell({terminal:true});
                 return false;
             } else if (event.which === 77 && event.ctrlKey && that.control_key_active == false) {
                 that.control_key_active = true;
                 return false;
             } else if (event.which === 88 && that.control_key_active) {
                 // Cut selected cell = x
                 that.cut_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 67 && that.control_key_active) {
                 // Copy selected cell = c
                 that.copy_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 86 && that.control_key_active) {
                 // Paste selected cell = v
                 that.paste_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 68 && that.control_key_active) {
                 // Delete selected cell = d
                 that.delete_cell();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 65 && that.control_key_active) {
                 // Insert code cell above selected = a
                 that.insert_cell_above('code');
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 66 && that.control_key_active) {
                 // Insert code cell below selected = b
                 that.insert_cell_below('code');
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 89 && that.control_key_active) {
                 // To code = y
                 that.to_code();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 77 && that.control_key_active) {
                 // To markdown = m
                 that.to_markdown();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 84 && that.control_key_active) {
                 // To Raw = t
                 that.to_raw();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 49 && that.control_key_active) {
                 // To Heading 1 = 1
                 that.to_heading(undefined, 1);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 50 && that.control_key_active) {
                 // To Heading 2 = 2
                 that.to_heading(undefined, 2);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 51 && that.control_key_active) {
                 // To Heading 3 = 3
                 that.to_heading(undefined, 3);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 52 && that.control_key_active) {
                 // To Heading 4 = 4
                 that.to_heading(undefined, 4);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 53 && that.control_key_active) {
                 // To Heading 5 = 5
                 that.to_heading(undefined, 5);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 54 && that.control_key_active) {
                 // To Heading 6 = 6
                 that.to_heading(undefined, 6);
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 79 && that.control_key_active) {
                 // Toggle output = o
+                if (event.shiftKey){
+                    that.toggle_output_scroll();
+                } else {
                 that.toggle_output();
+                }
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 83 && that.control_key_active) {
                 // Save notebook = s
                 that.save_notebook();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 74 && that.control_key_active) {
                 // Move cell down = j
                 that.move_cell_down();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 75 && that.control_key_active) {
                 // Move cell up = k
                 that.move_cell_up();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 80 && that.control_key_active) {
                 // Select previous = p
                 that.select_prev();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 78 && that.control_key_active) {
                 // Select next = n
                 that.select_next();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 76 && that.control_key_active) {
                 // Toggle line numbers = l
                 that.cell_toggle_line_numbers();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 73 && that.control_key_active) {
                 // Interrupt kernel = i
                 that.kernel.interrupt();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 190 && that.control_key_active) {
                 // Restart kernel = .  # matches qt console
                 that.restart_kernel();
                 that.control_key_active = false;
                 return false;
             } else if (event.which === 72 && that.control_key_active) {
                 // Show keyboard shortcuts = h
                 IPython.quick_help.show_keyboard_shortcuts();
                 that.control_key_active = false;
                 return false;
             } else if (that.control_key_active) {
                 that.control_key_active = false;
                 return true;
             };
             return true;
         });
 
         var collapse_time = function(time){
             var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
         }
 
         this.element.bind('collapse_pager', function (event,extrap) {
             time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             collapse_time(time);
         });
 
         var expand_time = function(time) {
             var app_height = $('div#main_app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height; 
             that.element.animate({height : new_height + 'px'}, time);
         }
 
         this.element.bind('expand_pager', function (event, extrap) {
             time = (extrap != undefined) ? ((extrap.duration != undefined ) ? extrap.duration : 'fast') : 'fast';
             expand_time(time);
         });
 
         $(window).bind('beforeunload', function () {
             // TODO: Make killing the kernel configurable.
             var kill_kernel = false;
             if (kill_kernel) {
                 that.kernel.kill();
             }
             if (that.dirty && ! that.read_only) {
                 return "You have unsaved changes that will be lost if you leave this page.";
             };
             // Null is the *only* return value that will make the browser not
             // pop up the "don't leave" dialog.
             return null;
         });
     };
 
 
     Notebook.prototype.scroll_to_bottom = function () {
         this.element.animate({scrollTop:this.element.get(0).scrollHeight}, 0);
     };
 
 
     Notebook.prototype.scroll_to_top = function () {
         this.element.animate({scrollTop:0}, 0);
     };
 
 
     // Cell indexing, retrieval, etc.
 
     Notebook.prototype.get_cell_elements = function () {
         return this.element.children("div.cell");
     };
 
 
     Notebook.prototype.get_cell_element = function (index) {
         var result = null;
         var e = this.get_cell_elements().eq(index);
         if (e.length !== 0) {
             result = e;
         }
         return result;
     };
 
 
     Notebook.prototype.ncells = function (cell) {
         return this.get_cell_elements().length;
     };
 
 
     // TODO: we are often calling cells as cells()[i], which we should optimize
     // to cells(i) or a new method.
     Notebook.prototype.get_cells = function () {
         return this.get_cell_elements().toArray().map(function (e) {
             return $(e).data("cell");
         });
     };
 
 
     Notebook.prototype.get_cell = function (index) {
         var result = null;
         var ce = this.get_cell_element(index);
         if (ce !== null) {
             result = ce.data('cell');
         }
         return result;
     }
 
 
     Notebook.prototype.get_next_cell = function (cell) {
         var result = null;
         var index = this.find_cell_index(cell);
         if (index !== null && index < this.ncells()) {
             result = this.get_cell(index+1);
         }
         return result;
     }
 
 
     Notebook.prototype.get_prev_cell = function (cell) {
         var result = null;
         var index = this.find_cell_index(cell);
         if (index !== null && index > 1) {
             result = this.get_cell(index-1);
         }
         return result;
     }
 
     Notebook.prototype.find_cell_index = function (cell) {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell") === cell) {
                 result = index;
             };
         });
         return result;
     };
 
 
     Notebook.prototype.index_or_selected = function (index) {
         var i;
         if (index === undefined || index === null) {
             i = this.get_selected_index();
             if (i === null) {
                 i = 0;
             }
         } else {
             i = index;
         }
         return i;
     };
 
 
     Notebook.prototype.get_selected_cell = function () {
         var index = this.get_selected_index();
         return this.get_cell(index);
     };
 
 
     Notebook.prototype.is_valid_cell_index = function (index) {
         if (index !== null && index >= 0 && index < this.ncells()) {
             return true;
         } else {
             return false;
         };
     }
 
     Notebook.prototype.get_selected_index = function () {
         var result = null;
         this.get_cell_elements().filter(function (index) {
             if ($(this).data("cell").selected === true) {
                 result = index;
             };
         });
         return result;
     };
 
 
     // Cell selection.
 
     Notebook.prototype.select = function (index) {
         if (index !== undefined && index >= 0 && index < this.ncells()) {
             sindex = this.get_selected_index()
             if (sindex !== null && index !== sindex) {
                 this.get_cell(sindex).unselect();
             };
             var cell = this.get_cell(index)
             cell.select();
             if (cell.cell_type === 'heading') {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type,level:cell.level}
                 );
             } else {
                 $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                     {'cell_type':cell.cell_type}
                 );
             };
         };
         return this;
     };
 
 
     Notebook.prototype.select_next = function () {
         var index = this.get_selected_index();
         if (index !== null && index >= 0 && (index+1) < this.ncells()) {
             this.select(index+1);
         };
         return this;
     };
 
 
     Notebook.prototype.select_prev = function () {
         var index = this.get_selected_index();
         if (index !== null && index >= 0 && (index-1) < this.ncells()) {
             this.select(index-1);
         };
         return this;
     };
 
 
     // Cell movement
 
     Notebook.prototype.move_cell_up = function (index) {
         var i = this.index_or_selected();
         if (i !== null && i < this.ncells() && i > 0) {
             var pivot = this.get_cell_element(i-1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.before(tomove);
                 this.select(i-1);
             };
         };
         this.dirty = true;
         return this;
     };
 
 
     Notebook.prototype.move_cell_down = function (index) {
         var i = this.index_or_selected();
         if (i !== null && i < (this.ncells()-1) && i >= 0) {
             var pivot = this.get_cell_element(i+1);
             var tomove = this.get_cell_element(i);
             if (pivot !== null && tomove !== null) {
                 tomove.detach();
                 pivot.after(tomove);
                 this.select(i+1);
             };
         };
         this.dirty = true;
         return this;
     };
 
 
     Notebook.prototype.sort_cells = function () {
         // This is not working right now. Calling this will actually crash
         // the browser. I think there is an infinite loop in here...
         var ncells = this.ncells();
         var sindex = this.get_selected_index();
         var swapped;
         do {
             swapped = false;
             for (var i=1; i<ncells; i++) {
                 current = this.get_cell(i);
                 previous = this.get_cell(i-1);
                 if (previous.input_prompt_number > current.input_prompt_number) {
                     this.move_cell_up(i);
                     swapped = true;
                 };
             };
         } while (swapped);
         this.select(sindex);
         return this;
     };
 
     // Insertion, deletion.
 
     Notebook.prototype.delete_cell = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var ce = this.get_cell_element(i);
             ce.remove();
             if (i === (this.ncells())) {
                 this.select(i-1);
             } else {
                 this.select(i);
             };
             this.dirty = true;
         };
         return this;
     };
 
 
     Notebook.prototype.insert_cell_below = function (type, index) {
         // type = ('code','html','markdown')
         // index = cell index or undefined to insert below selected
         index = this.index_or_selected(index);
         var cell = null;
         if (this.ncells() === 0 || this.is_valid_cell_index(index)) {
             if (type === 'code') {
                 cell = new IPython.CodeCell(this.kernel);
                 cell.set_input_prompt();
             } else if (type === 'markdown') {
                 cell = new IPython.MarkdownCell();
             } else if (type === 'html') {
                 cell = new IPython.HTMLCell();
             } else if (type === 'raw') {
                 cell = new IPython.RawCell();
             } else if (type === 'heading') {
                 cell = new IPython.HeadingCell();
             };
             if (cell !== null) {
                 if (this.ncells() === 0) {
                     this.element.find('div.end_space').before(cell.element);
                 } else if (this.is_valid_cell_index(index)) {
                     this.get_cell_element(index).after(cell.element);
                 };
                 cell.render();
                 this.select(this.find_cell_index(cell));
                 this.dirty = true;
                 return cell;
             };
         };
         return cell;
     };
 
 
     Notebook.prototype.insert_cell_above = function (type, index) {
         // type = ('code','html','markdown')
         // index = cell index or undefined to insert above selected
         index = this.index_or_selected(index);
         var cell = null;
         if (this.ncells() === 0 || this.is_valid_cell_index(index)) {
             if (type === 'code') {
                 cell = new IPython.CodeCell(this.kernel);
                 cell.set_input_prompt();
             } else if (type === 'markdown') {
                 cell = new IPython.MarkdownCell();
             } else if (type === 'html') {
                 cell = new IPython.HTMLCell();
             } else if (type === 'raw') {
                 cell = new IPython.RawCell();
             } else if (type === 'heading') {
                 cell = new IPython.HeadingCell();
             };
             if (cell !== null) {
                 if (this.ncells() === 0) {
                     this.element.find('div.end_space').before(cell.element);
                 } else if (this.is_valid_cell_index(index)) {
                     this.get_cell_element(index).before(cell.element);
                 };
                 cell.render();
                 this.select(this.find_cell_index(cell));
                 this.dirty = true;
                 return cell;
             };
         };
         return cell;
     };
 
 
     Notebook.prototype.to_code = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.CodeCell)) {
                 target_cell = this.insert_cell_below('code',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 }
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.dirty = true;
             };
         };
     };
 
 
     Notebook.prototype.to_markdown = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             if (!(source_cell instanceof IPython.MarkdownCell)) {
                 target_cell = this.insert_cell_below('markdown',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.dirty = true;
             };
         };
     };
 
 
     Notebook.prototype.to_html = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (!(source_cell instanceof IPython.HTMLCell)) {
                 target_cell = this.insert_cell_below('html',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.dirty = true;
             };
         };
     };
 
 
     Notebook.prototype.to_raw = function (index) {
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (!(source_cell instanceof IPython.RawCell)) {
                 target_cell = this.insert_cell_below('raw',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.dirty = true;
             };
         };
     };
 
 
     Notebook.prototype.to_heading = function (index, level) {
         level = level || 1;
         var i = this.index_or_selected(index);
         if (this.is_valid_cell_index(i)) {
             var source_element = this.get_cell_element(i);
             var source_cell = source_element.data("cell");
             var target_cell = null;
             if (source_cell instanceof IPython.HeadingCell) {
                 source_cell.set_level(level);
             } else {
                 target_cell = this.insert_cell_below('heading',i);
                 var text = source_cell.get_text();
                 if (text === source_cell.placeholder) {
                     text = '';
                 };
                 // The edit must come before the set_text.
                 target_cell.set_level(level);
                 target_cell.edit();
                 target_cell.set_text(text);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 target_cell.code_mirror.clearHistory();
                 source_element.remove();
                 this.dirty = true;
             };
             $([IPython.events]).trigger('selected_cell_type_changed.Notebook',
                 {'cell_type':'heading',level:level}
             );
         };
     };
 
 
     // Cut/Copy/Paste
 
     Notebook.prototype.enable_paste = function () {
         var that = this;
         if (!this.paste_enabled) {
             $('#paste_cell').removeClass('ui-state-disabled')
                 .on('click', function () {that.paste_cell();});
             $('#paste_cell_above').removeClass('ui-state-disabled')
                 .on('click', function () {that.paste_cell_above();});
             $('#paste_cell_below').removeClass('ui-state-disabled')
                 .on('click', function () {that.paste_cell_below();});
             this.paste_enabled = true;
         };
     };
 
 
     Notebook.prototype.disable_paste = function () {
         if (this.paste_enabled) {
             $('#paste_cell').addClass('ui-state-disabled').off('click');
             $('#paste_cell_above').addClass('ui-state-disabled').off('click');
             $('#paste_cell_below').addClass('ui-state-disabled').off('click');
             this.paste_enabled = false;
         };
     };
 
 
     Notebook.prototype.cut_cell = function () {
         this.copy_cell();
         this.delete_cell();
     }
 
     Notebook.prototype.copy_cell = function () {
         var cell = this.get_selected_cell();
         this.clipboard = cell.toJSON();
         this.enable_paste();
     };
 
 
     Notebook.prototype.paste_cell = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
             old_cell = this.get_next_cell(new_cell);
             this.delete_cell(this.find_cell_index(old_cell));
             this.select(this.find_cell_index(new_cell));
         };
     };
 
 
     Notebook.prototype.paste_cell_above = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_above(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
 
     Notebook.prototype.paste_cell_below = function () {
         if (this.clipboard !== null && this.paste_enabled) {
             var cell_data = this.clipboard;
             var new_cell = this.insert_cell_below(cell_data.cell_type);
             new_cell.fromJSON(cell_data);
         };
     };
 
 
     // Split/merge
 
     Notebook.prototype.split_cell = function () {
         // Todo: implement spliting for other cell types.
         var cell = this.get_selected_cell();
         if (cell.is_splittable()) {
             texta = cell.get_pre_cursor();
             textb = cell.get_post_cursor();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(texta);
                 var new_cell = this.insert_cell_below('code');
                 new_cell.set_text(textb);
             } else if (cell instanceof IPython.MarkdownCell) {
                 cell.set_text(texta);
                 cell.render();
                 var new_cell = this.insert_cell_below('markdown');
                 new_cell.edit(); // editor must be visible to call set_text
                 new_cell.set_text(textb);
                 new_cell.render();
             } else if (cell instanceof IPython.HTMLCell) {
                 cell.set_text(texta);
                 cell.render();
                 var new_cell = this.insert_cell_below('html');
                 new_cell.edit(); // editor must be visible to call set_text
                 new_cell.set_text(textb);
                 new_cell.render();
             };
         };
     };
 
 
     Notebook.prototype.merge_cell_above = function () {
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         if (index > 0) {
             upper_cell = this.get_cell(index-1);
             upper_text = upper_cell.get_text();
             text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(upper_text+'\n'+text);
             } else if (cell instanceof IPython.MarkdownCell || cell instanceof IPython.HTMLCell) {
                 cell.edit();
                 cell.set_text(upper_text+'\n'+text);
                 cell.render();
             };
             this.delete_cell(index-1);
             this.select(this.find_cell_index(cell));
         };
     };
 
 
     Notebook.prototype.merge_cell_below = function () {
         var index = this.get_selected_index();
         var cell = this.get_cell(index);
         if (index < this.ncells()-1) {
             lower_cell = this.get_cell(index+1);
             lower_text = lower_cell.get_text();
             text = cell.get_text();
             if (cell instanceof IPython.CodeCell) {
                 cell.set_text(text+'\n'+lower_text);
             } else if (cell instanceof IPython.MarkdownCell || cell instanceof IPython.HTMLCell) {
                 cell.edit();
                 cell.set_text(text+'\n'+lower_text);
                 cell.render();
             };
             this.delete_cell(index+1);
             this.select(this.find_cell_index(cell));
         };
     };
 
 
     // Cell collapsing and output clearing
 
     Notebook.prototype.collapse = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).collapse();
         this.dirty = true;
     };
 
 
     Notebook.prototype.expand = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).expand();
         this.dirty = true;
     };
 
 
     Notebook.prototype.toggle_output = function (index) {
         var i = this.index_or_selected(index);
         this.get_cell(i).toggle_output();
         this.dirty = true;
     };
 
 
+    Notebook.prototype.toggle_output_scroll = function (index) {
+        var i = this.index_or_selected(index);
+        this.get_cell(i).toggle_output_scroll();
+    };
+
+
+    Notebook.prototype.collapse_all_output = function () {
+        var ncells = this.ncells();
+        var cells = this.get_cells();
+        for (var i=0; i<ncells; i++) {
+            if (cells[i] instanceof IPython.CodeCell) {
+                cells[i].output_area.collapse();
+            }
+        };
+        // this should not be set if the `collapse` key is removed from nbformat
+        this.dirty = true;
+    };
+
+
+    Notebook.prototype.scroll_all_output = function () {
+        var ncells = this.ncells();
+        var cells = this.get_cells();
+        for (var i=0; i<ncells; i++) {
+            if (cells[i] instanceof IPython.CodeCell) {
+                cells[i].output_area.expand();
+                cells[i].output_area.scroll_if_long(20);
+            }
+        };
+        // this should not be set if the `collapse` key is removed from nbformat
+        this.dirty = true;
+    };
+
+
+    Notebook.prototype.expand_all_output = function () {
+        var ncells = this.ncells();
+        var cells = this.get_cells();
+        for (var i=0; i<ncells; i++) {
+            if (cells[i] instanceof IPython.CodeCell) {
+                cells[i].output_area.expand();
+                cells[i].output_area.unscroll_area();
+            }
+        };
+        // this should not be set if the `collapse` key is removed from nbformat
+        this.dirty = true;
+    };
+
+
     Notebook.prototype.clear_all_output = function () {
         var ncells = this.ncells();
         var cells = this.get_cells();
         for (var i=0; i<ncells; i++) {
             if (cells[i] instanceof IPython.CodeCell) {
                 cells[i].clear_output(true,true,true);
                 // Make all In[] prompts blank, as well
                 // TODO: make this configurable (via checkbox?)
                 cells[i].set_input_prompt();
             }
         };
         this.dirty = true;
     };
 
 
     // Other cell functions: line numbers, ...
 
     Notebook.prototype.cell_toggle_line_numbers = function() {
         this.get_selected_cell().toggle_line_numbers();
     };
 
     // Kernel related things
 
     Notebook.prototype.start_kernel = function () {
         var base_url = $('body').data('baseKernelUrl') + "kernels";
         this.kernel = new IPython.Kernel(base_url);
         this.kernel.start(this.notebook_id);
         // Now that the kernel has been created, tell the CodeCells about it.
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             var cell = this.get_cell(i);
             if (cell instanceof IPython.CodeCell) {
                 cell.set_kernel(this.kernel)
             };
         };
     };
 
 
     Notebook.prototype.restart_kernel = function () {
         var that = this;
         var dialog = $('<div/>');
         dialog.html('Do you want to restart the current kernel?  You will lose all variables defined in it.');
         $(document).append(dialog);
         dialog.dialog({
             resizable: false,
             modal: true,
             title: "Restart kernel or continue running?",
             closeText: '',
             buttons : {
                 "Restart": function () {
                     that.kernel.restart();
                     $(this).dialog('close');
                 },
                 "Continue running": function () {
                     $(this).dialog('close');
                 }
             }
         });
     };
 
 
     Notebook.prototype.execute_selected_cell = function (options) {
         // add_new: should a new cell be added if we are at the end of the nb
         // terminal: execute in terminal mode, which stays in the current cell
         default_options = {terminal: false, add_new: true};
         $.extend(default_options, options);
         var that = this;
         var cell = that.get_selected_cell();
         var cell_index = that.find_cell_index(cell);
         if (cell instanceof IPython.CodeCell) {
             cell.execute();
         } else if (cell instanceof IPython.HTMLCell) {
             cell.render();
         }
         if (default_options.terminal) {
             cell.select_all();
         } else {
             if ((cell_index === (that.ncells()-1)) && default_options.add_new) {
                 that.insert_cell_below('code');
                 // If we are adding a new cell at the end, scroll down to show it.
                 that.scroll_to_bottom();
             } else {
                 that.select(cell_index+1);
             };
         };
         this.dirty = true;
     };
 
 
     Notebook.prototype.execute_all_cells = function () {
         var ncells = this.ncells();
         for (var i=0; i<ncells; i++) {
             this.select(i);
             this.execute_selected_cell({add_new:false});
         };
         this.scroll_to_bottom();
     };
 
     // Persistance and loading
 
     Notebook.prototype.get_notebook_id = function () {
         return this.notebook_id;
     };
 
 
     Notebook.prototype.get_notebook_name = function () {
         return this.notebook_name;
     };
 
 
     Notebook.prototype.set_notebook_name = function (name) {
         this.notebook_name = name;
     };
 
 
     Notebook.prototype.test_notebook_name = function (nbname) {
         nbname = nbname || '';
         if (this.notebook_name_blacklist_re.test(nbname) == false && nbname.length>0) {
             return true;
         } else {
             return false;
         };
     };
 
 
     Notebook.prototype.fromJSON = function (data) {
         var ncells = this.ncells();
         var i;
         for (i=0; i<ncells; i++) {
             // Always delete cell 0 as they get renumbered as they are deleted.
             this.delete_cell(0);
         };
         // Save the metadata and name.
         this.metadata = data.metadata;
         this.notebook_name = data.metadata.name;
         // Only handle 1 worksheet for now.
         var worksheet = data.worksheets[0];
         if (worksheet !== undefined) {
             if (worksheet.metadata) {
                 this.worksheet_metadata = worksheet.metadata;
             }
             var new_cells = worksheet.cells;
             ncells = new_cells.length;
             var cell_data = null;
             var new_cell = null;
             for (i=0; i<ncells; i++) {
                 cell_data = new_cells[i];
                 // VERSIONHACK: plaintext -> raw
                 // handle never-released plaintext name for raw cells
                 if (cell_data.cell_type === 'plaintext'){
                     cell_data.cell_type = 'raw';
                 }
                 
                 new_cell = this.insert_cell_below(cell_data.cell_type);
                 new_cell.fromJSON(cell_data);
             };
         };
         if (data.worksheets.length > 1) {
             var dialog = $('<div/>');
             dialog.html("This notebook has " + data.worksheets.length + " worksheets, " +
             "but this version of IPython can only handle the first.  " +
             "If you save this notebook, worksheets after the first will be lost."
             );
             this.element.append(dialog);
             dialog.dialog({
                 resizable: false,
                 modal: true,
                 title: "Multiple worksheets",
                 closeText: "",
                 close: function(event, ui) {$(this).dialog('destroy').remove();},
                 buttons : {
                     "OK": function () {
                         $(this).dialog('close');
                     }
                 },
                 width: 400
             });
         }
     };
 
 
     Notebook.prototype.toJSON = function () {
         var cells = this.get_cells();
         var ncells = cells.length;
         var cell_array = new Array(ncells);
         for (var i=0; i<ncells; i++) {
             cell_array[i] = cells[i].toJSON();
         };
         var data = {
             // Only handle 1 worksheet for now.
             worksheets : [{
                 cells: cell_array,
                 metadata: this.worksheet_metadata
             }],
             metadata : this.metadata
         };
         return data;
     };
 
     Notebook.prototype.save_notebook = function () {
         // We may want to move the name/id/nbformat logic inside toJSON?
         var data = this.toJSON();
         data.metadata.name = this.notebook_name;
         data.nbformat = this.nbformat;
         data.nbformat_minor = this.nbformat_minor;
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "PUT",
             data : JSON.stringify(data),
             headers : {'Content-Type': 'application/json'},
             success : $.proxy(this.save_notebook_success,this),
             error : $.proxy(this.save_notebook_error,this)
         };
         $([IPython.events]).trigger('notebook_saving.Notebook');
         var url = $('body').data('baseProjectUrl') + 'notebooks/' + this.notebook_id;
         $.ajax(url, settings);
     };
 
 
     Notebook.prototype.save_notebook_success = function (data, status, xhr) {
         this.dirty = false;
         $([IPython.events]).trigger('notebook_saved.Notebook');
     };
 
 
     Notebook.prototype.save_notebook_error = function (xhr, status, error_msg) {
         $([IPython.events]).trigger('notebook_save_failed.Notebook');
     };
 
 
     Notebook.prototype.load_notebook = function (notebook_id) {
         var that = this;
         this.notebook_id = notebook_id;
         // We do the call with settings so we can set cache to false.
         var settings = {
             processData : false,
             cache : false,
             type : "GET",
             dataType : "json",
             success : $.proxy(this.load_notebook_success,this),
             error : $.proxy(this.load_notebook_error,this),
         };
         $([IPython.events]).trigger('notebook_loading.Notebook');
         var url = $('body').data('baseProjectUrl') + 'notebooks/' + this.notebook_id;
         $.ajax(url, settings);
     };
 
 
     Notebook.prototype.load_notebook_success = function (data, status, xhr) {
         this.fromJSON(data);
         if (this.ncells() === 0) {
             this.insert_cell_below('code');
         };
         this.dirty = false;
         this.select(0);
         this.scroll_to_top();
         if (data.orig_nbformat !== undefined && data.nbformat !== data.orig_nbformat) {
             msg = "This notebook has been converted from an older " +
             "notebook format (v"+data.orig_nbformat+") to the current notebook " +
             "format (v"+data.nbformat+"). The next time you save this notebook, the " +
             "newer notebook format will be used and older verions of IPython " +
             "may not be able to read it. To keep the older version, close the " +
             "notebook without saving it.";
             var dialog = $('<div/>');
             dialog.html(msg);
             this.element.append(dialog);
             dialog.dialog({
                 resizable: false,
                 modal: true,
                 title: "Notebook converted",
                 closeText: "",
                 close: function(event, ui) {$(this).dialog('destroy').remove();},
                 buttons : {
                     "OK": function () {
                         $(this).dialog('close');
                     }
                 },
                 width: 400
             });
         } else if (data.orig_nbformat_minor !== undefined && data.nbformat_minor !== data.orig_nbformat_minor) {
             var that = this;
             var orig_vs = 'v' + data.nbformat + '.' + data.orig_nbformat_minor;
             var this_vs = 'v' + data.nbformat + '.' + this.nbformat_minor;
             msg = "This notebook is version " + orig_vs + ", but we only fully support up to " +
             this_vs + ".  You can still work with this notebook, but some features " +
             "introduced in later notebook versions may not be available."
             
             var dialog = $('<div/>');
             dialog.html(msg);
             this.element.append(dialog);
             dialog.dialog({
                 resizable: false,
                 modal: true,
                 title: "Newer Notebook",
                 closeText: "",
                 close: function(event, ui) {$(this).dialog('destroy').remove();},
                 buttons : {
                     "OK": function () {
                         $(this).dialog('close');
                     }
                 },
                 width: 400
             });
             
         }
         // Create the kernel after the notebook is completely loaded to prevent
         // code execution upon loading, which is a security risk.
         if (! this.read_only) {
             this.start_kernel();
         }
         $([IPython.events]).trigger('notebook_loaded.Notebook');
     };
 
 
     Notebook.prototype.load_notebook_error = function (xhr, textStatus, errorThrow) {
         if (xhr.status === 500) {
             msg = "An error occurred while loading this notebook. Most likely " +
             "this notebook is in a newer format than is supported by this " +
             "version of IPython. This version can load notebook formats " +
             "v"+this.nbformat+" or earlier.";
             var dialog = $('<div/>');
             dialog.html(msg);
             this.element.append(dialog);
             dialog.dialog({
                 resizable: false,
                 modal: true,
                 title: "Error loading notebook",
                 closeText: "",
                 close: function(event, ui) {$(this).dialog('destroy').remove();},
                 buttons : {
                     "OK": function () {
                         $(this).dialog('close');
                     }
                 },
                 width: 400
             });
         }
     }
     
     IPython.Notebook = Notebook;
 
 
     return IPython;
 
 }(IPython));
 

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

@@ -1,416 +1,518 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // OutputArea
 //============================================================================
 
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     var OutputArea = function (selector, prompt_area) {
         this.selector = selector;
-        this.element = $(selector);
+        this.wrapper = $(selector);
         this.outputs = [];
         this.collapsed = false;
+        this.scrolled = false;
         this.clear_out_timeout = 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 vbox');
+        
+        this.collapse_button.button();
+        this.collapse_button.addClass('output_collapsed vbox');
+        this.collapse_button.attr('title', 'click to expand outout');
+        this.collapse_button.html('. . .');
+        
+        this.prompt_overlay.addClass('out_prompt_overlay prompt');
+        this.prompt_overlay.attr('title', 'click to expand outout; double click to hide output');
+        
         this.collapse();
     };
 
 
+    OutputArea.prototype._should_scroll = function (lines) {
+        if (!lines) {
+            lines = 50;
+        }
+        // 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 () {
+            // maybe scroll output,
+            // if it's grown large enough and hasn't already been scrolled.
+            if ( !that.scrolled && that._should_scroll()) {
+                that.scroll_area();
+            }
+        });
+        this.collapse_button.click(function () {
+            that.expand();
+        });
+        this.collapse_button.hover(function () {
+            $(this).addClass("ui-state-hover");
+        }, function () {
+            $(this).removeClass("ui-state-hover");
+        });
+    };
+
+
     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;
+    };
+
+
+    OutputArea.prototype.scroll_if_long = function (lines) {
+        if (this._should_scroll(lines)) {
+            // 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(20);
+        };
+    };
+
+
     // 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_type, content) {
         var json = {};
         json.output_type = msg_type;
         if (msg_type === "stream") {
             json.text = content.data;
             json.stream = content.name;
         } else if (msg_type === "display_data") {
             json = this.convert_mime_types(json, content.data);
         } else if (msg_type === "pyout") {
             json.prompt_number = content.execution_count;
             json = this.convert_mime_types(json, content.data);
         } else if (msg_type === "pyerr") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         };
         // append with dynamic=true
         this.append_output(json, true);
     };
 
 
     OutputArea.prototype.convert_mime_types = function (json, data) {
         if (data['text/plain'] !== undefined) {
             json.text = data['text/plain'];
         };
         if (data['text/html'] !== undefined) {
             json.html = data['text/html'];
         };
         if (data['image/svg+xml'] !== undefined) {
             json.svg = data['image/svg+xml'];
         };
         if (data['image/png'] !== undefined) {
             json.png = data['image/png'];
         };
         if (data['image/jpeg'] !== undefined) {
             json.jpeg = data['image/jpeg'];
         };
         if (data['text/latex'] !== undefined) {
             json.latex = data['text/latex'];
         };
         if (data['application/json'] !== undefined) {
             json.json = data['application/json'];
         };
         if (data['application/javascript'] !== undefined) {
             json.javascript = data['application/javascript'];
         }
         return json;
     };
 
 
     OutputArea.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
         this.flush_clear_timeout();
         if (json.output_type === 'pyout') {
             this.append_pyout(json, dynamic);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json, dynamic);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         };
         this.outputs.push(json);
+        var that = this;
+        setTimeout(function(){that.element.trigger('resize');}, 100);
     };
 
 
     OutputArea.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("hbox output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
         return oa;
     };
 
 
     OutputArea.prototype.append_pyout = function (json, dynamic) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         }
         this.append_mime_type(json, toinsert, dynamic);
         this.element.append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         };
     };
 
 
     OutputArea.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             this.append_text(s, toinsert);
             this.element.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.element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         this.append_mime_type(json, toinsert, dynamic);
         this.element.append(toinsert);
         // If we just output latex, typeset it.
         if ( (json.latex !== undefined) || (json.html !== undefined) ) {
             this.typeset();
         };
     };
 
 
     OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
         if (json.javascript !== undefined && dynamic) {
             this.append_javascript(json.javascript, element, dynamic);
         } else if (json.html !== undefined) {
             this.append_html(json.html, element);
         } else if (json.latex !== undefined) {
             this.append_latex(json.latex, element);
         } else if (json.svg !== undefined) {
             this.append_svg(json.svg, element);
         } else if (json.png !== undefined) {
             this.append_png(json.png, element);
         } else if (json.jpeg !== undefined) {
             this.append_jpeg(json.jpeg, element);
         } else if (json.text !== undefined) {
             this.append_text(json.text, element);
         };
     };
 
 
     OutputArea.prototype.append_html = function (html, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_javascript = function (js, container) {
         // We just eval the JS code, element appears in the local scope.
         var element = $("<div/>").addClass("box-flex1 output_subarea");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
         // If the Javascript appends content to `element` that should be drawn, then
         // it must also call `container.show()`.
         eval(js);
     }
 
 
     OutputArea.prototype.append_text = function (data, element, extra_class) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_svg = function (svg, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_png = function (png, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_png");
         var img = $("<img/>").attr('src','data:image/png;base64,'+png);
         img.load(function () {
             $(this).resizable({'aspectRatio': true, 'autoHide': true})
         });
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, element) {
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
         img.load(function () {
             $(this).resizable({'aspectRatio': true, 'autoHide': true})
         });
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_latex = function (latex, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
         var toinsert = $("<div/>").addClass("box-flex1 output_subarea output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.handle_clear_output = function (content) {
         this.clear_output(content.stdout, content.stderr, content.other);
     }
 
 
     OutputArea.prototype.clear_output = function (stdout, stderr, other) {
         var that = this;
         if (this.clear_out_timeout != null){
             // fire previous pending clear *immediately*
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         }
         // store flags for flushing the timeout
         this._clear_stdout = stdout;
         this._clear_stderr = stderr;
         this._clear_other = other;
         this.clear_out_timeout = setTimeout(function() {
             // really clear timeout only after a short delay
             // this reduces flicker in 'clear_output; print' cases
             that.clear_out_timeout = null;
             that._clear_stdout = that._clear_stderr = that._clear_other = null;
             that.clear_output_callback(stdout, stderr, other);
         }, 500
         );
     };
 
 
     OutputArea.prototype.clear_output_callback = function (stdout, stderr, other) {
         var output_div = this.element;
 
         if (stdout && stderr && other){
             // clear all, no need for logic
             output_div.html("");
             this.outputs = [];
+            this.unscroll_area();
             return;
         }
         // remove html output
         // each output_subarea that has an identifying class is in an output_area
         // which is the element to be removed.
         if (stdout) {
             output_div.find("div.output_stdout").parent().remove();
         }
         if (stderr) {
             output_div.find("div.output_stderr").parent().remove();
         }
         if (other) {
             output_div.find("div.output_subarea").not("div.output_stderr").not("div.output_stdout").parent().remove();
         }
+        this.unscroll_area();
 
         // remove cleared outputs from JSON list:
         for (var i = this.outputs.length - 1; i >= 0; i--) {
             var out = this.outputs[i];
             var output_type = out.output_type;
             if (output_type == "display_data" && other) {
                 this.outputs.splice(i,1);
             } else if (output_type == "stream") {
                 if (stdout && out.stream == "stdout") {
                     this.outputs.splice(i,1);
                 } else if (stderr && out.stream == "stderr") {
                     this.outputs.splice(i,1);
                 }
             }
         }
     };
 
 
     OutputArea.prototype.flush_clear_timeout = function() {
         var output_div = this.element;
         if (this.clear_out_timeout){
             clearTimeout(this.clear_out_timeout);
             this.clear_out_timeout = null;
             this.clear_output_callback(this._clear_stdout, this._clear_stderr, this._clear_other);
         };
     }
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs) {
         var len = outputs.length;
         for (var i=0; i<len; i++) {
             // append with dynamic=false.
             this.append_output(outputs[i], false);
         };
     };
 
 
     OutputArea.prototype.toJSON = function () {
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         };
         return outputs;
     };
 
 
     IPython.OutputArea = OutputArea;
 
     return IPython;
 
 }(IPython));

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

@@ -1,70 +1,71 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // QuickHelp button
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var QuickHelp = function (selector) {
     };
 
     QuickHelp.prototype.show_keyboard_shortcuts = function () {
         // toggles display of keyboard shortcut dialog
         var that = this;
         if ( this.shortcut_dialog ){
             // if dialog is already shown, close it
             this.shortcut_dialog.dialog("close");
             this.shortcut_dialog = null;
             return;
         }
         var dialog = $('<div/>');
         this.shortcut_dialog = dialog;
         var shortcuts = [
             {key: 'Shift-Enter', help: 'run cell'},
             {key: 'Ctrl-Enter', help: 'run cell in-place'},
             {key: 'Ctrl-m x', help: 'cut cell'},
             {key: 'Ctrl-m c', help: 'copy cell'},
             {key: 'Ctrl-m v', help: 'paste cell'},
             {key: 'Ctrl-m d', help: 'delete cell'},
             {key: 'Ctrl-m a', help: 'insert cell above'},
             {key: 'Ctrl-m b', help: 'insert cell below'},
             {key: 'Ctrl-m o', help: 'toggle output'},
+            {key: 'Ctrl-m O', help: 'toggle output scroll'},
             {key: 'Ctrl-m l', help: 'toggle line numbers'},
             {key: 'Ctrl-m s', help: 'save notebook'},
             {key: 'Ctrl-m j', help: 'move cell down'},
             {key: 'Ctrl-m k', help: 'move cell up'},
             {key: 'Ctrl-m y', help: 'code cell'},
             {key: 'Ctrl-m m', help: 'markdown cell'},
             {key: 'Ctrl-m t', help: 'raw cell'},
             {key: 'Ctrl-m 1-6', help: 'heading 1-6 cell'},
             {key: 'Ctrl-m p', help: 'select previous'},
             {key: 'Ctrl-m n', help: 'select next'},
             {key: 'Ctrl-m i', help: 'interrupt kernel'},
             {key: 'Ctrl-m .', help: 'restart kernel'},
             {key: 'Ctrl-m h', help: 'show keyboard shortcuts'}
         ];
         for (var i=0; i<shortcuts.length; i++) {
             dialog.append($('<div>').
                 append($('<span/>').addClass('shortcut_key').html(shortcuts[i].key)).
                 append($('<span/>').addClass('shortcut_descr').html(' : ' + shortcuts[i].help))
             );
         };
         dialog.bind('dialogclose', function(event) {
             // dialog has been closed, allow it to be drawn again.
             that.shortcut_dialog = null;
         });
         dialog.dialog({title: 'Keyboard shortcuts', closeText: ''});
     };
 
     // Set module variables
     IPython.QuickHelp = QuickHelp;
 
     return IPython;
 
 }(IPython));

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,241 +1,248 b''
 {% extends page.html %}
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML" charset="utf-8"></script>
 {% end %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
 {% end %}
 
 
 {% block params %}
 
 data-project={{project}}
 data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
 
 {% end %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% end %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
                 <hr/>
                 <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell" class="ui-state-disabled"><a href="#">Paste Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
-                <li id="toggle_output"><a href="#">Toggle Output</a></li>
-                <li id="clear_all_output"><a href="#">Clear All Output</a></li>
+                <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
+                <li id="all_outputs"><a href="#">All Output</a>
+                    <ul>
+                        <li id="expand_all_output"><a href="#">Expand</a></li>
+                        <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
+                        <li id="collapse_all_output"><a href="#">Collapse</a></li>
+                        <li id="clear_all_output"><a href="#">Clear</a></li>
+                    </ul>
+                </li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
 <div id="notification"></div>
 </div>
 
 
 <div id="toolbar">
 
     <span>
         <button id="save_b">Save</button>
     </span>
     <span id="cut_copy_paste">
         <button id="cut_b" title="Cut Cell">Cut Cell</button>
         <button id="copy_b" title="Copy Cell">Copy Cell</button>
         <button id="paste_b" title="Paste Cell">Paste Cell</button>
     </span>
     <span id="move_up_down">
         <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
         <button id="move_down_b" title="Move Cell Down">Move Down</button>
     </span>
     <span id="insert_above_below">
         <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
         <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
     </span>
     <span id="run_int">
         <button id="run_b" title="Run Cell">Run Cell</button>
         <button id="interrupt_b" title="Interrupt">Interrupt</button>
     </span>
     <span>
         <select id="cell_type">
              <option value="code">Code</option>
              <option value="markdown">Markdown</option>
              <option value="raw">Raw Text</option>
              <option value="heading1">Heading 1</option>
              <option value="heading2">Heading 2</option>
              <option value="heading3">Heading 3</option>
              <option value="heading4">Heading 4</option>
              <option value="heading5">Heading 5</option>
              <option value="heading6">Heading 6</option>
         </select>
     </span>
 
 </div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 <div id='tooltip' class='tooltip ui-corner-all' style='display:none'></div>
 
 
 {% end %}
 
 
 {% block script %}
 
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/initmathjax.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }} charset="utf-8"></script>
 
 {% end %}