From d9508946b5e74bcdb853d8d0bcea1e5d68d49fd9 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Mon, 21 Dec 2020 10:14:23 -0700 Subject: [PATCH 1/2] feat: add helper header above extensions search Add a short message above the search box on the Extensions panel. This helps explain the extension divergence to the user. If they click dismiss, it stores an item in localStorage to prevent the message from showing up on subsequent loads. Co-authored-by: Asher --- .../extensions/browser/extensionsViewlet.ts | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts index 9cd1effb..018efd12 100644 --- a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts +++ b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts @@ -410,6 +410,38 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE overlay.style.backgroundColor = overlayBackgroundColor; hide(overlay); + // NOTE@coder this UI element helps users understand the extension marketplace divergence + const extensionHelperLocalStorageKey = 'coder.extension-help-message'; + + if (localStorage.getItem(extensionHelperLocalStorageKey) === null) { + const helperHeader = append(this.root, $('.header')); + helperHeader.id = 'codeServerMarketplaceHelper'; + helperHeader.style.height = 'auto'; + helperHeader.style.fontWeight = '600'; + helperHeader.style.padding = 'padding: 5px 16px'; + helperHeader.style.position = 'relative'; + helperHeader.innerHTML = ` +
+

WARNING

+

+ These extensions are not official. Find additional open-source extensions + here. + See docs. +

+
+ `; + + const dismiss = append(helperHeader, $('span')); + dismiss.innerHTML = 'Dismiss'; + dismiss.style.display = 'block'; + dismiss.style.textAlign = 'right'; + dismiss.style.cursor = 'pointer'; + dismiss.onclick = () => { + helperHeader.remove(); + localStorage.setItem(extensionHelperLocalStorageKey, 'viewed'); + }; + } + const header = append(this.root, $('.header')); const placeholder = localize('searchExtensions', "Search Extensions in Marketplace"); const searchValue = this.searchViewletState['query.value'] ? this.searchViewletState['query.value'] : ''; From 500ba924667bef2f6941270f35952d1cb16c47d2 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Mon, 11 Jan 2021 23:38:30 +0000 Subject: [PATCH 2/2] fix: style links with correct colors --- .../extensions/browser/extensionsViewlet.ts | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts index 018efd12..cb57ef40 100644 --- a/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts +++ b/lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts @@ -32,7 +32,7 @@ import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/ import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService'; import Severity from 'vs/base/common/severity'; import { IActivityService, NumberBadge } from 'vs/workbench/services/activity/common/activity'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IViewsRegistry, IViewDescriptor, Extensions, ViewContainer, IViewDescriptorService, IAddedViewDescriptorRef } from 'vs/workbench/common/views'; import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage'; @@ -61,6 +61,7 @@ import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme'; import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService'; import { WorkbenchStateContext } from 'vs/workbench/browser/contextkeys'; import { ICommandService } from 'vs/platform/commands/common/commands'; +import { textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; const DefaultViewsContext = new RawContextKey('defaultExtensionViews', true); const SearchMarketplaceExtensionsContext = new RawContextKey('searchMarketplaceExtensions', false); @@ -420,17 +421,21 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE helperHeader.style.fontWeight = '600'; helperHeader.style.padding = 'padding: 5px 16px'; helperHeader.style.position = 'relative'; - helperHeader.innerHTML = ` -
-

WARNING

-

- These extensions are not official. Find additional open-source extensions - here. - See docs. -

-
- `; - + // We call this function because it gives us access to the current theme + // Then we can apply the link color to the links in the helper header + registerThemingParticipant((theme) => { + const linkColor = theme.getColor(textLinkForeground); + helperHeader.innerHTML = ` +
+

WARNING

+

+ These extensions are not official. Find additional open-source extensions + here. + See docs. +

+
+ `; + }); const dismiss = append(helperHeader, $('span')); dismiss.innerHTML = 'Dismiss'; dismiss.style.display = 'block';