Dynamic layout

Pascal Fong Kye · Pascal Fong Kye · commit d6606217c8af · 2020-09-19T17:52:38.000+02:00
Use fixed size when pane grows instead of flex to avoid flickering
diff --git a/src/vs/workbench/contrib/debug/browser/media/repl.css b/src/vs/workbench/contrib/debug/browser/media/repl.css
@@ -119,6 +119,10 @@
 	margin-right: 10px;
 }
 
+.panel > .title .monaco-action-bar .action-item.repl-panel-filter-container.grow {
+	width: 400px;
+}
+
 .repl-panel-filter-container .repl-panel-filter-controls {
 	position: absolute;
 	top: 0px;
diff --git a/src/vs/workbench/contrib/debug/browser/repl.ts b/src/vs/workbench/contrib/debug/browser/repl.ts
@@ -447,6 +447,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
 	protected layoutBody(height: number, width: number): void {
 		super.layoutBody(height, width);
 		this.dimension = new dom.Dimension(width, height);
+		this.filterState.layout = this.dimension;
 		const replInputHeight = Math.min(this.replInput.getContentHeight(), height);
 		if (this.tree) {
 			const lastElementVisible = this.tree.scrollTop + this.tree.renderHeight >= this.tree.scrollHeight;
diff --git a/src/vs/workbench/contrib/debug/browser/replFilter.ts b/src/vs/workbench/contrib/debug/browser/replFilter.ts
@@ -91,8 +91,14 @@ export class ReplFilterState {
 		return this._onDidStatsChange.event;
 	}
 
+	private readonly _onDidLayoutChange: Emitter<void> = new Emitter<void>();
+	get onDidLayoutChange(): Event<void> {
+		return this._onDidLayoutChange.event;
+	}
+
 	private _filterText = '';
 	private _stats = { total: 0, filtered: 0 };
+	private _layout = new DOM.Dimension(0, 0);
 
 	get filterText(): string {
 		return this._filterText;
@@ -116,6 +122,17 @@ export class ReplFilterState {
 			this._onDidChange.fire();
 		}
 	}
+
+	get layout(): DOM.Dimension {
+		return this._layout;
+	}
+
+	set layout(layout: DOM.Dimension) {
+		if (this._layout.width !== layout.width || this._layout.height !== layout.height) {
+			this._layout = layout;
+			this._onDidLayoutChange.fire();
+		}
+	}
 }
 
 export class ReplFilterActionViewItem extends BaseActionViewItem {
@@ -168,6 +185,7 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
 		this._register(this.filters.onDidChange(() => {
 			this.filterInputBox.value = this.filters.filterText;
 		}));
+		this._register(this.filters.onDidLayoutChange(() => { this.updateClass(); }));
 		this._register(DOM.addStandardDisposableListener(this.filterInputBox.inputElement, DOM.EventType.KEY_DOWN, (e: any) => this.onInputKeyDown(e)));
 		this._register(DOM.addStandardDisposableListener(container, DOM.EventType.KEY_DOWN, this.handleKeyboardEvent));
 		this._register(DOM.addStandardDisposableListener(container, DOM.EventType.KEY_UP, this.handleKeyboardEvent));
@@ -232,7 +250,18 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
 		}
 	}
 
+	protected updateClass(): void {
+		if (this.element && this.container) {
+			this.element.className = this.class;
+			this.container.classList.toggle('grow', this.element.classList.contains('grow'));
+		}
+	}
+
 	protected get class(): string {
-		return 'panel-action-tree-filter';
+		if (this.filters.layout.width > 600) {
+			return 'panel-action-tree-filter grow';
+		} else {
+			return 'panel-action-tree-filter';
+		}
 	}
 }
