Add sync ignored label to unsynced settings

Fix #90977

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

@@ -314,8 +314,19 @@
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title .setting-item-overrides {
-	opacity: 0.5;
+	opacity: 0.9;
 	font-style: italic;
+	margin-right: 4px;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title .setting-item-ignored {
+	opacity: 0.9;
+	font-style: italic;
+}
+
+.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title .setting-item-ignored .codicon {
+	vertical-align: text-top;
+	padding-left: 1px;
 }
 
 .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/settingsTree.ts

@@ -50,6 +50,7 @@ import { SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU } from 'vs/workbench/contrib/
 import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
 import { ISetting, ISettingsGroup, SettingValueType } from 'vs/workbench/services/preferences/common/preferences';
 import { IUserDataSyncEnablementService, getDefaultIgnoredSettings } from 'vs/platform/userDataSync/common/userDataSync';
+import { CodiconLabel } from 'vs/base/browser/ui/codiconLabel/codiconLabel';
 
 const $ = DOM.$;
 
@@ -204,6 +205,7 @@ interface ISettingItemTemplate<T = any> extends IDisposableTemplate {
 	controlElement: HTMLElement;
 	deprecationWarningElement: HTMLElement;
 	otherOverridesElement: HTMLElement;
+	syncIgnoredElement: HTMLElement;
 	toolbar: ToolBar;
 	elementDisposables: IDisposable[];
 }
@@ -300,6 +302,10 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 	private readonly _onDidFocusSetting = this._register(new Emitter<SettingsTreeSettingElement>());
 	readonly onDidFocusSetting: Event<SettingsTreeSettingElement> = this._onDidFocusSetting.event;
 
+	private ignoredSettings: string[];
+	private readonly _onDidChangeIgnoredSettings = this._register(new Emitter<void>());
+	readonly onDidChangeIgnoredSettings: Event<void> = this._onDidChangeIgnoredSettings.event;
+
 	// Put common injections back here
 	constructor(
 		private readonly settingActions: IAction[],
@@ -311,8 +317,17 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		@ICommandService protected readonly _commandService: ICommandService,
 		@IContextMenuService protected readonly _contextMenuService: IContextMenuService,
 		@IKeybindingService protected readonly _keybindingService: IKeybindingService,
+		@IConfigurationService protected readonly _configService: IConfigurationService,
 	) {
 		super();
+
+		this.ignoredSettings = getIgnoredSettings(getDefaultIgnoredSettings(), this._configService);
+		this._register(this._configService.onDidChangeConfiguration(e => {
+			if (e.affectedKeys.includes('sync.ignoredSettings')) {
+				this.ignoredSettings = getIgnoredSettings(getDefaultIgnoredSettings(), this._configService);
+				this._onDidChangeIgnoredSettings.fire();
+			}
+		}));
 	}
 
 	renderTemplate(container: HTMLElement): any {
@@ -323,6 +338,14 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		throw new Error('to override');
 	}
 
+	protected createSyncIgnoredElement(container: HTMLElement): HTMLElement {
+		const syncIgnoredElement = DOM.append(container, $('span.setting-item-ignored'));
+		const syncIgnoredLabel = new CodiconLabel(syncIgnoredElement);
+		syncIgnoredLabel.text = `($(eye-closed) ${localize('extensionSyncIgnoredLabel', 'Sync: Ignored')})`;
+
+		return syncIgnoredElement;
+	}
+
 	protected renderCommonTemplate(tree: any, _container: HTMLElement, typeClass: string): ISettingItemTemplate {
 		DOM.addClass(_container, 'setting-item');
 		DOM.addClass(_container, 'setting-item-' + typeClass);
@@ -333,6 +356,8 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		const categoryElement = DOM.append(labelCategoryContainer, $('span.setting-item-category'));
 		const labelElement = DOM.append(labelCategoryContainer, $('span.setting-item-label'));
 		const otherOverridesElement = DOM.append(titleElement, $('span.setting-item-overrides'));
+		const syncIgnoredElement = this.createSyncIgnoredElement(titleElement);
+
 		const descriptionElement = DOM.append(container, $('.setting-item-description'));
 		const modifiedIndicatorElement = DOM.append(container, $('.setting-item-modified-indicator'));
 		modifiedIndicatorElement.title = localize('modified', "Modified");
@@ -358,6 +383,7 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 			controlElement,
 			deprecationWarningElement,
 			otherOverridesElement,
+			syncIgnoredElement,
 			toolbar
 		};
 
@@ -447,8 +473,10 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		template.descriptionElement.id = baseId + '_setting_description';
 
 		template.otherOverridesElement.innerHTML = '';
-
+		template.otherOverridesElement.style.display = 'none';
 		if (element.overriddenScopeList.length) {
+			template.otherOverridesElement.style.display = 'inline';
+
 			const otherOverridesLabel = element.isConfigured ?
 				localize('alsoConfiguredIn', "Also modified in") :
 				localize('configuredIn', "Modified in");
@@ -482,6 +510,14 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
 		DOM.toggleClass(template.containerElement, 'is-deprecated', !!deprecationText);
 
 		this.renderValue(element, <ISettingItemTemplate>template, onChange);
+
+		const update = () => {
+			template.syncIgnoredElement.style.display = this.ignoredSettings.includes(element.setting.key) ? 'inline' : 'none';
+		};
+		update();
+		template.elementDisposables.push(this.onDidChangeIgnoredSettings(() => {
+			update();
+		}));
 	}
 
 	private renderDescriptionMarkdown(element: SettingsTreeSettingElement, text: string, disposeables: DisposableStore): HTMLElement {
@@ -1085,6 +1121,7 @@ export class SettingBoolRenderer extends AbstractSettingRenderer implements ITre
 		const categoryElement = DOM.append(titleElement, $('span.setting-item-category'));
 		const labelElement = DOM.append(titleElement, $('span.setting-item-label'));
 		const otherOverridesElement = DOM.append(titleElement, $('span.setting-item-overrides'));
+		const syncIgnoredElement = this.createSyncIgnoredElement(titleElement);
 
 		const descriptionAndValueElement = DOM.append(container, $('.setting-item-value-description'));
 		const controlElement = DOM.append(descriptionAndValueElement, $('.setting-item-bool-control'));
@@ -1138,6 +1175,7 @@ export class SettingBoolRenderer extends AbstractSettingRenderer implements ITre
 			descriptionElement,
 			deprecationWarningElement,
 			otherOverridesElement,
+			syncIgnoredElement,
 			toolbar
 		};