blob: 4015f3a5625343e6f038b537154be78da469fe6b [file] [log] [blame]
/* eslint-disable no-case-declarations */
* Copyright 2020 The Go Authors. All rights reserved.
* Licensed under the MIT License. See LICENSE in the project root for license information.
// This code is modified from:
import vscode = require('vscode');
import path = require('path');
import semver = require('semver');
import { extensionId } from './const';
import { GoExtensionContext } from './context';
import { extensionInfo } from './config';
import { getFromGlobalState, updateGlobalState } from './stateUtils';
import { createRegisterCommand } from './commands';
export class WelcomePanel {
public static activate(ctx: vscode.ExtensionContext, goCtx: GoExtensionContext) {
const registerCommand = createRegisterCommand(ctx, goCtx);
registerCommand('go.welcome', WelcomePanel.createOrShow);
if (vscode.window.registerWebviewPanelSerializer) {
// Make sure we register a serializer in activation event
vscode.window.registerWebviewPanelSerializer(WelcomePanel.viewType, {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel) {
WelcomePanel.revive(webviewPanel, ctx.extensionUri);
// Show the Go welcome page on update.
if (!extensionInfo.isInCloudIDE) {
public static currentPanel: WelcomePanel | undefined;
public static readonly viewType = 'welcomeGo';
public static createOrShow(ctx: Pick<vscode.ExtensionContext, 'extensionUri'>) {
return () => {
const extensionUri = ctx.extensionUri;
const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
// If we already have a panel, show it.
if (WelcomePanel.currentPanel) {
// Otherwise, create a new panel.
const panel = vscode.window.createWebviewPanel(
'Go for VS Code',
column || vscode.ViewColumn.One,
// Enable javascript in the webview
enableScripts: true,
// And restrict the webview to only loading content from our extension's directory.
localResourceRoots: [joinPath(extensionUri)]
panel.iconPath = joinPath(extensionUri, 'media', 'go-logo-blue.png');
WelcomePanel.currentPanel = new WelcomePanel(panel, extensionUri);
public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
WelcomePanel.currentPanel = new WelcomePanel(panel, extensionUri);
public readonly dataroot: vscode.Uri; // exported for testing.
private readonly panel: vscode.WebviewPanel;
private readonly extensionUri: vscode.Uri;
private disposables: vscode.Disposable[] = [];
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
this.panel = panel;
this.extensionUri = extensionUri;
this.dataroot = joinPath(this.extensionUri, 'media');
// Set the webview's initial html content
// Listen for when the panel is disposed
// This happens when the user closes the panel or when the panel is closed programatically
this.panel.onDidDispose(() => this.dispose(), null, this.disposables);
// Handle messages from the webview
(message) => {
switch (message.command) {
case 'alert':
case 'openDocument':
const uri = joinPath(this.extensionUri, message.document);
vscode.commands.executeCommand('markdown.showPreviewToSide', uri);
case 'openSetting':
vscode.commands.executeCommand('workbench.action.openSettings', message.setting);
public dispose() {
WelcomePanel.currentPanel = undefined;
// Clean up our resources
while (this.disposables.length) {
const x = this.disposables.pop();
if (x) {
private update() {
const webview = this.panel.webview;
this.panel.webview.html = this.getHtmlForWebview(webview);
private getHtmlForWebview(webview: vscode.Webview) {
// Local path to css styles and images
const scriptPathOnDisk = joinPath(this.dataroot, 'welcome.js');
const stylePath = joinPath(this.dataroot, 'welcome.css');
const announcePath = vscode.Uri.joinPath(this.dataroot, 'announce.png');
const gopherPath = joinPath(this.dataroot, 'go-logo-blue.png');
const goExtension = vscode.extensions.getExtension(extensionId)!;
const goExtensionVersion = goExtension.packageJSON.version;
// Uri to load styles and images into webview
const scriptURI = webview.asWebviewUri(scriptPathOnDisk);
const stylesURI = webview.asWebviewUri(stylePath);
const gopherURI = webview.asWebviewUri(gopherPath);
const announceURI = webview.asWebviewUri(announcePath);
// Use a nonce to only allow specific scripts to be run
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
Use a content security policy to only allow loading images from https or from our extension directory,
and only allow scripts that have a specific nonce.
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${stylesURI}" rel="stylesheet">
<title>Go for VS Code</title>
<main class="Content">
<div class="Header">
<img src="${gopherURI}" alt="Go Logo" class="Header-logo"/>
<div class="Header-details">
<h1 class="Header-title">Go for VS Code v${goExtensionVersion}</h1>
<p>The official Go extension for Visual Studio Code, providing rich language support for Go projects.</p>
<ul class="Header-links">
Here and elsewhere, we must use a fake anchor for command buttons, to get styling
consistent with links. We can't fake this using CSS, as it conflicts with theming.
<li><a href="#" class="Command" data-command="openDocument" data-document="">Release notes</a></li>
<li><a href="">GitHub</a></li>
<li><a href="">Questions</a></li>
<li><a href="">Slack</a></li>
<div class="Announcement">
<img src="${announceURI}" alt="announce" class="Announcement-image" />
We are excited to announce a new
<a href="">code analysis feature</a>
that surfaces known vulnerabilities in your dependencies.
This vulncheck analyzer is backed by <a href="">
Go's vulnerability database</a> and the Go language server's integration of
<a href=""><code>govulncheck</code></a>.
Read <a href="">"Go's support for vulnerability management"</a>
to learn about the Go team's approach to helping Go developers secure their open-source dependencies.
Please share your feedback at
<a href=""></a>,
and report a bug in
<a href="">our issue tracker</a>.
<div class="Cards">
<div class="Card">
<div class="Card-inner">
<p class="Card-title">Getting started</p>
<p class="Card-content">Learn about the Go extension in our
<a href="">README</a>.
<div class="Card">
<div class="Card-inner">
<p class="Card-title">Learning Go</p>
<p class="Card-content">If you're new to the Go programming language,
<a href=""></a> is a great place to get started.</a>
<div class="Card">
<div class="Card-inner">
<p class="Card-title">Troubleshooting</p>
<p class="Card-content">Experiencing problems? Start with our
<a href="">troubleshooting guide</a>. </p> </div>
<script nonce="${nonce}" src="${scriptURI}"></script>
function getNonce() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 32; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
function joinPath(uri: vscode.Uri, ...pathFragment: string[]): vscode.Uri {
// Reimplementation of
// with Node.JS path. This is a temporary workaround for
if (!uri.path) {
throw new Error('[UriError]: cannot call joinPaths on URI without path');
return uri.with({ path: vscode.Uri.file(path.join(uri.fsPath, ...pathFragment)).path });
function showGoWelcomePage() {
// Update this list of versions when there is a new version where we want to
// show the welcome page on update.
const showVersions: string[] = ['0.37.0'];
// TODO(hyangah): use the content hash instead of hard-coded string.
let goExtensionVersion = '0.37.0';
let goExtensionVersionKey = 'go.extensionVersion';
if (extensionInfo.isPreview) {
goExtensionVersion = '0.0.0';
goExtensionVersionKey = 'go.nightlyExtensionVersion';
const savedGoExtensionVersion = getFromGlobalState(goExtensionVersionKey, '');
if (shouldShowGoWelcomePage(showVersions, goExtensionVersion, savedGoExtensionVersion)) {
if (goExtensionVersion !== savedGoExtensionVersion) {
updateGlobalState(goExtensionVersionKey, goExtensionVersion);
export function shouldShowGoWelcomePage(showVersions: string[], newVersion: string, oldVersion: string): boolean {
if (newVersion === oldVersion) {
return false;
const coercedNew = semver.coerce(newVersion);
const coercedOld = semver.coerce(oldVersion);
if (!coercedNew || !coercedOld) {
return true;
// Both semver.coerce(0.22.0) and semver.coerce(0.22.0-rc.1) will be 0.22.0.
return semver.gte(coercedNew, coercedOld) && showVersions.includes(coercedNew.toString());