Simplify setting indicators (microsoft#152091)

Ref microsoft#151787

Author: rzhao271

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

@@ -353,12 +353,12 @@
 
 .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title .setting-item-ignored .codicon,
 .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title .setting-item-default-overridden .codicon {
-	vertical-align: text-top;
+	vertical-align: middle;
 	padding-left: 1px;
 }
 
 .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title .setting-item-label .codicon {
-	vertical-align: text-top;
+	vertical-align: middle;
 }
 
 .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-title .setting-item-overrides a.modified-scope {

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

@@ -11,7 +11,7 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
 import { localize } from 'vs/nls';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { getIgnoredSettings } from 'vs/platform/userDataSync/common/settingsMerge';
-import { getDefaultIgnoredSettings } from 'vs/platform/userDataSync/common/userDataSync';
+import { getDefaultIgnoredSettings, IUserDataSyncEnablementService } from 'vs/platform/userDataSync/common/userDataSync';
 import { SettingsTreeSettingElement } from 'vs/workbench/contrib/preferences/browser/settingsTreeModels';
 
 const $ = DOM.$;
@@ -22,7 +22,7 @@ export interface ISettingOverrideClickEvent {
 }
 
 /**
- * Renders the indicators next to a setting, such as Sync Ignored, Also Modified In, etc.
+ * Renders the indicators next to a setting, such as "Also Modified In".
  */
 export class SettingsTreeIndicatorsLabel {
 	/**
@@ -34,7 +34,9 @@ export class SettingsTreeIndicatorsLabel {
 	private defaultOverrideIndicatorElement: HTMLElement;
 	private defaultOverrideIndicatorLabel: SimpleIconLabel;
 
-	constructor(container: HTMLElement) {
+	constructor(
+		container: HTMLElement,
+		@IUserDataSyncEnablementService private readonly userDataSyncEnablementService: IUserDataSyncEnablementService) {
 		this.labelElement = DOM.append(container, $('.misc-label'));
 		this.labelElement.style.display = 'inline';
 
@@ -53,7 +55,7 @@ export class SettingsTreeIndicatorsLabel {
 	private createSyncIgnoredElement(): HTMLElement {
 		const syncIgnoredElement = $('span.setting-item-ignored');
 		const syncIgnoredLabel = new SimpleIconLabel(syncIgnoredElement);
-		syncIgnoredLabel.text = `$(sync-ignored) ${localize('extensionSyncIgnoredLabel', 'Sync: Ignored')}`;
+		syncIgnoredLabel.text = '$(info) ' + localize('extensionSyncIgnoredLabel', 'Setting not synced');
 		syncIgnoredLabel.title = localize('syncIgnoredTitle', "Settings sync does not sync this setting");
 		return syncIgnoredElement;
 	}
@@ -76,15 +78,16 @@ export class SettingsTreeIndicatorsLabel {
 			DOM.append(this.labelElement, $('span', undefined, '('));
 			for (let i = 0; i < elementsToShow.length - 1; i++) {
 				DOM.append(this.labelElement, elementsToShow[i]);
-				DOM.append(this.labelElement, $('span.comma', undefined, ', '));
+				DOM.append(this.labelElement, $('span.comma', undefined, ' • '));
 			}
 			DOM.append(this.labelElement, elementsToShow[elementsToShow.length - 1]);
 			DOM.append(this.labelElement, $('span', undefined, ')'));
 		}
 	}
 
 	updateSyncIgnored(element: SettingsTreeSettingElement, ignoredSettings: string[]) {
-		this.syncIgnoredElement.style.display = ignoredSettings.includes(element.setting.key) ? 'inline' : 'none';
+		this.syncIgnoredElement.style.display = this.userDataSyncEnablementService.isEnabled()
+			&& ignoredSettings.includes(element.setting.key) ? 'inline' : 'none';
 		this.render();
 	}
 
@@ -133,7 +136,7 @@ export class SettingsTreeIndicatorsLabel {
 			}
 			if (sourceToDisplay) {
 				this.defaultOverrideIndicatorLabel.title = localize('defaultOverriddenDetails', "Default setting value overridden by {0}", sourceToDisplay);
-				this.defaultOverrideIndicatorLabel.text = `$(replace) ${sourceToDisplay}`;
+				this.defaultOverrideIndicatorLabel.text = '$(info) ' + localize('defaultOverriddenLabel', "Default value changed");
 			}
 		}
 		this.render();
@@ -161,11 +164,14 @@ export function getIndicatorsLabelAriaLabel(element: SettingsTreeSettingElement,
 	// Add default override indicator text
 	if (element.defaultValueSource) {
 		const defaultValueSource = element.defaultValueSource;
+		let sourceToDisplay = '';
 		if (typeof defaultValueSource !== 'string' && defaultValueSource.id !== element.setting.extensionInfo?.id) {
-			const extensionSource = defaultValueSource.displayName ?? defaultValueSource.id;
-			ariaLabelSections.push(localize('defaultOverriddenDetails', "Default setting value overridden by {0}", extensionSource));
+			sourceToDisplay = defaultValueSource.displayName ?? defaultValueSource.id;
 		} else if (typeof defaultValueSource === 'string') {
-			ariaLabelSections.push(localize('defaultOverriddenDetails', "Default setting value overridden by {0}", defaultValueSource));
+			sourceToDisplay = defaultValueSource;
+		}
+		if (sourceToDisplay) {
+			ariaLabelSections.push(localize('defaultOverriddenDetails', "Default setting value overridden by {0}", sourceToDisplay));
 		}
 	}
 

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

@@ -785,7 +785,7 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		const categoryElement = DOM.append(labelCategoryContainer, $('span.setting-item-category'));
 		const labelElementContainer = DOM.append(labelCategoryContainer, $('span.setting-item-label'));
 		const labelElement = new SimpleIconLabel(labelElementContainer);
-		const indicatorsLabel = new SettingsTreeIndicatorsLabel(titleElement);
+		const indicatorsLabel = this._instantiationService.createInstance(SettingsTreeIndicatorsLabel, titleElement);
 
 		const descriptionElement = DOM.append(container, $('.setting-item-description'));
 		const modifiedIndicatorElement = DOM.append(container, $('.setting-item-modified-indicator'));
@@ -1814,7 +1814,7 @@ export class SettingBoolRenderer extends AbstractSettingRenderer implements ITre
 		const categoryElement = DOM.append(titleElement, $('span.setting-item-category'));
 		const labelElementContainer = DOM.append(titleElement, $('span.setting-item-label'));
 		const labelElement = new SimpleIconLabel(labelElementContainer);
-		const indicatorsLabel = new SettingsTreeIndicatorsLabel(titleElement);
+		const indicatorsLabel = this._instantiationService.createInstance(SettingsTreeIndicatorsLabel, titleElement);
 
 		const descriptionAndValueElement = DOM.append(container, $('.setting-item-value-description'));
 		const controlElement = DOM.append(descriptionAndValueElement, $('.setting-item-bool-control'));