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.

with '#' will be ignored, and an empty message aborts the commit.  # #
Date:      Mon Dec 21 10:14:23 2020 -0700 # # interactive rebase in
progress; onto 9e4206a # Last command done (1 command done): #
reword f0a0d55 feat: add helper header above extensions search # Next
commands to do (2 remaining commands): #    pick f256f32 Update
lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts
editing a commit while rebasing branch
'issue-2132-help-info-extension-search-view' on '9e4206aa'.  # # Changes
to be committed: #	modified:
lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts

Author: jsjoeio

lib/vscode/src/vs/workbench/contrib/extensions/browser/extensionsViewlet.ts

@@ -406,10 +406,44 @@ export class ExtensionsViewPaneContainer extends ViewPaneContainer implements IE
 		this.root = parent;
 
 		const overlay = append(this.root, $('.overlay'));
+
 		const overlayBackgroundColor = this.getColor(SIDE_BAR_DRAG_AND_DROP_BACKGROUND) ?? '';
 		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 = `
+			<div style="margin-bottom: 8px;">
+			<p style="margin-bottom: 0; display: flex; align-items: center"><span class="codicon codicon-warning" style="margin-right: 2px; color: #C4A103"></span>WARNING</p>
+			<p style="margin-top: 0; margin-bottom: 4px">
+			These extensions are not official. Find open-source extensions
+			<a href="https://open-vsx.org/" target="_blank">here</a>.
+			See <a href="https://github.com/cdr/code-server/blob/master/doc/FAQ.md#differences-compared-to-vs-code" target="_blank">docs</a>.
+			</p>
+			</div>
+					`;
+
+			const dismiss = append(helperHeader, $('span'));
+			dismiss.innerHTML = 'Dismiss';
+			dismiss.style.display = 'block';
+			dismiss.style.textAlign = 'right';
+			dismiss.style.cursor = 'pointer';
+			dismiss.onclick = () => {
+				// Eventually removes helperHeader from DOM
+				setTimeout(() => this.root?.removeChild(helperHeader));
+				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'] : '';