From cc4988c0de1dd6cc8313c7f5eea822f2d9a7fd0a Mon Sep 17 00:00:00 2001 From: "Elian H. Thiele-Evans" <60372411+ElianHugh@users.noreply.github.com> Date: Wed, 18 Aug 2021 13:24:31 +1000 Subject: [PATCH 1/3] Add icons to webviews --- images/icons/dark/graph.svg | 3 +++ images/icons/dark/help.svg | 3 +++ images/icons/dark/preview.svg | 3 +++ images/icons/dark/search.svg | 3 +++ images/icons/light/graph.svg | 3 +++ images/icons/light/help.svg | 10 ++++++++++ images/icons/light/preview.svg | 3 +++ images/icons/light/search.svg | 3 +++ src/extension.ts | 27 +++++++++++++++++++++++++++ src/helpViewer/panel.ts | 9 +++++---- src/plotViewer/index.ts | 7 ++++--- src/rmarkdown/preview.ts | 5 ++++- src/session.ts | 4 +++- src/util.ts | 1 + 14 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 images/icons/dark/graph.svg create mode 100644 images/icons/dark/help.svg create mode 100644 images/icons/dark/preview.svg create mode 100644 images/icons/dark/search.svg create mode 100644 images/icons/light/graph.svg create mode 100644 images/icons/light/help.svg create mode 100644 images/icons/light/preview.svg create mode 100644 images/icons/light/search.svg diff --git a/images/icons/dark/graph.svg b/images/icons/dark/graph.svg new file mode 100644 index 000000000..e07277064 --- /dev/null +++ b/images/icons/dark/graph.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/dark/help.svg b/images/icons/dark/help.svg new file mode 100644 index 000000000..a0a00f005 --- /dev/null +++ b/images/icons/dark/help.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/dark/preview.svg b/images/icons/dark/preview.svg new file mode 100644 index 000000000..6f3c492bc --- /dev/null +++ b/images/icons/dark/preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/dark/search.svg b/images/icons/dark/search.svg new file mode 100644 index 000000000..a1c331533 --- /dev/null +++ b/images/icons/dark/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/light/graph.svg b/images/icons/light/graph.svg new file mode 100644 index 000000000..05facbc1f --- /dev/null +++ b/images/icons/light/graph.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/light/help.svg b/images/icons/light/help.svg new file mode 100644 index 000000000..a6977ef94 --- /dev/null +++ b/images/icons/light/help.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/icons/light/preview.svg b/images/icons/light/preview.svg new file mode 100644 index 000000000..2263883c6 --- /dev/null +++ b/images/icons/light/preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/light/search.svg b/images/icons/light/search.svg new file mode 100644 index 000000000..9a3956586 --- /dev/null +++ b/images/icons/light/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/extension.ts b/src/extension.ts index 29d70673f..7e1300fba 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -33,6 +33,12 @@ export let extensionContext: vscode.ExtensionContext; export let enableSessionWatcher: boolean = undefined; export let globalHttpgdManager: httpgdViewer.HttpgdManager | undefined = undefined; export let rMarkdownPreview: RMarkdownPreviewManager | undefined = undefined; +export let iconPaths: { + [key: string]: { + light: vscode.Uri; + dark: vscode.Uri; + }; +}; // Called (once) when the extension is activated export async function activate(context: vscode.ExtensionContext): Promise { @@ -49,6 +55,27 @@ export async function activate(context: vscode.ExtensionContext): Promise('sessionWatcher'); diff --git a/src/helpViewer/panel.ts b/src/helpViewer/panel.ts index 9821d5928..a3b2c8b05 100644 --- a/src/helpViewer/panel.ts +++ b/src/helpViewer/panel.ts @@ -5,6 +5,7 @@ import * as cheerio from 'cheerio'; import { HelpFile, RHelp } from '.'; import { setContext } from '../util'; +import { iconPaths } from '../extension'; //// Declaration of interfaces used/implemented by the Help Panel class @@ -73,7 +74,6 @@ export class HelpPanel { preserveFocus: preserveFocus }; this.panel = vscode.window.createWebviewPanel('rhelp', 'R Help', showOptions, webViewOptions); - this.initializePanel(); } @@ -82,8 +82,9 @@ export class HelpPanel { return this.panel.webview; } - - private initializePanel(){ + + private initializePanel() { + this.panel.iconPath = iconPaths?.help; // virtual uris used to access local files this.webviewScriptUri = this.panel.webview.asWebviewUri(this.webviewScriptFile); this.webviewStyleUri = this.panel.webview.asWebviewUri(this.webviewStyleFile); @@ -109,7 +110,7 @@ export class HelpPanel { void this.setContextValues(); }); } - + public async setContextValues(): Promise { await setContext('r.helpPanel.active', !!this.panel?.active); diff --git a/src/plotViewer/index.ts b/src/plotViewer/index.ts index 0b5c91f85..828acefd6 100644 --- a/src/plotViewer/index.ts +++ b/src/plotViewer/index.ts @@ -10,7 +10,7 @@ import * as ejs from 'ejs'; import { config, setContext } from '../util'; -import { extensionContext } from '../extension'; +import { extensionContext, iconPaths } from '../extension'; import { FocusPlotMessage, InMessage, OutMessage, ToggleStyleMessage, UpdatePlotMessage, HidePlotMessage, AddPlotMessage, PreviewPlotLayout, PreviewPlotLayoutMessage, ToggleFullWindowMessage } from './webviewMessages'; @@ -272,7 +272,7 @@ export class HttpgdViewer implements IHttpgdViewer { readonly defaultPreviewPlotLayout: PreviewPlotLayout = 'multirow'; previewPlotLayout: PreviewPlotLayout; - + readonly defaultFullWindow: boolean = false; fullWindow: boolean; @@ -480,7 +480,7 @@ export class HttpgdViewer implements IHttpgdViewer { }; this.postWebviewMessage(msg); } - + public toggleFullWindow(force?: boolean): void { this.fullWindow = force ?? !this.fullWindow; const msg: ToggleFullWindowMessage = { @@ -745,6 +745,7 @@ export class HttpgdViewer implements IHttpgdViewer { showOptions || this.showOptions, this.webviewOptions ); + webviewPanel.iconPath = iconPaths?.plot; webviewPanel.onDidDispose(() => this.webviewPanel = undefined); webviewPanel.onDidChangeViewState(() => { void this.setContextValues(); diff --git a/src/rmarkdown/preview.ts b/src/rmarkdown/preview.ts index 53932ad9c..6565ddafe 100644 --- a/src/rmarkdown/preview.ts +++ b/src/rmarkdown/preview.ts @@ -9,7 +9,7 @@ import crypto = require('crypto'); import { config, doWithProgress, getRpath, readContent, setContext, escapeHtml } from '../util'; -import { extensionContext, tmpDir } from '../extension'; +import { extensionContext, tmpDir, iconPaths } from '../extension'; class RMarkdownPreview extends vscode.Disposable { title: string; @@ -377,6 +377,7 @@ export class RMarkdownPreviewManager { } private openPreview(outputUri: vscode.Uri, filePath: string, title: string, cp: cp.ChildProcessWithoutNullStreams, viewer: vscode.ViewColumn, resourceViewColumn: vscode.ViewColumn, autoRefresh: boolean): void { + const panel = vscode.window.createWebviewPanel( 'previewRmd', `Preview ${title}`, @@ -391,6 +392,8 @@ export class RMarkdownPreviewManager { localResourceRoots: [vscode.Uri.file(tmpDir())], }); + panel.iconPath = iconPaths?.preview; + // Push the new rmd webview to the open proccesses array, // to keep track of running child processes // (primarily used in killing the child process, but also diff --git a/src/session.ts b/src/session.ts index 3fa108fed..cfb501b38 100644 --- a/src/session.ts +++ b/src/session.ts @@ -14,7 +14,7 @@ import { FSWatcher } from 'fs-extra'; import { config, readContent } from './util'; import { purgeAddinPickerItems, dispatchRStudioAPICall } from './rstudioapi'; -import { homeExtDir, rWorkspace, globalRHelp, globalHttpgdManager, extensionContext } from './extension'; +import { homeExtDir, rWorkspace, globalRHelp, globalHttpgdManager, extensionContext, iconPaths } from './extension'; import { UUID, rHostService, rGuestService, isLiveShare, isHost, isGuestSession, closeBrowser, guestResDir, shareBrowser, openVirtualDoc, shareWorkspace } from './liveShare'; export let globalenv: any; @@ -323,6 +323,7 @@ export async function showDataView(source: string, type: string, title: string, localResourceRoots: [Uri.file(resDir)], }); const content = await getTableHtml(panel.webview, file); + panel.iconPath = iconPaths?.dataView; panel.webview.html = content; } else if (source === 'list') { const panel = window.createWebviewPanel('dataview', title, @@ -337,6 +338,7 @@ export async function showDataView(source: string, type: string, title: string, localResourceRoots: [Uri.file(resDir)], }); const content = await getListHtml(panel.webview, file); + panel.iconPath = iconPaths?.dataView; panel.webview.html = content; } else { if (isGuestSession) { diff --git a/src/util.ts b/src/util.ts index b961cf268..d0feebb4e 100644 --- a/src/util.ts +++ b/src/util.ts @@ -361,3 +361,4 @@ export function getDir(dirPath: string): string { } return dirPath; } + From 758ee1366301ffffe48d9dae36cf89d8cffba2eb Mon Sep 17 00:00:00 2001 From: "Elian H. Thiele-Evans" <60372411+ElianHugh@users.noreply.github.com> Date: Thu, 19 Aug 2021 20:54:56 +1000 Subject: [PATCH 2/3] Use class for icon sourcing - Use the UriIcon constructor to create icon uris --- images/icons/dark/globe.svg | 3 +++ images/icons/dark/open-preview.svg | 3 +++ images/icons/light/globe.svg | 3 +++ images/icons/light/open-preview.svg | 3 +++ src/extension.ts | 28 +--------------------------- src/helpViewer/panel.ts | 6 ++---- src/plotViewer/index.ts | 6 +++--- src/rmarkdown/preview.ts | 6 +++--- src/session.ts | 11 ++++++----- src/util.ts | 10 ++++++++++ 10 files changed, 37 insertions(+), 42 deletions(-) create mode 100644 images/icons/dark/globe.svg create mode 100644 images/icons/dark/open-preview.svg create mode 100644 images/icons/light/globe.svg create mode 100644 images/icons/light/open-preview.svg diff --git a/images/icons/dark/globe.svg b/images/icons/dark/globe.svg new file mode 100644 index 000000000..1ff60a534 --- /dev/null +++ b/images/icons/dark/globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/dark/open-preview.svg b/images/icons/dark/open-preview.svg new file mode 100644 index 000000000..b4ba465da --- /dev/null +++ b/images/icons/dark/open-preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/light/globe.svg b/images/icons/light/globe.svg new file mode 100644 index 000000000..a7ad58fe5 --- /dev/null +++ b/images/icons/light/globe.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/light/open-preview.svg b/images/icons/light/open-preview.svg new file mode 100644 index 000000000..0e0e63c62 --- /dev/null +++ b/images/icons/light/open-preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/extension.ts b/src/extension.ts index 7e1300fba..e68b6e246 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -33,12 +33,6 @@ export let extensionContext: vscode.ExtensionContext; export let enableSessionWatcher: boolean = undefined; export let globalHttpgdManager: httpgdViewer.HttpgdManager | undefined = undefined; export let rMarkdownPreview: RMarkdownPreviewManager | undefined = undefined; -export let iconPaths: { - [key: string]: { - light: vscode.Uri; - dark: vscode.Uri; - }; -}; // Called (once) when the extension is activated export async function activate(context: vscode.ExtensionContext): Promise { @@ -55,30 +49,10 @@ export async function activate(context: vscode.ExtensionContext): Promise('sessionWatcher'); + // register commands specified in package.json const commands = { // create R terminal diff --git a/src/helpViewer/panel.ts b/src/helpViewer/panel.ts index a3b2c8b05..a345f035d 100644 --- a/src/helpViewer/panel.ts +++ b/src/helpViewer/panel.ts @@ -4,9 +4,7 @@ import * as vscode from 'vscode'; import * as cheerio from 'cheerio'; import { HelpFile, RHelp } from '.'; -import { setContext } from '../util'; -import { iconPaths } from '../extension'; - +import { setContext, UriIcon } from '../util'; //// Declaration of interfaces used/implemented by the Help Panel class // specified when creating a new help panel @@ -84,7 +82,7 @@ export class HelpPanel { } private initializePanel() { - this.panel.iconPath = iconPaths?.help; + this.panel.iconPath = new UriIcon('help'); // virtual uris used to access local files this.webviewScriptUri = this.panel.webview.asWebviewUri(this.webviewScriptFile); this.webviewStyleUri = this.panel.webview.asWebviewUri(this.webviewStyleFile); diff --git a/src/plotViewer/index.ts b/src/plotViewer/index.ts index 828acefd6..2e1199245 100644 --- a/src/plotViewer/index.ts +++ b/src/plotViewer/index.ts @@ -8,9 +8,9 @@ import * as path from 'path'; import * as fs from 'fs'; import * as ejs from 'ejs'; -import { config, setContext } from '../util'; +import { config, setContext, UriIcon } from '../util'; -import { extensionContext, iconPaths } from '../extension'; +import { extensionContext } from '../extension'; import { FocusPlotMessage, InMessage, OutMessage, ToggleStyleMessage, UpdatePlotMessage, HidePlotMessage, AddPlotMessage, PreviewPlotLayout, PreviewPlotLayoutMessage, ToggleFullWindowMessage } from './webviewMessages'; @@ -745,7 +745,7 @@ export class HttpgdViewer implements IHttpgdViewer { showOptions || this.showOptions, this.webviewOptions ); - webviewPanel.iconPath = iconPaths?.plot; + webviewPanel.iconPath = new UriIcon('graph'); webviewPanel.onDidDispose(() => this.webviewPanel = undefined); webviewPanel.onDidChangeViewState(() => { void this.setContextValues(); diff --git a/src/rmarkdown/preview.ts b/src/rmarkdown/preview.ts index 6565ddafe..f721667bf 100644 --- a/src/rmarkdown/preview.ts +++ b/src/rmarkdown/preview.ts @@ -8,8 +8,8 @@ import path = require('path'); import crypto = require('crypto'); -import { config, doWithProgress, getRpath, readContent, setContext, escapeHtml } from '../util'; -import { extensionContext, tmpDir, iconPaths } from '../extension'; +import { config, doWithProgress, getRpath, readContent, setContext, escapeHtml, UriIcon } from '../util'; +import { extensionContext, tmpDir } from '../extension'; class RMarkdownPreview extends vscode.Disposable { title: string; @@ -392,7 +392,7 @@ export class RMarkdownPreviewManager { localResourceRoots: [vscode.Uri.file(tmpDir())], }); - panel.iconPath = iconPaths?.preview; + panel.iconPath = new UriIcon('preview'); // Push the new rmd webview to the open proccesses array, // to keep track of running child processes diff --git a/src/session.ts b/src/session.ts index cfb501b38..6af47dbf6 100644 --- a/src/session.ts +++ b/src/session.ts @@ -11,10 +11,10 @@ import { commands, StatusBarItem, Uri, ViewColumn, Webview, window, workspace, e import { runTextInTerm } from './rTerminal'; import { FSWatcher } from 'fs-extra'; -import { config, readContent } from './util'; +import { config, readContent, UriIcon } from './util'; import { purgeAddinPickerItems, dispatchRStudioAPICall } from './rstudioapi'; -import { homeExtDir, rWorkspace, globalRHelp, globalHttpgdManager, extensionContext, iconPaths } from './extension'; +import { homeExtDir, rWorkspace, globalRHelp, globalHttpgdManager, extensionContext } from './extension'; import { UUID, rHostService, rGuestService, isLiveShare, isHost, isGuestSession, closeBrowser, guestResDir, shareBrowser, openVirtualDoc, shareWorkspace } from './liveShare'; export let globalenv: any; @@ -237,6 +237,7 @@ export async function showBrowser(url: string, title: string, viewer: string | b } void commands.executeCommand('setContext', 'r.browser.active', false); }); + panel.iconPath = new UriIcon('globe'); panel.webview.html = getBrowserHtml(externalUri); } console.info('[showBrowser] Done'); @@ -297,7 +298,7 @@ export async function showWebView(file: string, title: string, viewer: string | retainContextWhenHidden: true, localResourceRoots: [Uri.file(dir), Uri.file(webviewDir)], }); - + panel.iconPath = new UriIcon('globe'); panel.webview.html = await getWebviewHtml(panel.webview, file, title, dir, webviewDir); } console.info('[showWebView] Done'); @@ -323,7 +324,7 @@ export async function showDataView(source: string, type: string, title: string, localResourceRoots: [Uri.file(resDir)], }); const content = await getTableHtml(panel.webview, file); - panel.iconPath = iconPaths?.dataView; + panel.iconPath = new UriIcon('open-preview'); panel.webview.html = content; } else if (source === 'list') { const panel = window.createWebviewPanel('dataview', title, @@ -338,7 +339,7 @@ export async function showDataView(source: string, type: string, title: string, localResourceRoots: [Uri.file(resDir)], }); const content = await getListHtml(panel.webview, file); - panel.iconPath = iconPaths?.dataView; + panel.iconPath = new UriIcon('open-preview'); panel.webview.html = content; } else { if (isGuestSession) { diff --git a/src/util.ts b/src/util.ts index d0feebb4e..c392a8953 100644 --- a/src/util.ts +++ b/src/util.ts @@ -7,6 +7,7 @@ import * as path from 'path'; import * as vscode from 'vscode'; import * as cp from 'child_process'; import { rGuestService, isGuestSession } from './liveShare'; +import { extensionContext } from './extension'; export function config(): vscode.WorkspaceConfiguration { return vscode.workspace.getConfiguration('r'); @@ -362,3 +363,12 @@ export function getDir(dirPath: string): string { return dirPath; } +export class UriIcon { + dark: vscode.Uri; + light: vscode.Uri; + constructor(id: string) { + const extIconPath = extensionContext.asAbsolutePath('images/icons'); + this.dark = vscode.Uri.file(path.join(extIconPath, 'dark', id + '.svg')); + this.light = vscode.Uri.file(path.join(extIconPath, 'light', id + '.svg')); + } +} From 8460b97175e0c1a451b5165076042b1323b67b7e Mon Sep 17 00:00:00 2001 From: "Elian H. Thiele-Evans" <60372411+ElianHugh@users.noreply.github.com> Date: Fri, 20 Aug 2021 01:10:53 +1000 Subject: [PATCH 3/3] Remove unused icon - Removes the search.svg icon, as open-preview.svg was used instead --- images/icons/dark/search.svg | 3 --- images/icons/light/search.svg | 3 --- 2 files changed, 6 deletions(-) delete mode 100644 images/icons/dark/search.svg delete mode 100644 images/icons/light/search.svg diff --git a/images/icons/dark/search.svg b/images/icons/dark/search.svg deleted file mode 100644 index a1c331533..000000000 --- a/images/icons/dark/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/images/icons/light/search.svg b/images/icons/light/search.svg deleted file mode 100644 index 9a3956586..000000000 --- a/images/icons/light/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - -