Put close icons at the start of the tab label by default on macOS

Add a new window.tabCloseIconPlacement preference for whether to present the Close (X) icon in tab titles on the left or the right of the tab. Default to the left on macOS platform in conformity with the OS's native tab controls. Show the new preference in the Settings UI on macOS platform only. Render the tab title with the icon on the left or right accordingly. Fixes eclipse-theia/theia-ide#460 Signed-off-by: Christian W. Damus <[email protected]>
eclipse-theia · Mar 3, 2025 · 32cc3de · 32cc3de
1 parent 14908a2
commit 32cc3de
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/packages/core/src/browser/core-preferences.ts b/packages/core/src/browser/core-preferences.ts
@@ -121,6 +121,18 @@ export const corePreferenceSchema: PreferenceSchema = {
             scope: 'application',
             markdownDescription: nls.localizeByDefault('Separator used by {0}.', '`#window.title#`')
         },
+        'window.tabCloseIconPlacement': {
+            type: 'string',
+            enum: ['end', 'start'],
+            enumDescriptions: [
+                nls.localizeByDefault('Place the close icon at the end of the label. In left-to-right languages, this is the right side of the tab.'),
+                nls.localizeByDefault('Place the close icon at the start of the label. In left-to-right languages, this is the left side of the tab.'),
+            ],
+            default: isOSX ? 'start' : 'end',
+            scope: 'application',
+            description: nls.localizeByDefault('Place the close icons on tab titles at the start or end of the tab. The default is the host OS convention.'),
+            included: isOSX
+        },
         'window.secondaryWindowPlacement': {
             type: 'string',
             enum: ['originalSize', 'halfWidth', 'fullSize'],
@@ -305,6 +317,7 @@ export interface CoreConfiguration {
     'window.menuBarVisibility': 'classic' | 'visible' | 'hidden' | 'compact';
     'window.title': string;
     'window.titleSeparator': string;
+    'window.tabCloseIconPlacement': 'end' | 'start';
     'workbench.list.openMode': 'singleClick' | 'doubleClick';
     'workbench.commandPalette.history': number;
     'workbench.editor.highlightModifiedTabs': boolean;

diff --git a/packages/core/src/browser/shell/tab-bars.ts b/packages/core/src/browser/shell/tab-bars.ts
@@ -118,6 +118,13 @@ export class TabBarRenderer extends TabBar.Renderer {
                 }
             }));
         }
+        if (this.corePreferences) {
+            this.toDispose.push(this.corePreferences.onPreferenceChanged(event => {
+                if (event.preferenceName === 'window.tabCloseIconPlacement' && this._tabBar) {
+                    this._tabBar.update();
+                }
+            }));
+        }
     }
 
     dispose(): void {
@@ -175,6 +182,23 @@ export class TabBarRenderer extends TabBar.Renderer {
                 onmouseenter: this.handleMouseEnterEvent
             };
 
+        const tabCloseIconStart = this.corePreferences?.['window.tabCloseIconPlacement'] === 'start';
+        const tabLabel = h.div(
+            { className: 'theia-tab-icon-label' },
+            this.renderIcon(data, isInSidePanel),
+            this.renderLabel(data, isInSidePanel),
+            this.renderTailDecorations(data, isInSidePanel),
+            this.renderBadge(data, isInSidePanel),
+            this.renderLock(data, isInSidePanel)
+        );
+        const tabCloseIcon = h.div({
+            className: `p-TabBar-tabCloseIcon action-label ${tabCloseIconStart ? 'start' : ''}`,
+            title: closeIconTitle,
+            onclick: this.handleCloseClickEvent
+        });
+
+        const tabContents = tabCloseIconStart ? [tabCloseIcon, tabLabel] : [tabLabel, tabCloseIcon];
+
         return h.li(
             {
                 ...hover,
@@ -186,19 +210,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                     e.preventDefault();
                 }
             },
-            h.div(
-                { className: 'theia-tab-icon-label' },
-                this.renderIcon(data, isInSidePanel),
-                this.renderLabel(data, isInSidePanel),
-                this.renderTailDecorations(data, isInSidePanel),
-                this.renderBadge(data, isInSidePanel),
-                this.renderLock(data, isInSidePanel)
-            ),
-            h.div({
-                className: 'p-TabBar-tabCloseIcon action-label',
-                title: closeIconTitle,
-                onclick: this.handleCloseClickEvent
-            })
+            ...tabContents
         );
     }
 

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -237,6 +237,12 @@
   -ms-user-select: none;
 }
 
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable>.p-TabBar-tabCloseIcon.start,
+.p-TabBar.theia-app-centers .p-TabBar-tab.theia-mod-pinned>.p-TabBar-tabCloseIcon.start {
+  margin-left: inherit;
+  margin-right: 4px;
+}
+
 .p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.p-mod-closable>.p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers.dynamic-tabs .p-TabBar-tab.theia-mod-pinned>.p-TabBar-tabCloseIcon {
   /* hide close icon for dynamic tabs strategy*/