Dim reccomended badge on extensions which have been disabled. #51106 (#51367)

* Dim reccomended badge on extensions which have been disabled. #51106

* Add disabled class to entire extension list item

* Merge dim rule for bookmark with rest of dim rules

src/vs/workbench/parts/extensions/browser/extensionsList.ts

@@ -146,7 +146,7 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
 		this.extensionService.getExtensions().then(enabledExtensions => {
 			const isExtensionRunning = enabledExtensions.some(e => areSameExtensions(e, extension));
 
-			toggleClass(data.element, 'disabled', isInstalled && !isExtensionRunning);
+			toggleClass(data.root, 'disabled', isInstalled && !isExtensionRunning);
 		});
 
 		const onError = once(domEvent(data.icon, 'error'));

src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css

@@ -192,14 +192,16 @@
 	opacity: 0.9;
 }
 
-.vs .extensions-viewlet > .extensions .extension.disabled > .icon,
-.vs-dark .extensions-viewlet > .extensions .extension.disabled > .icon,
-.vs .extensions-viewlet > .extensions .extension.disabled > .details > .header-container,
-.vs-dark .extensions-viewlet > .extensions .extension.disabled > .details > .header-container,
-.vs .extensions-viewlet > .extensions .extension.disabled > .details > .description,
-.vs-dark .extensions-viewlet > .extensions .extension.disabled > .details > .description,
-.vs .extensions-viewlet > .extensions .extension.disabled > .details > .footer > .author,
-.vs-dark .extensions-viewlet > .extensions .extension.disabled > .details > .footer > .author {
+.vs .extensions-viewlet > .extensions .monaco-list-row.disabled > .bookmark,
+.vs-dark  .extensions-viewlet > .extensions .monaco-list-row.disabled > .bookmark,
+.vs .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .icon,
+.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .icon,
+.vs .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .header-container,
+.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .header-container,
+.vs .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .description,
+.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .description,
+.vs .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .footer > .author,
+.vs-dark .extensions-viewlet > .extensions .monaco-list-row.disabled > .extension > .details > .footer > .author {
 	opacity: 0.5;
 }