feat: add preview indicators (microsoft#231141)

Author: rzhao271

src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css

@@ -404,6 +404,15 @@
 	padding-bottom: 2px;
 }
 
+.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title > .setting-indicators-container .setting-indicator.setting-item-preview {
+	color: var(--vscode-badge-foreground);
+	background: var(--vscode-badge-background);
+	font-style: italic;
+	margin-right: 4px;
+	padding: 0px 4px 2px;
+	border-radius: 4px;
+}
+
 .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title .codicon {
 	vertical-align: middle;
 	padding-left: 1px;

src/vs/workbench/contrib/preferences/browser/settingsEditorSettingIndicators.ts

@@ -64,11 +64,16 @@ let cachedSyncIgnoredSettings: string[] = [];
 export class SettingsTreeIndicatorsLabel implements IDisposable {
 	private readonly indicatorsContainerElement: HTMLElement;
 
+	private readonly previewIndicator: SettingIndicator;
 	private readonly workspaceTrustIndicator: SettingIndicator;
 	private readonly scopeOverridesIndicator: SettingIndicator;
 	private readonly syncIgnoredIndicator: SettingIndicator;
 	private readonly defaultOverrideIndicator: SettingIndicator;
-	private readonly allIndicators: SettingIndicator[];
+
+	/** Indicators that each have their own square container at the top-right of the setting */
+	private readonly isolatedIndicators: SettingIndicator[] = [];
+	/** Indicators that end up wrapped in a parenthesis at the top-right of the setting */
+	private readonly parenthesizedIndicators: SettingIndicator[];
 
 	private readonly keybindingListeners: DisposableStore = new DisposableStore();
 	private focusedIndex = 0;
@@ -83,11 +88,14 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
 		this.indicatorsContainerElement = DOM.append(container, $('.setting-indicators-container'));
 		this.indicatorsContainerElement.style.display = 'inline';
 
+		this.previewIndicator = this.createPreviewIndicator();
+		this.isolatedIndicators = [this.previewIndicator];
+
 		this.workspaceTrustIndicator = this.createWorkspaceTrustIndicator();
 		this.scopeOverridesIndicator = this.createScopeOverridesIndicator();
 		this.syncIgnoredIndicator = this.createSyncIgnoredIndicator();
 		this.defaultOverrideIndicator = this.createDefaultOverrideIndicator();
-		this.allIndicators = [this.workspaceTrustIndicator, this.scopeOverridesIndicator, this.syncIgnoredIndicator, this.defaultOverrideIndicator];
+		this.parenthesizedIndicators = [this.workspaceTrustIndicator, this.scopeOverridesIndicator, this.syncIgnoredIndicator, this.defaultOverrideIndicator];
 	}
 
 	private defaultHoverOptions: Partial<IHoverOptions> = {
@@ -206,24 +214,46 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
 		};
 	}
 
