bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-06-13 07:10:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove some unused code

Browse Source
This commit is contained in:
Matt Bierner
2020-08-06 13:48:32 -07:00
parent 65e8ac68ae
commit 644f68e6f0
6 changed files with 34 additions and 1467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
webview-codicons-sample/README.md
View File

@ -1,34 +1,18 @@
# Cat Coding — A Webview API Sample
# Cat Codicons
Demonstrates VS Code's [webview API](https://code.visualstudio.com/api/extension-guides/webview). This includes:
- Creating and showing a basic webview.
- Dynamically updating a webview's content.
- Loading local content in a webview.
- Running scripts in a webview.
- Sending message from an extension to a webview.
- Sending messages from a webview to an extension.
- Using a basic content security policy.
- Webview lifecycle and handling dispose.
- Saving and restoring state when the panel goes into the background.
- Serialization and persistence across VS Code reboots.
## Demo
![demo](demo.gif)
Demonstrates loading [codicons](https://github.com/microsoft/vscode-codicons) in a [webview](https://code.visualstudio.com/api/extension-guides/webview).
## VS Code API
### `vscode` module
- [`window.createWebviewPanel`](https://code.visualstudio.com/api/references/vscode-api#window.createWebviewPanel)
- [`window.registerWebviewPanelSerializer`](https://code.visualstudio.com/api/references/vscode-api#window.registerWebviewPanelSerializer)
## Running the example
- Open this example in VS Code 1.25+
- Open this example in VS Code 1.47+
- `npm install`
- `npm run watch` or `npm run compile`
- `F5` to start debugging
Run the `Cat Coding: Start cat coding session` to create the webview.
Run the `Cat Codicons: Show Cat Codicons` command to create the webview.

BIN
webview-codicons-sample/media/cat.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.4 MiB

39
webview-codicons-sample/media/main.js
View File

@ -1,39 +0,0 @@
// This script will be run within the webview itself
// It cannot access the main VS Code APIs directly.
(function () {
const vscode = acquireVsCodeApi();
const oldState = vscode.getState();
const counter = document.getElementById('lines-of-code-counter');
console.log(oldState);
let currentCount = (oldState && oldState.count) || 0;
counter.textContent = currentCount;
setInterval(() => {
counter.textContent = currentCount++;
// Update state
vscode.setState({ count: currentCount });
// Alert the extension when the cat introduces a bug
if (Math.random() < Math.min(0.001 * currentCount, 0.05)) {
// Send a message back to the extension
vscode.postMessage({
command: 'alert',
text: '🐛 on line ' + currentCount
});
}
}, 100);
// Handle messages sent from the extension to the webview
window.addEventListener('message', event => {
const message = event.data; // The json data that the extension sent
switch (message.command) {
case 'refactor':
currentCount = Math.ceil(currentCount * 0.5);
counter.textContent = currentCount;
break;
}
});
}());

1239
webview-codicons-sample/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
webview-codicons-sample/package.json
View File

@ -1,6 +1,6 @@
{
"name": "cat-coding",
"description": "Cat Coding - A Webview API Sample",
"name": "cat-codicons",
"description": "Cat Codicons - Using codicons in webviews",
"version": "0.0.1",
"publisher": "vscode-samples",
"engines": {
@ -10,9 +10,7 @@
"Other"
],
"activationEvents": [
"onCommand:catCoding.start",
"onCommand:catCoding.doRefactor",
"onWebviewPanel:catCoding"
"onCommand:catCodicons.show"
],
"repository": {
"type": "git",
@ -22,14 +20,9 @@
"contributes": {
"commands": [
{
"command": "catCoding.start",
"title": "Start cat coding session",
"category": "Cat Coding"
},
{
"command": "catCoding.doRefactor",
"title": "Do some refactoring",
"category": "Cat Coding"
"command": "catCodicons.show",
"title": "Show Cat Codicons",
"category": "Cat Codicons"
}
]
},

180
webview-codicons-sample/src/extension.ts
View File

@ -1,198 +1,67 @@
import * as path from 'path';
import * as vscode from 'vscode';
const cats = {
'Coding Cat': 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif',
'Compiling Cat': 'https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif',
'Testing Cat': 'https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif'
};
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.start', () => {
CatCodingPanel.createOrShow(context.extensionPath);
vscode.commands.registerCommand('catCodicons.show', () => {
CatCodiconsPanel.show(context.extensionPath);
})
);
context.subscriptions.push(
vscode.commands.registerCommand('catCoding.doRefactor', () => {
if (CatCodingPanel.currentPanel) {
CatCodingPanel.currentPanel.doRefactor();
}
})
);
if (vscode.window.registerWebviewPanelSerializer) {
// Make sure we register a serializer in activation event
vscode.window.registerWebviewPanelSerializer(CatCodingPanel.viewType, {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
console.log(`Got state: ${state}`);
CatCodingPanel.revive(webviewPanel, context.extensionPath);
}
});
}
}
/**
* Manages cat coding webview panels
*/
class CatCodingPanel {
/**
* Track the currently panel. Only allow a single panel to exist at a time.
*/
public static currentPanel: CatCodingPanel | undefined;
public static readonly viewType = 'catCoding';
class CatCodiconsPanel {
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionPath: string;
private _disposables: vscode.Disposable[] = [];
public static readonly viewType = 'catCodicons';
public static createOrShow(extensionPath: string) {
public static show(extensionPath: string) {
const column = vscode.window.activeTextEditor
? vscode.window.activeTextEditor.viewColumn
: undefined;
// If we already have a panel, show it.
if (CatCodingPanel.currentPanel) {
CatCodingPanel.currentPanel._panel.reveal(column);
return;
}
// Otherwise, create a new panel.
const panel = vscode.window.createWebviewPanel(
CatCodingPanel.viewType,
'Cat Coding',
column || vscode.ViewColumn.One,
{
// Enable javascript in the webview
enableScripts: true,
}
CatCodiconsPanel.viewType,
"Cat Codicons",
column || vscode.ViewColumn.One
);
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
panel.webview.html = this._getHtmlForWebview(panel.webview, extensionPath);
}
public static revive(panel: vscode.WebviewPanel, extensionPath: string) {
CatCodingPanel.currentPanel = new CatCodingPanel(panel, extensionPath);
}
private static _getHtmlForWebview(webview: vscode.Webview, extensionPath: string) {
private constructor(panel: vscode.WebviewPanel, extensionPath: string) {
this._panel = panel;
this._extensionPath = extensionPath;
// Set the webview's initial html content
this._update();
// 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);
// Update the content based on view changes
this._panel.onDidChangeViewState(
e => {
if (this._panel.visible) {
this._update();
}
},
null,
this._disposables
);
// Handle messages from the webview
this._panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'alert':
vscode.window.showErrorMessage(message.text);
return;
}
},
null,
this._disposables
);
}
public doRefactor() {
// Send a message to the webview webview.
// You can send any JSON serializable data.
this._panel.webview.postMessage({ command: 'refactor' });
}
public dispose() {
CatCodingPanel.currentPanel = undefined;
// Clean up our resources
this._panel.dispose();
while (this._disposables.length) {
const x = this._disposables.pop();
if (x) {
x.dispose();
}
}
}
private _update() {
const webview = this._panel.webview;
// Vary the webview's content based on where it is located in the editor.
switch (this._panel.viewColumn) {
case vscode.ViewColumn.Two:
this._updateForCat(webview, 'Compiling Cat');
return;
case vscode.ViewColumn.Three:
this._updateForCat(webview, 'Testing Cat');
return;
case vscode.ViewColumn.One:
default:
this._updateForCat(webview, 'Coding Cat');
return;
}
}
private _updateForCat(webview: vscode.Webview, catName: keyof typeof cats) {
this._panel.title = catName;
this._panel.webview.html = this._getHtmlForWebview(webview, cats[catName]);
}
private _getHtmlForWebview(webview: vscode.Webview, catGifPath: string) {
// Use a nonce to whitelist which scripts can be run
// Use a nonce to only allow specific resources
const nonce = getNonce();
const styleUri = webview.asWebviewUri(vscode.Uri.file(
path.join(this._extensionPath, "media", "styles.css")
path.join(extensionPath, "media", "styles.css")
));
const codiconsUri = webview.asWebviewUri(vscode.Uri.file(
path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css')
path.join(extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css')
));
const codiconsFontUri = webview.asWebviewUri(vscode.Uri.file(
path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.ttf')
path.join(extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.ttf')
));
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<html lang="en">
<head>
<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.
<!--
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'; img-src ${webview.cspSource} blob:; font-src ${codiconsFontUri}; style-src ${webview.cspSource} ${codiconsUri}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
<link href="${styleUri}" rel="stylesheet" />
<link href="${codiconsUri}" rel="stylesheet" />
</head>
</head>
<body>
<h1>codicons</h1>
<div id="icons">
@ -522,10 +391,9 @@ class CatCodingPanel {
<div class="icon"><i class="codicon codicon-zoom-in"></i> zoom-in</div>
<div class="icon"><i class="codicon codicon-zoom-out"></i> zoom-out</div>
</div>
</body>
</html>`;
</body>
</html>`;
}
}
function getNonce() {