Use VSC API instead of hardcoding the uri resource vscode-resource (microsoft#7835)

* Update vscode dependency * News entry * Stop hardcoding 'vscode-resource' and use VSC api

Author: DonJayamanne

news/3 Code Health/7834.md

@@ -0,0 +1 @@
+Use `Webview.asWebviewUri` to generate a URI for use in the `Webview Panel` instead of hardcoding the resource `vscode-resource`.

src/client/common/application/webPanel.ts

@@ -5,8 +5,7 @@ import '../../common/extensions';
 
 import * as fs from 'fs-extra';
 import * as path from 'path';
-import { Uri, ViewColumn, WebviewPanel, window } from 'vscode';
-
+import { Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
 import * as localize from '../../common/utils/localize';
 import { Identifiers } from '../../datascience/constants';
 import { IServiceContainer } from '../../ioc/types';
@@ -89,7 +88,7 @@ export class WebPanel implements IWebPanel {
 
  // Call our special function that sticks this script inside of an html page
  // and translates all of the paths to vscode-resource URIs
- this.panel.webview.html = this.generateReactHtml(mainScriptPath, embeddedCss, settings);
+ this.panel.webview.html = this.generateReactHtml(mainScriptPath, this.panel.webview, embeddedCss, settings);
 
  // Reset when the current panel is closed
  this.disposableRegistry.push(this.panel.onDidDispose(() => {
@@ -118,11 +117,9 @@ export class WebPanel implements IWebPanel {
  }
 
  // tslint:disable-next-line:no-any
- private generateReactHtml(mainScriptPath: string, embeddedCss?: string, settings?: any) {
- const uriBasePath = Uri.file(`${path.dirname(mainScriptPath)}/`);
- const uriPath = Uri.file(mainScriptPath);
- const uriBase = uriBasePath.with({ scheme: 'vscode-resource' });
- const uri = uriPath.with({ scheme: 'vscode-resource' });
+ private generateReactHtml(mainScriptPath: string, webView: Webview, embeddedCss?: string, settings?: any) {
+ const uriBase = webView.asWebviewUri(Uri.file(`${path.dirname(mainScriptPath)}/`));
+ const uri = webView.asWebviewUri(Uri.file(mainScriptPath));
  const locDatabase = localize.getCollectionJSON();
  const style = embeddedCss ? embeddedCss : '';
  const settingsString = settings ? JSON.stringify(settings) : '{}';