diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts index bd08beb56c71cdd0f3ed29639a7dbcf5f267d861..c0a0c9639851c8b5f93b10afdb899b3e2eadf813 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionsList.ts @@ -17,7 +17,7 @@ import { Label, RatingsWidget, InstallWidget } from './extensionsWidgets'; export interface ITemplateData { element: HTMLElement; - icon: HTMLElement; + icon: HTMLImageElement; name: HTMLElement; installCount: HTMLElement; ratings: HTMLElement; @@ -42,7 +42,7 @@ export class Renderer implements IPagedRenderer { renderTemplate(root: HTMLElement): ITemplateData { const element = append(root, $('.extension')); - const icon = append(element, $('.icon')); + const icon = append(element, $('img.icon')); const details = append(element, $('.details')); const header = append(details, $('.header')); const name = append(header, $('span.name')); @@ -80,7 +80,7 @@ export class Renderer implements IPagedRenderer { renderPlaceholder(index: number, data: ITemplateData): void { addClass(data.element, 'loading'); - data.icon.style.backgroundImage = ''; + data.icon.src = ''; data.name.textContent = ''; data.author.textContent = ''; data.description.textContent = ''; @@ -91,7 +91,15 @@ export class Renderer implements IPagedRenderer { renderElement(extension: IExtension, index: number, data: ITemplateData): void { removeClass(data.element, 'loading'); - data.icon.style.backgroundImage = `url("${ extension.iconUrl }")`; + data.icon.src = extension.iconUrl; + + if (!data.icon.complete) { + data.icon.style.visibility = 'hidden'; + data.icon.onload = () => data.icon.style.visibility = 'inherit'; + } else { + data.icon.style.visibility = 'inherit'; + } + data.name.textContent = extension.displayName; data.author.textContent = extension.publisherDisplayName; data.description.textContent = extension.description; diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css index 24dc5985177bc0d712489951d4ee31442d3d958f..96b2a7067be8fc483818926c26eeb9f8f8d73eca 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionsViewlet.css @@ -41,9 +41,7 @@ height: 42px; padding: 10px 14px 10px 0; flex-shrink: 0; - background-repeat: no-repeat; - background-size: 42px; - background-position: left center; + object-fit: contain; } .extensions-viewlet.narrow > .extensions .extension > .icon {