From 1c4e2291f8ffbd5b8e4483f190229a9a541cc161 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Thu, 23 Jan 2020 18:14:49 -0800 Subject: [PATCH 1/3] custom views are tricky --- src/vs/platform/list/browser/listService.ts | 19 ++++++++++++++++--- .../api/browser/viewsExtensionPoint.ts | 4 +++- .../browser/parts/views/customView.ts | 12 ++++-------- src/vs/workbench/common/views.ts | 6 +++--- .../views/browser/viewDescriptorService.ts | 7 ++++++- 5 files changed, 32 insertions(+), 16 deletions(-) diff --git a/src/vs/platform/list/browser/listService.ts b/src/vs/platform/list/browser/listService.ts index ee29d02b4d037..c8a08f2f70658 100644 --- a/src/vs/platform/list/browser/listService.ts +++ b/src/vs/platform/list/browser/listService.ts @@ -839,6 +839,11 @@ export class WorkbenchAsyncDataTree extends Async this.internals = new WorkbenchTreeInternals(this, treeOptions, getAutomaticKeyboardNavigation, options.overrideStyles, contextKeyService, listService, themeService, configurationService, accessibilityService); this.disposables.add(this.internals); } + + updateOptions(options: IWorkbenchAsyncDataTreeOptions = {}): void { + super.updateOptions(options); + this.internals.updateStyleOverrides(options.overrideStyles); + } } export interface IWorkbenchCompressibleAsyncDataTreeOptions extends ICompressibleAsyncDataTreeOptions { @@ -936,15 +941,16 @@ class WorkbenchTreeInternals { private hasMultiSelection: IContextKey; private _useAltAsMultipleSelectionModifier: boolean; private disposables: IDisposable[] = []; + private styler!: IDisposable; constructor( - tree: WorkbenchObjectTree | CompressibleObjectTree | WorkbenchDataTree | WorkbenchAsyncDataTree | WorkbenchCompressibleAsyncDataTree, + private tree: WorkbenchObjectTree | CompressibleObjectTree | WorkbenchDataTree | WorkbenchAsyncDataTree | WorkbenchCompressibleAsyncDataTree, options: IAbstractTreeOptions | IAsyncDataTreeOptions, getAutomaticKeyboardNavigation: () => boolean | undefined, overrideStyles: IColorMapping | undefined, @IContextKeyService contextKeyService: IContextKeyService, @IListService listService: IListService, - @IThemeService themeService: IThemeService, + @IThemeService private themeService: IThemeService, @IConfigurationService configurationService: IConfigurationService, @IAccessibilityService accessibilityService: IAccessibilityService, ) { @@ -970,10 +976,11 @@ class WorkbenchTreeInternals { }); }; + this.updateStyleOverrides(overrideStyles); + this.disposables.push( this.contextKeyService, (listService as ListService).register(tree), - overrideStyles ? attachListStyler(tree, themeService, overrideStyles) : Disposable.None, tree.onDidChangeSelection(() => { const selection = tree.getSelection(); const focus = tree.getFocus(); @@ -1023,8 +1030,14 @@ class WorkbenchTreeInternals { return this._useAltAsMultipleSelectionModifier; } + updateStyleOverrides(overrideStyles?: IColorMapping): void { + dispose(this.styler); + this.styler = overrideStyles ? attachListStyler(this.tree, this.themeService, overrideStyles) : Disposable.None; + } + dispose(): void { this.disposables = dispose(this.disposables); + this.styler = dispose(this.styler); } } diff --git a/src/vs/workbench/api/browser/viewsExtensionPoint.ts b/src/vs/workbench/api/browser/viewsExtensionPoint.ts index e198a29483d38..d313f03755062 100644 --- a/src/vs/workbench/api/browser/viewsExtensionPoint.ts +++ b/src/vs/workbench/api/browser/viewsExtensionPoint.ts @@ -37,6 +37,7 @@ import { IWorkbenchActionRegistry, Extensions as ActionExtensions } from 'vs/wor import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; import { ViewPaneContainer } from 'vs/workbench/browser/parts/views/viewPaneContainer'; import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors'; +// import { SIDE_BAR_BACKGROUND, PANEL_BACKGROUND } from 'vs/workbench/common/theme'; export interface IUserFriendlyViewsContainerDescriptor { id: string; @@ -421,8 +422,9 @@ class ViewsExtensionHandler implements IWorkbenchContribution { ctorDescriptor: new SyncDescriptor(CustomTreeViewPane), when: ContextKeyExpr.deserialize(item.when), canToggleVisibility: true, + canMoveView: true, + treeView: this.instantiationService.createInstance(CustomTreeView, item.id, item.name), collapsed: this.showCollapsed(container), - treeView: this.instantiationService.createInstance(CustomTreeView, item.id, item.name, container), order: order, extensionId: extension.description.identifier, originalContainerId: entry.key, diff --git a/src/vs/workbench/browser/parts/views/customView.ts b/src/vs/workbench/browser/parts/views/customView.ts index eecea6443516f..a814eb0a15f04 100644 --- a/src/vs/workbench/browser/parts/views/customView.ts +++ b/src/vs/workbench/browser/parts/views/customView.ts @@ -13,7 +13,7 @@ import { IContextMenuService } from 'vs/platform/contextview/browser/contextView import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions'; import { ContextAwareMenuEntryActionViewItem, createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; -import { ITreeView, ITreeItem, TreeItemCollapsibleState, ITreeViewDataProvider, TreeViewItemHandleArg, ITreeViewDescriptor, IViewsRegistry, ViewContainer, ITreeItemLabel, Extensions, IViewDescriptorService } from 'vs/workbench/common/views'; +import { ITreeView, ITreeItem, TreeItemCollapsibleState, ITreeViewDataProvider, TreeViewItemHandleArg, ITreeViewDescriptor, IViewsRegistry, ViewContainer, ITreeItemLabel, Extensions, IViewDescriptorService, IViewContainersRegistry, ViewContainerLocation } from 'vs/workbench/common/views'; import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { INotificationService } from 'vs/platform/notification/common/notification'; @@ -41,7 +41,7 @@ import { ITreeRenderer, ITreeNode, IAsyncDataSource, ITreeContextMenuEvent } fro import { FuzzyScore, createMatches } from 'vs/base/common/filters'; import { CollapseAllAction } from 'vs/base/browser/ui/tree/treeDefaults'; import { isFalsyOrWhitespace } from 'vs/base/common/strings'; -import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; +import { SIDE_BAR_BACKGROUND, PANEL_BACKGROUND } from 'vs/workbench/common/theme'; export class CustomTreeViewPane extends ViewPane { @@ -154,7 +154,6 @@ export class CustomTreeView extends Disposable implements ITreeView { constructor( private id: string, private _title: string, - private viewContainer: ViewContainer, @IExtensionService private readonly extensionService: IExtensionService, @IWorkbenchThemeService private readonly themeService: IWorkbenchThemeService, @IInstantiationService private readonly instantiationService: IInstantiationService, @@ -163,6 +162,7 @@ export class CustomTreeView extends Disposable implements ITreeView { @IProgressService private readonly progressService: IProgressService, @IContextMenuService private readonly contextMenuService: IContextMenuService, @IKeybindingService private readonly keybindingService: IKeybindingService, + @IViewDescriptorService private readonly viewDescriptorService: IViewDescriptorService, @INotificationService private readonly notificationService: INotificationService ) { super(); @@ -174,11 +174,7 @@ export class CustomTreeView extends Disposable implements ITreeView { this.doRefresh([this.root]); /** soft refresh **/ } })); - this._register(Registry.as(Extensions.ViewsRegistry).onDidChangeContainer(({ views, from, to }) => { - if (from === this.viewContainer && views.some(v => v.id === this.id)) { - this.viewContainer = to; - } - })); + this.create(); } diff --git a/src/vs/workbench/common/views.ts b/src/vs/workbench/common/views.ts index 5a8f3edbd071c..d5f1e856ea7a0 100644 --- a/src/vs/workbench/common/views.ts +++ b/src/vs/workbench/common/views.ts @@ -366,6 +366,8 @@ export interface IViewDescriptorService { _serviceBrand: undefined; + readonly onDidChangeContainer: Event<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }>; + moveViewToLocation(view: IViewDescriptor, location: ViewContainerLocation): void; moveViewsToContainer(views: IViewDescriptor[], viewContainer: ViewContainer): void; @@ -443,9 +445,7 @@ export interface IRevealOptions { } export interface ITreeViewDescriptor extends IViewDescriptor { - - readonly treeView: ITreeView; - + treeView: ITreeView; } export type TreeViewItemHandleArg = { diff --git a/src/vs/workbench/services/views/browser/viewDescriptorService.ts b/src/vs/workbench/services/views/browser/viewDescriptorService.ts index fb1d0b4e3bdbb..f4f0e77d123f3 100644 --- a/src/vs/workbench/services/views/browser/viewDescriptorService.ts +++ b/src/vs/workbench/services/views/browser/viewDescriptorService.ts @@ -181,6 +181,9 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor private static readonly CACHED_VIEW_POSITIONS = 'views.cachedViewPositions'; private static readonly COMMON_CONTAINER_ID_PREFIX = 'workbench.views.service'; + private readonly _onDidChangeContainer: Emitter<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }> = this._register(new Emitter<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }>()); + readonly onDidChangeContainer: Event<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }> = this._onDidChangeContainer.event; + private readonly viewDescriptorCollections: Map; private readonly activeViewContextKeys: Map>; private readonly movableViewContextKeys: Map>; @@ -230,7 +233,7 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor this._register(this.viewsRegistry.onViewsRegistered(({ views, viewContainer }) => this.onDidRegisterViews(views, viewContainer))); this._register(this.viewsRegistry.onViewsDeregistered(({ views, viewContainer }) => this.onDidDeregisterViews(views, viewContainer))); - this._register(this.viewsRegistry.onDidChangeContainer(({ views, from, to }) => { this.removeViews(from, views); this.addViews(to, views); })); + this._register(this.viewsRegistry.onDidChangeContainer(({ views, from, to }) => { this.removeViews(from, views); this.addViews(to, views); this._onDidChangeContainer.fire({ views, from, to }); })); this._register(this.viewContainersRegistry.onDidRegister(({ viewContainer }) => this.onDidRegisterViewContainer(viewContainer))); this._register(this.viewContainersRegistry.onDidDeregister(({ viewContainer }) => this.onDidDeregisterViewContainer(viewContainer))); @@ -357,6 +360,7 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor getViewContainer(viewId: string): ViewContainer | null { const containerId = this.cachedViewInfo.get(viewId)?.containerId; + return containerId ? this.viewContainersRegistry.get(containerId) ?? null : this.viewsRegistry.getViewContainer(viewId); @@ -395,6 +399,7 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor if (from && to && from !== to) { this.removeViews(from, views); this.addViews(to, views); + this._onDidChangeContainer.fire({ views, from, to }); this.saveViewPositionsToCache(); } } From 268f0a22a37376a260ce1bc4d69b5efc000b03cc Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Fri, 24 Jan 2020 09:37:52 -0800 Subject: [PATCH 2/3] add eventing to VDS to enable custom views --- .../api/browser/viewsExtensionPoint.ts | 1 - .../browser/parts/views/customView.ts | 21 +++++++++++++++---- src/vs/workbench/common/views.ts | 4 ++-- .../views/browser/viewDescriptorService.ts | 16 ++++++++++++++ 4 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/vs/workbench/api/browser/viewsExtensionPoint.ts b/src/vs/workbench/api/browser/viewsExtensionPoint.ts index d313f03755062..e88f2c3df7ced 100644 --- a/src/vs/workbench/api/browser/viewsExtensionPoint.ts +++ b/src/vs/workbench/api/browser/viewsExtensionPoint.ts @@ -37,7 +37,6 @@ import { IWorkbenchActionRegistry, Extensions as ActionExtensions } from 'vs/wor import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; import { ViewPaneContainer } from 'vs/workbench/browser/parts/views/viewPaneContainer'; import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors'; -// import { SIDE_BAR_BACKGROUND, PANEL_BACKGROUND } from 'vs/workbench/common/theme'; export interface IUserFriendlyViewsContainerDescriptor { id: string; diff --git a/src/vs/workbench/browser/parts/views/customView.ts b/src/vs/workbench/browser/parts/views/customView.ts index a814eb0a15f04..c573df84e12a0 100644 --- a/src/vs/workbench/browser/parts/views/customView.ts +++ b/src/vs/workbench/browser/parts/views/customView.ts @@ -13,7 +13,7 @@ import { IContextMenuService } from 'vs/platform/contextview/browser/contextView import { IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions'; import { ContextAwareMenuEntryActionViewItem, createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; -import { ITreeView, ITreeItem, TreeItemCollapsibleState, ITreeViewDataProvider, TreeViewItemHandleArg, ITreeViewDescriptor, IViewsRegistry, ViewContainer, ITreeItemLabel, Extensions, IViewDescriptorService, IViewContainersRegistry, ViewContainerLocation } from 'vs/workbench/common/views'; +import { ITreeView, ITreeItem, TreeItemCollapsibleState, ITreeViewDataProvider, TreeViewItemHandleArg, ITreeViewDescriptor, IViewsRegistry, ITreeItemLabel, Extensions, IViewDescriptorService, ViewContainer, ViewContainerLocation } from 'vs/workbench/common/views'; import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { INotificationService } from 'vs/platform/notification/common/notification'; @@ -162,8 +162,8 @@ export class CustomTreeView extends Disposable implements ITreeView { @IProgressService private readonly progressService: IProgressService, @IContextMenuService private readonly contextMenuService: IContextMenuService, @IKeybindingService private readonly keybindingService: IKeybindingService, - @IViewDescriptorService private readonly viewDescriptorService: IViewDescriptorService, - @INotificationService private readonly notificationService: INotificationService + @INotificationService private readonly notificationService: INotificationService, + @IViewDescriptorService private readonly viewDescriptorService: IViewDescriptorService ) { super(); this.root = new Root(); @@ -174,10 +174,23 @@ export class CustomTreeView extends Disposable implements ITreeView { this.doRefresh([this.root]); /** soft refresh **/ } })); + this._register(this.viewDescriptorService.onDidChangeLocation(({ views, from, to }) => { + if (views.some(v => v.id === this.id)) { + this.tree?.updateOptions({ overrideStyles: { listBackground: this.viewLocation === ViewContainerLocation.Sidebar ? SIDE_BAR_BACKGROUND : PANEL_BACKGROUND } }); + } + })); this.create(); } + get viewContainer(): ViewContainer { + return this.viewDescriptorService.getViewContainer(this.id)!; + } + + get viewLocation(): ViewContainerLocation { + return this.viewDescriptorService.getViewLocation(this.id)!; + } + private _dataProvider: ITreeViewDataProvider | undefined; get dataProvider(): ITreeViewDataProvider | undefined { return this._dataProvider; @@ -356,7 +369,7 @@ export class CustomTreeView extends Disposable implements ITreeView { }, multipleSelectionSupport: this.canSelectMany, overrideStyles: { - listBackground: SIDE_BAR_BACKGROUND + listBackground: this.viewLocation === ViewContainerLocation.Sidebar ? SIDE_BAR_BACKGROUND : PANEL_BACKGROUND } }) as WorkbenchAsyncDataTree); aligner.tree = this.tree; diff --git a/src/vs/workbench/common/views.ts b/src/vs/workbench/common/views.ts index d5f1e856ea7a0..65cb05175d98c 100644 --- a/src/vs/workbench/common/views.ts +++ b/src/vs/workbench/common/views.ts @@ -349,10 +349,8 @@ export interface IViewsViewlet extends IViewlet { } -export const IViewDescriptorService = createDecorator('viewDescriptorService'); export const IViewsService = createDecorator('viewsService'); - export interface IViewsService { _serviceBrand: undefined; @@ -361,12 +359,14 @@ export interface IViewsService { openView(id: string, focus?: boolean): Promise; } +export const IViewDescriptorService = createDecorator('viewDescriptorService'); export interface IViewDescriptorService { _serviceBrand: undefined; readonly onDidChangeContainer: Event<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }>; + readonly onDidChangeLocation: Event<{ views: IViewDescriptor[], from: ViewContainerLocation, to: ViewContainerLocation }>; moveViewToLocation(view: IViewDescriptor, location: ViewContainerLocation): void; diff --git a/src/vs/workbench/services/views/browser/viewDescriptorService.ts b/src/vs/workbench/services/views/browser/viewDescriptorService.ts index f4f0e77d123f3..b7a164dee5e15 100644 --- a/src/vs/workbench/services/views/browser/viewDescriptorService.ts +++ b/src/vs/workbench/services/views/browser/viewDescriptorService.ts @@ -184,6 +184,9 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor private readonly _onDidChangeContainer: Emitter<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }> = this._register(new Emitter<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }>()); readonly onDidChangeContainer: Event<{ views: IViewDescriptor[], from: ViewContainer, to: ViewContainer }> = this._onDidChangeContainer.event; + private readonly _onDidChangeLocation: Emitter<{ views: IViewDescriptor[], from: ViewContainerLocation, to: ViewContainerLocation }> = this._register(new Emitter<{ views: IViewDescriptor[], from: ViewContainerLocation, to: ViewContainerLocation }>()); + readonly onDidChangeLocation: Event<{ views: IViewDescriptor[], from: ViewContainerLocation, to: ViewContainerLocation }> = this._onDidChangeLocation.event; + private readonly viewDescriptorCollections: Map; private readonly activeViewContextKeys: Map>; private readonly movableViewContextKeys: Map>; @@ -298,6 +301,11 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor const viewDescriptor = this.getViewDescriptor(viewId); if (viewContainer && viewDescriptor) { this.addViews(viewContainer, [viewDescriptor]); + + const newLocation = this.viewContainersRegistry.getViewContainerLocation(viewContainer)!; + if (containerInfo.location && containerInfo.location !== newLocation) { + this._onDidChangeLocation.fire({ views: [viewDescriptor], from: containerInfo.location, to: newLocation }); + } } } @@ -399,6 +407,14 @@ export class ViewDescriptorService extends Disposable implements IViewDescriptor if (from && to && from !== to) { this.removeViews(from, views); this.addViews(to, views); + + const oldLocation = this.viewContainersRegistry.getViewContainerLocation(from)!; + const newLocation = this.viewContainersRegistry.getViewContainerLocation(to)!; + + if (oldLocation !== newLocation) { + this._onDidChangeLocation.fire({ views, from: oldLocation, to: newLocation }); + } + this._onDidChangeContainer.fire({ views, from, to }); this.saveViewPositionsToCache(); } From fe6465627533ff253aa75b98b967793e0205662b Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Fri, 24 Jan 2020 10:49:33 -0800 Subject: [PATCH 3/3] doing the same for outline --- src/vs/platform/list/browser/listService.ts | 5 +++++ .../workbench/browser/parts/views/viewPaneContainer.ts | 2 +- src/vs/workbench/contrib/outline/browser/outlinePane.ts | 9 +++++++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/vs/platform/list/browser/listService.ts b/src/vs/platform/list/browser/listService.ts index 280d271e07a28..29bcaa64d975c 100644 --- a/src/vs/platform/list/browser/listService.ts +++ b/src/vs/platform/list/browser/listService.ts @@ -807,6 +807,11 @@ export class WorkbenchDataTree extends DataTree = {}): void { + super.updateOptions(options); + this.internals.updateStyleOverrides(options.overrideStyles); + } } export interface IWorkbenchAsyncDataTreeOptions extends IAsyncDataTreeOptions { diff --git a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts index 0722ccb4bf7ca..cd41ae0249b08 100644 --- a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts +++ b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts @@ -91,7 +91,7 @@ export abstract class ViewPane extends Pane implements IView { @IContextMenuService protected contextMenuService: IContextMenuService, @IConfigurationService protected readonly configurationService: IConfigurationService, @IContextKeyService contextKeyService: IContextKeyService, - @IViewDescriptorService private viewDescriptorService: IViewDescriptorService, + @IViewDescriptorService protected viewDescriptorService: IViewDescriptorService, @IInstantiationService protected instantiationService: IInstantiationService, ) { super(options); diff --git a/src/vs/workbench/contrib/outline/browser/outlinePane.ts b/src/vs/workbench/contrib/outline/browser/outlinePane.ts index 629a8001b0290..f2b0d0af50ccb 100644 --- a/src/vs/workbench/contrib/outline/browser/outlinePane.ts +++ b/src/vs/workbench/contrib/outline/browser/outlinePane.ts @@ -47,7 +47,6 @@ import { basename } from 'vs/base/common/resources'; import { IDataSource } from 'vs/base/browser/ui/tree/tree'; import { IMarkerDecorationsService } from 'vs/editor/common/services/markersDecorationService'; import { MarkerSeverity } from 'vs/platform/markers/common/markers'; -import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme'; import { IViewDescriptorService } from 'vs/workbench/common/views'; class RequestState { @@ -335,13 +334,19 @@ export class OutlinePane extends ViewPane { keyboardNavigationLabelProvider: new OutlineNavigationLabelProvider(), hideTwistiesOfChildlessElements: true, overrideStyles: { - listBackground: SIDE_BAR_BACKGROUND + listBackground: this.getBackgroundColor() } } ); + this._disposables.push(this._tree); this._disposables.push(this._outlineViewState.onDidChange(this._onDidChangeUserState, this)); + this._disposables.push(this.viewDescriptorService.onDidChangeLocation(({ views, from, to }) => { + if (views.some(v => v.id === this.id)) { + this._tree.updateOptions({ overrideStyles: { listBackground: this.getBackgroundColor() } }); + } + })); // override the globally defined behaviour this._tree.updateOptions({