From 32a16478d6b06cf9fcde4141291b68a0801fde19 Mon Sep 17 00:00:00 2001 From: Derek Scherger Date: Sun, 28 Feb 2021 19:05:24 -0700 Subject: [PATCH 1/2] remove arbitrary 600 pixel limit on quick input widget use 75% of available width rather than minimum of 62% of available width or 600 pixel max width --- src/vs/platform/quickinput/browser/quickInputController.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/vs/platform/quickinput/browser/quickInputController.ts b/src/vs/platform/quickinput/browser/quickInputController.ts index cd748881d21f9..e45a8e10f5040 100644 --- a/src/vs/platform/quickinput/browser/quickInputController.ts +++ b/src/vs/platform/quickinput/browser/quickInputController.ts @@ -26,8 +26,6 @@ import { IThemeService } from 'vs/platform/theme/common/themeService'; const $ = dom.$; export class QuickInputController extends Disposable { - private static readonly MAX_WIDTH = 600; // Max total width of quick input widget - private idPrefix: string; private ui: QuickInputUI | undefined; private dimension?: dom.IDimension; @@ -652,7 +650,7 @@ export class QuickInputController extends Disposable { this.ui.container.style.top = `${this.titleBarOffset}px`; const style = this.ui.container.style; - const width = Math.min(this.dimension!.width * 0.62 /* golden cut */, QuickInputController.MAX_WIDTH); + const width = this.dimension!.width * 0.75; style.width = width + 'px'; style.marginLeft = '-' + (width / 2) + 'px'; From e8abfdfd71a324b26b9bee9980661f22ae6d4842 Mon Sep 17 00:00:00 2001 From: Derek Scherger Date: Tue, 2 Mar 2021 23:02:07 -0700 Subject: [PATCH 2/2] add maximumWidth and relativeWidth quickOpen settings These preserve the existing behaviour and width of the quickOpen widget but allow for customization in situations where long filenames and paths can cause problems selecting the correct file to open. --- src/vs/platform/quickinput/browser/quickInput.ts | 2 ++ .../quickinput/browser/quickInputController.ts | 2 +- .../quickinput/browser/quickInputService.ts | 2 ++ .../quickinput/test/browser/quickinput.test.ts | 2 ++ src/vs/workbench/browser/workbench.contribution.ts | 14 ++++++++++++++ .../quickinput/browser/quickInputService.ts | 2 ++ 6 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/vs/platform/quickinput/browser/quickInput.ts b/src/vs/platform/quickinput/browser/quickInput.ts index 8cc756bda879b..912589d0a8b29 100644 --- a/src/vs/platform/quickinput/browser/quickInput.ts +++ b/src/vs/platform/quickinput/browser/quickInput.ts @@ -36,6 +36,8 @@ export interface IQuickInputOptions { idPrefix: string; container: HTMLElement; ignoreFocusOut(): boolean; + maximumWidth(): number; + relativeWidth(): number; backKeybindingLabel(): string | undefined; setContextKey(id?: string): void; linkOpenerDelegate(content: string): void; diff --git a/src/vs/platform/quickinput/browser/quickInputController.ts b/src/vs/platform/quickinput/browser/quickInputController.ts index e45a8e10f5040..649aa4809ac77 100644 --- a/src/vs/platform/quickinput/browser/quickInputController.ts +++ b/src/vs/platform/quickinput/browser/quickInputController.ts @@ -650,7 +650,7 @@ export class QuickInputController extends Disposable { this.ui.container.style.top = `${this.titleBarOffset}px`; const style = this.ui.container.style; - const width = this.dimension!.width * 0.75; + const width = Math.min(this.dimension!.width * this.options.relativeWidth(), this.options.maximumWidth()); style.width = width + 'px'; style.marginLeft = '-' + (width / 2) + 'px'; diff --git a/src/vs/platform/quickinput/browser/quickInputService.ts b/src/vs/platform/quickinput/browser/quickInputService.ts index 924e6b83ef6ad..fbff87322345a 100644 --- a/src/vs/platform/quickinput/browser/quickInputService.ts +++ b/src/vs/platform/quickinput/browser/quickInputService.ts @@ -69,6 +69,8 @@ export class QuickInputService extends Themable implements IQuickInputService { idPrefix: 'quickInput_', container: host.container, ignoreFocusOut: () => false, + maximumWidth: () => 600, + relativeWidth: () => 0.62, backKeybindingLabel: () => undefined, setContextKey: (id?: string) => this.setContextKey(id), linkOpenerDelegate: (content) => { diff --git a/src/vs/platform/quickinput/test/browser/quickinput.test.ts b/src/vs/platform/quickinput/test/browser/quickinput.test.ts index abab15421d781..0efa85ee87db2 100644 --- a/src/vs/platform/quickinput/test/browser/quickinput.test.ts +++ b/src/vs/platform/quickinput/test/browser/quickinput.test.ts @@ -46,6 +46,8 @@ suite('QuickInput', () => { // https://github.com/microsoft/vscode/issues/147543 container: fixture, idPrefix: 'testQuickInput', ignoreFocusOut() { return true; }, + maximumWidth() { return 600; }, + relativeWidth() { return 0.62; }, returnFocus() { }, backKeybindingLabel() { return undefined; }, setContextKey() { return undefined; }, diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 5e867ccc662dd..c728f8e02ccbb 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -420,6 +420,20 @@ const registry = Registry.as(ConfigurationExtensions.Con 'description': localize('workbench.quickOpen.preserveInput', "Controls whether the last typed input to Quick Open should be restored when opening it the next time."), 'default': false }, + 'workbench.quickOpen.maximumWidth': { + 'type': 'number', + 'description': localize('workbench.quickOpen.maxWidth', "Limits the maximum width of Quick Open to the specified number of pixels."), + 'default': 600, + 'minimum': 200, + 'maximum': 2000 + }, + 'workbench.quickOpen.relativeWidth': { + 'type': 'number', + 'description': localize('workbench.quickOpen.relativeWidth', "Controls the width of Quick Open relative to the total window width."), + 'default': 0.62, + 'minimum': 0.1, + 'maximum': 1.0 + }, 'workbench.settings.openDefaultSettings': { 'type': 'boolean', 'description': localize('openDefaultSettings', "Controls whether opening settings also opens an editor showing all default settings."), diff --git a/src/vs/workbench/services/quickinput/browser/quickInputService.ts b/src/vs/workbench/services/quickinput/browser/quickInputService.ts index 14d68592f6096..41440d5c6ef49 100644 --- a/src/vs/workbench/services/quickinput/browser/quickInputService.ts +++ b/src/vs/workbench/services/quickinput/browser/quickInputService.ts @@ -44,6 +44,8 @@ export class QuickInputService extends BaseQuickInputService { protected override createController(): QuickInputController { return super.createController(this.layoutService, { ignoreFocusOut: () => !this.configurationService.getValue('workbench.quickOpen.closeOnFocusLost'), + maximumWidth: () => this.configurationService.getValue('workbench.quickOpen.maximumWidth'), + relativeWidth: () => this.configurationService.getValue('workbench.quickOpen.relativeWidth'), backKeybindingLabel: () => this.keybindingService.lookupKeybinding('workbench.action.quickInputBack')?.getLabel() || undefined, hoverDelegate: this.hoverDelegate });