remove the class name convenience manipulators from widget

they aren't really needed, and this makes the api the same as the rest
of the code in the framework.

examples/boxpanel/index.ts

@@ -14,36 +14,36 @@ import Widget = phosphor.widgets.Widget;
 
 function createContent(text: string): Widget {
   var widget = new Widget();
-  widget.addClass('content');
+  widget.node.classList.add('content');
   widget.node.innerHTML = '<span>' + text + '</span>';
   return widget;
 }
 
 
 function main(): void {
   var ttb = new BoxPanel(Direction.TopToBottom);
-  ttb.addClass('red');
+  ttb.node.classList.add('red');
   ttb.addWidget(createContent('Top'));
   ttb.addWidget(createContent('To'));
   ttb.addWidget(createContent('Bottom'));
   ttb.addStretch(0);
 
   var btt = new BoxPanel(Direction.BottomToTop);
-  btt.addClass('green');
+  btt.node.classList.add('green');
   btt.addWidget(createContent('Top'));
   btt.addWidget(createContent('To'));
   btt.addWidget(createContent('Bottom'));
   btt.addStretch(0);
 
   var ltr = new BoxPanel(Direction.LeftToRight);
-  ltr.addClass('yellow');
+  ltr.node.classList.add('yellow');
   ltr.addWidget(createContent('Left'));
   ltr.addWidget(createContent('To'));
   ltr.addWidget(createContent('Right'));
   ltr.addStretch(0);
 
   var rtl = new BoxPanel(Direction.RightToLeft);
-  rtl.addClass('blue');
+  rtl.node.classList.add('blue');
   rtl.addWidget(createContent('Left'));
   rtl.addWidget(createContent('To'));
   rtl.addWidget(createContent('Right'));

examples/dockarea/index.ts

@@ -18,8 +18,8 @@ class Content extends Widget {
 
   constructor(title: string) {
     super();
-    this.addClass('content');
-    this.addClass(title.toLowerCase());
+    this.node.classList.add('content');
+    this.node.classList.add(title.toLowerCase());
     this._tab = new Tab(title);
     this._tab.closable = true;
   }

examples/nested/index.ts

@@ -19,8 +19,8 @@ class Content extends Widget {
 
   constructor(title: string) {
     super();
-    this.addClass('content');
-    this.addClass(title.toLowerCase());
+    this.node.classList.add('content');
+    this.node.classList.add(title.toLowerCase());
     this._tab = new Tab(title);
   }
 

examples/splitpanel/index.ts

@@ -14,8 +14,8 @@ import Widget = phosphor.widgets.Widget;
 
 function createContent(name: string): Widget {
   var widget = new Widget();
-  widget.addClass('content');
-  widget.addClass(name);
+  widget.node.classList.add('content');
+  widget.node.classList.add(name);
   return widget;
 }
 

examples/tabpanel/index.ts

@@ -17,8 +17,8 @@ class Content extends Widget {
 
   constructor(title: string) {
     super();
-    this.addClass('content');
-    this.addClass(title.toLowerCase());
+    this.node.classList.add('content');
+    this.node.classList.add(title.toLowerCase());
     this._tab = new Tab(title);
   }
 

src/lib/codemirrorwidget.ts

@@ -33,7 +33,7 @@ class CodeMirrorWidget extends Widget {
    */
   constructor(config?: CodeMirror.EditorConfiguration) {
     super();
-    this.addClass(CODE_MIRROR_WIDGET_CLASS);
+    this.node.classList.add(CODE_MIRROR_WIDGET_CLASS);
     this._editor = CodeMirror(this.node, config);
     this.setSizePolicy(SizePolicy.Expanding, SizePolicy.Expanding);
   }

src/shell/shellpanel.ts

@@ -34,7 +34,7 @@ class ShellPanel extends Widget {
    */
   constructor(direction: Direction) {
     super();
-    this.addClass(SHELL_PANEL_CLASS);
+    this.node.classList.add(SHELL_PANEL_CLASS);
     this.layout = new BoxLayout(direction, 0);
     this.setFlag(WidgetFlag.DisallowLayoutChange);
   }

src/shell/shellview.ts

@@ -59,7 +59,7 @@ class ShellView extends Widget implements IShellView {
    */
   constructor() {
     super();
-    this.addClass(SHELL_VIEW_CLASS);
+    this.node.classList.add(SHELL_VIEW_CLASS);
 
     this._menuBar = new MenuBar();
     this._topPanel = new ShellPanel(Direction.TopToBottom);
@@ -69,11 +69,11 @@ class ShellView extends Widget implements IShellView {
     this._centerPanel = new ShellPanel(Direction.TopToBottom);
     this._menuManager = new MenuManager(this._menuBar);
 
-    this._topPanel.addClass(TOP_CLASS);
-    this._leftPanel.addClass(LEFT_CLASS);
-    this._rightPanel.addClass(RIGHT_CLASS);
-    this._bottomPanel.addClass(BOTTOM_CLASS);
-    this._centerPanel.addClass(CENTER_CLASS);
+    this._topPanel.node.classList.add(TOP_CLASS);
+    this._leftPanel.node.classList.add(LEFT_CLASS);
+    this._rightPanel.node.classList.add(RIGHT_CLASS);
+    this._bottomPanel.node.classList.add(BOTTOM_CLASS);
+    this._centerPanel.node.classList.add(CENTER_CLASS);
 
     this._menuBar.hide();
     this._topPanel.verticalSizePolicy = SizePolicy.Fixed;

src/widgets/boxpanel.ts

@@ -23,7 +23,7 @@ class BoxPanel extends Panel {
    */
   constructor(direction = Direction.TopToBottom, spacing = 8) {
     super(new BoxLayout(direction, spacing));
-    this.addClass(BOX_PANEL_CLASS);
+    this.node.classList.add(BOX_PANEL_CLASS);
   }
 
   /**

src/widgets/dockarea.ts

@@ -51,7 +51,7 @@ class DockArea extends Widget {
    */
   constructor() {
     super();
-    this.addClass(DOCK_AREA_CLASS);
+    this.node.classList.add(DOCK_AREA_CLASS);
     this._root = this._createSplitter(Orientation.Horizontal);
 
     var layout = new BoxLayout(Direction.TopToBottom, 0);
@@ -904,7 +904,7 @@ class DockPanel extends Widget {
    */
   constructor() {
     super();
-    this.addClass(DOCK_PANEL_CLASS);
+    this.node.classList.add(DOCK_PANEL_CLASS);
     this._tabBar = new TabBar();
     this._stackedPanel = new StackedPanel();
     this._overlayNode = this.createOverlay();
@@ -1069,7 +1069,7 @@ class DockSplitter extends SplitPanel {
    */
   constructor(orientation: Orientation) {
     super(orientation);
-    this.addClass(DOCK_SPLITTER_CLASS);
+    this.node.classList.add(DOCK_SPLITTER_CLASS);
   }
 }
 

src/widgets/menubar.ts

@@ -86,7 +86,7 @@ class MenuBar extends Widget {
    */
   constructor(items?: MenuItem[]) {
     super();
-    this.addClass(MENU_BAR_CLASS);
+    this.node.classList.add(MENU_BAR_CLASS);
     this.verticalSizePolicy = SizePolicy.Fixed;
     if (items) items.forEach(it => this.addItem(it));
   }

src/widgets/splitpanel.ts

@@ -29,7 +29,7 @@ class SplitPanel extends Panel {
    */
   constructor(orientation = Orientation.Horizontal) {
     super(new SplitLayout(orientation));
-    this.addClass(SPLIT_PANEL_CLASS);
+    this.node.classList.add(SPLIT_PANEL_CLASS);
   }
 
   /**

src/widgets/stackedpanel.ts

@@ -33,7 +33,7 @@ class StackedPanel extends Panel {
    */
   constructor() {
     super(new StackedLayout());
-    this.addClass(STACKED_PANEL_CLASS);
+    this.node.classList.add(STACKED_PANEL_CLASS);
     var layout = <StackedLayout>this.layout;
     layout.widgetRemoved.connect(this._sl_widgetRemoved, this);
   }

src/widgets/tabbar.ts

@@ -171,7 +171,7 @@ class TabBar extends Widget {
    */
   constructor(options?: ITabBarOptions) {
     super();
-    this.addClass(TAB_BAR_CLASS);
+    this.node.classList.add(TAB_BAR_CLASS);
     this.verticalSizePolicy = SizePolicy.Fixed;
     if (options) this._initFrom(options);
   }

src/widgets/tabpanel.ts

@@ -37,7 +37,7 @@ class TabPanel extends Widget {
    */
   constructor() {
     super();
-    this.addClass(TAB_PANEL_CLASS);
+    this.node.classList.add(TAB_PANEL_CLASS);
     this.layout = new BoxLayout(Direction.TopToBottom, 0);
     this.setFlag(WidgetFlag.DisallowLayoutChange);
 

src/widgets/widget.ts

@@ -61,7 +61,7 @@ class Widget implements IMessageHandler, IDisposable {
    */
   constructor() {
     this._node = this.createNode();
-    this.addClass(WIDGET_CLASS);
+    this._node.classList.add(WIDGET_CLASS);
   }
 
   /**
@@ -342,27 +342,6 @@ class Widget implements IMessageHandler, IDisposable {
     return this._children[index];
   }
 
-  /**
-   * Test whether the widget's DOM node has the given class name.
-   */
-  hasClass(name: string): boolean {
-    return this._node.classList.contains(name);
-  }
-
-  /**
-   * Add a class name to the widget's DOM node.
-   */
-  addClass(name: string): void {
-    this._node.classList.add(name);
-  }
-
-  /**
-   * Remove a class name from the widget's DOM node.
-   */
-  removeClass(name: string): void {
-    this._node.classList.remove(name);
-  }
-
   /**
    * Test whether the given widget flag is set.
    */
@@ -396,11 +375,11 @@ class Widget implements IMessageHandler, IDisposable {
     var parent = this._parent;
     if (this.isAttached && (!parent || parent.isVisible)) {
       sendMessage(this, new Message('before-show'));
-      this.removeClass(HIDDEN_CLASS);
+      this._node.classList.remove(HIDDEN_CLASS);
       this.clearFlag(WidgetFlag.IsHidden);
       sendMessage(this, new Message('after-show'));
     } else {
-      this.removeClass(HIDDEN_CLASS);
+      this._node.classList.remove(HIDDEN_CLASS);
       this.clearFlag(WidgetFlag.IsHidden);
     }
     if (parent) {
@@ -421,11 +400,11 @@ class Widget implements IMessageHandler, IDisposable {
     var parent = this._parent;
     if (this.isAttached && (!parent || parent.isVisible)) {
       sendMessage(this, new Message('before-hide'));
-      this.addClass(HIDDEN_CLASS);
+      this._node.classList.add(HIDDEN_CLASS);
       this.setFlag(WidgetFlag.IsHidden);
       sendMessage(this, new Message('after-hide'));
     } else {
-      this.addClass(HIDDEN_CLASS);
+      this._node.classList.add(HIDDEN_CLASS);
       this.setFlag(WidgetFlag.IsHidden);
     }
     if (parent) {