Skip to content

Commit a357a44

Browse files
sandy081sandy081
committed
show remote badge when extension icon is hidden
1 parent eb38343 commit a357a44

5 files changed

Lines changed: 94 additions & 44 deletions

File tree

‎src/vs/workbench/contrib/extensions/electron-browser/extensionsList.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,15 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
6565
const element = append(root, $('.extension'));
6666
const iconContainer = append(element, $('.icon-container'));
6767
const icon = append(iconContainer, $<HTMLImageElement>('img.icon'));
68-
const badgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, iconContainer);
68+
const iconRemoteBadgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, iconContainer);
6969
const details = append(element, $('.details'));
7070
const headerContainer = append(details, $('.header-container'));
7171
const header = append(headerContainer, $('.header'));
7272
const name = append(header, $('span.name'));
7373
const version = append(header, $('span.version'));
7474
const installCount = append(header, $('span.install-count'));
7575
const ratings = append(header, $('span.ratings'));
76+
const headerRemoteBadgeWidget = this.instantiationService.createInstance(RemoteBadgeWidget, header);
7677
const description = append(details, $('.description.ellipsis'));
7778
const footer = append(details, $('.footer'));
7879
const author = append(footer, $('.author.ellipsis'));
@@ -102,7 +103,8 @@ export class Renderer implements IPagedRenderer<IExtension, ITemplateData> {
102103
const tooltipWidget = this.instantiationService.createInstance(TooltipWidget, root, disabledLabelAction, recommendationWidget);
103104
const widgets = [
104105
recommendationWidget,
105-
badgeWidget,
106+
iconRemoteBadgeWidget,
107+
headerRemoteBadgeWidget,
106108
tooltipWidget,
107109
this.instantiationService.createInstance(Label, version, (e: IExtension) => e.version),
108110
this.instantiationService.createInstance(InstallCountWidget, installCount, true),

‎src/vs/workbench/contrib/extensions/electron-browser/extensionsWidgets.ts‎

Lines changed: 60 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/
1818
import { REMOTE_HOST_SCHEME } from 'vs/platform/remote/common/remoteHosts';
1919
import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
2020
import { Emitter, Event } from 'vs/base/common/event';
21+
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
2122

2223
export abstract class ExtensionWidget extends Disposable implements IExtensionContainer {
2324
private _extension: IExtension;
@@ -238,27 +239,28 @@ export class RecommendationWidget extends ExtensionWidget {
238239

239240
export class RemoteBadgeWidget extends ExtensionWidget {
240241

241-
private element: HTMLElement | null;
242+
private remoteBadge: RemoteBadge | null;
242243
private disposables: IDisposable[] = [];
243244

245+
private element: HTMLElement;
246+
244247
constructor(
245-
private parent: HTMLElement,
246-
@ILabelService private readonly labelService: ILabelService,
247-
@IThemeService private readonly themeService: IThemeService,
248+
parent: HTMLElement,
248249
@IExtensionManagementServerService private readonly extensionManagementServerService: IExtensionManagementServerService,
249-
@IWorkspaceContextService private readonly workspaceContextService: IWorkspaceContextService,
250-
@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService
250+
@IInstantiationService private readonly instantiationService: IInstantiationService
251251
) {
252252
super();
253+
this.element = append(parent, $('.extension-remote-badge-container'));
253254
this.render();
254255
this._register(toDisposable(() => this.clear()));
255256
}
256257

257258
private clear(): void {
258-
if (this.element) {
259-
this.parent.removeChild(this.element);
259+
if (this.remoteBadge) {
260+
this.element.removeChild(this.remoteBadge.element);
261+
this.remoteBadge.dispose();
260262
}
261-
this.element = null;
263+
this.remoteBadge = null;
262264
this.disposables = dispose(this.disposables);
263265
}
264266

@@ -268,30 +270,56 @@ export class RemoteBadgeWidget extends ExtensionWidget {
268270
return;
269271
}
270272
if (this.extension.server === this.extensionManagementServerService.remoteExtensionManagementServer) {
271-
this.element = append(this.parent, $('div.extension-remote-badge'));
272-
append(this.element, $('span.octicon.octicon-remote'));
273-
274-
const applyBadgeStyle = () => {
275-
if (!this.element) {
276-
return;
277-
}
278-
const bgColor = this.themeService.getTheme().getColor(STATUS_BAR_HOST_NAME_BACKGROUND);
279-
const fgColor = this.workspaceContextService.getWorkbenchState() === WorkbenchState.EMPTY ? this.themeService.getTheme().getColor(STATUS_BAR_NO_FOLDER_FOREGROUND) : this.themeService.getTheme().getColor(STATUS_BAR_FOREGROUND);
280-
this.element.style.backgroundColor = bgColor ? bgColor.toString() : '';
281-
this.element.style.color = fgColor ? fgColor.toString() : '';
282-
};
283-
applyBadgeStyle();
284-
this.themeService.onThemeChange(applyBadgeStyle, this, this.disposables);
285-
this.workspaceContextService.onDidChangeWorkbenchState(applyBadgeStyle, this, this.disposables);
286-
287-
const updateTitle = () => {
288-
if (this.element) {
289-
this.element.title = localize('remote extension title', "Extension in {0}", this.labelService.getHostLabel(REMOTE_HOST_SCHEME, this.environmentService.configuration.remoteAuthority));
290-
}
291-
};
292-
this.labelService.onDidChangeFormatters(() => updateTitle(), this, this.disposables);
293-
updateTitle();
273+
this.remoteBadge = this.instantiationService.createInstance(RemoteBadge);
274+
append(this.element, this.remoteBadge.element);
294275
}
295276
}
296277

278+
dispose(): void {
279+
if (this.remoteBadge) {
280+
this.remoteBadge.dispose();
281+
}
282+
super.dispose();
283+
}
297284
}
285+
286+
class RemoteBadge extends Disposable {
287+
288+
readonly element: HTMLElement;
289+
290+
constructor(
291+
@ILabelService private readonly labelService: ILabelService,
292+
@IThemeService private readonly themeService: IThemeService,
293+
@IWorkspaceContextService private readonly workspaceContextService: IWorkspaceContextService,
294+
@IWorkbenchEnvironmentService private readonly environmentService: IWorkbenchEnvironmentService
295+
) {
296+
super();
297+
this.element = $('div.extension-remote-badge');
298+
this.render();
299+
}
300+
301+
private render(): void {
302+
append(this.element, $('span.octicon.octicon-remote'));
303+
304+
const applyBadgeStyle = () => {
305+
if (!this.element) {
306+
return;
307+
}
308+
const bgColor = this.themeService.getTheme().getColor(STATUS_BAR_HOST_NAME_BACKGROUND);
309+
const fgColor = this.workspaceContextService.getWorkbenchState() === WorkbenchState.EMPTY ? this.themeService.getTheme().getColor(STATUS_BAR_NO_FOLDER_FOREGROUND) : this.themeService.getTheme().getColor(STATUS_BAR_FOREGROUND);
310+
this.element.style.backgroundColor = bgColor ? bgColor.toString() : '';
311+
this.element.style.color = fgColor ? fgColor.toString() : '';
312+
};
313+
applyBadgeStyle();
314+
this._register(this.themeService.onThemeChange(() => applyBadgeStyle()));
315+
this._register(this.workspaceContextService.onDidChangeWorkbenchState(() => applyBadgeStyle()));
316+
317+
const updateTitle = () => {
318+
if (this.element) {
319+
this.element.title = localize('remote extension title', "Extension in {0}", this.labelService.getHostLabel(REMOTE_HOST_SCHEME, this.environmentService.configuration.remoteAuthority));
320+
}
321+
};
322+
this._register(this.labelService.onDidChangeFormatters(() => updateTitle()));
323+
updateTitle();
324+
}
325+
}

‎src/vs/workbench/contrib/extensions/electron-browser/media/extensionEditor.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
width: 38px;
4040
height: 38px;
4141
line-height: 38px;
42+
border-radius: 20px;
43+
text-align: center;
4244
}
4345

4446
.extension-editor > .header > .icon-container .extension-remote-badge .octicon {

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,32 @@
102102
object-fit: contain;
103103
}
104104

105-
.extensions-viewlet > .extensions .monaco-list-row > .extension > .icon-container > .extension-remote-badge {
105+
.extensions-viewlet > .extensions .monaco-list-row > .extension > .icon-container .extension-remote-badge {
106106
position: absolute;
107107
right: 5px;
108108
bottom: 5px;
109+
width: 22px;
110+
height: 22px;
111+
line-height: 22px;
112+
border-radius: 20px;
113+
text-align: center;
114+
}
115+
116+
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header > .extension-remote-badge-container {
117+
margin-left: 6px;
118+
}
119+
120+
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header .extension-remote-badge {
121+
width: 14px;
122+
height: 14px;
123+
line-height: 14px;
124+
border-radius: 20px;
125+
text-align: center;
126+
}
127+
128+
.extensions-viewlet > .extensions .monaco-list-row > .extension > .details > .header-container > .header .extension-remote-badge > .octicon {
129+
font-size: 13px;
130+
vertical-align: middle;
109131
}
110132

111133
.extensions-viewlet.narrow > .extensions .extension > .icon-container,
@@ -146,10 +168,13 @@
146168
opacity: 0.85;
147169
font-size: 80%;
148170
padding-left: 6px;
149-
flex: 1;
150171
min-width: fit-content;
151172
}
152173

174+
.extensions-viewlet:not(.narrow) > .extensions .extension > .details > .header-container > .header > .version {
175+
flex: 1;
176+
}
177+
153178
.extensions-viewlet > .extensions .extension > .details > .header-container > .header > .install-count:not(:empty) {
154179
font-size: 80%;
155180
margin: 0 6px;
@@ -164,6 +189,7 @@
164189
text-align: right;
165190
}
166191

192+
.extensions-viewlet:not(.narrow) > .extensions .extension > .details > .header-container > .header > .extension-remote-badge-container,
167193
.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .ratings,
168194
.extensions-viewlet.narrow > .extensions .extension > .details > .header-container > .header > .install-count {
169195
display: none;

‎src/vs/workbench/contrib/extensions/electron-browser/media/extensionsWidgets.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,4 @@
4646

4747
.extension-ratings.small > .count {
4848
margin-left: 2px;
49-
}
50-
51-
.extension-remote-badge {
52-
width: 22px;
53-
height: 22px;
54-
line-height: 22px;
55-
border-radius: 20px;
56-
text-align: center;
5749
}

0 commit comments

Comments
 (0)