Align tabbar styling to vscode (#10908)

eclipse-theia · Apr 11, 2022 · a9c970d · a9c970d
1 parent b8fd666
commit a9c970d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 61 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/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.'
             },
             {
@@ -1488,6 +1484,10 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'tab.hoverBackground',
+                defaults: {
+                    dark: 'tab.inactiveBackground',
+                    light: 'tab.inactiveBackground'
+                },
                 description: 'Tab background color when hovering. 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.'
             },
             {

diff --git a/packages/core/src/browser/shell/application-shell.ts b/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]) {

diff --git a/packages/core/src/browser/shell/theia-dock-panel.ts b/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 {

diff --git a/packages/core/src/browser/style/sidepanel.css b/packages/core/src/browser/style/sidepanel.css
@@ -90,19 +90,11 @@
   border-top-color: transparent;
 }
 
-.p-TabBar.theia-app-left .p-TabBar-tab.p-mod-current.theia-mod-active {
-    border-left: var(--theia-panel-border-width) solid var(--theia-focusBorder);
-}
-
 .p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current {
     border-right: var(--theia-panel-border-width) solid var(--theia-activityBar-activeBorder);
     border-top-color: transparent;
 }
 
-.p-TabBar.theia-app-right .p-TabBar-tab.p-mod-current.theia-mod-active {
-    border-right: var(--theia-panel-border-width) solid var(--theia-focusBorder);
-}
-
 .p-TabBar.theia-app-sides .p-TabBar-tabLabel,
 .p-TabBar.theia-app-sides .p-TabBar-tabCloseIcon {
   display: none;
@@ -285,16 +277,19 @@
 
 #theia-bottom-content-panel .p-TabBar-tab:not(.p-mod-current) {
     color: var(--theia-panelTitle-inactiveForeground);
-    border-top: var(--theia-border-width) solid  var(--theia-panel-background);
 }
 
 #theia-bottom-content-panel .p-TabBar-tab.p-mod-current {
     color: var(--theia-panelTitle-activeForeground);
-    border-top: var(--theia-border-width) solid var(--theia-panelTitle-activeBorder);
+    box-shadow: 0 var(--theia-border-width) 0 var(--theia-panelTitle-activeBorder) inset;
+}
+
+#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-tab.p-mod-current.theia-mod-active {
-    border-top-color: var(--theia-focusBorder);
+#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);
 }
 
 /*-----------------------------------------------------------------------------

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -80,65 +80,34 @@
 
 #theia-main-content-panel .p-TabBar .p-TabBar-tab {
     border-right: 1px solid var(--theia-tab-border);
+    background: var(--theia-tab-inactiveBackground);
+    color: var(--theia-tab-inactiveForeground);
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover.theia-mod-active {
-    background: var(--theia-tab-hoverBackground) !important;
-    box-shadow: var(--theia-tab-hoverBorder) 0 -1px inset !important;
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover:not(.theia-mod-active) {
-    background: var(--theia-tab-unfocusedHoverBackground) !important;
-    box-shadow: var(--theia-tab-unfocusedHoverBorder) 0 -1px inset !important;
+#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
+    background: var(--theia-tab-hoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-hoverBorder) inset;
 }
 
-/* active tab in an active group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active.theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-activeModifiedBorder);
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
+    background: var(--theia-tab-unfocusedHoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-unfocusedHoverBorder) inset;
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current.theia-mod-active {
+#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
     background: var(--theia-tab-activeBackground);
     color: var(--theia-tab-activeForeground);
-    border-top: 1px solid var(--theia-tab-activeBorderTop);
-    border-bottom: 1px solid var(--theia-tab-activeBorder);
-}
-
-/* inactive tab in an active group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active.theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-inactiveModifiedBorder);
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current).theia-mod-active {
-    background: var(--theia-tab-inactiveBackground);
-    color: var(--theia-tab-inactiveForeground);
+    box-shadow: 0 1px 0 var(--theia-tab-activeBorderTop) inset, 0 -1px 0 var(--theia-tab-activeBorder) inset;
 }
 
-/* active tab in an unfocused group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active).theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-unfocusedActiveModifiedBorder);
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab {
+    color: var(--theia-tab-unfocusedInactiveForeground);
 }
 
-#theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current:not(.theia-mod-active) {
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.p-mod-current {
     background: var(--theia-tab-unfocusedActiveBackground);
     color: var(--theia-tab-unfocusedActiveForeground);
-    border-top: 1px solid var(--theia-tab-unfocusedActiveBorderTop);
-    border-bottom: 1px solid var(--theia-tab-unfocusedActiveBorder);
-}
-
-/* inactive tab in an unfocused group */
-body.theia-editor-highlightModifiedTabs
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active).theia-mod-dirty {
-    border-top: 1px solid var(--theia-tab-unfocusedInactiveModifiedBorder);
-}
-
-#theia-main-content-panel .p-TabBar .p-TabBar-tab:not(.p-mod-current):not(.theia-mod-active) {
-    background: var(--theia-tab-inactiveBackground);
-    color: var(--theia-tab-inactiveForeground);
-    border-top: 1px solid var(--theia-tab-inactiveBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-unfocusedActiveBorderTop) inset, 0 -1px 0 var(--theia-tab-unfocusedActiveBorder) inset;
 }
 
 .p-TabBar.theia-app-centers {