Handle current widget in application

src/application/shell.ts

@@ -16,6 +16,10 @@ import {
   DockPanel
 } from 'phosphor/lib/ui/dockpanel';
 
+import {
+  FocusTracker
+} from 'phosphor/lib/ui/focustracker';
+
 import {
   Panel
 } from 'phosphor/lib/ui/panel';
@@ -51,6 +55,11 @@ const APPLICATION_SHELL_CLASS = 'jp-ApplicationShell';
  */
 const SIDEBAR_CLASS = 'jp-SideBar';
 
+/**
+ * The class name added to the current widget's title.
+ */
+const CURRENT_CLASS = 'jp-mod-current';
+
 
 /**
  * The options for adding a widget to a side area of the shell.
@@ -122,6 +131,18 @@ class ApplicationShell extends Panel {
 
     this.addWidget(topPanel);
     this.addWidget(hboxPanel);
+
+    this._tracker = new FocusTracker<Widget>();
+    this._tracker.currentChanged.connect((sender, args) => {
+      if (args.newValue) {
+        args.newValue.title.className += ` ${CURRENT_CLASS}`;
+      }
+      if (args.oldValue) {
+        args.oldValue.deactivate();
+        let title = args.oldValue.title;
+        title.className = title.className.replace(CURRENT_CLASS, '');
+      }
+    });
   }
 
   /**
@@ -170,6 +191,7 @@ class ApplicationShell extends Panel {
       return;
     }
     this._dockPanel.addWidget(widget, { mode: 'tab-after' });
+    this._tracker.add(widget);
   }
 
   /**
@@ -217,6 +239,7 @@ class ApplicationShell extends Panel {
   private _hsplitPanel: SplitPanel;
   private _leftHandler: SideBarHandler;
   private _rightHandler: SideBarHandler;
+  private _tracker: FocusTracker<Widget>;
 }
 
 

src/default-theme/index.css

@@ -50,6 +50,11 @@ body {
 }
 
 
+.p-TabBar-tab.jp-mod-current {
+  border-top: 1px solid #2196F3;
+}
+
+
 .jp-Document {
   min-width: 120px;
   min-height: 120px;
@@ -177,7 +182,6 @@ body {
   min-height: 24px;
   max-height: 24px;
   background: #FFFFFF;
-  border-top: 1px solid #2196F3;
 }