Fix #53200

src/vs/workbench/contrib/markers/browser/markersPanel.ts

@@ -34,7 +34,7 @@ import { deepClone } from 'vs/base/common/objects';
 import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace';
 import { FilterData, Filter, VirtualDelegate, ResourceMarkersRenderer, MarkerRenderer, RelatedInformationRenderer, TreeElement, MarkersTreeAccessibilityProvider, MarkersViewModel, ResourceDragAndDrop } from 'vs/workbench/contrib/markers/browser/markersTreeViewer';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { Separator, ActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
+import { Separator, ActionViewItem, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IKeyboardEvent, StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
@@ -75,12 +75,12 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 	private readonly filter: Filter;
 
 	private tree!: MarkersTree;
+	private filterActionBar!: ActionBar;
 	private messageBoxContainer!: HTMLElement;
 	private ariaLabelElement!: HTMLElement;
 
 	private readonly collapseAllAction: IAction;
 	private readonly filterAction: MarkersFilterAction;
-	private filterInputActionViewItem: MarkersFilterActionViewItem | null = null;
 
 	private readonly panelState: MementoObject;
 	private panelFoucusContextKey: IContextKey<boolean>;
@@ -91,6 +91,7 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 
 	private currentResourceGotAddedToMarkersData: boolean = false;
 	readonly markersViewModel: MarkersViewModel;
+	private isSmallLayout: boolean = false;
 
 	constructor(
 		@IInstantiationService private readonly instantiationService: IInstantiationService,
@@ -129,6 +130,7 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 
 		const container = dom.append(parent, dom.$('.markers-panel-container'));
 
+		this.createFilterActionBar(container);
 		this.createArialLabelElement(container);
 		this.createMessageBox(container);
 		this.createTree(container);
@@ -147,6 +149,7 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 			}
 		}));
 
+		this.filterActionBar.push(this.filterAction);
 		this.render();
 	}
 
@@ -155,10 +158,15 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 	}
 
 	public layout(dimension: dom.Dimension): void {
-		this.tree.layout(dimension.height, dimension.width);
-		if (this.filterInputActionViewItem) {
-			this.filterInputActionViewItem.toggleLayout(dimension.width < 1200);
+		const wasSmallLayout = this.isSmallLayout;
+		this.isSmallLayout = dimension.width < 600;
+		if (this.isSmallLayout !== wasSmallLayout) {
+			this.updateTitleArea();
+			dom.toggleClass(this.filterActionBar.getContainer(), 'hide', !this.isSmallLayout);
 		}
+		const treeHeight = this.isSmallLayout ? dimension.height - 44 : dimension.height;
+		this.tree.layout(treeHeight, dimension.width);
+		this.filterAction.layout(this.isSmallLayout ? dimension.width : dimension.width - 200);
 	}
 
 	public focus(): void {
@@ -174,12 +182,13 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 	}
 
 	public focusFilter(): void {
-		if (this.filterInputActionViewItem) {
-			this.filterInputActionViewItem.focus();
-		}
+		this.filterAction.focus();
 	}
 
 	public getActions(): IAction[] {
+		if (this.isSmallLayout) {
+			return [this.collapseAllAction];
+		}
 		return [this.filterAction, this.collapseAllAction];
 	}
 
@@ -289,6 +298,12 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 		return deepClone(this.configurationService.getValue('files.exclude', { resource })) || {};
 	}
 