+	private createPreviewIndicator(): SettingIndicator {
+		const disposables = new DisposableStore();
+		const previewIndicator = $('span.setting-indicator.setting-item-preview');
+		const previewLabel = disposables.add(new SimpleIconLabel(previewIndicator));
+
+		return {
+			element: previewIndicator,
+			label: previewLabel,
+			disposables
+		};
+	}
+
 	private render() {
-		const indicatorsToShow = this.allIndicators.filter(indicator => {
+		this.indicatorsContainerElement.innerText = '';
+		this.indicatorsContainerElement.style.display = 'none';
+
+		const isolatedIndicatorsToShow = this.isolatedIndicators.filter(indicator => {
 			return indicator.element.style.display !== 'none';
 		});
+		if (isolatedIndicatorsToShow.length) {
+			this.indicatorsContainerElement.style.display = 'inline';
+			for (let i = 0; i < isolatedIndicatorsToShow.length; i++) {
+				DOM.append(this.indicatorsContainerElement, isolatedIndicatorsToShow[i].element);
+			}
+		}
 
-		this.indicatorsContainerElement.innerText = '';
-		this.indicatorsContainerElement.style.display = 'none';
-		if (indicatorsToShow.length) {
+		const parenthesizedIndicatorsToShow = this.parenthesizedIndicators.filter(indicator => {
+			return indicator.element.style.display !== 'none';
+		});
+		if (parenthesizedIndicatorsToShow.length) {
 			this.indicatorsContainerElement.style.display = 'inline';
 			DOM.append(this.indicatorsContainerElement, $('span', undefined, '('));
-			for (let i = 0; i < indicatorsToShow.length - 1; i++) {
-				DOM.append(this.indicatorsContainerElement, indicatorsToShow[i].element);
+			for (let i = 0; i < parenthesizedIndicatorsToShow.length - 1; i++) {
+				DOM.append(this.indicatorsContainerElement, parenthesizedIndicatorsToShow[i].element);
 				DOM.append(this.indicatorsContainerElement, $('span.comma', undefined, ' • '));
 			}
-			DOM.append(this.indicatorsContainerElement, indicatorsToShow[indicatorsToShow.length - 1].element);
+			DOM.append(this.indicatorsContainerElement, parenthesizedIndicatorsToShow[parenthesizedIndicatorsToShow.length - 1].element);
 			DOM.append(this.indicatorsContainerElement, $('span', undefined, ')'));
-			this.resetIndicatorNavigationKeyBindings(indicatorsToShow);
 		}
+		this.resetIndicatorNavigationKeyBindings([...isolatedIndicatorsToShow, ...parenthesizedIndicatorsToShow]);
 	}
 
 	private resetIndicatorNavigationKeyBindings(indicators: SettingIndicator[]) {
@@ -289,6 +319,30 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
 		}
 	}
 
+	updatePreviewIndicator(element: SettingsTreeSettingElement) {
+		const isPreviewSetting = element.tags?.has('preview');
+		// Hide experimental indicators for now until further review and experimental -> onExP migration.
+		const isExperimentalSetting = false; // element.tags?.has('experimental');
+		this.previewIndicator.element.style.display = (isPreviewSetting || isExperimentalSetting) ? 'inline' : 'none';
+		this.previewIndicator.label.text = isPreviewSetting ?
+			localize('previewLabel', "Preview") :
+			localize('experimentalLabel', "Experimental");
+
+		const content = isPreviewSetting ?
+			localize('previewSettingDescription', "The setting is in the process of becoming stable.") :
+			localize('experimentalSettingDescription', "The setting is experimental and may change names or be removed.");
+		const showHover = (focus: boolean) => {
+			return this.hoverService.showHover({
+				...this.defaultHoverOptions,
+				content,
+				target: this.previewIndicator.element
+			}, focus);
+		};
+		this.addHoverDisposables(this.previewIndicator.disposables, this.previewIndicator.element, showHover);
+
+		this.render();
+	}
+
 	private getInlineScopeDisplayText(completeScope: string): string {
 		const [scope, language] = completeScope.split(':');
 		const localizedScope = scope === 'user' ?
@@ -302,7 +356,10 @@ export class SettingsTreeIndicatorsLabel implements IDisposable {
 
 	dispose() {
 		this.keybindingListeners.dispose();
-		for (const indicator of this.allIndicators) {
+		for (const indicator of this.isolatedIndicators) {
+			indicator.disposables.dispose();
+		}
+		for (const indicator of this.parenthesizedIndicators) {
 			indicator.disposables.dispose();
 		}
 	}

src/vs/workbench/contrib/preferences/browser/settingsTree.ts

@@ -994,6 +994,7 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		template.indicatorsLabel.updateWorkspaceTrust(element);
 		template.indicatorsLabel.updateSyncIgnored(element, this.ignoredSettings);
 		template.indicatorsLabel.updateDefaultOverrideIndicator(element);
+		template.indicatorsLabel.updatePreviewIndicator(element);
 		template.elementDisposables.add(this.onDidChangeIgnoredSettings(() => {
 			template.indicatorsLabel.updateSyncIgnored(element, this.ignoredSettings);
 		}));