From 2ddc59c1a767eb68deee9bbd9efe0060c6cadd02 Mon Sep 17 00:00:00 2001
From: Itay Dafna <i.b.dafna@gmail.com>
Date: Wed, 5 Jun 2019 15:52:45 +0100
Subject: [PATCH] added default text to inspector module

---
 packages/inspector/src/inspector.ts | 33 +++++++++++++++++++++--------
 packages/inspector/style/index.css  |  8 +++++++
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/inspector/src/inspector.ts b/packages/inspector/src/inspector.ts
index 37008f9099ba..08af1f85e971 100644
--- a/packages/inspector/src/inspector.ts
+++ b/packages/inspector/src/inspector.ts
@@ -17,6 +17,11 @@ const PANEL_CLASS = 'jp-Inspector';
  */
 const CONTENT_CLASS = 'jp-Inspector-content';
 
+/**
+ * The class name added to default inspector content.
+ */
+const DEFAULT_CONTENT_CLASS = 'jp-Inspector-default-content';
+
 /**
  * A panel which contains a set of inspectors.
  */
@@ -28,6 +33,7 @@ export class InspectorPanel extends Panel
   constructor() {
     super();
     this.addClass(PANEL_CLASS);
+    (this.layout as PanelLayout).addWidget(this._content);
   }
 
   /**
@@ -92,17 +98,14 @@ export class InspectorPanel extends Panel
     const { content } = args;
 
     // Update the content of the inspector widget.
-    if (content === this._content) {
+    if (!content || content === this._content) {
       return;
     }
-    if (this._content) {
-      this._content.dispose();
-    }
+    this._content.dispose();
+
     this._content = content;
-    if (content) {
-      content.addClass(CONTENT_CLASS);
-      (this.layout as PanelLayout).addWidget(content);
-    }
+    content.addClass(CONTENT_CLASS);
+    (this.layout as PanelLayout).addWidget(content);
   }
 
   /**
@@ -112,6 +115,18 @@ export class InspectorPanel extends Panel
     this.source = null;
   }
 
-  private _content: Widget | null = null;
+  private _content: Widget = Private.defaultContent();
   private _source: IInspector.IInspectable | null = null;
 }
+
+namespace Private {
+  export function defaultContent() {
+    const defaultContent = new Widget();
+    defaultContent.node.innerHTML =
+      '<p>Click on a function to see documentation.</p>';
+    defaultContent.addClass(CONTENT_CLASS);
+    defaultContent.addClass(DEFAULT_CONTENT_CLASS);
+
+    return defaultContent;
+  }
+}
diff --git a/packages/inspector/style/index.css b/packages/inspector/style/index.css
index 3de63d6fabe1..23845d44dc48 100644
--- a/packages/inspector/style/index.css
+++ b/packages/inspector/style/index.css
@@ -46,3 +46,11 @@
   background-image: var(--jp-icon-inspector);
   transform: scaleX(-1);
 }
+
+.jp-Inspector-default-content {
+  align-items: center;
+  justify-content: center;
+  font-size: xx-large;
+  font-style: italic;
+  color: darkgray;
+}