Skip to content

Commit 55ec233

Browse files
author
Pascal Fong Kye
committed
Show filtered stats
1 parent b38b758 commit 55ec233

3 files changed

Lines changed: 92 additions & 2 deletions

File tree

‎src/vs/workbench/contrib/debug/browser/media/repl.css‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,25 @@
115115
}
116116

117117
.panel > .title .monaco-action-bar .action-item.repl-panel-filter-container {
118-
min-width: 200px;
118+
min-width: 300px;
119119
margin-right: 10px;
120120
}
121+
122+
.repl-panel-filter-container .repl-panel-filter-controls {
123+
position: absolute;
124+
top: 0px;
125+
bottom: 0;
126+
right: 0px;
127+
display: flex;
128+
align-items: center;
129+
}
130+
131+
.repl-panel-filter-container .repl-panel-filter-controls > .repl-panel-filter-badge {
132+
margin: 4px;
133+
padding: 0px 8px;
134+
border-radius: 2px;
135+
}
136+
137+
.repl-panel-filter-container .repl-panel-filter-controls > .repl-panel-filter-badge.hidden {
138+
display: none;
139+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,22 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
251251
}));
252252
}
253253

254+
private computeFilterStats(): { total: number, filtered: number } {
255+
let filtered = 0;
256+
let total = 0;
257+
if (this.tree) {
258+
total = this.tree.getNode().children.length;
259+
for (const child of this.tree.getNode().children) {
260+
if (child.visible) {
261+
++filtered;
262+
}
263+
}
264+
}
265+
return {
266+
total, filtered
267+
};
268+
}
269+
254270
get isReadonly(): boolean {
255271
// Do not allow to edit inactive sessions
256272
const session = this.tree.getInput();
@@ -574,6 +590,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
574590
}
575591
lastSelectedString = selection ? selection.toString() : '';
576592
}));
593+
this._register(this.tree.onDidChangeContentHeight(() => this.refreshReplElements(false)));
577594
// Make sure to select the session if debugging is already active
578595
this.selectSession();
579596
this.styleElement = dom.createStyleSheet(this.container);
@@ -665,6 +682,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
665682
}
666683

667684
this.refreshScheduler.schedule(noDelay ? 0 : undefined);
685+
this.filterState.filterStats = this.computeFilterStats();
668686
}
669687
}
670688

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ import { Event, Emitter } from 'vs/base/common/event';
1919
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
2020
import { KeyCode } from 'vs/base/common/keyCodes';
2121
import { ContextScopedHistoryInputBox } from 'vs/platform/browser/contextScopedHistoryWidget';
22-
import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
22+
import { attachInputBoxStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
2323
import { IThemeService } from 'vs/platform/theme/common/themeService';
24+
import { badgeBackground, badgeForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
2425
import { ReplEvaluationResult, ReplEvaluationInput } from 'vs/workbench/contrib/debug/common/replModel';
26+
import { localize } from 'vs/nls';
2527

2628

2729
type ParsedQuery = {
@@ -84,12 +86,30 @@ export class ReplFilterState {
8486
return this._onDidChange.event;
8587
}
8688

89+
private readonly _onDidStatsChange: Emitter<void> = new Emitter<void>();
90+
get onDidStatsChange(): Event<void> {
91+
return this._onDidStatsChange.event;
92+
}
93+
8794
private _filterText = '';
95+
private _stats = { total: 0, filtered: 0 };
8896

8997
get filterText(): string {
9098
return this._filterText;
9199
}
92100

101+
get filterStats(): { total: number, filtered: number } {
102+
return this._stats;
103+
}
104+
105+
set filterStats(stats: { total: number, filtered: number }) {
106+
const { total, filtered } = stats;
107+
if (this._stats.total !== total || this._stats.filtered !== filtered) {
108+
this._stats = { total, filtered };
109+
this._onDidStatsChange.fire();
110+
}
111+
}
112+
93113
set filterText(filterText: string) {
94114
if (this._filterText !== filterText) {
95115
this._filterText = filterText;
@@ -102,6 +122,7 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
102122

103123
private delayedFilterUpdate: Delayer<void>;
104124
private container!: HTMLElement;
125+
private filterBadge: HTMLElement | null = null;
105126
private filterInputBox!: HistoryInputBox;
106127

107128
constructor(
@@ -123,6 +144,7 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
123144
this.element = DOM.append(this.container, DOM.$(''));
124145
this.element.className = this.class;
125146
this.createInput(this.element);
147+
this.createBadge(this.element);
126148
this.updateClass();
127149
}
128150

@@ -179,6 +201,37 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
179201
}
180202
}
181203

204+
private createBadge(container: HTMLElement): void {
205+
const controlsContainer = DOM.append(container, DOM.$('.repl-panel-filter-controls'));
206+
const filterBadge = this.filterBadge = DOM.append(controlsContainer, DOM.$('.repl-panel-filter-badge'));
207+
this._register(attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => {
208+
const background = colors.badgeBackground ? colors.badgeBackground.toString() : '';
209+
const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : '';
210+
const border = colors.contrastBorder ? colors.contrastBorder.toString() : '';
211+
212+
filterBadge.style.backgroundColor = background;
213+
214+
filterBadge.style.borderWidth = border ? '1px' : '';
215+
filterBadge.style.borderStyle = border ? 'solid' : '';
216+
filterBadge.style.borderColor = border;
217+
filterBadge.style.color = foreground;
218+
}));
219+
this.updateBadge();
220+
this._register(this.filters.onDidStatsChange(() => this.updateBadge()));
221+
}
222+
223+
private updateBadge(): void {
224+
if (this.filterBadge) {
225+
const { total, filtered } = this.filters.filterStats;
226+
const filterBadgeHidden = total === filtered || filtered === 0;
227+
228+
this.filterBadge.classList.toggle('hidden', filterBadgeHidden);
229+
this.filterBadge.textContent = localize('showing filtered repl lines', "Showing {0} of {1}", filtered, total);
230+
231+
this.filterInputBox.inputElement.style.paddingRight = filterBadgeHidden ? '4px' : '150px';
232+
}
233+
}
234+
182235
protected get class(): string {
183236
return 'panel-action-tree-filter';
184237
}

0 commit comments

Comments
 (0)