Add support for clickable links and other webview options (#2396)

* Add support for clickable links and other webview options
- Added click handling
- Added suport for localResourceRoots to be read in the webview

* Options should not be mandatory

* Ensure the constructor-defined properties are preserved
- This fixes issue where the extensionFolderPath was lost during webview withProperties call in the modelbuilder.

* enableCommandUris should be a getter

* Add position support to webview and to flexContainer

* Fix regressions on editor view caused by merge
This commit is contained in:
Kevin Cunnane
2018-09-05 13:28:22 -07:00
committed by GitHub
parent 05cf06656d
commit ac96919caf
12 changed files with 184 additions and 73 deletions

View File

@@ -24,7 +24,9 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
private readonly _proxy: MainThreadModelViewShape,
private readonly _handle: number,
private readonly _mainContext: IMainContext,
private readonly _extHostModelViewTree: ExtHostModelViewTreeViewsShape) {
private readonly _extHostModelViewTree: ExtHostModelViewTreeViewsShape,
private readonly _extensionLocation: URI
) {
this.nextComponentId = 0;
}
@@ -107,7 +109,7 @@ class ModelBuilderImpl implements sqlops.ModelBuilder {
webView(): sqlops.ComponentBuilder<sqlops.WebViewComponent> {
let id = this.getNextComponentId();
let builder: ComponentBuilderImpl<sqlops.WebViewComponent> = this.getComponentBuilder(new WebViewWrapper(this._proxy, this._handle, id), id);
let builder: ComponentBuilderImpl<sqlops.WebViewComponent> = this.getComponentBuilder(new WebViewWrapper(this._proxy, this._handle, id, this._extensionLocation), id);
this._componentBuilders.set(id, builder);
return builder;
}
@@ -224,7 +226,8 @@ class ComponentBuilderImpl<T extends sqlops.Component> implements sqlops.Compone
}
withProperties<U>(properties: U): sqlops.ComponentBuilder<T> {
this._component.properties = properties;
// Keep any properties that may have been set during initial object construction
this._component.properties = Object.assign({}, this._component.properties, properties);
return this;
}
@@ -804,10 +807,11 @@ class CheckBoxWrapper extends ComponentWrapper implements sqlops.CheckBoxCompone
}
class WebViewWrapper extends ComponentWrapper implements sqlops.WebViewComponent {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
constructor(proxy: MainThreadModelViewShape, handle: number, id: string, private _extensionLocation: URI) {
super(proxy, handle, ModelComponentTypes.WebView, id);
this.properties = {};
this.properties = {
'extensionLocation': this._extensionLocation
};
this._emitterMap.set(ComponentEventType.onMessage, new Emitter<any>());
}
@@ -829,6 +833,16 @@ class WebViewWrapper extends ComponentWrapper implements sqlops.WebViewComponent
let emitter = this._emitterMap.get(ComponentEventType.onMessage);
return emitter && emitter.event;
}
public get options(): vscode.WebviewOptions {
return this.properties['options'];
}
public set options(o: vscode.WebviewOptions) {
this.setProperty('options', o);
}
}
class EditorWrapper extends ComponentWrapper implements sqlops.EditorComponent {
@@ -1168,9 +1182,10 @@ class ModelViewImpl implements sqlops.ModelView {
private readonly _connection: sqlops.connection.Connection,
private readonly _serverInfo: sqlops.ServerInfo,
private readonly mainContext: IMainContext,
private readonly _extHostModelViewTree: ExtHostModelViewTreeViewsShape
private readonly _extHostModelViewTree: ExtHostModelViewTreeViewsShape,
private readonly _extensionLocation: URI
) {
this._modelBuilder = new ModelBuilderImpl(this._proxy, this._handle, this.mainContext, this._extHostModelViewTree);
this._modelBuilder = new ModelBuilderImpl(this._proxy, this._handle, this.mainContext, this._extHostModelViewTree, _extensionLocation);
}
public get onClosed(): vscode.Event<any> {
@@ -1221,7 +1236,7 @@ export class ExtHostModelView implements ExtHostModelViewShape {
private readonly _modelViews = new Map<number, ModelViewImpl>();
private readonly _handlers = new Map<string, (view: sqlops.ModelView) => void>();
private readonly _handlerToExtensionPath = new Map<string, URI>();
constructor(
private _mainContext: IMainContext,
private _extHostModelViewTree: ExtHostModelViewTreeViewsShape
@@ -1235,13 +1250,15 @@ export class ExtHostModelView implements ExtHostModelViewShape {
this._modelViews.delete(handle);
}
$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void): void {
$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void, extensionLocation: URI): void {
this._handlers.set(widgetId, handler);
this._handlerToExtensionPath.set(widgetId, extensionLocation);
this._proxy.$registerProvider(widgetId);
}
$registerWidget(handle: number, id: string, connection: sqlops.connection.Connection, serverInfo: sqlops.ServerInfo): void {
let view = new ModelViewImpl(this._proxy, handle, connection, serverInfo, this._mainContext, this._extHostModelViewTree);
let extensionLocation = this._handlerToExtensionPath.get(id);
let view = new ModelViewImpl(this._proxy, handle, connection, serverInfo, this._mainContext, this._extHostModelViewTree, extensionLocation);
this._modelViews.set(handle, view);
this._handlers.get(id)(view);
}

View File

@@ -9,6 +9,7 @@ import { Event, Emitter } from 'vs/base/common/event';
import { deepClone } from 'vs/base/common/objects';
import * as nls from 'vs/nls';
import { generateUuid } from 'vs/base/common/uuid';
import URI from 'vs/base/common/uri';
import * as vscode from 'vscode';
import * as sqlops from 'sqlops';
@@ -31,7 +32,8 @@ class ModelViewPanelImpl implements sqlops.window.modelviewdialog.ModelViewPanel
constructor(private _viewType: string,
protected _extHostModelViewDialog: ExtHostModelViewDialog,
protected _extHostModelView: ExtHostModelViewShape) {
protected _extHostModelView: ExtHostModelViewShape,
protected _extensionLocation: URI) {
this._onValidityChanged = this._extHostModelViewDialog.getValidityChangedEvent(this);
this._onValidityChanged(valid => this._valid = valid);
}
@@ -43,7 +45,7 @@ class ModelViewPanelImpl implements sqlops.window.modelviewdialog.ModelViewPanel
this._extHostModelView.$registerProvider(viewId, modelView => {
this._modelView = modelView;
handler(modelView);
});
}, this._extensionLocation);
}
}
@@ -76,11 +78,12 @@ class ModelViewEditorImpl extends ModelViewPanelImpl implements sqlops.workspace
constructor(
extHostModelViewDialog: ExtHostModelViewDialog,
extHostModelView: ExtHostModelViewShape,
extensionLocation: URI,
private _proxy: MainThreadModelViewDialogShape,
private _title: string,
private _options: sqlops.ModelViewEditorOptions
) {
super('modelViewEditor', extHostModelViewDialog, extHostModelView);
super('modelViewEditor', extHostModelViewDialog, extHostModelView, extensionLocation);
}
public openEditor(position?: vscode.ViewColumn): Thenable<void> {
@@ -100,8 +103,9 @@ class DialogImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdi
constructor(extHostModelViewDialog: ExtHostModelViewDialog,
extHostModelView: ExtHostModelViewShape,
extHostTaskManagement: ExtHostBackgroundTaskManagementShape) {
super('modelViewDialog', extHostModelViewDialog, extHostModelView);
extHostTaskManagement: ExtHostBackgroundTaskManagementShape,
extensionLocation: URI) {
super('modelViewDialog', extHostModelViewDialog, extHostModelView, extensionLocation);
this.okButton = this._extHostModelViewDialog.createButton(DONE_LABEL);
this.cancelButton = this._extHostModelViewDialog.createButton(CANCEL_LABEL);
this._operationHandler = new BackgroundOperationHandler('dialog', extHostTaskManagement);
@@ -144,8 +148,9 @@ class DialogImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdi
class TabImpl extends ModelViewPanelImpl implements sqlops.window.modelviewdialog.DialogTab {
constructor(
extHostModelViewDialog: ExtHostModelViewDialog,
extHostModelView: ExtHostModelViewShape) {
super('modelViewDialogTab', extHostModelViewDialog, extHostModelView);
extHostModelView: ExtHostModelViewShape,
extensionLocation: URI) {
super('modelViewDialogTab', extHostModelViewDialog, extHostModelView, extensionLocation);
}
public title: string;
@@ -239,8 +244,9 @@ class WizardPageImpl extends ModelViewPanelImpl implements sqlops.window.modelvi
constructor(public title: string,
extHostModelViewDialog: ExtHostModelViewDialog,
extHostModelView: ExtHostModelViewShape) {
super('modelViewWizardPage', extHostModelViewDialog, extHostModelView);
extHostModelView: ExtHostModelViewShape,
extensionLocation: URI) {
super('modelViewWizardPage', extHostModelViewDialog, extHostModelView, extensionLocation);
}
public get enabled(): boolean {
@@ -475,8 +481,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this._proxy.$closeDialog(handle);
}
public createModelViewEditor(title: string, options?: sqlops.ModelViewEditorOptions): sqlops.workspace.ModelViewEditor {
let editor = new ModelViewEditorImpl(this, this._extHostModelView, this._proxy, title, options);
public createModelViewEditor(title: string, extensionLocation: URI, options?: sqlops.ModelViewEditorOptions): sqlops.workspace.ModelViewEditor {
let editor = new ModelViewEditorImpl(this, this._extHostModelView, extensionLocation, this._proxy, title, options);
editor.handle = this.getHandle(editor);
return editor;
}
@@ -524,15 +530,15 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this._onClickCallbacks.set(handle, callback);
}
public createDialog(title: string): sqlops.window.modelviewdialog.Dialog {
let dialog = new DialogImpl(this, this._extHostModelView, this._extHostTaskManagement);
public createDialog(title: string, extensionLocation?: URI): sqlops.window.modelviewdialog.Dialog {
let dialog = new DialogImpl(this, this._extHostModelView, this._extHostTaskManagement, extensionLocation);
dialog.title = title;
dialog.handle = this.getHandle(dialog);
return dialog;
}
public createTab(title: string): sqlops.window.modelviewdialog.DialogTab {
let tab = new TabImpl(this, this._extHostModelView);
public createTab(title: string, extensionLocation?: URI): sqlops.window.modelviewdialog.DialogTab {
let tab = new TabImpl(this, this._extHostModelView, extensionLocation);
tab.title = title;
tab.handle = this.getHandle(tab);
return tab;
@@ -561,8 +567,8 @@ export class ExtHostModelViewDialog implements ExtHostModelViewDialogShape {
this._pageInfoChangedCallbacks.set(handle, callback);
}
public createWizardPage(title: string): sqlops.window.modelviewdialog.WizardPage {
let page = new WizardPageImpl(title, this, this._extHostModelView);
public createWizardPage(title: string, extensionLocation?: URI): sqlops.window.modelviewdialog.WizardPage {
let page = new WizardPageImpl(title, this, this._extHostModelView, extensionLocation);
page.handle = this.getHandle(page);
return page;
}

View File

@@ -326,10 +326,10 @@ export function createApiFactory(
const modelViewDialog: typeof sqlops.window.modelviewdialog = {
createDialog(title: string): sqlops.window.modelviewdialog.Dialog {
return extHostModelViewDialog.createDialog(title);
return extHostModelViewDialog.createDialog(title, extension.extensionLocation);
},
createTab(title: string): sqlops.window.modelviewdialog.DialogTab {
return extHostModelViewDialog.createTab(title);
return extHostModelViewDialog.createTab(title, extension.extensionLocation);
},
createButton(label: string): sqlops.window.modelviewdialog.Button {
return extHostModelViewDialog.createButton(label);
@@ -370,7 +370,7 @@ export function createApiFactory(
onDidOpenDashboard: extHostDashboard.onDidOpenDashboard,
onDidChangeToDashboard: extHostDashboard.onDidChangeToDashboard,
createModelViewEditor(title: string, options?: sqlops.ModelViewEditorOptions): sqlops.workspace.ModelViewEditor {
return extHostModelViewDialog.createModelViewEditor(title, options);
return extHostModelViewDialog.createModelViewEditor(title, extension.extensionLocation, options);
}
};
@@ -382,7 +382,7 @@ export function createApiFactory(
const ui = {
registerModelViewProvider(modelViewId: string, handler: (view: sqlops.ModelView) => void): void {
extHostModelView.$registerProvider(modelViewId, handler);
extHostModelView.$registerProvider(modelViewId, handler, extension.extensionLocation);
}
};

View File

@@ -9,6 +9,7 @@ import {
createExtHostContextProxyIdentifier as createExtId,
ProxyIdentifier, IRPCProtocol
} from 'vs/workbench/services/extensions/node/proxyIdentifier';
import URI, { UriComponents } from 'vs/base/common/uri';
import { TPromise } from 'vs/base/common/winjs.base';
import { IDisposable } from 'vs/base/common/lifecycle';
@@ -606,7 +607,7 @@ export interface MainThreadDashboardWebviewShape extends IDisposable {
}
export interface ExtHostModelViewShape {
$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void): void;
$registerProvider(widgetId: string, handler: (webview: sqlops.ModelView) => void, extensionLocation: UriComponents): void;
$onClosed(handle: number): void;
$registerWidget(handle: number, id: string, connection: sqlops.connection.Connection, serverInfo: sqlops.ServerInfo): void;
$handleEvent(handle: number, id: string, eventArgs: any);