Change:
Testing When I run a search for "deprecated" I see a large list of extensions that are being deprecated. I also see that each extension uses it's own ways to indicate that the extension is deprecated: prefix prefix sufix sufix Given that we control the list of deprecated extensions, and we have several established UI elements I am wondering if we could create a more unified and consistent look for all the deprecated extensions: In the extensions list, add a visual indicator in the upper left hand corner of the icon (similar to pre-release) In the extension details page, have a "deprecated" pill/badge after the name (similar to the pre-release and preview)
Another idea would be strike out the title just like we strike out in code editor.
any suggestions?
I like the strike-through on the title idea, it's simple (even though we already use the warning icon): <img width="1138" alt="CleanShot 2022-05-31 at 12 40 26 src="https://user-"
<img width="1378" alt="image" src="https://user-"
FYI
looks nice :)

Discussion:
template.name.textContent = extension.displayName; template.name.classList.toggle('clickable', !!extension.url); <ins> template.name.classList.toggle('deprecated', !!extension.deprecationInfo); </ins> template.preview.style.display = extension.preview ? 'inherit' : 'none'; template.builtin.style.display = extension.isBuiltin ? 'inherit' : 'none';

data.extensionDisposables = dispose(data.extensionDisposables); const updateEnablement = async () => { <del> let isDisabled = false; </del> <ins> let disabled = false; let deprecated = !!extension.deprecationInfo; </ins> if (extension.state === ExtensionState.Uninstalled) { <del> isDisabled = !!extension.deprecationInfo || !(await this.extensionsWorkbenchService.canInstall(extension)); </del> <ins> disabled = deprecated || !(await this.extensionsWorkbenchService.canInstall(extension)); </ins> } else if (extension.local && !isLanguagePackExtension(extension.local.manifest)) { const runningExtensions = await this.extensionService.getExtensions(); const runningExtension = runningExtensions.filter(e => areSameExtensions({ id: e.identifier.value, uuid: e.uuid }, extension.identifier))[0]; <del> isDisabled = !(runningExtension && extension.server === this.extensionManagementServerService.getExtensionManagementServer(toExtension(runningExtension))); </del> <ins> disabled = !(runningExtension && extension.server === this.extensionManagementServerService.getExtensionManagementServer(toExtension(runningExtension))); </ins> } <del> data.root.classList.toggle('disabled', isDisabled); </del> <ins> data.element.classList.toggle('deprecated', deprecated); data.root.classList.toggle('disabled', disabled); </ins> }; updateEnablement(); this.extensionService.onDidChangeExtensions(() => updateEnablement(), this, data.extensionDisposables);

overflow: hidden; } <ins> .extension-list-item.deprecated > .details > .header-container > .header > .name { text-decoration: line-through; } </ins> .extension-list-item > .details > .header-container > .header > .activation-status, .extension-list-item > .details > .header-container > .header > .install-count, .extension-list-item > .details > .header-container > .header > .ratings {

white-space: nowrap; } <ins> .extension-editor > .header > .details > .title > .name.deprecated { text-decoration: line-through; } </ins> .extension-editor > .header > .details > .title > .version { margin-left: 10px; user-select: text;