From 0a66ff1c49072845a521eff093bf38e872e2b570 Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Thu, 1 Mar 2018 12:20:24 +0100 Subject: [PATCH] Fix #43531 --- .../browser/parts/views/customView.ts | 119 +----------------- .../parts/views/media/Document_16x.svg | 1 - .../views/media/Document_16x_inverse.svg | 1 - .../parts/views/media/FolderOpen_16x.svg | 1 - .../views/media/FolderOpen_16x_inverse.svg | 1 - .../browser/parts/views/media/Folder_16x.svg | 1 - .../parts/views/media/Folder_16x_inverse.svg | 1 - .../browser/parts/views/media/views.css | 50 -------- 8 files changed, 6 insertions(+), 169 deletions(-) delete mode 100644 src/vs/workbench/browser/parts/views/media/Document_16x.svg delete mode 100755 src/vs/workbench/browser/parts/views/media/Document_16x_inverse.svg delete mode 100644 src/vs/workbench/browser/parts/views/media/FolderOpen_16x.svg delete mode 100755 src/vs/workbench/browser/parts/views/media/FolderOpen_16x_inverse.svg delete mode 100644 src/vs/workbench/browser/parts/views/media/Folder_16x.svg delete mode 100755 src/vs/workbench/browser/parts/views/media/Folder_16x_inverse.svg diff --git a/src/vs/workbench/browser/parts/views/customView.ts b/src/vs/workbench/browser/parts/views/customView.ts index 3caf946e8b6..e5a3d11f116 100644 --- a/src/vs/workbench/browser/parts/views/customView.ts +++ b/src/vs/workbench/browser/parts/views/customView.ts @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/views'; -import Event, { Emitter } from 'vs/base/common/event'; import * as errors from 'vs/base/common/errors'; import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; @@ -102,14 +101,10 @@ class CustomTreeViewer extends Disposable implements ITreeViewer { private _hasIconForParentNode = false; private _hasIconForLeafNode = false; - private _onDidIconsChange: Emitter = this._register(new Emitter()); - readonly onDidIconsChange: Event = this._onDidIconsChange.event; - private treeContainer: HTMLElement; private tree: FileIconThemableWorkbenchTree; private root: ITreeItem; private elementsToRefresh: ITreeItem[] = []; - private refreshing = 0; private _dataProvider: ITreeViewDataProvider; private dataProviderDisposables: IDisposable[] = []; @@ -134,7 +129,6 @@ class CustomTreeViewer extends Disposable implements ITreeViewer { set dataProvider(dataProvider: ITreeViewDataProvider) { dispose(this.dataProviderDisposables); if (dataProvider) { - const customTreeView: CustomTreeViewer = this; this._dataProvider = new class implements ITreeViewDataProvider { onDidChange = dataProvider.onDidChange; onDispose = dataProvider.onDispose; @@ -145,9 +139,6 @@ class CustomTreeViewer extends Disposable implements ITreeViewer { const promise = node instanceof Root ? dataProvider.getChildren() : dataProvider.getChildren(node); return promise.then(children => { node.children = children; - if (!customTreeView.refreshing) { - customTreeView.updateIconsAvailability(node); - } return children; }); } @@ -223,7 +214,7 @@ class CustomTreeViewer extends Disposable implements ITreeViewer { const actionItemProvider = (action: IAction) => action instanceof MenuItemAction ? this.instantiationService.createInstance(ContextAwareMenuItemActionItem, action) : undefined; const menus = this.instantiationService.createInstance(Menus, this.id); const dataSource = this.instantiationService.createInstance(TreeDataSource, this); - const renderer = this.instantiationService.createInstance(TreeRenderer, this.id, this, menus, actionItemProvider); + const renderer = this.instantiationService.createInstance(TreeRenderer, this.id, menus, actionItemProvider); const controller = this.instantiationService.createInstance(TreeController, this.id, menus); this.tree = this.instantiationService.createInstance(FileIconThemableWorkbenchTree, this.treeContainer, { dataSource, renderer, controller }, {}); this.tree.contextKeyService.createKey(this.id, true); @@ -290,60 +281,11 @@ class CustomTreeViewer extends Disposable implements ITreeViewer { private doRefresh(elements: ITreeItem[]): TPromise { if (this.tree) { - return TPromise.join(elements.map(e => { - this.refreshing++; - return this.tree.refresh(e).then(() => this.refreshing--, () => this.refreshing--); - })).then(() => this.updateIconsAvailability(this.root)); + return TPromise.join(elements.map(e => this.tree.refresh(e))).then(() => null); } return TPromise.as(null); } - private updateIconsAvailability(parent: ITreeItem): void { - if (this.activated && this.tree) { - const initialResult = parent instanceof Root ? { hasIconForParentNode: false, hasIconForLeafNode: false } : { hasIconForParentNode: this.hasIconForParentNode, hasIconForLeafNode: this.hasIconForLeafNode }; - const { hasIconForParentNode, hasIconForLeafNode } = this.computeIconsAvailability(parent.children || [], initialResult); - const changed = this.hasIconForParentNode !== hasIconForParentNode || this.hasIconForLeafNode !== hasIconForLeafNode; - this._hasIconForParentNode = hasIconForParentNode; - this._hasIconForLeafNode = hasIconForLeafNode; - if (changed) { - this._onDidIconsChange.fire(); - } - DOM.toggleClass(this.treeContainer, 'custom-view-align-icons-and-twisties', this.hasIconForLeafNode && !this.hasIconForParentNode); - } - } - - private computeIconsAvailability(nodes: ITreeItem[], result: { hasIconForParentNode: boolean, hasIconForLeafNode: boolean }): { hasIconForParentNode: boolean, hasIconForLeafNode: boolean } { - if (!result.hasIconForLeafNode || !result.hasIconForParentNode) { - for (const node of nodes) { - if (this.hasIcon(node)) { - result.hasIconForParentNode = result.hasIconForParentNode || node.collapsibleState !== TreeItemCollapsibleState.None; - result.hasIconForLeafNode = result.hasIconForLeafNode || node.collapsibleState === TreeItemCollapsibleState.None; - } - this.computeIconsAvailability(node.children || [], result); - if (result.hasIconForLeafNode && result.hasIconForParentNode) { - return result; - } - } - } - return result; - } - - private hasIcon(node: ITreeItem): boolean { - const icon = this.themeService.getTheme().type === LIGHT ? node.icon : node.iconDark; - if (icon) { - return true; - } - if (node.resourceUri || node.themeIcon) { - const fileIconTheme = this.themeService.getFileIconTheme(); - const isFolder = node.themeIcon ? node.themeIcon.id === FolderThemeIcon.id : node.collapsibleState !== TreeItemCollapsibleState.None; - if (isFolder) { - return fileIconTheme.hasFileIcons && fileIconTheme.hasFolderIcons; - } - return fileIconTheme.hasFileIcons; - } - return false; - } - private onSelection({ payload }: any): void { const selection: ITreeItem = this.tree.getSelection()[0]; if (selection) { @@ -395,7 +337,7 @@ class TreeDataSource implements IDataSource { interface ITreeExplorerTemplateData { label: HTMLElement; resourceLabel: ResourceLabel; - icon: TreeItemIcon; + icon: HTMLElement; actionBar: ActionBar; } @@ -406,7 +348,6 @@ class TreeRenderer implements IRenderer { constructor( private treeViewId: string, - private treeViewer: ITreeViewer, private menus: Menus, private actionItemProvider: IActionItemProvider, @IInstantiationService private instantiationService: IInstantiationService, @@ -425,7 +366,7 @@ class TreeRenderer implements IRenderer { public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): ITreeExplorerTemplateData { DOM.addClass(container, 'custom-view-tree-node-item'); - const icon = this.instantiationService.createInstance(TreeItemIcon, container, this.treeViewer); + const icon = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon')); const label = DOM.append(container, DOM.$('.custom-view-tree-node-item-label')); const resourceLabel = this.instantiationService.createInstance(ResourceLabel, container, {}); const actionsContainer = DOM.append(container, DOM.$('.actions')); @@ -459,7 +400,8 @@ class TreeRenderer implements IRenderer { templateData.label.title = typeof node.tooltip === 'string' ? node.tooltip : label; } - templateData.icon.treeItem = node; + templateData.icon.style.backgroundImage = icon ? `url('${icon}')` : ''; + DOM.toggleClass(templateData.icon, 'custom-view-tree-node-item-icon', !!icon); templateData.actionBar.context = ({ $treeViewId: this.treeViewId, $treeItemHandle: node.handle }); templateData.actionBar.push(this.menus.getResourceActions(node), { icon: true, label: false }); } @@ -479,55 +421,6 @@ class TreeRenderer implements IRenderer { public disposeTemplate(tree: ITree, templateId: string, templateData: ITreeExplorerTemplateData): void { templateData.resourceLabel.dispose(); templateData.actionBar.dispose(); - templateData.icon.dispose(); - } -} - -class TreeItemIcon extends Disposable { - - private _treeItem: ITreeItem; - private iconElement: HTMLElement; - - constructor( - container: HTMLElement, - private treeViewer: CustomTreeViewer, - @IInstantiationService instantiationService: IInstantiationService, - @IWorkbenchThemeService private themeService: IWorkbenchThemeService - ) { - super(); - this.iconElement = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon')); - this._register(this.treeViewer.onDidIconsChange(() => this.render())); - } - - set treeItem(treeItem: ITreeItem) { - this._treeItem = treeItem; - this.render(); - } - - private render(): void { - if (this._treeItem) { - const fileIconTheme = this.themeService.getFileIconTheme(); - const contributedIcon = this.themeService.getTheme().type === LIGHT ? this._treeItem.icon : this._treeItem.iconDark; - - const hasContributedIcon = !!contributedIcon; - const hasChildren = this._treeItem.collapsibleState !== TreeItemCollapsibleState.None; - const hasThemeIcon = !!this._treeItem.resourceUri || !!this._treeItem.themeIcon; - const isFolder = hasThemeIcon ? (this._treeItem.themeIcon ? this._treeItem.themeIcon.id === FolderThemeIcon.id : hasChildren) : false; - const isFile = hasThemeIcon ? (this._treeItem.themeIcon ? this._treeItem.themeIcon.id === FileThemeIcon.id : !hasChildren) : false; - const hasThemeFolderIcon = isFolder && fileIconTheme.hasFileIcons && fileIconTheme.hasFolderIcons; - const hasThemeFileIcon = isFile && fileIconTheme.hasFileIcons; - const hasIcon = hasContributedIcon || hasThemeFolderIcon || hasThemeFileIcon; - const hasFolderPlaceHolderIcon = hasIcon ? false : isFolder && this.treeViewer.hasIconForParentNode; - const hasFilePlaceHolderIcon = hasIcon ? false : isFile && this.treeViewer.hasIconForLeafNode; - const hasContainerPlaceHolderIcon = hasIcon || hasFolderPlaceHolderIcon ? false : hasChildren && this.treeViewer.hasIconForParentNode; - const hasLeafPlaceHolderIcon = hasIcon || hasFilePlaceHolderIcon ? false : !hasChildren && (this.treeViewer.hasIconForParentNode || this.treeViewer.hasIconForLeafNode); - - this.iconElement.style.backgroundImage = hasContributedIcon ? `url('${contributedIcon}')` : ''; - DOM.toggleClass(this.iconElement, 'folder-icon', hasFolderPlaceHolderIcon); - DOM.toggleClass(this.iconElement, 'file-icon', hasFilePlaceHolderIcon); - DOM.toggleClass(this.iconElement, 'placeholder-icon', hasContainerPlaceHolderIcon); - DOM.toggleClass(this.iconElement, 'custom-view-tree-node-item-icon', hasContributedIcon || hasFolderPlaceHolderIcon || hasFilePlaceHolderIcon || hasContainerPlaceHolderIcon || hasLeafPlaceHolderIcon); - } } } diff --git a/src/vs/workbench/browser/parts/views/media/Document_16x.svg b/src/vs/workbench/browser/parts/views/media/Document_16x.svg deleted file mode 100644 index 46a9f38cc88..00000000000 --- a/src/vs/workbench/browser/parts/views/media/Document_16x.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/Document_16x_inverse.svg b/src/vs/workbench/browser/parts/views/media/Document_16x_inverse.svg deleted file mode 100755 index 14abfb51077..00000000000 --- a/src/vs/workbench/browser/parts/views/media/Document_16x_inverse.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/FolderOpen_16x.svg b/src/vs/workbench/browser/parts/views/media/FolderOpen_16x.svg deleted file mode 100644 index 1a3933d6351..00000000000 --- a/src/vs/workbench/browser/parts/views/media/FolderOpen_16x.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/FolderOpen_16x_inverse.svg b/src/vs/workbench/browser/parts/views/media/FolderOpen_16x_inverse.svg deleted file mode 100755 index fbf57c927f2..00000000000 --- a/src/vs/workbench/browser/parts/views/media/FolderOpen_16x_inverse.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/Folder_16x.svg b/src/vs/workbench/browser/parts/views/media/Folder_16x.svg deleted file mode 100644 index 3d64ae71db4..00000000000 --- a/src/vs/workbench/browser/parts/views/media/Folder_16x.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/Folder_16x_inverse.svg b/src/vs/workbench/browser/parts/views/media/Folder_16x_inverse.svg deleted file mode 100755 index 13b18d18016..00000000000 --- a/src/vs/workbench/browser/parts/views/media/Folder_16x_inverse.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/views/media/views.css b/src/vs/workbench/browser/parts/views/media/views.css index 0d8382b371a..acdd1b45e97 100644 --- a/src/vs/workbench/browser/parts/views/media/views.css +++ b/src/vs/workbench/browser/parts/views/media/views.css @@ -50,14 +50,6 @@ display: none; } -.tree-explorer-viewlet-tree-view.file-icon-themable-tree.custom-view-align-icons-and-twisties .monaco-tree-row:not(.has-children) .content::before { - display: none; -} - -.tree-explorer-viewlet-tree-view.file-icon-themable-tree.align-icons-and-twisties:not(.custom-view-align-icons-and-twisties) .monaco-tree-row:not(.has-children) .content::before { - display: block; -} - .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item { display: flex; height: 22px; @@ -85,48 +77,6 @@ -webkit-font-smoothing: antialiased; } -.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.placeholder-icon { - border: 1px; - border-style:dashed; - border-radius: 1px; - margin: 5px 6px 5px 2px; - height: 12px; - width: 6px; -} - -.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.file-icon { - content: ' '; - background-image: url('Document_16x.svg'); -} - -.hs-black .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.file-icon, -.vs-dark .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.file-icon { - content: ' '; - background-image: url('Document_16x_inverse.svg'); -} - -.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon { - content: ' '; - background-image: url('Folder_16x.svg'); -} - -.hs-black .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon, -.vs-dark .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon { - content: ' '; - background-image: url('Folder_16x_inverse.svg'); -} - -.tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.expanded .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon { - content: ' '; - background-image: url('FolderOpen_16x.svg'); -} - -.hc-black .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.expanded .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon, -.vs-dark .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row.expanded .custom-view-tree-node-item > .custom-view-tree-node-item-icon.folder-icon { - content: ' '; - background-image: url('FolderOpen_16x_inverse.svg'); -} - .tree-explorer-viewlet-tree-view .monaco-tree .monaco-tree-row .custom-view-tree-node-item > .actions { display: none; padding-right: 6px; -- GitLab