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.

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.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;

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
         );
     }
 

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*/