diff --git a/src/vs/workbench/parts/outline/electron-browser/media/outline.css b/src/vs/workbench/parts/outline/electron-browser/media/outline.css deleted file mode 100644 index e505caeea5a..00000000000 --- a/src/vs/workbench/parts/outline/electron-browser/media/outline.css +++ /dev/null @@ -1,160 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -.monaco-workbench .outline-item .icon { - display: inline-block; - height: 16px; - width: 16px; -} - -.monaco-workbench .outline-item .icon.constant { - background-image: url('Constant_16x.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.constant, -.hc-black .monaco-workbench .outline-item .icon.constant { - background-image: url('Constant_16x_inverse.svg'); -} - -.monaco-workbench .outline-item .icon.enum-member { - background-image: url('EnumItem_16x.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.enum-member, -.hc-black .monaco-workbench .outline-item .icon.enum-member { - background-image: url('EnumItem_inverse_16x.svg'); -} - -.monaco-workbench .outline-item .icon.struct { - background-image: url('Structure_16x_vscode.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.struct, -.hc-black .monaco-workbench .outline-item .icon.struct { - background-image: url('Structure_16x_vscode_inverse.svg'); -} - -.monaco-workbench .outline-item .icon.event { - background-image: url('Event_16x_vscode.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.event, -.hc-black .monaco-workbench .outline-item .icon.event { - background-image: url('Event_16x_vscode_inverse.svg'); -} - -.monaco-workbench .outline-item .icon.operator { - background-image: url('Operator_16x_vscode.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.operator, -.hc-black .monaco-workbench .outline-item .icon.operator { - background-image: url('Operator_16x_vscode_inverse.svg'); -} - -.monaco-workbench .outline-item .icon.type-parameter { - background-image: url('Template_16x_vscode.svg'); - background-repeat: no-repeat; - background-position: 0 -2px; -} -.vs-dark .monaco-workbench .outline-item .icon.type-parameter, -.hc-black .monaco-workbench .outline-item .icon.type-parameter { - background-image: url('Template_16x_vscode_inverse.svg'); -} - -.monaco-workbench .outline-item .icon.method, -.monaco-workbench .outline-item .icon.function, -.monaco-workbench .outline-item .icon.constructor, -.monaco-workbench .outline-item .icon.field, -.monaco-workbench .outline-item .icon.variable, -.monaco-workbench .outline-item .icon.class, -.monaco-workbench .outline-item .icon.interface, -.monaco-workbench .outline-item .icon.object, -.monaco-workbench .outline-item .icon.namespace, -.monaco-workbench .outline-item .icon.package, -.monaco-workbench .outline-item .icon.module, -.monaco-workbench .outline-item .icon.property, -.monaco-workbench .outline-item .icon.enum, -.monaco-workbench .outline-item .icon.key, -.monaco-workbench .outline-item .icon.string, -.monaco-workbench .outline-item .icon.rule, -.monaco-workbench .outline-item .icon.file, -.monaco-workbench .outline-item .icon.array, -.monaco-workbench .outline-item .icon.number, -.monaco-workbench .outline-item .icon.null, -.monaco-workbench .outline-item .icon.boolean { - background-image: url('symbol-sprite.svg'); - background-repeat: no-repeat; -} - -.vs .monaco-workbench .outline-item .icon.method, -.vs .monaco-workbench .outline-item .icon.function, -.vs .monaco-workbench .outline-item .icon.constructor { background-position: 0 -4px; } -.vs .monaco-workbench .outline-item .icon.field, -.vs .monaco-workbench .outline-item .icon.variable { background-position: -22px -4px; } -.vs .monaco-workbench .outline-item .icon.class { background-position: -43px -3px; } -.vs .monaco-workbench .outline-item .icon.interface { background-position: -63px -4px; } -.vs .monaco-workbench .outline-item .icon.object, -.vs .monaco-workbench .outline-item .icon.namespace, -.vs .monaco-workbench .outline-item .icon.package, -.vs .monaco-workbench .outline-item .icon.module { background-position: -82px -4px; } -.vs .monaco-workbench .outline-item .icon.property { background-position: -102px -3px; } -.vs .monaco-workbench .outline-item .icon.enum { background-position: -122px -3px; } -.vs .monaco-workbench .outline-item .icon.key, -.vs .monaco-workbench .outline-item .icon.string { background-position: -202px -3px; } -.vs .monaco-workbench .outline-item .icon.rule { background-position: -242px -4px; } -.vs .monaco-workbench .outline-item .icon.file { background-position: -262px -4px; } -.vs .monaco-workbench .outline-item .icon.array { background-position: -302px -4px; } -.vs .monaco-workbench .outline-item .icon.number { background-position: -322px -4px; } -.vs .monaco-workbench .outline-item .icon.null, -.vs .monaco-workbench .outline-item .icon.boolean { background-position: -343px -4px; } - -.vs-dark .monaco-workbench .outline-item .icon.method, -.vs-dark .monaco-workbench .outline-item .icon.function, -.vs-dark .monaco-workbench .outline-item .icon.constructor, -.hc-black .monaco-workbench .outline-item .icon.method, -.hc-black .monaco-workbench .outline-item .icon.function, -.hc-black .monaco-workbench .outline-item .icon.constructor { background-position: 0 -24px; } -.vs-dark .monaco-workbench .outline-item .icon.field, -.hc-black .monaco-workbench .outline-item .icon.field, -.vs-dark .monaco-workbench .outline-item .icon.variable, -.hc-black .monaco-workbench .outline-item .icon.variable { background-position: -22px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.class, -.hc-black .monaco-workbench .outline-item .icon.class { background-position: -43px -23px; } -.vs-dark .monaco-workbench .outline-item .icon.interface, -.hc-black .monaco-workbench .outline-item .icon.interface { background-position: -63px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.object, -.vs-dark .monaco-workbench .outline-item .icon.namespace, -.vs-dark .monaco-workbench .outline-item .icon.package, -.vs-dark .monaco-workbench .outline-item .icon.module, -.hc-black .monaco-workbench .outline-item .icon.object, -.hc-black .monaco-workbench .outline-item .icon.namespace, -.hc-black .monaco-workbench .outline-item .icon.package, -.hc-black .monaco-workbench .outline-item .icon.module { background-position: -82px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.property, -.hc-black .monaco-workbench .outline-item .icon.property { background-position: -102px -23px; } -.vs-dark .monaco-workbench .outline-item .icon.key, -.vs-dark .monaco-workbench .outline-item .icon.string, -.hc-black .monaco-workbench .outline-item .icon.key, -.hc-black .monaco-workbench .outline-item .icon.string { background-position: -202px -23px; } -.vs-dark .monaco-workbench .outline-item .icon.enum, -.hc-black .monaco-workbench .outline-item .icon.enum { background-position: -122px -23px; } -.vs-dark .monaco-workbench .outline-item .icon.rule, -.hc-black .monaco-workbench .outline-item .icon.rule { background-position: -242px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.file, -.hc-black .monaco-workbench .outline-item .icon.file { background-position: -262px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.array, -.hc-black .monaco-workbench .outline-item .icon.array { background-position: -302px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.number, -.hc-black .monaco-workbench .outline-item .icon.number { background-position: -322px -24px; } -.vs-dark .monaco-workbench .outline-item .icon.null, -.vs-dark .monaco-workbench .outline-item .icon.boolean, -.hc-black .monaco-workbench .outline-item .icon.null, -.hc-black .monaco-workbench .outline-item .icon.boolean { background-position: -342px -24px; } diff --git a/src/vs/workbench/parts/outline/electron-browser/media/symbol-icons.css b/src/vs/workbench/parts/outline/electron-browser/media/symbol-icons.css new file mode 100644 index 00000000000..2369d98e0ed --- /dev/null +++ b/src/vs/workbench/parts/outline/electron-browser/media/symbol-icons.css @@ -0,0 +1,181 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.monaco-workbench .symbol-icon { + display: inline-block; + height: 14px; + width: 16px; + min-height: 14px; + min-width: 16px; +} + +.monaco-workbench .symbol-icon.constant { + background-image: url('Constant_16x.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.constant, .hc-black .monaco-workbench .symbol-icon.constant { + background-image: url('Constant_16x_inverse.svg'); +} + +.monaco-workbench .symbol-icon.enum-member { + background-image: url('EnumItem_16x.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.enum-member, .hc-black .monaco-workbench .symbol-icon.enum-member { + background-image: url('EnumItem_inverse_16x.svg'); +} + +.monaco-workbench .symbol-icon.struct { + background-image: url('Structure_16x_vscode.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.struct, .hc-black .monaco-workbench .symbol-icon.struct { + background-image: url('Structure_16x_vscode_inverse.svg'); +} + +.monaco-workbench .symbol-icon.event { + background-image: url('Event_16x_vscode.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.event, .hc-black .monaco-workbench .symbol-icon.event { + background-image: url('Event_16x_vscode_inverse.svg'); +} + +.monaco-workbench .symbol-icon.operator { + background-image: url('Operator_16x_vscode.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.operator, .hc-black .monaco-workbench .symbol-icon.operator { + background-image: url('Operator_16x_vscode_inverse.svg'); +} + +.monaco-workbench .symbol-icon.type-parameter { + background-image: url('Template_16x_vscode.svg'); + background-repeat: no-repeat; + background-position: 0 -2px; +} + +.vs-dark .monaco-workbench .symbol-icon.type-parameter, .hc-black .monaco-workbench .symbol-icon.type-parameter { + background-image: url('Template_16x_vscode_inverse.svg'); +} + +.monaco-workbench .symbol-icon.method, .monaco-workbench .symbol-icon.function, .monaco-workbench .symbol-icon.constructor, .monaco-workbench .symbol-icon.field, .monaco-workbench .symbol-icon.variable, .monaco-workbench .symbol-icon.class, .monaco-workbench .symbol-icon.interface, .monaco-workbench .symbol-icon.object, .monaco-workbench .symbol-icon.namespace, .monaco-workbench .symbol-icon.package, .monaco-workbench .symbol-icon.module, .monaco-workbench .symbol-icon.property, .monaco-workbench .symbol-icon.enum, .monaco-workbench .symbol-icon.key, .monaco-workbench .symbol-icon.string, .monaco-workbench .symbol-icon.rule, .monaco-workbench .symbol-icon.file, .monaco-workbench .symbol-icon.array, .monaco-workbench .symbol-icon.number, .monaco-workbench .symbol-icon.null, .monaco-workbench .symbol-icon.boolean { + background-image: url('symbol-sprite.svg'); + background-repeat: no-repeat; +} + +.vs .monaco-workbench .symbol-icon.method, .vs .monaco-workbench .symbol-icon.function, .vs .monaco-workbench .symbol-icon.constructor { + background-position: 0 -4px; +} + +.vs .monaco-workbench .symbol-icon.field, .vs .monaco-workbench .symbol-icon.variable { + background-position: -22px -4px; +} + +.vs .monaco-workbench .symbol-icon.class { + background-position: -43px -3px; +} + +.vs .monaco-workbench .symbol-icon.interface { + background-position: -63px -4px; +} + +.vs .monaco-workbench .symbol-icon.object, .vs .monaco-workbench .symbol-icon.namespace, .vs .monaco-workbench .symbol-icon.package, .vs .monaco-workbench .symbol-icon.module { + background-position: -82px -4px; +} + +.vs .monaco-workbench .symbol-icon.property { + background-position: -102px -3px; +} + +.vs .monaco-workbench .symbol-icon.enum { + background-position: -122px -3px; +} + +.vs .monaco-workbench .symbol-icon.key, .vs .monaco-workbench .symbol-icon.string { + background-position: -202px -3px; +} + +.vs .monaco-workbench .symbol-icon.rule { + background-position: -242px -4px; +} + +.vs .monaco-workbench .symbol-icon.file { + background-position: -262px -4px; +} + +.vs .monaco-workbench .symbol-icon.array { + background-position: -302px -4px; +} + +.vs .monaco-workbench .symbol-icon.number { + background-position: -322px -4px; +} + +.vs .monaco-workbench .symbol-icon.null, .vs .monaco-workbench .symbol-icon.boolean { + background-position: -343px -4px; +} + +.vs-dark .monaco-workbench .symbol-icon.method, .vs-dark .monaco-workbench .symbol-icon.function, .vs-dark .monaco-workbench .symbol-icon.constructor, .hc-black .monaco-workbench .symbol-icon.method, .hc-black .monaco-workbench .symbol-icon.function, .hc-black .monaco-workbench .symbol-icon.constructor { + background-position: 0 -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.field, .hc-black .monaco-workbench .symbol-icon.field, .vs-dark .monaco-workbench .symbol-icon.variable, .hc-black .monaco-workbench .symbol-icon.variable { + background-position: -22px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.class, .hc-black .monaco-workbench .symbol-icon.class { + background-position: -43px -23px; +} + +.vs-dark .monaco-workbench .symbol-icon.interface, .hc-black .monaco-workbench .symbol-icon.interface { + background-position: -63px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.object, .vs-dark .monaco-workbench .symbol-icon.namespace, .vs-dark .monaco-workbench .symbol-icon.package, .vs-dark .monaco-workbench .symbol-icon.module, .hc-black .monaco-workbench .symbol-icon.object, .hc-black .monaco-workbench .symbol-icon.namespace, .hc-black .monaco-workbench .symbol-icon.package, .hc-black .monaco-workbench .symbol-icon.module { + background-position: -82px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.property, .hc-black .monaco-workbench .symbol-icon.property { + background-position: -102px -23px; +} + +.vs-dark .monaco-workbench .symbol-icon.key, .vs-dark .monaco-workbench .symbol-icon.string, .hc-black .monaco-workbench .symbol-icon.key, .hc-black .monaco-workbench .symbol-icon.string { + background-position: -202px -23px; +} + +.vs-dark .monaco-workbench .symbol-icon.enum, .hc-black .monaco-workbench .symbol-icon.enum { + background-position: -122px -23px; +} + +.vs-dark .monaco-workbench .symbol-icon.rule, .hc-black .monaco-workbench .symbol-icon.rule { + background-position: -242px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.file, .hc-black .monaco-workbench .symbol-icon.file { + background-position: -262px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.array, .hc-black .monaco-workbench .symbol-icon.array { + background-position: -302px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.number, .hc-black .monaco-workbench .symbol-icon.number { + background-position: -322px -24px; +} + +.vs-dark .monaco-workbench .symbol-icon.null, .vs-dark .monaco-workbench .symbol-icon.boolean, .hc-black .monaco-workbench .symbol-icon.null, .hc-black .monaco-workbench .symbol-icon.boolean { + background-position: -342px -24px; +} diff --git a/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css b/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css index 43d52ddfc12..cd80e921f57 100644 --- a/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css +++ b/src/vs/workbench/parts/outline/electron-browser/outlinePanel.css @@ -10,7 +10,7 @@ .monaco-workbench .outline-panel .outline-input { box-sizing: border-box; - padding: 5px 9px 9px 16px; + padding: 5px 9px 9px 9px; } .monaco-workbench .outline-panel .outline-input .monaco-inputbox { @@ -21,3 +21,18 @@ width: 100%; height: 100%; } + +.monaco-workbench .outline-panel .outline-element { + display: flex; + flex-flow: row nowrap; + align-items: center; +} + +.monaco-workbench .outline-panel .outline-element .outline-element-icon { + padding-right: 4px; +} + +.monaco-workbench .outline-panel .outline-element .outline-element-label { + text-overflow: ellipsis; + overflow: hidden; +} diff --git a/src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts b/src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts index 4eaa9235f0b..14e34b209e4 100644 --- a/src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts +++ b/src/vs/workbench/parts/outline/electron-browser/outlinePanel.ts @@ -27,6 +27,7 @@ import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/edi import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService'; import { OneOutline, OutlineItem, getOutline } from './outlineModel'; import { OutlineDataSource, OutlineRenderer, OutlineItemComparator, OutlineItemFilter } from './outlineTree'; +import { localize } from '../../../../nls'; class ActiveEditorOracle { @@ -104,7 +105,8 @@ export class OutlinePanel extends ViewsViewletPanel { let treeContainer = dom.$('.outline-tree'); dom.append(container, inputContainer, treeContainer); - this._input = new InputBox(inputContainer, null, {}); + this._input = new InputBox(inputContainer, null, { placeholder: localize('filter', "Filter") }); + this._input.disable(); this.disposables.push(attachInputBoxStyler(this._input, this._themeService)); const dataSource = new OutlineDataSource(); @@ -113,7 +115,7 @@ export class OutlinePanel extends ViewsViewletPanel { this._treeFilter = new OutlineItemFilter(); this._tree = this._instantiationService.createInstance(WorkbenchTree, treeContainer, { dataSource, renderer, sorter: this._treeComparator, filter: this._treeFilter }, {}); - this._disposables.push(this._tree); + this._disposables.push(this._tree, this._input); } protected layoutBody(height: number): void { @@ -149,6 +151,8 @@ export class OutlinePanel extends ViewsViewletPanel { this._tree.setInput(first); } + this._input.enable(); + this._editorDisposables.push(this._input.onDidChange(query => { model.updateFilter(query); this._tree.refresh(undefined, true); diff --git a/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts b/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts index d818084ff9a..ad210670e62 100644 --- a/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts +++ b/src/vs/workbench/parts/outline/electron-browser/outlineTree.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ 'use strict'; -import 'vs/css!./media/outline'; +import 'vs/css!./media/symbol-icons'; import { TPromise } from 'vs/base/common/winjs.base'; import * as dom from 'vs/base/browser/dom'; import { symbolKindToCssClass } from 'vs/editor/common/modes'; @@ -52,6 +52,10 @@ export class OutlineDataSource implements IDataSource { async getParent(tree: ITree, element: OneOutline | OutlineItem): TPromise { return element instanceof OutlineItem ? element.parent : undefined; } + + shouldAutoexpand(tree: ITree, element: OutlineItem): boolean { + return !Boolean(element.parent); + } } export interface OutlineItemTemplate { @@ -60,22 +64,28 @@ export interface OutlineItemTemplate { } export class OutlineRenderer implements IRenderer { + getHeight(tree: ITree, element: OutlineItem): number { return 22; } + getTemplateId(tree: ITree, element: OutlineItem): string { return 'outline.element'; } + renderTemplate(tree: ITree, templateId: string, container: HTMLElement): OutlineItemTemplate { - const icon = dom.$('.icon'); - container.appendChild(icon); - const label = new HighlightedLabel(container); - return { icon, label }; + const icon = dom.$('.outline-element-icon symbol-icon'); + const labelContainer = dom.$('.outline-element-label'); + dom.addClass(container, 'outline-element'); + dom.append(container, icon, labelContainer); + return { icon, label: new HighlightedLabel(labelContainer) }; } + renderElement(tree: ITree, element: OutlineItem, templateId: string, template: OutlineItemTemplate): void { template.icon.classList.add(symbolKindToCssClass((element).symbol.kind)); template.label.set(element.symbol.name, element.matches ? createMatches(element.matches[1]) : []); } + disposeTemplate(tree: ITree, templateId: string, template: OutlineItemTemplate): void { template.label.dispose(); }