diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js index 912e2ba..4b247e8 100644 --- a/IPython/html/static/notebook/js/outputarea.js +++ b/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( $('
').html(msg + "
" + err.toString() + '
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 = $('
').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); } }; diff --git a/IPython/html/static/notebook/less/cell.less b/IPython/html/static/notebook/less/cell.less index 81537ee..0cf8078 100644 --- a/IPython/html/static/notebook/less/cell.less +++ b/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; +} diff --git a/IPython/html/static/notebook/less/outputarea.less b/IPython/html/static/notebook/less/outputarea.less index c50f6ad..9d485ff 100644 --- a/IPython/html/static/notebook/less/outputarea.less +++ b/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; } diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 417a908..a26bd1f 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/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;} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index eb4935e..19f14f5 100644 --- a/IPython/html/static/style/style.min.css +++ b/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;}