Get file browser to render. (broken CSS)

src/filebrowser/listing.ts

@@ -183,28 +183,15 @@ const FACTORY_MIME = 'application/x-phosphor-widget-factory';
  */
 export
 class DirListing extends Widget {
-  /**
-   * Create the DOM node for a dir listing.
-   */
-  static createNode(): HTMLElement {
-    let node = document.createElement('div');
-    let header = document.createElement('div');
-    let content = document.createElement('ul');
-    content.className = CONTENT_CLASS;
-    header.className = HEADER_CLASS;
-    node.appendChild(header);
-    node.appendChild(content);
-    node.tabIndex = 1;
-    return node;
-  }
-
   /**
    * Construct a new file browser directory listing widget.
    *
    * @param model - The file browser view model.
    */
   constructor(options: DirListing.IOptions) {
-    super();
+    super({
+      node: (options.renderer || DirListing.defaultRenderer).createNode()
+    });
     this.addClass(DIR_LISTING_CLASS);
     this._model = options.model;
     this._model.refreshed.connect(this._onModelRefreshed, this);
@@ -215,6 +202,8 @@ class DirListing extends Widget {
     this._opener = options.opener;
     this._renderer = options.renderer || DirListing.defaultRenderer;
     let headerNode = utils.findElement(this.node, HEADER_CLASS);
+    console.log(1, this.node);
+    console.log(2, headerNode);
     this._renderer.populateHeaderNode(headerNode);
   }
 
@@ -1325,6 +1314,11 @@ namespace DirListing {
    */
   export
   interface IRenderer {
+    /**
+     * Create the DOM node for a dir listing.
+     */
+    createNode(): HTMLElement;
+
     /**
      * Populate and empty header node for a dir listing.
      *
@@ -1385,6 +1379,21 @@ namespace DirListing {
    */
   export
   class Renderer implements IRenderer {
+    /**
+     * Create the DOM node for a dir listing.
+     */
+    createNode(): HTMLElement {
+      let node = document.createElement('div');
+      let header = document.createElement('div');
+      let content = document.createElement('ul');
+      content.className = CONTENT_CLASS;
+      header.className = HEADER_CLASS;
+      node.appendChild(header);
+      node.appendChild(content);
+      node.tabIndex = 1;
+      return node;
+    }
+
     /**
      * Populate and empty header node for a dir listing.
      *

src/filebrowser/plugin.ts

@@ -138,7 +138,8 @@ const fileBrowserProvider: JupyterLabPlugin<IPathTracker> = {
   id: 'jupyter.services.file-browser',
   provides: IPathTracker,
   requires: [IServiceManager, IDocumentRegistry, IMainMenu],
-  activate: activateFileBrowser
+  activate: activateFileBrowser,
+  autoStart: true
 };
 
 
@@ -397,10 +398,10 @@ function activateFileBrowser(app: JupyterLab, manager: IServiceManager, registry
 //     }
 //   ]);
 
-//   fbWidget.title.text = 'Files';
-//   fbWidget.id = 'file-browser';
-//   app.shell.addToLeftArea(fbWidget, { rank: 40 });
-//   showBrowser();
+  fbWidget.title.label = 'Files';
+  fbWidget.id = 'file-browser';
+  app.shell.addToLeftArea(fbWidget, { rank: 40 });
+  showBrowser();
 
 //   // Add top menu.
 //   let newSubMenu = new Menu ([
@@ -464,23 +465,23 @@ function activateFileBrowser(app: JupyterLab, manager: IServiceManager, registry
 //   });
 //   mainMenu.addItem(fileMenu, {rank: 1});
 
-//   function showBrowser(): void {
-//     app.shell.activateLeft(fbWidget.id);
-//   }
+  function showBrowser(): void {
+    app.shell.activateLeft(fbWidget.id);
+  }
 
-//   function hideBrowser(): void {
-//     if (!fbWidget.isHidden) {
-//       app.shell.collapseLeft();
-//     }
-//   }
+  function hideBrowser(): void {
+    if (!fbWidget.isHidden) {
+      app.shell.collapseLeft();
+    }
+  }
 
-//   function toggleBrowser(): void {
-//     if (fbWidget.isHidden) {
-//       showBrowser();
-//     } else {
-//       hideBrowser();
-//     }
-//   }
+  function toggleBrowser(): void {
+    if (fbWidget.isHidden) {
+      showBrowser();
+    } else {
+      hideBrowser();
+    }
+  }
 
   return Private.pathTracker;
 }