Skip to content

Commit bbbc314

Browse files
arhelmusarhelmus
committed
Moved repl tree filter to the separate common component
1 parent 166da46 commit bbbc314

5 files changed

Lines changed: 43 additions & 48 deletions

File tree

‎src/vs/workbench/contrib/debug/browser/repl.ts‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,14 @@ import { ReplGroup } from 'vs/workbench/contrib/debug/common/replModel';
5959
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
6060
import { EDITOR_FONT_DEFAULTS, EditorOption } from 'vs/editor/common/config/editorOptions';
6161
import { MOUSE_CURSOR_TEXT_CSS_CLASS_NAME } from 'vs/base/browser/ui/mouseCursor/mouseCursor';
62-
import { ReplFilterActionViewItem, ReplFilterState } from 'vs/workbench/contrib/debug/browser/replFilterView';
63-
import { Memento, MementoObject } from 'vs/workbench/common/memento';
62+
import { TreeFilterPanelActionViewItem, TreeFilterState } from 'vs/workbench/contrib/treeFilter/browser/treeFilterView';
6463
import { ReplFilter } from 'vs/workbench/contrib/debug/browser/replFilter';
6564

6665
const $ = dom.$;
6766

6867
const HISTORY_STORAGE_KEY = 'debug.repl.history';
69-
const FILTER_STATE_STORAGE_KEY = 'debug.repl.filter';
7068
const DECORATION_KEY = 'replinputdecoration';
71-
69+
const FILTER_ACTION_ID = `workbench.actions.treeView.repl.filter`;
7270

