editor: restore highlightModifiedTabs (#12367)

Problematic implementation of `box-shadow` parameter. Changed to `border` parameter. Suggesting to change to use of the `border` parameter when `box-shadow` specific properties are not necessary. Signed-off-by: FernandoAscencio <[email protected]>
eclipse-theia · Apr 4, 2023 · be8d785 · be8d785
1 parent 943dd91
commit be8d785
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/packages/core/src/browser/common-styling-participants.ts b/packages/core/src/browser/common-styling-participants.ts
@@ -194,15 +194,49 @@ export class TabbarStylingParticipant implements StylingParticipant {
             `);
         }
         const tabActiveBackground = theme.getColor('tab.activeBackground');
-        const tabActiveBorderTop = theme.getColor('tab.activeBorderTop') || (highContrast && contrastBorder) || 'transparent';
+        const tabActiveBorderTop = theme.getColor('tab.activeBorderTop');
+        const tabUnfocusedActiveBorderTop = theme.getColor('tab.unfocusedActiveBorderTop');
         const tabActiveBorder = theme.getColor('tab.activeBorder') || (highContrast && contrastBorder) || 'transparent';
+        const tabUnfocusedActiveBorder = theme.getColor('tab.unfocusedActiveBorder') || (highContrast && contrastBorder) || 'transparent';
         collector.addRule(`
             #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
                 color: var(--theia-tab-activeForeground);
-                ${tabActiveBackground && `background: ${tabActiveBackground};`}
-                box-shadow: 0 1px 0 ${tabActiveBorderTop} inset, 0 -1px 0 ${tabActiveBorder} inset;
+                ${tabActiveBackground ? `background: ${tabActiveBackground};` : ''}
+                ${tabActiveBorderTop ? `border-top: 1px solid ${tabActiveBorderTop};` : ''}
+                border-bottom: 1px solid ${tabActiveBorder};
+            }
+            #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);
+                ${tabUnfocusedActiveBorderTop ? `border-top: 1px solid ${tabUnfocusedActiveBorderTop};` : ''}
+                border-bottom: 1px solid ${tabUnfocusedActiveBorder};
             }
         `);
+
+        // Highlight Modified Tabs
+        const tabActiveModifiedBorder = theme.getColor('tab.activeModifiedBorder');
+        const tabUnfocusedInactiveModifiedBorder = theme.getColor('tab.unfocusedInactiveModifiedBorder');
+        const tabInactiveModifiedBorder = theme.getColor('tab.inactiveModifiedBorder');
+        if (tabActiveModifiedBorder || tabInactiveModifiedBorder) {
+            collector.addRule(`
+                body.theia-editor-highlightModifiedTabs
+                #theia-main-content-panel .p-TabBar .p-TabBar-tab.theia-mod-dirty {
+                    border-top: 2px solid ${tabInactiveModifiedBorder};
+                    padding-bottom: 1px;
+                }
+
+                body.theia-editor-highlightModifiedTabs
+                #theia-main-content-panel .p-TabBar.theia-tabBar-active .p-TabBar-tab.theia-mod-dirty.p-mod-current {
+                    border-top: 2px solid ${tabActiveModifiedBorder};
+                }
+                
+                body.theia-editor-highlightModifiedTabs
+                #theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab.theia-mod-dirty:not(.p-mod-current) {
+                    border-top: 2px solid ${tabUnfocusedInactiveModifiedBorder};
+                }
+            `);
+        }
+
         // Hover Background
         const tabHoverBackground = theme.getColor('tab.hoverBackground');
         if (tabHoverBackground) {

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -80,6 +80,8 @@
 
 #theia-main-content-panel .p-TabBar .p-TabBar-tab {
     border-right: 1px solid var(--theia-tab-border);
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
     background: var(--theia-tab-inactiveBackground);
     color: var(--theia-tab-inactiveForeground);
 }
@@ -88,12 +90,6 @@
     color: var(--theia-tab-unfocusedInactiveForeground);
 }
 
-#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);
-    box-shadow: 0 1px 0 var(--theia-tab-unfocusedActiveBorderTop) inset, 0 -1px 0 var(--theia-tab-unfocusedActiveBorder) inset;
-}
-
 .p-TabBar.theia-app-centers {
     background: var(--theia-editorGroupHeader-tabsBackground);
 }