Merge pull request #4646 from ellisonbg/output-js

Fixing various output related things:

JavaScript output no longer requires calling container.show()
Added output_javascript CSS class that has zero height when empty.
JavaScript error messages are properly indented with the prompt area.

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

@@ -371,18 +371,16 var IPython = (function (IPython) {
     }
 
 
-    OutputArea.prototype._append_javascript_error = function (err, container) {
+    OutputArea.prototype._append_javascript_error = function (err, element) {
         // display a message when a javascript error occurs in display output
         var msg = "Javascript error adding output!"
-        console.log(msg, err);
-        if ( container === undefined ) return;
-        container.append(
+        if ( element === undefined ) return;
+        element.append(
             $('<div/>').html(msg + "<br/>" +
                 err.toString() +
                 '<br/>See your browser Javascript console for more details.'
             ).addClass('js-error')
         );
-        container.show();
     };
     
     OutputArea.prototype._safe_append = function (toinsert) {
@@ -394,7 +392,13 var IPython = (function (IPython) {
             this.element.append(toinsert);
         } catch(err) {
             console.log(err);
-            this._append_javascript_error(err, this.element);
+            // Create an actual output_area and output_subarea, which creates
+            // the prompt area and the proper indentation.
+            var toinsert = this.create_output_area();
+            var subarea = $('<div/>').addClass('output_subarea');
+            toinsert.append(subarea);
+            this._append_javascript_error(err, subarea);
+            this.element.append(toinsert);
         }
     };
 
@@ -512,16 +516,13 var IPython = (function (IPython) {
 
     OutputArea.prototype.append_javascript = function (js, md, container) {
         // We just eval the JS code, element appears in the local scope.
-        var element = this.create_output_subarea(md, "");
+        var element = this.create_output_subarea(md, "output_javascript");
         container.append(element);
-        // Div for js shouldn't be drawn, as it will add empty height to the area.
-        container.hide();
-        // If the Javascript appends content to `element` that should be drawn, then
-        // it must also call `container.show()`.
         try {
             eval(js);
         } catch(err) {
-            this._append_javascript_error(err, container);
+            console.log(err);
+            this._append_javascript_error(err, element);
         }
     };
 

IPython/html/static/notebook/less/cell.less

@@ -29,3 +29,11 div.inner_cell {
     .vbox();
     .box-flex1();
 }
+
+/* This is needed so that empty prompt areas can collapse to zero height when there
+   is no content in the output_subarea and the prompt. The main purpose of this is
+   to make sure that empty JavaScript output_subareas have no height. */
+div.prompt:empty {
+    padding-top: 0;
+    padding-bottom: 0;
+}

IPython/html/static/notebook/less/outputarea.less

@@ -127,6 +127,11 div.output_png {
 div.output_jpeg {
 }
 
+/* Empty output_javascript divs should have no height */
+div.output_javascript:empty {
+    padding: 0;
+}
+
 .js-error {
     color: darkred;
 }

IPython/html/static/style/ipython.min.css

@@ -57,6 +57,7 input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
 div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:0px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
 div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.prompt:empty{padding-top:0;padding-bottom:0;}
 div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
@@ -102,6 +103,7 div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-fle
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
 div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left;}
+div.output_javascript:empty{padding:0;}
 .js-error{color:darkred;}
 div.raw_input{padding-top:0px;padding-bottom:0px;height:1em;line-height:1em;font-family:monospace;}
 span.input_prompt{font-family:inherit;}

IPython/html/static/style/style.min.css

@@ -1438,6 +1438,7 input.engine_num_input{height:20px;margin-bottom:2px;padding-top:0;padding-botto
 div.cell{border:1px solid transparent;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;padding:5px 5px 5px 0px;margin:0px;outline:none;}div.cell.selected{border-radius:4px;border:thin #ababab solid;}
 div.prompt{min-width:11ex;padding:0.4em;margin:0px;font-family:monospace;text-align:right;line-height:1.231em;}
 div.inner_cell{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.prompt:empty{padding-top:0;padding-bottom:0;}
 div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}
 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;}
 div.input_prompt{color:navy;border-top:1px solid transparent;}
@@ -1483,6 +1484,7 div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-fle
 div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
 div.output_stderr{background:#fdd;}
 div.output_latex{text-align:left;}
+div.output_javascript:empty{padding:0;}
 .js-error{color:darkred;}
 div.raw_input{padding-top:0px;padding-bottom:0px;height:1em;line-height:1em;font-family:monospace;}
 span.input_prompt{font-family:inherit;}