7371
function revealLastElement(tree: WorkbenchAsyncDataTree<any, any, any>) {
7472
tree.scrollTop = tree.scrollHeight - tree.renderHeight;
@@ -97,10 +95,8 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
9795
private styleElement: HTMLStyleElement | undefined;
9896
private completionItemProvider: IDisposable | undefined;
9997
private modelChangeListener: IDisposable = Disposable.None;
100-
private readonly panelState: MementoObject;
101-
private readonly filterActionId: string = `workbench.actions.treeView.${this.id}.filter`;
102-
private readonly filterState: ReplFilterState;
103-
private readonly filter: ReplFilter;
98+
private filter: ReplFilter;
99+
private filterState: TreeFilterState;
104100

105101
constructor(
106102
options: IViewPaneOptions,
@@ -124,13 +120,10 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
124120
super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);
125121

126122
this.history = new HistoryNavigator(JSON.parse(this.storageService.get(HISTORY_STORAGE_KEY, StorageScope.WORKSPACE, '[]')), 50);
127-
this.panelState = new Memento(FILTER_STATE_STORAGE_KEY, storageService).getMemento(StorageScope.WORKSPACE);
128-
129-
const initialFilterText = this.panelState['filter'] || '';
130-
this.filter = new ReplFilter(initialFilterText);
131-
this.filterState = this._register(new ReplFilterState({
132-
filterText: initialFilterText,
133-
filterHistory: this.panelState['filterHistory'] || [],
123+
this.filter = new ReplFilter();
124+
this.filterState = this._register(new TreeFilterState({
125+
filterText: '',
126+
filterHistory: [],
134127
layout: new dom.Dimension(0, 0),
135128
}));
136129

@@ -465,16 +458,16 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
465458
getActionViewItem(action: IAction): IActionViewItem | undefined {
466459
if (action.id === SelectReplAction.ID) {
467460
return this.instantiationService.createInstance(SelectReplActionViewItem, this.selectReplAction);
468-
} else if (action.id === this.filterActionId) {
469-
return this.instantiationService.createInstance(ReplFilterActionViewItem, action, this.filterState);
461+
} else if (action.id === FILTER_ACTION_ID) {
462+
return this.instantiationService.createInstance(TreeFilterPanelActionViewItem, action, localize('workbench.debug.filter.placeholder', "Filter. E.g.: text, !exclude"), this.filterState);
470463
}
471464

472465
return super.getActionViewItem(action);
473466
}
474467

475468
getActions(): IAction[] {
476469
const result: IAction[] = [];
477-
result.push(new Action(this.filterActionId));
470+
result.push(new Action(FILTER_ACTION_ID));
478471
if (this.debugService.getModel().getSessions(true).filter(s => s.hasSeparateRepl() && !sessionsToIgnore.has(s)).length > 1) {
479472
result.push(this.selectReplAction);
480473
}
@@ -714,9 +707,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
714707
this.storageService.remove(HISTORY_STORAGE_KEY, StorageScope.WORKSPACE);
715708
}
716709

717-
this.panelState['filter'] = this.filterState.filterText;
718-
this.panelState['filterHistory'] = this.filterState.filterHistory;
719-
720710
super.saveState();
721711
}
722712

‎src/vs/workbench/contrib/debug/browser/replFilter.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ export class ReplFilter implements ITreeFilter<IReplElement> {
1818

1919
static matchQuery = matchesFuzzy;
2020

21-
constructor(initialQuery: string) {
22-
this.filterQuery = initialQuery;
23-
}
24-
2521
private _parsedQueries: ParsedQuery[] = [];
2622
set filterQuery(query: string) {
2723
this._parsedQueries = [];

‎src/vs/workbench/contrib/debug/test/browser/repl.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ suite('Debug - REPL', () => {
195195
test('repl filter', async () => {
196196
const session = createMockSession(model);
197197
const repl = new ReplModel();
198-
const replFilter = new ReplFilter('');
198+
const replFilter = new ReplFilter();
199199

200200
repl.setFilter((element) => {
201201
const filterResult = replFilter.filter(element, TreeVisibility.Visible);

src/vs/workbench/contrib/debug/browser/media/replFilter.css renamed to src/vs/workbench/contrib/treeFilter/browser/media/treeFilter.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6-
.monaco-action-bar .action-item.repl-panel-action-filter-container {
6+
.monaco-action-bar .action-item.panel-action-tree-filter-container {
77
cursor: default;
88
display: flex;
99
}
1010

11-
.monaco-action-bar .repl-panel-action-filter{
11+
.monaco-action-bar .panel-action-tree-filter{
1212
display: flex;
1313
align-items: center;
1414
flex: 1;
1515
}
1616

17-
.monaco-action-bar .repl-panel-action-filter .monaco-inputbox {
17+
.monaco-action-bar .panel-action-tree-filter .monaco-inputbox {
1818
height: 24px;
1919
font-size: 12px;
2020
flex: 1;
2121
}
2222

23-
.pane-header .monaco-action-bar .repl-panel-action-filter .monaco-inputbox {
23+
.pane-header .monaco-action-bar .panel-action-tree-filter .monaco-inputbox {
2424
height: 20px;
2525
line-height: 18px;
2626
}
2727

28-
.monaco-workbench.vs .monaco-action-bar .repl-panel-action-filter .monaco-inputbox {
28+
.monaco-workbench.vs .monaco-action-bar .panel-action-tree-filter .monaco-inputbox {
2929
height: 25px;
3030
}
3131

32-
.panel > .title .monaco-action-bar .action-item.repl-panel-action-filter-container {
32+
.panel > .title .monaco-action-bar .action-item.panel-action-tree-filter-container {
3333
max-width: 600px;
3434
min-width: 300px;
3535
margin-right: 10px;
3636
}
3737

38-
.repl-tree .monaco-action-bar .action-item.repl-panel-action-filter-container,
39-
.panel > .title .monaco-action-bar .action-item.repl-panel-action-filter-container.grow {
38+
.monaco-action-bar .action-item.panel-action-tree-filter-container,
39+
.panel > .title .monaco-action-bar .action-item.panel-action-tree-filter-container.grow {
4040
flex: 1;
4141
}

src/vs/workbench/contrib/debug/browser/replFilterView.ts renamed to src/vs/workbench/contrib/treeFilter/browser/treeFilterView.ts

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Licensed under the MIT License. See License.txt in the project root for license information.
44
*--------------------------------------------------------------------------------------------*/
55

6-
import 'vs/css!./media/replFilter';
6+
import 'vs/css!./media/treeFilter';
77
import * as DOM from 'vs/base/browser/dom';
88
import { BaseActionViewItem } from 'vs/base/browser/ui/actionbar/actionViewItems';
99
import { Delayer } from 'vs/base/common/async';
@@ -16,7 +16,8 @@ import { Event, Emitter } from 'vs/base/common/event';
1616
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
1717
import { KeyCode } from 'vs/base/common/keyCodes';
1818
import { ContextScopedHistoryInputBox } from 'vs/platform/browser/contextScopedHistoryWidget';
19-
import { localize } from 'vs/nls';
19+
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
20+
import { IThemeService } from 'vs/platform/theme/common/themeService';
2021

2122
export interface IReplFiltersChangeEvent {
2223
filterText?: boolean;
@@ -29,7 +30,7 @@ export interface IReplFiltersOptions {
2930
layout: DOM.Dimension;
3031
}
3132

32-
export class ReplFilterState extends Disposable {
33+
export class TreeFilterState extends Disposable {
3334

3435
private readonly _onDidChange: Emitter<IReplFiltersChangeEvent> = this._register(new Emitter<IReplFiltersChangeEvent>());
3536
readonly onDidChange: Event<IReplFiltersChangeEvent> = this._onDidChange.event;
@@ -66,16 +67,18 @@ export class ReplFilterState extends Disposable {
6667
}
6768
}
6869

69-
export class ReplFilterActionViewItem extends BaseActionViewItem {
70+
export class TreeFilterPanelActionViewItem extends BaseActionViewItem {
7071

7172
private delayedFilterUpdate: Delayer<void>;
7273
private container: HTMLElement | undefined;
7374
private filterInputBox: HistoryInputBox | undefined;
7475

7576
constructor(
7677
action: IAction,
77-
private filters: ReplFilterState,
78+
private placeholder: string,
79+
private filters: TreeFilterState,
7880
@IInstantiationService private readonly instantiationService: IInstantiationService,
81+
@IThemeService private readonly themeService: IThemeService,
7982
@IContextViewService private readonly contextViewService: IContextViewService) {
8083
super(null, action);
8184
this.delayedFilterUpdate = new Delayer<void>(200);
@@ -84,12 +87,14 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
8487

8588
render(container: HTMLElement): void {
8689
this.container = container;
87-
DOM.addClass(this.container, 'repl-panel-action-filter-container');
90+
DOM.addClass(this.container, 'panel-action-tree-filter-container');
8891

8992
this.element = DOM.append(this.container, DOM.$(''));
9093
this.element.className = this.class;
9194
this.createInput(this.element);
9295
this.updateClass();
96+
97+
this.adjustInputBox();
9398
}
9499

95100
focus(): void {
@@ -106,9 +111,10 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
106111

107112
private createInput(container: HTMLElement): void {
108113
this.filterInputBox = this._register(this.instantiationService.createInstance(ContextScopedHistoryInputBox, container, this.contextViewService, {
109-
placeholder: localize('workbench.debug.filter.placeholder', "Filter. E.g.: text, !exclude"),
114+
placeholder: this.placeholder,
110115
history: this.filters.filterHistory
111116
}));
117+
this._register(attachInputBoxStyler(this.filterInputBox, this.themeService));
112118
this.filterInputBox.value = this.filters.filterText;
113119
this._register(this.filterInputBox.onDidChange(() => this.delayedFilterUpdate.trigger(() => this.onDidInputChange(this.filterInputBox!))));
114120
this._register(this.filters.onDidChange((event: IReplFiltersChangeEvent) => {
@@ -150,31 +156,34 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
150156
}
151157

152158
private onInputKeyDown(event: StandardKeyboardEvent) {
153-
let handled = false;
154159
if (event.equals(KeyCode.Escape)) {
155160
this.clearFilterText();
156-
handled = true;
157-
}
158-
if (handled) {
159161
event.stopPropagation();
160162
event.preventDefault();
161163
}
162164
}
163165

166+
private adjustInputBox(): void {
167+
if (this.element && this.filterInputBox) {
168+
this.filterInputBox.inputElement.style.paddingRight = DOM.hasClass(this.element, 'small') ? '25px' : '150px';
169+
}
170+
}
171+
164172
protected updateClass(): void {
165173
if (this.element && this.container) {
166174
this.element.className = this.class;
167175
DOM.toggleClass(this.container, 'grow', DOM.hasClass(this.element, 'grow'));
176+
this.adjustInputBox();
168177
}
169178
}
170179

171180
protected get class(): string {
172181
if (this.filters.layout.width > 800) {
173-
return 'repl-panel-action-filter grow';
182+
return 'panel-action-tree-filter grow';
174183
} else if (this.filters.layout.width < 600) {
175-
return 'repl-panel-action-filter small';
184+
return 'panel-action-tree-filter small';
176185
} else {
177-
return 'repl-panel-action-filter';
186+
return 'panel-action-tree-filter';
178187
}
179188
}
180189
}

0 commit comments

Comments
 (0)