Clean up CSS classes

example/index.css

@@ -13,18 +13,18 @@
 }
 
 
-.jp-MarkdownCell {
+.jp-MarkdownCellWidget {
   outline: 0;
 }
 
 
-.jp-OutputArea pre {
+.jp-OutputAreaWidget pre {
   background: #ffffff;
   border: none;
 }
 
 
-.jp-Cell.jp-selected-cell {
+.jp-CellWidget.jp-mod-selected {
   border-color: #66BB6A;
   border-left-width: 1px;
   padding-left: 10px;
@@ -32,7 +32,7 @@
 }
 
 
-.jp-Cell {
+.jp-CellWidget {
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
@@ -43,7 +43,7 @@
 }
 
 
-.jp-MarkdownCell {
+.jp-MarkdownCellWidget {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 

example/src/index.ts

@@ -32,7 +32,7 @@ let NOTEBOOK = 'test.ipynb';
 
 function bindings(nbModel: NotebookModel) {
   let bindings: IKeyBinding[] = [{
-    selector: '.jp-nbCell',
+    selector: '.jp-NotebookWidget-cell',
     sequence: ["Shift Enter"],
     handler: () => {
       nbModel.runSelectedCell();

src/notebook/cells/widget.ts

@@ -35,6 +35,7 @@ export
 abstract class CellWidget extends Widget {
   constructor() {
     super();
+    this.addClass('jp-CellWidget');
     // we make the cell focusable by setting the tabIndex
     this.node.tabIndex = -1;
     this.layout = new PanelLayout();
@@ -56,8 +57,7 @@ class CodeCellWidget extends CellWidget {
    */
   constructor(model: ICodeCellModel) {
     super();
-    this.addClass('jp-Cell');
-    this.addClass('jp-CodeCell');
+    this.addClass('jp-CodeCellWidget');
     this._model = model;
     this.input = new InputAreaWidget(model.input);
     this.output = new OutputAreaWidget(model.output);
@@ -123,8 +123,7 @@ class MarkdownCellWidget extends CellWidget {
    */
   constructor(model: IMarkdownCellModel) {
     super();
-    this.addClass('jp-Cell');
-    this.addClass('jp-MarkdownCell');
+    this.addClass('jp-MarkdownCellWidget');
 
     this._model = model;
     // Insist on the Github-flavored markdown mode

src/notebook/editor/widget.ts

@@ -32,7 +32,7 @@ import {
 /**
  * The class name added to CodeMirrorWidget instances.
  */
-const FILE_BROWSER_CLASS = 'jp-CodeMirrorWidget';
+const CODEMIRROR_CLASS = 'jp-CodeMirrorWidget';
 
 
 /**
@@ -139,7 +139,7 @@ class CodeMirrorWidget extends Widget {
    */
   constructor(model: IEditorModel) {
     super();
-    this.addClass(FILE_BROWSER_CLASS);
+    this.addClass(CODEMIRROR_CLASS);
     this._editor = CodeMirror(this.node);
     this.model = model;
     this.model.selected.connect(() => {

src/notebook/notebook/widget.ts

@@ -36,6 +36,23 @@ import {
   DisposableDelegate, IDisposable
 } from 'phosphor-disposable';
 
+
+/**
+ * The class name added to notebook widgets.
+ */
+const NB_CLASS = 'jp-NotebookWidget';
+
+/**
+ * The class name added to notebook widget cells.
+ */
+const NB_CELL_CLASS = 'jp-NotebookWidget-cell';
+
+/**
+ * The class name added to notebook selected cells.
+ */
+const NB_SELECTED_CLASS = 'jp-mod-selected';
+
+
 /**
  * A widget for a notebook.
  */
@@ -47,7 +64,7 @@ class NotebookWidget extends Panel {
    */
   constructor(model: INotebookModel) {
     super();
-    this.addClass('jp-Notebook');
+    this.addClass(NB_CLASS);
     this._model = model;
 
     this._listdispose = follow<ICellModel>(model.cells, this, (c: ICellModel) => {
@@ -55,17 +72,16 @@ class NotebookWidget extends Panel {
       switch(c.type) {
       case CellType.Code:
         w = new CodeCellWidget(c as CodeCellModel);
-        w.addClass('jp-nbCell');
         break;
       case CellType.Markdown:
         w = new MarkdownCellWidget(c as MarkdownCellModel);
-        w.addClass('jp-nbCell');
         break;
       default:
         // if there are any issues, just return a blank placeholder
         // widget so the lists stay in sync
         w = new Widget();
       }
+      w.addClass(NB_CELL_CLASS);
       return w;
     })
     this.updateSelectedCell(model.selectedCellIndex);
@@ -101,7 +117,7 @@ class NotebookWidget extends Panel {
     // Trace up the DOM hierarchy to find the root cell node
     // then find the corresponding child and select it
     while (node && node !== this.node) {
-      if (node.classList.contains('jp-nbCell')) {
+      if (node.classList.contains(NB_CELL_CLASS)) {
         for (let i=0; i<this.childCount(); i++) {
           if (this.childAt(i).node === node) {
             return i;
@@ -127,11 +143,11 @@ class NotebookWidget extends Panel {
    */
   updateSelectedCell(newIndex: number, oldIndex?: number) {
     if (oldIndex !== void 0) {
-      this.childAt(oldIndex).removeClass('jp-selected-cell');
+      this.childAt(oldIndex).removeClass(NB_SELECTED_CLASS);
     }
     if (newIndex !== void 0) {
       let newCell = this.childAt(newIndex);
-      newCell.addClass('jp-selected-cell');
+      newCell.addClass(NB_SELECTED_CLASS);
       scrollIfNeeded(this.node, newCell.node);
     }
   }

src/notebook/output-area/widget.ts

@@ -84,7 +84,7 @@ class OutputAreaWidget extends Panel {
    */
   constructor(model: IOutputAreaModel) {
     super();
-    this.addClass('jp-OutputArea');
+    this.addClass('jp-OutputAreaWidget');
     this._model = model;
     model.stateChanged.connect(this.modelStateChanged, this);
     this._listdispose = follow<OutputModel>(model.outputs, this, (out) => {