Clean up rendering and add styling

packages/docregistry/package.json

@@ -6,7 +6,8 @@
   "types": "lib/index.d.ts",
   "files": [
     "lib/*.d.ts",
-    "lib/*.js"
+    "lib/*.js",
+    "style/index.css"
   ],
   "directories": {
     "lib": "lib/"

packages/docregistry/src/default.ts

@@ -412,6 +412,7 @@ class MimeRenderer extends Widget {
    */
   constructor(options: MimeRenderer.IOptions) {
     super();
+    this.addClass('jp-MimeRenderer');
     let layout = this.layout = new PanelLayout();
     let toolbar = new Widget();
     toolbar.addClass('jp-Toolbar');
@@ -425,12 +426,16 @@ class MimeRenderer extends Widget {
 
     context.pathChanged.connect(this._onPathChanged, this);
 
-    // Throttle the rendering rate of the widget.
-    this._monitor = new ActivityMonitor({
-      signal: context.model.contentChanged,
-      timeout: options.renderTimeout
+    this._context.ready.then(() => {
+      this._render();
+
+      // Throttle the rendering rate of the widget.
+      this._monitor = new ActivityMonitor({
+        signal: context.model.contentChanged,
+        timeout: RENDER_TIMEOUT
+      });
+      this._monitor.activityStopped.connect(this.update, this);
     });
-    this._monitor.activityStopped.connect(this.update, this);
   }
 
   /**
@@ -470,6 +475,13 @@ class MimeRenderer extends Widget {
    * Handle an `update-request` message to the widget.
    */
   protected onUpdateRequest(msg: Message): void {
+    this._render();
+  }
+
+  /**
+   * Render the mime content.
+   */
+  private _render(): void {
     let context = this._context;
     let model = context.model;
     let layout = this.layout as PanelLayout;

packages/docregistry/src/index.ts

@@ -4,3 +4,5 @@
 export * from './context';
 export * from './default';
 export * from './registry';
+
+import '../style/index.css';

packages/docregistry/style/index.css

@@ -0,0 +1,23 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-MimeRenderer {
+  border-top: var(--jp-border-width) solid var(--jp-border-color2);
+  outline: none;
+  overflow: hidden;
+  margin-top: -1px;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.jp-MimeRenderer .jp-Toolbar {
+    display: block;
+    height: var(--jp-toolbar-micro-height);
+    background: var(--jp-toolbar-background);
+    border-bottom: 1px solid var(--jp-toolbar-border-color);
+    box-shadow: var(--jp-toolbar-box-shadow);
+    z-index: 1;
+}