blob: e6699418fe53e2e4cff4b27de4e39e24d96b6d9f [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 { extensionId } from './const';
export class WelcomePanel {
public static currentPanel: WelcomePanel | undefined;
public static readonly viewType = 'welcomeGo';
public static createOrShow(extensionUri: vscode.Uri) {
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" />
Heads up!
The extension now uses Delve's native DAP implementation (<a href="">dlv-dap</a>)
for local debugging. We updated the <a href="">
Documentation for Debugging</a> to show the new features available with dlv-dap.
This change does not apply to remote debugging yet. For remote debugging, keep following
the instruction in the <a href="">old documentation</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 });