Option to put close icons at the start of the tab label on macOS (eclipse-theia#15103)

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
in conformity with the OS's native tab controls.
Render the tab title with the icon on the left or right accordingly.
Show the new preference in the Settings UI on macOS platform only.
Default to the right as on other platforms to maintain current appearance.

Fixes eclipse-theia/theia-ide#460

Signed-off-by: Christian W. Damus <[email protected]>

Author: cdamus

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.localize('theia/core/window/tabCloseIconPlacement/end', 'Place the close icon at the end of the label. In left-to-right languages, this is the right side of the tab.'),
+                nls.localize('theia/core/window/tabCloseIconPlacement/start', 'Place the close icon at the start of the label. In left-to-right languages, this is the left side of the tab.'),
+            ],
+            default: 'end',
+            scope: 'application',
+            description: nls.localize('theia/core/window/tabCloseIconPlacement/description', 'Place the close icons on tab titles at the start or end of the tab. The default is end on all platforms.'),
+            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;

packages/core/src/browser/shell/tab-bars.ts

@@ -119,6 +119,15 @@ 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 {
@@ -160,22 +169,42 @@ export class TabBarRenderer extends TabBar.Renderer {
      * @returns {VirtualElement} The virtual element of the rendered tab.
      */
     override renderTab(data: SideBarRenderData, isInSidePanel?: boolean, isPartOfHiddenTabBar?: boolean): VirtualElement {
+        // Putting the close icon at the start is only pertinent to the horizontal orientation
+        const isHorizontal = this.tabBar?.orientation === 'horizontal';
+        const tabCloseIconStart = isHorizontal && this.corePreferences?.['window.tabCloseIconPlacement'] === 'start';
+
         const title = data.title;
         const id = this.createTabId(title, isPartOfHiddenTabBar);
         const key = this.createTabKey(data);
         const style = this.createTabStyle(data);
-        const className = this.createTabClass(data);
+        const className = `${this.createTabClass(data)}${tabCloseIconStart ? ' closeIcon-start' : ''}`;
         const dataset = this.createTabDataset(data);
         const closeIconTitle = data.title.className.includes(PINNED_CLASS)
             ? nls.localizeByDefault('Unpin')
             : nls.localizeByDefault('Close');
 
-        const hover = this.tabBar && (this.tabBar.orientation === 'horizontal' && this.corePreferences?.['window.tabbar.enhancedPreview'] === 'classic')
+        const hover = isHorizontal && this.corePreferences?.['window.tabbar.enhancedPreview'] === 'classic'
             ? { title: title.caption }
             : {
                 onmouseenter: this.handleMouseEnterEvent
             };
 
+        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: 'lm-TabBar-tabCloseIcon action-label',
+            title: closeIconTitle,
+            onclick: this.handleCloseClickEvent,
+        });
+
+        const tabContents = tabCloseIconStart ? [tabCloseIcon, tabLabel] : [tabLabel, tabCloseIcon];
+
         return h.li(
             {
                 ...hover,
@@ -187,19 +216,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: 'lm-TabBar-tabCloseIcon action-label',
-                title: closeIconTitle,
-                onclick: this.handleCloseClickEvent
-            })
+            ...tabContents
         );
     }
 

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

@@ -237,6 +237,12 @@
   -ms-user-select: none;
 }
 
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable.closeIcon-start > .lm-TabBar-tabCloseIcon,
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned.closeIcon-start > .lm-TabBar-tabCloseIcon {
+  margin-left: inherit;
+  margin-right: 4px;
+}
+
 .lm-TabBar.theia-app-centers.dynamic-tabs .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon,
 .lm-TabBar.theia-app-centers.dynamic-tabs .lm-TabBar-tab.theia-mod-pinned>.lm-TabBar-tabCloseIcon {
   /* hide close icon for dynamic tabs strategy*/
@@ -254,11 +260,16 @@
   background-color: rgba(50%, 50%, 50%, 0.2);
 }
 
-.lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable,
-.lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned {
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable:not(.closeIcon-start),
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned:not(.closeIcon-start) {
   padding-right: 4px;
 }
 
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable.closeIcon-start,
+.lm-TabBar.theia-app-centers .lm-TabBar-tab.theia-mod-pinned.closeIcon-start {
+  padding-left: 4px;
+}
+
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable:not(.theia-mod-dirty):hover>.lm-TabBar-tabCloseIcon:before,
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable:not(.theia-mod-dirty).lm-TabBar-tab.lm-mod-current>.lm-TabBar-tabCloseIcon:before,
 .lm-TabBar.theia-app-centers .lm-TabBar-tab.lm-mod-closable.theia-mod-dirty>.lm-TabBar-tabCloseIcon:hover:before {