@@ -32,7 +32,7 @@ import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/
3232import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService' ;
3333import Severity from 'vs/base/common/severity' ;
3434import { IActivityService , NumberBadge } from 'vs/workbench/services/activity/common/activity' ;
35- import { IThemeService } from 'vs/platform/theme/common/themeService' ;
35+ import { IThemeService , registerThemingParticipant } from 'vs/platform/theme/common/themeService' ;
3636import { IConfigurationService } from 'vs/platform/configuration/common/configuration' ;
3737import { IViewsRegistry , IViewDescriptor , Extensions , ViewContainer , IViewDescriptorService , IAddedViewDescriptorRef } from 'vs/workbench/common/views' ;
3838import { IStorageService , StorageScope } from 'vs/platform/storage/common/storage' ;
@@ -61,6 +61,7 @@ import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
6161import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService' ;
6262import { WorkbenchStateContext } from 'vs/workbench/browser/contextkeys' ;
6363import { ICommandService } from 'vs/platform/commands/common/commands' ;
64+ import { textLinkForeground } from 'vs/platform/theme/common/colorRegistry' ;
6465
6566const DefaultViewsContext = new RawContextKey < boolean > ( 'defaultExtensionViews' , true ) ;
6667const SearchMarketplaceExtensionsContext = new RawContextKey < boolean > ( 'searchMarketplaceExtensions' , false ) ;
@@ -410,6 +411,42 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
410411 overlay . style . backgroundColor = overlayBackgroundColor ;
411412 hide ( overlay ) ;
412413
414+ // NOTE@coder this UI element helps users understand the extension marketplace divergence
415+ const extensionHelperLocalStorageKey = 'coder.extension-help-message' ;
416+ 417+ if ( localStorage . getItem ( extensionHelperLocalStorageKey ) === null ) {
418+ const helperHeader = append ( this . root , $ ( '.header' ) ) ;
419+ helperHeader . id = 'codeServerMarketplaceHelper' ;
420+ helperHeader . style . height = 'auto' ;
421+ helperHeader . style . fontWeight = '600' ;
422+ helperHeader . style . padding = 'padding: 5px 16px' ;
423+ helperHeader . style . position = 'relative' ;
424+ // We call this function because it gives us access to the current theme
425+ // Then we can apply the link color to the links in the helper header
426+ registerThemingParticipant ( ( theme ) => {
427+ const linkColor = theme . getColor ( textLinkForeground ) ;
428+ helperHeader . innerHTML = `
429+ <div style="margin-bottom: 8px;">
430+ <p style="margin-bottom: 0; display: flex; align-items: center"><span class="codicon codicon-warning" style="margin-right: 2px; color: #C4A103"></span>WARNING</p>
431+ <p style="margin-top: 0; margin-bottom: 4px">
432+ These extensions are not official. Find additional open-source extensions
433+ <a style="color: ${ linkColor }
434+ See <a style="color: ${ linkColor }
435+ </p>
436+ </div>
437+ ` ;
438+ } ) ;
439+ const dismiss = append ( helperHeader , $ ( 'span' ) ) ;
440+ dismiss . innerHTML = 'Dismiss' ;
441+ dismiss . style . display = 'block' ;
442+ dismiss . style . textAlign = 'right' ;
443+ dismiss . style . cursor = 'pointer' ;
444+ dismiss . onclick = ( ) => {
445+ helperHeader . remove ( ) ;
446+ localStorage . setItem ( extensionHelperLocalStorageKey , 'viewed' ) ;
447+ } ;
448+ }
449+ 413450 const header = append ( this . root , $ ( '.header' ) ) ;
414451 const placeholder = localize ( 'searchExtensions' , "Search Extensions in Marketplace" ) ;
415452 const searchValue = this . searchViewletState [ 'query.value' ] ? this . searchViewletState [ 'query.value' ] : '' ;
0 commit comments