+	private createFilterActionBar(parent: HTMLElement): void {
+		this.filterActionBar = this._register(new ActionBar(parent, { actionViewItemProvider: action => this.getActionViewItem(action) }));
+		dom.addClass(this.filterActionBar.getContainer(), 'markers-panel-filter-container');
+		dom.toggleClass(this.filterActionBar.getContainer(), 'hide', !this.isSmallLayout);
+	}
+
 	private createMessageBox(parent: HTMLElement): void {
 		this.messageBoxContainer = dom.append(parent, dom.$('.message-box-container'));
 		this.messageBoxContainer.setAttribute('aria-labelledby', 'markers-panel-arialabel');
@@ -369,8 +384,8 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 
 		// move focus to input, whenever a key is pressed in the panel container
 		this._register(domEvent(parent, 'keydown')(e => {
-			if (this.filterInputActionViewItem && this.keybindingService.mightProducePrintableCharacter(new StandardKeyboardEvent(e))) {
-				this.filterInputActionViewItem.focus();
+			if (this.keybindingService.mightProducePrintableCharacter(new StandardKeyboardEvent(e))) {
+				this.filterAction.focus();
 			}
 		}));
 
@@ -671,8 +686,7 @@ export class MarkersPanel extends Panel implements IMarkerFilterController {
 
 	public getActionViewItem(action: IAction): IActionViewItem | undefined {
 		if (action.id === MarkersFilterAction.ID) {
-			this.filterInputActionViewItem = this.instantiationService.createInstance(MarkersFilterActionViewItem, this.filterAction, this);
-			return this.filterInputActionViewItem;
+			return this.instantiationService.createInstance(MarkersFilterActionViewItem, this.filterAction, this);
 		}
 		return super.getActionViewItem(action);
 	}

src/vs/workbench/contrib/markers/browser/markersPanelActions.ts

@@ -77,6 +77,9 @@ export class MarkersFilterAction extends Action {
 
 	public static readonly ID: string = 'workbench.actions.problems.filter';
 
+	private readonly _onFocus: Emitter<void> = this._register(new Emitter<void>());
+	readonly onFocus: Event<void> = this._onFocus.event;
+
 	constructor(options: IMarkersFilterActionOptions) {
 		super(MarkersFilterAction.ID, Messages.MARKERS_PANEL_ACTION_TOOLTIP_FILTER, 'markers-panel-action-filter', true);
 		this._filterText = options.filterText;
@@ -107,6 +110,18 @@ export class MarkersFilterAction extends Action {
 			this._onDidChange.fire(<IMarkersFilterActionChangeEvent>{ useFilesExclude: true });
 		}
 	}
+
+	focus(): void {
+		this._onFocus.fire();
+	}
+
+	layout(width: number): void {
+		if (width < 400) {
+			this.class = 'markers-panel-action-filter small';
+		} else {
+			this.class = 'markers-panel-action-filter';
+		}
+	}
 }
 
 export interface IMarkerFilterController {
@@ -118,7 +133,6 @@ export interface IMarkerFilterController {
 export class MarkersFilterActionViewItem extends BaseActionViewItem {
 
 	private delayedFilterUpdate: Delayer<void>;
-	private container: HTMLElement | null = null;
 	private filterInputBox: HistoryInputBox | null = null;
 	private filterBadge: HTMLElement | null = null;
 	private focusContextKey: IContextKey<boolean>;
@@ -136,15 +150,16 @@ export class MarkersFilterActionViewItem extends BaseActionViewItem {
 		this.focusContextKey = Constants.MarkerPanelFilterFocusContextKey.bindTo(contextKeyService);
 		this.delayedFilterUpdate = new Delayer<void>(200);
 		this._register(toDisposable(() => this.delayedFilterUpdate.cancel()));
+		this._register(action.onFocus(() => this.focus()));
 	}
 
 	render(container: HTMLElement): void {
-		this.container = container;
-		DOM.addClass(this.container, 'markers-panel-action-filter-container');
+		DOM.addClass(container, 'markers-panel-action-filter-container');
 
-		const filterContainer = DOM.append(this.container, DOM.$('.markers-panel-action-filter'));
-		this.createInput(filterContainer);
-		this.createControls(filterContainer);
+		this.element = DOM.append(container, DOM.$(''));
+		this.element.className = this.action.class || '';
+		this.createInput(this.element);
+		this.createControls(this.element);
 
 		this.adjustInputBox();
 	}
@@ -155,13 +170,6 @@ export class MarkersFilterActionViewItem extends BaseActionViewItem {
 		}
 	}
 
-	toggleLayout(small: boolean) {
-		if (this.container) {
-			DOM.toggleClass(this.container, 'small', small);
-			this.adjustInputBox();
-		}
-	}
-
 	private createInput(container: HTMLElement): void {
 		this.filterInputBox = this._register(this.instantiationService.createInstance(ContextScopedHistoryInputBox, container, this.contextViewService, {
 			placeholder: Messages.MARKERS_PANEL_FILTER_PLACEHOLDER,
@@ -249,8 +257,8 @@ export class MarkersFilterActionViewItem extends BaseActionViewItem {
 	}
 
 	private adjustInputBox(): void {
-		if (this.container && this.filterInputBox && this.filterBadge) {
-			this.filterInputBox.inputElement.style.paddingRight = DOM.hasClass(this.container, 'small') || DOM.hasClass(this.filterBadge, 'hidden') ? '25px' : '150px';
+		if (this.element && this.filterInputBox && this.filterBadge) {
+			this.filterInputBox.inputElement.style.paddingRight = DOM.hasClass(this.element, 'small') || DOM.hasClass(this.filterBadge, 'hidden') ? '25px' : '150px';
 		}
 	}
 
@@ -293,6 +301,13 @@ export class MarkersFilterActionViewItem extends BaseActionViewItem {
 		*/
 		this.telemetryService.publicLog('problems.filter', data);
 	}
+
+	protected updateClass(): void {
+		if (this.element) {
+			this.element.className = this.action.class || '';
+			this.adjustInputBox();
+		}
+	}
 }
 
 export class QuickFixAction extends Action {

src/vs/workbench/contrib/markers/browser/media/markers.css

@@ -4,21 +4,11 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-action-bar .action-item.markers-panel-action-filter-container {
+	flex: 1;
 	cursor: default;
-	margin-right: 10px;
-	min-width: 150px;
-	max-width: 500px;
 	display: flex;
 }
 
-.monaco-action-bar .markers-panel-action-filter-container {
-	flex: 0.7;
-}
-
-.monaco-action-bar .markers-panel-action-filter-container.small {
-	flex: 0.5;
-}
-
 .monaco-action-bar .markers-panel-action-filter {
 	display: flex;
 	align-items: center;
@@ -52,14 +42,28 @@
 }
 
 .markers-panel-action-filter > .markers-panel-filter-controls > .markers-panel-filter-badge.hidden,
-.markers-panel-action-filter-container.small .markers-panel-action-filter > .markers-panel-filter-controls > .markers-panel-filter-badge {
+.markers-panel-action-filter.small > .markers-panel-filter-controls > .markers-panel-filter-badge {
 	display: none;
 }
 
+.panel > .title .monaco-action-bar .action-item.markers-panel-action-filter-container {
+	max-width: 600px;
+	min-width: 300px;
+	margin-right: 10px;
+}
+
 .markers-panel .markers-panel-container {
 	height: 100%;
 }
 
+.markers-panel .hide {
+	display: none;
+}
+
+.markers-panel-container .monaco-action-bar.markers-panel-filter-container {
+	margin: 10px 20px;
+}
+
 .markers-panel .markers-panel-container .message-box-container {
 	line-height: 22px;
 	padding-left: 20px;