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

@@ -104,7 +104,7 @@ div#notebook {
     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;
 }
 
@@ -137,6 +137,7 @@ div.cell {
 div.code_cell {
     background-color: white;
 }
+
 /* any special styling for code cells that are currently running goes here */
 div.code_cell.running {
 }
@@ -168,13 +169,50 @@ div.input_prompt {
     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. */

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

@@ -218,6 +218,11 @@ var IPython = (function (IPython) {
     };
 
 
+    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 || " ";

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

@@ -158,6 +158,15 @@ var IPython = (function (IPython) {
         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();
         });

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

@@ -194,7 +194,11 @@ var IPython = (function (IPython) {
                 return false;
             } else if (event.which === 79 && that.control_key_active) {
                 // Toggle output = o
-                that.toggle_output();
+                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) {
@@ -883,6 +887,53 @@ var IPython = (function (IPython) {
     };
 
 
+    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();

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

@@ -16,28 +16,92 @@ var IPython = (function (IPython) {
 
     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;
         };
     };
@@ -45,7 +109,9 @@ var IPython = (function (IPython) {
 
     OutputArea.prototype.expand = function () {
         if (this.collapsed) {
+            this.collapse_button.hide();
             this.element.show();
+            this.prompt_overlay.show();
             this.collapsed = false;
         };
     };
@@ -60,6 +126,38 @@ var IPython = (function (IPython) {
     };
 
 
+    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){
@@ -132,6 +230,8 @@ var IPython = (function (IPython) {
             this.append_stream(json);
         };
         this.outputs.push(json);
+        var that = this;
+        setTimeout(function(){that.element.trigger('resize');}, 100);
     };
 
 
@@ -346,6 +446,7 @@ var IPython = (function (IPython) {
             // clear all, no need for logic
             output_div.html("");
             this.outputs = [];
+            this.unscroll_area();
             return;
         }
         // remove html output
@@ -360,7 +461,8 @@ var IPython = (function (IPython) {
         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];

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

@@ -35,6 +35,7 @@ var IPython = (function (IPython) {
             {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'},

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

@@ -117,8 +117,15 @@ data-notebook-id={{notebook_id}}
                 <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>