Web variable viewer (#10154)

* will it work?

* lint fixes

* added to extension.web.ts

* it works, but I need to clean things up

* it works!

* lint fix and re-using the proxy variable

src/extension.web.ts

@@ -70,6 +70,7 @@ import { registerTypes as registerNotebookTypes } from './notebooks/serviceRegis
 import { registerTypes as registerInteractiveTypes } from './interactive-window/serviceRegistry.web';
 import { registerTypes as registerIntellisenseTypes } from './intellisense/serviceRegistry.web';
 import { registerTypes as registerTerminalTypes } from './platform/terminals/serviceRegistry.web';
+import { registerTypes as registerWebviewTypes } from './webviews/extension-side/serviceRegistry.web';
 import { IExtensionActivationManager } from './platform/activation/types';
 import { isCI, isTestExecution, STANDARD_OUTPUT_CHANNEL } from './platform/common/constants';
 import { getJupyterOutputChannel } from './platform/devTools/jupyterOutputChannel';
@@ -289,6 +290,7 @@ async function activateLegacy(
     registerInteractiveTypes(serviceManager);
     registerIntellisenseTypes(serviceManager, isDevMode);
     registerTerminalTypes(serviceManager);
+    registerWebviewTypes(serviceManager, isDevMode);
 
     // Load the two data science experiments that we need to register types
     // Await here to keep the register method sync

src/kernels/serviceRegistry.node.ts

@@ -36,7 +36,7 @@ import { PythonVariablesRequester } from './variables/pythonVariableRequester';
 import { IInteractiveWindowDebugger } from '../interactive-window/types';
 import { MultiplexingDebugService } from './debugger/multiplexingDebugService';
 import { JupyterVariableDataProvider } from '../webviews/extension-side/dataviewer/jupyterVariableDataProvider';
-import { JupyterVariableDataProviderFactory } from '../webviews/extension-side/dataviewer/jupyterVariableDataProviderFactory.node';
+import { JupyterVariableDataProviderFactory } from '../webviews/extension-side/dataviewer/jupyterVariableDataProviderFactory';
 import {
     IJupyterVariableDataProvider,
     IJupyterVariableDataProviderFactory

src/kernels/serviceRegistry.web.ts

@@ -22,6 +22,17 @@ import { IDataScienceCommandListener } from '../platform/common/types';
 import { KernelCommandListener } from './kernelCommandListener';
 import { MultiplexingDebugService } from './debugger/multiplexingDebugService';
 import { IJupyterDebugService } from './debugger/types';
+import { JupyterVariableDataProviderFactory } from '../webviews/extension-side/dataviewer/jupyterVariableDataProviderFactory';
+import {
+    IJupyterVariableDataProvider,
+    IJupyterVariableDataProviderFactory
+} from '../webviews/extension-side/dataviewer/types';
+import { JupyterVariableDataProvider } from '../webviews/extension-side/dataviewer/jupyterVariableDataProvider';
+import { DebuggerVariables } from './variables/debuggerVariables';
+import { IJupyterVariables, IKernelVariableRequester } from './variables/types';
+import { KernelVariables } from './variables/kernelVariables';
+import { JupyterVariables } from './variables/jupyterVariables';
+import { PythonVariablesRequester } from './variables/pythonVariableRequester';
 
 @injectable()
 class RawNotebookSupportedService implements IRawNotebookSupportedService {
@@ -51,11 +62,28 @@ export function registerTypes(serviceManager: IServiceManager, isDevMode: boolea
     const rawService = serviceManager.get<IRawNotebookSupportedService>(IRawNotebookSupportedService);
     setSharedProperty('rawKernelSupported', rawService.isSupported ? 'true' : 'false');
 
+    serviceManager.addSingleton<IKernelVariableRequester>(
+        IKernelVariableRequester,
+        PythonVariablesRequester,
+        Identifiers.PYTHON_VARIABLES_REQUESTER
+    );
     serviceManager.addSingleton<IJupyterDebugService>(
         IJupyterDebugService,
         MultiplexingDebugService,
         Identifiers.MULTIPLEXING_DEBUGSERVICE
     );
+    serviceManager.addSingleton<IJupyterVariables>(IJupyterVariables, JupyterVariables, Identifiers.ALL_VARIABLES);
+    serviceManager.addSingleton<IJupyterVariables>(IJupyterVariables, KernelVariables, Identifiers.KERNEL_VARIABLES);
+    serviceManager.addSingleton<IJupyterVariables>(
+        IJupyterVariables,
+        DebuggerVariables,
+        Identifiers.DEBUGGER_VARIABLES
+    );
+    serviceManager.add<IJupyterVariableDataProvider>(IJupyterVariableDataProvider, JupyterVariableDataProvider);
+    serviceManager.addSingleton<IJupyterVariableDataProviderFactory>(
+        IJupyterVariableDataProviderFactory,
+        JupyterVariableDataProviderFactory
+    );
 
     serviceManager.addSingleton<IExtensionSyncActivationService>(IExtensionSyncActivationService, KernelCrashMonitor);
     serviceManager.addSingleton<IKernelProvider>(IKernelProvider, KernelProvider);

src/platform/common/application/types.ts

@@ -1096,7 +1096,7 @@ export interface IWebview {
 // Wraps the VS Code webview view
 export const IWebviewView = Symbol('IWebviewView');
 export interface IWebviewView extends IWebview {
-    readonly onDidChangeVisiblity: Event<void>;
+    readonly onDidChangeVisibility: Event<void>;
     readonly visible: boolean;
 }
 

src/platform/common/net/httpClient.ts

@@ -11,9 +11,12 @@ import * as fetch from 'cross-fetch';
 
 @injectable()
 export class HttpClient implements IHttpClient {
-    public readonly requestOptions: RequestInit;
+    public readonly requestOptions: RequestInit = {};
     constructor(@inject(IWorkspaceService) workspaceService: IWorkspaceService) {
-        this.requestOptions = { headers: { proxy: workspaceService.getConfiguration('http').get('proxy', '') } };
+        const proxy = workspaceService.getConfiguration('http').get('proxy', '');
+        if (proxy) {
+            this.requestOptions = { headers: { proxy } };
+        }
     }
 
     public async downloadFile(uri: string): Promise<Response> {

src/test/datascience/data-viewing/dataViewer.unit.test.ts

@@ -11,7 +11,7 @@ import {
     IWebviewPanelProvider,
     IWorkspaceService
 } from '../../../platform/common/application/types';
-import { WebviewPanelProvider } from '../../../webviews/extension-side/webviewPanels/webviewPanelProvider.node';
+import { WebviewPanelProvider } from '../../../webviews/extension-side/webviewPanels/webviewPanelProvider';
 import { WorkspaceService } from '../../../platform/common/application/workspace.node';
 import { JupyterSettings } from '../../../platform/common/configSettings';
 import { ConfigurationService } from '../../../platform/common/configuration/service.node';

src/test/datascience/variableView/variableViewTestInterfaces.ts

@@ -3,7 +3,7 @@
 'use strict';
 
 import { IVariableViewProvider } from '../../../webviews/extension-side/variablesView/types';
-import { VariableView } from '../../../webviews/extension-side/variablesView/variableView.node';
+import { VariableView } from '../../../webviews/extension-side/variablesView/variableView';
 
 export interface ITestVariableViewProvider extends IVariableViewProvider {
     readonly activeVariableView: Promise<VariableView>;

src/webviews/extension-side/serviceRegistry.node.ts

@@ -7,9 +7,9 @@ import { IWebviewViewProvider, IWebviewPanelProvider } from '../../platform/comm
 import { IServiceManager } from '../../platform/ioc/types';
 import { IVariableViewProvider } from './variablesView/types';
 import { VariableViewActivationService } from './variablesView/variableViewActivationService';
-import { VariableViewProvider } from './variablesView/variableViewProvider.node';
-import { WebviewPanelProvider } from './webviewPanels/webviewPanelProvider.node';
-import { WebviewViewProvider } from './webviewViews/webviewViewProvider.node';
+import { VariableViewProvider } from './variablesView/variableViewProvider';
+import { WebviewPanelProvider } from './webviewPanels/webviewPanelProvider';
+import { WebviewViewProvider } from './webviewViews/webviewViewProvider';
 
 export function registerTypes(serviceManager: IServiceManager, _isDevMode: boolean) {
     serviceManager.add<IWebviewViewProvider>(IWebviewViewProvider, WebviewViewProvider);

src/webviews/extension-side/serviceRegistry.web.ts

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+'use strict';
+
+import { IWebviewViewProvider, IWebviewPanelProvider } from '../../platform/common/application/types';
+import { IServiceManager } from '../../platform/ioc/types';
+import { WebviewViewProvider } from './webviewViews/webviewViewProvider';
+import { WebviewPanelProvider } from './webviewPanels/webviewPanelProvider';
+import { IExtensionSingleActivationService } from '../../platform/activation/types';
+import { VariableViewActivationService } from './variablesView/variableViewActivationService';
+import { IVariableViewProvider } from './variablesView/types';
+import { VariableViewProvider } from './variablesView/variableViewProvider';
+
+export function registerTypes(serviceManager: IServiceManager, _isDevMode: boolean) {
+    serviceManager.add<IWebviewViewProvider>(IWebviewViewProvider, WebviewViewProvider);
+    serviceManager.add<IWebviewPanelProvider>(IWebviewPanelProvider, WebviewPanelProvider);
+    serviceManager.addSingleton<IExtensionSingleActivationService>(
+        IExtensionSingleActivationService,
+        VariableViewActivationService
+    );
+    serviceManager.addSingleton<IVariableViewProvider>(IVariableViewProvider, VariableViewProvider);
+}

src/webviews/extension-side/variablesView/variableView.node.ts → src/webviews/extension-side/variablesView/variableView.ts

@@ -2,10 +2,8 @@
 // Licensed under the MIT License.
 'use strict';
 import '../../../platform/common/extensions';
-
-import * as path from '../../../platform/vscode-path/path';
 import { Uri, WebviewView as vscodeWebviewView } from 'vscode';
-
+import { joinPath } from '../../../platform/vscode-path/resources';
 import { captureTelemetry, sendTelemetryEvent } from '../../../telemetry';
 import { INotebookWatcher, IVariableViewPanelMapping } from './types';
 import { VariableViewMessageListener } from './variableViewMessageListener';
@@ -24,16 +22,18 @@ import {
 } from '../../../platform/common/application/types';
 import { ContextKey } from '../../../platform/common/contextKey';
 import { traceError } from '../../../platform/logging';
-import { Resource, IConfigurationService, IDisposableRegistry, IDisposable } from '../../../platform/common/types';
+import {
+    Resource,
+    IConfigurationService,
+    IDisposableRegistry,
+    IDisposable,
+    IExtensionContext
+} from '../../../platform/common/types';
 import * as localize from '../../../platform/common/utils/localize';
-import { EXTENSION_ROOT_DIR } from '../../../platform/constants.node';
 import { Telemetry } from '../../webview-side/common/constants';
 import { DataViewerChecker } from '../dataviewer/dataViewerChecker';
 import { IJupyterVariableDataProviderFactory, IDataViewerFactory, IDataViewer } from '../dataviewer/types';
 import { WebviewViewHost } from '../webviewViewHost';
-import { joinPath } from '../../../platform/vscode-path/resources';
-
-const variableViewDir = joinPath(Uri.file(EXTENSION_ROOT_DIR), 'out', 'webviews', 'webview-side', 'viewers');
 
 // This is the client side host for the native notebook variable view webview
 // It handles passing messages to and from the react view as well as the connection
@@ -47,6 +47,7 @@ export class VariableView extends WebviewViewHost<IVariableViewPanelMapping> imp
         configuration: IConfigurationService,
         workspaceService: IWorkspaceService,
         provider: IWebviewViewProvider,
+        context: IExtensionContext,
         private readonly variables: IJupyterVariables,
         private readonly disposables: IDisposableRegistry,
         private readonly appShell: IApplicationShell,
@@ -56,6 +57,7 @@ export class VariableView extends WebviewViewHost<IVariableViewPanelMapping> imp
         private readonly commandManager: ICommandManager,
         private readonly documentManager: IDocumentManager
     ) {
+        const variableViewDir = joinPath(context.extensionUri, 'out', 'webviews', 'webview-side', 'viewers');
         super(
             configuration,
             workspaceService,
@@ -73,8 +75,7 @@ export class VariableView extends WebviewViewHost<IVariableViewPanelMapping> imp
         this.documentManager.onDidChangeActiveTextEditor(this.activeTextEditorChanged, this, this.disposables);
 
         this.dataViewerChecker = new DataViewerChecker(configuration, appShell);
-        console.log(`Dirname up one is ${path.join(__dirname, '..')}`);
-        console.log(`Done initing variables`);
+        console.log(`Done initializing variables`);
     }
 
     @captureTelemetry(Telemetry.NativeVariableViewLoaded)
@@ -84,7 +85,7 @@ export class VariableView extends WebviewViewHost<IVariableViewPanelMapping> imp
         // After loading, hook up our visibility watch and check the initial visibility
         if (this.webviewView) {
             this.disposables.push(
-                this.webviewView.onDidChangeVisiblity(() => {
+                this.webviewView.onDidChangeVisibility(() => {
                     this.handleVisibilityChanged();
                 })
             );

src/webviews/extension-side/variablesView/variableViewProvider.node.ts → src/webviews/extension-side/variablesView/variableViewProvider.ts

@@ -13,12 +13,12 @@ import {
     IDocumentManager
 } from '../../../platform/common/application/types';
 import { isTestExecution } from '../../../platform/common/constants';
-import { IConfigurationService, IDisposableRegistry } from '../../../platform/common/types';
+import { IConfigurationService, IDisposableRegistry, IExtensionContext } from '../../../platform/common/types';
 import { createDeferred, Deferred } from '../../../platform/common/utils/async';
 import { Identifiers } from '../../webview-side/common/constants';
 import { IJupyterVariableDataProviderFactory, IDataViewerFactory } from '../dataviewer/types';
 import { INotebookWatcher, IVariableViewProvider } from './types';
-import { VariableView } from './variableView.node';
+import { VariableView } from './variableView';
 
 // This class creates our UI for our variable view and links it to the vs code webview view
 @injectable()
@@ -48,6 +48,7 @@ export class VariableViewProvider implements IVariableViewProvider {
         @inject(IConfigurationService) private readonly configuration: IConfigurationService,
         @inject(IWorkspaceService) private readonly workspaceService: IWorkspaceService,
         @inject(IWebviewViewProvider) private readonly webviewViewProvider: IWebviewViewProvider,
+        @inject(IExtensionContext) private readonly context: IExtensionContext,
         @inject(IJupyterVariables) @named(Identifiers.ALL_VARIABLES) private variables: IJupyterVariables,
         @inject(IDisposableRegistry) private readonly disposables: IDisposableRegistry,
         @inject(IApplicationShell) private readonly appShell: IApplicationShell,
@@ -71,6 +72,7 @@ export class VariableViewProvider implements IVariableViewProvider {
             this.configuration,
             this.workspaceService,
             this.webviewViewProvider,
+            this.context,
             this.variables,
             this.disposables,
             this.appShell,

src/webviews/extension-side/webviewPanels/webviewPanel.node.ts → src/webviews/extension-side/webviewPanels/webviewPanel.ts

@@ -4,10 +4,10 @@
 import '../../../platform/common/extensions';
 
 import { Uri, ViewColumn, WebviewOptions, WebviewPanel as vscodeWebviewPanel, window } from 'vscode';
-import { IFileSystemNode } from '../../../platform/common/platform/types.node';
-import { IDisposableRegistry } from '../../../platform/common/types';
+import { IFileSystem } from '../../../platform/common/platform/types';
+import { IDisposableRegistry, IExtensionContext } from '../../../platform/common/types';
 import { IWebviewPanel, IWebviewPanelOptions } from '../../../platform/common/application/types';
-import { Webview } from '../webviews/webview.node';
+import { Webview } from '../webviews/webview';
 
 export class WebviewPanel extends Webview implements IWebviewPanel {
     private get panel(): vscodeWebviewPanel | undefined {
@@ -19,12 +19,13 @@ export class WebviewPanel extends Webview implements IWebviewPanel {
     }
 
     constructor(
-        fs: IFileSystemNode,
+        fs: IFileSystem,
         disposableRegistry: IDisposableRegistry,
+        context: IExtensionContext,
         panelOptions: IWebviewPanelOptions,
         additionalRootPaths: Uri[] = []
     ) {
-        super(fs, disposableRegistry, panelOptions, additionalRootPaths);
+        super(fs, disposableRegistry, context, panelOptions, additionalRootPaths);
     }
 
     public async show(preserveFocus: boolean) {

src/webviews/extension-side/webviewPanels/webviewPanelProvider.node.ts → src/webviews/extension-side/webviewPanels/webviewPanelProvider.ts

@@ -4,16 +4,16 @@
 import { inject, injectable } from 'inversify';
 import * as path from '../../../platform/vscode-path/path';
 import { Uri } from 'vscode';
-import { IFileSystemNode } from '../../../platform/common/platform/types.node';
+import { IFileSystem } from '../../../platform/common/platform/types';
 import { IDisposableRegistry, IExtensionContext } from '../../../platform/common/types';
 import { IWebviewPanel, IWebviewPanelOptions, IWebviewPanelProvider } from '../../../platform/common/application/types';
-import { WebviewPanel } from './webviewPanel.node';
+import { WebviewPanel } from './webviewPanel';
 
 @injectable()
 export class WebviewPanelProvider implements IWebviewPanelProvider {
     constructor(
         @inject(IDisposableRegistry) private readonly disposableRegistry: IDisposableRegistry,
-        @inject(IFileSystemNode) private readonly fs: IFileSystemNode,
+        @inject(IFileSystem) private readonly fs: IFileSystem,
         @inject(IExtensionContext) private readonly context: IExtensionContext
     ) {}
 
@@ -25,6 +25,6 @@ export class WebviewPanelProvider implements IWebviewPanelProvider {
         if (Array.isArray(options.additionalPaths)) {
             additionalRootPaths.push(...options.additionalPaths);
         }
-        return new WebviewPanel(this.fs, this.disposableRegistry, options, additionalRootPaths);
+        return new WebviewPanel(this.fs, this.disposableRegistry, this.context, options, additionalRootPaths);
     }
 }

src/webviews/extension-side/webviewViews/webviewView.node.ts → src/webviews/extension-side/webviewViews/webviewView.ts

@@ -4,9 +4,9 @@
 
 import { Event, EventEmitter, Uri, WebviewOptions, WebviewView as vscodeWebviewView } from 'vscode';
 import { IWebviewView, IWebviewViewOptions } from '../../../platform/common/application/types';
-import { IFileSystemNode } from '../../../platform/common/platform/types.node';
-import { IDisposableRegistry } from '../../../platform/common/types';
-import { Webview } from '../webviews/webview.node';
+import { IFileSystem } from '../../../platform/common/platform/types';
+import { IDisposableRegistry, IExtensionContext } from '../../../platform/common/types';
+import { Webview } from '../webviews/webview';
 
 export class WebviewView extends Webview implements IWebviewView {
     public get visible(): boolean {
@@ -16,17 +16,18 @@ export class WebviewView extends Webview implements IWebviewView {
             return this.webviewHost.visible;
         }
     }
-    public get onDidChangeVisiblity(): Event<void> {
+    public get onDidChangeVisibility(): Event<void> {
         return this._onDidChangeVisibility.event;
     }
     private readonly _onDidChangeVisibility = new EventEmitter<void>();
     constructor(
-        fs: IFileSystemNode,
+        fs: IFileSystem,
         disposableRegistry: IDisposableRegistry,
+        context: IExtensionContext,
         private panelOptions: IWebviewViewOptions,
         additionalRootPaths: Uri[] = []
     ) {
-        super(fs, disposableRegistry, panelOptions, additionalRootPaths);
+        super(fs, disposableRegistry, context, panelOptions, additionalRootPaths);
     }
 
     protected createWebview(_webviewOptions: WebviewOptions): vscodeWebviewView {

src/webviews/extension-side/webviewViews/webviewViewProvider.node.ts → src/webviews/extension-side/webviewViews/webviewViewProvider.ts

@@ -3,19 +3,20 @@
 'use strict';
 import { inject, injectable } from 'inversify';
 import { IWebviewViewProvider, IWebviewViewOptions, IWebviewView } from '../../../platform/common/application/types';
-import { IFileSystemNode } from '../../../platform/common/platform/types.node';
-import { IDisposableRegistry } from '../../../platform/common/types';
-import { WebviewView } from './webviewView.node';
+import { IFileSystem } from '../../../platform/common/platform/types';
+import { IDisposableRegistry, IExtensionContext } from '../../../platform/common/types';
+import { WebviewView } from './webviewView';
 
 @injectable()
 export class WebviewViewProvider implements IWebviewViewProvider {
     constructor(
         @inject(IDisposableRegistry) private readonly disposableRegistry: IDisposableRegistry,
-        @inject(IFileSystemNode) private readonly fs: IFileSystemNode
+        @inject(IFileSystem) private readonly fs: IFileSystem,
+        @inject(IExtensionContext) private readonly context: IExtensionContext
     ) {}
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     public async create(options: IWebviewViewOptions): Promise<IWebviewView> {
-        return new WebviewView(this.fs, this.disposableRegistry, options);
+        return new WebviewView(this.fs, this.disposableRegistry, this.context, options);
     }
 }