Support "active" tabbars in main and bottom area

Author: msujew

packages/core/src/browser/common-frontend-contribution.ts

@@ -1474,10 +1474,6 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'tab.activeBorderTop',
-                defaults: {
-                    dark: 'focusBorder',
-                    light: 'focusBorder'
-                },
                 description: 'Border to the top of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.'
             },
             {

packages/core/src/browser/shell/application-shell.ts

@@ -690,6 +690,7 @@ export class ApplicationShell extends Widget {
                 this.collapseBottomPanel();
             }
             const widgets = toArray(this.bottomPanel.widgets());
+            this.bottomPanel.markActiveTabBar(widgets[0]?.title);
             if (bottomPanel.pinned && bottomPanel.pinned.length === widgets.length) {
                 widgets.forEach((a, i) => {
                     if (bottomPanel.pinned![i]) {
@@ -706,6 +707,9 @@ export class ApplicationShell extends Widget {
             this.mainPanel.restoreLayout(mainPanel);
             this.registerWithFocusTracker(mainPanel.main);
             const widgets = toArray(this.mainPanel.widgets());
+            // We don't store information about the last active tabbar
+            // So we simply mark the first as being active
+            this.mainPanel.markActiveTabBar(widgets[0]?.title);
             if (mainPanelPinned && mainPanelPinned.length === widgets.length) {
                 widgets.forEach((a, i) => {
                     if (mainPanelPinned[i]) {

packages/core/src/browser/shell/theia-dock-panel.ts

@@ -24,6 +24,7 @@ import { inject } from 'inversify';
 import { Emitter, environment } from '../../common';
 
 export const MAXIMIZED_CLASS = 'theia-maximized';
+export const ACTIVE_TABBAR_CLASS = 'theia-tabBar-active';
 const VISIBLE_MENU_MAXIMIZED_CLASS = 'theia-visible-menu-maximized';
 
 export const MAIN_AREA_ID = 'theia-main-content-panel';
@@ -106,6 +107,7 @@ export class TheiaDockPanel extends DockPanel {
     markAsCurrent(title: Title<Widget> | undefined): void {
         this.toDisposeOnMarkAsCurrent.dispose();
         this._currentTitle = title;
+        this.markActiveTabBar(title);
         if (title) {
             const resetCurrent = () => this.markAsCurrent(undefined);
             title.owner.disposed.connect(resetCurrent);
@@ -115,17 +117,31 @@ export class TheiaDockPanel extends DockPanel {
         }
     }
 
+    markActiveTabBar(title?: Title<Widget>): void {
+        const tabBars = toArray(this.tabBars());
+        tabBars.forEach(tabBar => tabBar.removeClass(ACTIVE_TABBAR_CLASS));
+        const activeTabBar = title && this.findTabBar(title);
+        if (activeTabBar) {
+            activeTabBar.addClass(ACTIVE_TABBAR_CLASS);
+        } else if (tabBars.length > 0) {
+            // At least one tabbar needs to be active
+            tabBars[0].addClass(ACTIVE_TABBAR_CLASS);
+        }
+    }
+
     override addWidget(widget: Widget, options?: DockPanel.IAddOptions): void {
         if (this.mode === 'single-document' && widget.parent === this) {
             return;
         }
         super.addWidget(widget, options);
         this.widgetAdded.emit(widget);
+        this.markActiveTabBar(widget.title);
     }
 
     override activateWidget(widget: Widget): void {
         super.activateWidget(widget);
         this.widgetActivated.emit(widget);
+        this.markActiveTabBar(widget.title);
     }
 
     protected override onChildRemoved(msg: Widget.ChildMessage): void {

packages/core/src/browser/style/sidepanel.css

@@ -285,6 +285,14 @@
     border-top: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder);
 }
 
+#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .theia-tab-icon-label {
+    color: var(--theia-tab-unfocusedInactiveForeground);
+}
+
+#theia-bottom-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .theia-tab-icon-label {
+    color: var(--theia-tab-unfocusedActiveForeground);
+}
+
 /*-----------------------------------------------------------------------------
 | Hidden tab bars used for rendering vertical side bars
 |----------------------------------------------------------------------------*/

packages/core/src/browser/style/tabs.css

@@ -91,6 +91,14 @@
     border-top: 1px solid var(--theia-tab-activeBorderTop);
 }
 
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab .p-TabBar-tabLabel {
+    color: var(--theia-tab-unfocusedInactiveForeground);
+}
+
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current .p-TabBar-tabLabel {
+    color: var(--theia-tab-unfocusedActiveForeground);
+}
+
 .p-TabBar.theia-app-centers {
     background: var(--theia-editorGroupHeader-tabsBackground);
 }