diff --git a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts index a2ceb4fe6aa..54cae148af8 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts +++ b/src/vs/workbench/parts/extensions/electron-browser/extensionEditor.ts @@ -111,6 +111,7 @@ export class ExtensionEditor extends BaseEditor { private icon: HTMLImageElement; private name: HTMLElement; + private identifier: HTMLElement; private license: HTMLElement; private publisher: HTMLElement; private installCount: HTMLElement; @@ -164,6 +165,7 @@ export class ExtensionEditor extends BaseEditor { const details = append(header, $('.details')); const title = append(details, $('.title')); this.name = append(title, $('span.name.clickable')); + this.identifier = append(title, $('span.identifier')); const subtitle = append(details, $('.subtitle')); this.publisher = append(subtitle, $('span.publisher.clickable')); @@ -209,6 +211,7 @@ export class ExtensionEditor extends BaseEditor { this.icon.src = extension.iconUrl; this.name.textContent = extension.displayName; + this.identifier.textContent = `${extension.publisher}.${extension.name}`; this.publisher.textContent = extension.publisherDisplayName; this.description.textContent = extension.description; diff --git a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css index c6f26264a5a..fb68b3fe648 100644 --- a/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css +++ b/src/vs/workbench/parts/extensions/electron-browser/media/extensionEditor.css @@ -39,13 +39,24 @@ } .extension-editor > .header > .details > .title > .name { - flex: 1; + flex: 0; font-size: 26px; line-height: 30px; font-weight: 600; white-space: nowrap; } +.extension-editor > .header > .details > .title > .identifier { + margin-left: 10px; + font-size: 14px; + opacity: 0.6; + background: rgba(173, 173, 173, 0.51); + padding: 0px 4px; + border-radius: 4px; + user-select: text; + -webkit-user-select: text; +} + .extension-editor > .header > .details > .subtitle { padding-top: 10px; white-space: nowrap;