Display Tab Indexes in VSCode (microsoft#209196)

* rebase

* 1.Moved the settings into options.
2.Moved tab refresh to updateOptions.
3.Simplified the code using a ternary operator.
4.Renamed the setting from 'workbench.tabIndex.enabled' to 'workbench.editor.showTabIndex'.
5.Removed some irrelevant code.

* 1. add localize  for tabindex display 2. change the default format to use a colon

* semicolumn missing

* fix tab index for untitled files

* add namePrefix option for resource labels

---------

Co-authored-by: Benjamin Christopher Simmonds <44439583+benibenj@users.noreply.github.com>
Co-authored-by: BeniBenj <besimmonds@microsoft.com>
Co-authored-by: Benjamin Pasero <benjamin.pasero@microsoft.com>

Author: 3 people

src/vs/workbench/browser/labels.ts

@@ -63,6 +63,11 @@ export interface IResourceLabelOptions extends IIconLabelValueOptions {
 	 */
 	readonly forceLabel?: boolean;
 
+	/**
+	 * A prefix to be added to the name of the label.
+	 */
+	readonly namePrefix?: string;
+
 	/**
 	 * Uses the provided icon instead of deriving a resource icon.
 	 */
@@ -522,6 +527,14 @@ class ResourceLabelWidget extends IconLabel {
 			}
 		}
 
+		if (options.namePrefix) {
+			if (typeof label.name === 'string') {
+				label.name = options.namePrefix + label.name;
+			} else if (Array.isArray(label.name) && label.name.length > 0) {
+				label.name = [options.namePrefix + label.name[0], ...label.name.slice(1)];
+			}
+		}
+
 		const hasResourceChanged = this.hasResourceChanged(label);
 		const hasPathLabelChanged = hasResourceChanged || this.hasPathLabelChanged(label);
 		const hasFileKindChanged = this.hasFileKindChanged(options);

src/vs/workbench/browser/parts/editor/editor.ts

@@ -34,6 +34,7 @@ export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = {
 	tabActionLocation: 'right',
 	tabActionCloseVisibility: true,
 	tabActionUnpinVisibility: true,
+	showTabIndex: false,
 	alwaysShowEditorActions: false,
 	tabSizing: 'fit',
 	tabSizingFixedMinWidth: 50,
@@ -125,6 +126,7 @@ function validateEditorPartOptions(options: IEditorPartOptions): IEditorPartOpti
 		'highlightModifiedTabs': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['highlightModifiedTabs']),
 		'tabActionCloseVisibility': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['tabActionCloseVisibility']),
 		'tabActionUnpinVisibility': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['tabActionUnpinVisibility']),
+		'showTabIndex': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['showTabIndex']),
 		'alwaysShowEditorActions': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['alwaysShowEditorActions']),
 		'pinnedTabsOnSeparateRow': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['pinnedTabsOnSeparateRow']),
 		'focusRecentEditorAfterClose': new BooleanVerifier(DEFAULT_EDITOR_PART_OPTIONS['focusRecentEditorAfterClose']),

src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts

@@ -778,6 +778,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
 			oldOptions.hasIcons !== newOptions.hasIcons ||
 			oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs ||
 			oldOptions.wrapTabs !== newOptions.wrapTabs ||
+			oldOptions.showTabIndex !== newOptions.showTabIndex ||
 			!equals(oldOptions.decorations, newOptions.decorations)
 		) {
 			this.redraw();
@@ -1604,6 +1605,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
 		// Sticky compact tabs will only show an icon if icons are enabled
 		// or their first character of the name otherwise
 		let name: string | undefined;
+		let namePrefix: string | undefined;
 		let forceLabel = false;
 		let fileDecorationBadges = Boolean(options.decorations?.badges);
 		const fileDecorationColors = Boolean(options.decorations?.colors);
@@ -1616,6 +1618,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
 			fileDecorationBadges = false; // not enough space when sticky tabs are compact
 		} else {
 			name = tabLabel.name;
+			namePrefix = options.showTabIndex ? `${this.toEditorIndex(tabIndex) + 1}: ` : undefined;
 			description = tabLabel.description || '';
 		}
 
@@ -1640,6 +1643,7 @@ export class MultiEditorTabsControl extends EditorTabsControl {
 				},
 				icon: editor.getIcon(),
 				hideIcon: options.showIcons === false,
+				namePrefix,
 			}
 		);
 

src/vs/workbench/browser/workbench.contribution.ts

@@ -213,6 +213,11 @@ const registry = Registry.as<IConfigurationRegistry>(ConfigurationExtensions.Con
 				default: true,
 				description: localize('workbench.editor.tabActionUnpinVisibility', "Controls the visibility of the tab unpin action button.")
 			},
+			'workbench.editor.showTabIndex': {
+				'type': 'boolean',
+				'default': false,
+				'markdownDescription': localize({ comment: ['{0}, {1} will be a setting name rendered as a link'], key: 'showTabIndex' }, "When enabled, will show the tab index. This value is ignored when {0} is not set to {1}.", '`#workbench.editor.showTabs#`', '`multiple`')
+			},
 			'workbench.editor.tabSizing': {
 				'type': 'string',
 				'enum': ['fit', 'shrink', 'fixed'],

src/vs/workbench/common/editor.ts

@@ -1232,6 +1232,7 @@ interface IEditorPartConfiguration {
 	tabActionLocation?: 'left' | 'right';
 	tabActionCloseVisibility?: boolean;
 	tabActionUnpinVisibility?: boolean;
+	showTabIndex?: boolean;
 	alwaysShowEditorActions?: boolean;
 	tabSizing?: 'fit' | 'shrink' | 'fixed';
 	tabSizingFixedMinWidth?: number;