Add CSS class to CodeCell when no outputs are present.

Uses a new signal on OutputArea.

packages/cells/src/widget.ts

@@ -135,6 +135,8 @@ const RAW_CELL_CLASS = 'jp-RawCell';
  */
 const RENDERED_CLASS = 'jp-mod-rendered';
 
+const NO_OUTPUTS_CLASS = 'jp-mod-noOutputs';
+
 /**
  * The text applied to an empty markdown cell.
  */
@@ -484,6 +486,13 @@ class CodeCell extends Cell {
       contentFactory: contentFactory
     });
     output.addClass(CELL_OUTPUT_AREA_CLASS);
+    // Set a CSS if there are no outputs, and connect a signal for future
+    // changes to the number of outputs. This is for conditional styling
+    // if there are no outputs.
+    if (model.outputs.length===0) {
+      this.addClass(NO_OUTPUTS_CLASS);
+    }
+    output.outputLengthChanged.connect(this._outputLengthHandler, this);
     outputWrapper.addWidget(outputCollapser);
     outputWrapper.addWidget(output);
     (this.layout as PanelLayout).insertWidget(2, outputWrapper);
@@ -523,6 +532,7 @@ class CodeCell extends Cell {
     if (this.isDisposed) {
       return;
     }
+    this._output.outputLengthChanged.disconnect(this._outputLengthHandler, this);
     this._rendermime = null;
     this._output = null;
     this._outputWrapper = null;
@@ -596,6 +606,14 @@ class CodeCell extends Cell {
     }
   }
 
+  /**
+   * Handle changes in the number of outputs in the output area.
+   */
+  private _outputLengthHandler(sender: OutputArea, args: number) {
+    let force = args === 0 ? true : false;
+    this.toggleClass(NO_OUTPUTS_CLASS, force);
+  }
+
   private _rendermime: RenderMime = null;
   private _outputCollapsed = false;
   private _outputWrapper: Widget = null;

packages/outputarea/src/widget.ts

@@ -1,14 +1,14 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import {
-  Kernel, KernelMessage
-} from '@jupyterlab/services';
-
 import {
   Message
 } from '@phosphor/messaging';
 
+import {
+  Signal
+} from '@phosphor/signaling';
+
 import {
   Panel, PanelLayout
 } from '@phosphor/widgets';
@@ -29,6 +29,10 @@ import {
   IOutputModel, RenderMime
 } from '@jupyterlab/rendermime';
 
+import {
+  Kernel, KernelMessage
+} from '@jupyterlab/services';
+
 import {
   IOutputAreaModel
 } from './model';
@@ -147,6 +151,15 @@ class OutputArea extends Widget {
     return (this.layout as PanelLayout).widgets;
   }
 
+  /**
+   * A public signal used to indicate the number of outputs has changed.
+   * 
+   * #### Notes
+   * This is useful for parents who want to apply styling based on the number
+   * of outputs. Emits the current number of outputs.
+   */
+  readonly outputLengthChanged = new Signal<this, number>(this);
+
   /**
    * Execute code on a client session and handle response messages.
    */
@@ -172,6 +185,7 @@ class OutputArea extends Widget {
     // Make sure there were no input widgets.
     if (this.widgets.length) {
       this._clear();
+      this.outputLengthChanged.emit(this.model.length);
     }
 
     return new Promise<KernelMessage.IExecuteReplyMsg>((resolve, reject) => {
@@ -201,15 +215,18 @@ class OutputArea extends Widget {
     switch (args.type) {
     case 'add':
       this._insertOutput(args.newIndex, args.newValues[0]);
+      this.outputLengthChanged.emit(this.model.length);
       break;
     case 'remove':
       // Only clear is supported by the model.
       if (this.widgets.length) {
         this._clear();
+        this.outputLengthChanged.emit(this.model.length);
       }
       break;
     case 'set':
       this._setOutput(args.newIndex, args.newValues[0]);
+      this.outputLengthChanged.emit(this.model.length);
       break;
     default:
       break;