vscode
vscode copied to clipboard
microsoft
modify the feature of quick input, when overflowed the elipsses shows…
@kipackjeong can you attach a screenshot of the change?
Additionally, this isn't finished yet because we should make a new CSS class to do this behavior and then add it to the respective html tags that are created in the JS:
https://github.com/microsoft/vscode/blob/main/src/vs/base/parts/quickinput/browser/quickInputList.ts#L113
Then once you have that working we can talk about adding a setting to vscode that will allow you to set this behavior.
@TylerLeonhardt Thank you for the feedback and please forgive my shortcomings, this was my first time contributing to the open source project. I have attached the screenshot of the changes. However, I do not understand why we have to make a new CSS class. I would appreciate in depth explanation on this please. Thank you!
@kipackjeong no worries and by the way, Draft PRs are totally fine to open. I'm happy to help you along the journey, just be patient with me as I have a few things I am working on at the same time.
We wanted the behavior you have introduced to be behind a setting like search.quickOpen.overflowOnLeft which would control whether the ellipsis would be shown on the right or left of the line.
In order to do this, I suggest making a CSS class (or a few if that's what is needed) that we can programmatically add here: https://github.com/microsoft/vscode/blob/main/src/vs/base/parts/quickinput/browser/quickInputList.ts#L113
based on if our new setting is set.
@TylerLeonhardt I made changes respective to your comments, can you review this please. Later now I noticed that proper spelling is "ellipsis",but I will change that.
Created new CSS Class: .left-ellipses
Added on labelContainer, nameContainer, and descriptionContainer in both the css file and in dom:
label-container.left-ellipsesname-container.left-ellipsesdescription-container.left-ellipses
Added this style on those three elements :
.quick-input-list .monaco-icon-label-container.left-ellipses {
display: flex;
align-items: center;
}
.quick-input-list .monaco-icon-name-container.left-ellipses {
display:inline-block;
block-size: 1.5rem;
}
.quick-input-list .monaco-icon-description-container.left-ellipses {
display:inline-block;
block-size: 1.5rem;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
direction: rtl;
text-align: left;
}
For dom manipulation, when data.label is created with IconLabel class Instance, created and added new option ellipsesOnLeft
/* quickInputList.ts */
data.label = new IconLabel(row1, { supportHighlights: true, supportDescriptionHighlights: true, supportIcons: true, ellipsesOnLeft: true });
Then added ellipsesOnLeft logic inside of IconLabel contsructor
/* iconLabel.ts */
if (options?.ellipsesOnLeft) {
this.labelContainer.classList.add('left-ellipses');
nameContainer.classList.add('left-ellipses');
this.descriptionContainer.element.classList.add('left-ellipses');
}
Now works well
When ellipsesOnLeft option is false
When it is true
Maybe give the setting a less specific name and make it an enum with only two values at the moment, left and right. That leaves scope for future enhancement.
@gjsjohnmurray I think that is a good idea. For instance like Ellipsis.Left and Ellipsis.Right?
@kipackjeong I'm thinking: EllipsisLocation with Left and Right and then hopefully in the near future we can figure out a safe and fast way to do ellipsis in the middle and we can have a Middle option (not required for this PR).
Once you get Left and Right supported, you can make it a true VS Code setting by adding to the following: https://github.com/microsoft/vscode/blob/dafc40bca5439520d7e8b1c4a5c15c744bf69c10/src/vs/workbench/contrib/search/browser/search.contribution.ts#L892-L911
Then the plumbing fun begins...
follow the reference here: https://github.com/microsoft/vscode/blob/0e8fcebfbc9f5ecb1e7db0750fc3eb5a9a8cad69/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts#L197
alllllll the way down to the IconLabel.
I guess this issue was a bit more complicated than I thought... 😅
@TylerLeonhardt Thank you and sorry it has been over ten days of no reply, I was running so busy. I added an option on search.contribution.ts and also added on
'search.quickOpen.ellipsisLocation': {
type: 'string',
default: 'right',
enum: ['left', 'right'],
enumDescriptions: [
nls.localize('quickInput.ellipsisLocation.right', 'The ellipsis will show on the right side when the file path string overflows'),
nls.localize('quickInput.ellipsisLocation.left', 'The ellipsis will show on the left side when the file path string overflows')
]
},
anythingQuickAccess.ts
private get configuration() {
const editorConfig = this.configurationService.getValue<IWorkbenchEditorConfiguration>().workbench?.editor;
const searchConfig = this.configurationService.getValue<IWorkbenchSearchConfiguration>().search;
const quickAccessConfig = this.configurationService.getValue<IWorkbenchQuickAccessConfiguration>().workbench.quickOpen;
return {
openEditorPinned: !editorConfig?.enablePreviewFromQuickOpen || !editorConfig?.enablePreview,
openSideBySideDirection: editorConfig?.openSideBySideDirection,
includeSymbols: searchConfig?.quickOpen.includeSymbols,
includeHistory: searchConfig?.quickOpen.includeHistory,
ellipsisLocation: searchConfig?.quickOpen.ellipsisLocation,
historyFilterSortOrder: searchConfig?.quickOpen.history.filterSortOrder,
shortAutoSaveDelay: this.filesConfigurationService.getAutoSaveMode() === AutoSaveMode.AFTER_SHORT_DELAY,
preserveInput: quickAccessConfig.preserveInput
};
}
But couldn't figure out how I can use this in InputLabel to manipulate the dom.
@TylerLeonhardt Thank you and sorry it has been over ten days of no reply, I was running so busy. I added an option on search.contribution.ts and also added on
'search.quickOpen.ellipsisLocation': { type: 'string', default: 'right', enum: ['left', 'right'], enumDescriptions: [ nls.localize('quickInput.ellipsisLocation.right', 'The ellipsis will show on the right side when the file path string overflows'), nls.localize('quickInput.ellipsisLocation.left', 'The ellipsis will show on the left side when the file path string overflows') ] },anythingQuickAccess.ts
private get configuration() { const editorConfig = this.configurationService.getValue<IWorkbenchEditorConfiguration>().workbench?.editor; const searchConfig = this.configurationService.getValue<IWorkbenchSearchConfiguration>().search; const quickAccessConfig = this.configurationService.getValue<IWorkbenchQuickAccessConfiguration>().workbench.quickOpen; return { openEditorPinned: !editorConfig?.enablePreviewFromQuickOpen || !editorConfig?.enablePreview, openSideBySideDirection: editorConfig?.openSideBySideDirection, includeSymbols: searchConfig?.quickOpen.includeSymbols, includeHistory: searchConfig?.quickOpen.includeHistory, ellipsisLocation: searchConfig?.quickOpen.ellipsisLocation, historyFilterSortOrder: searchConfig?.quickOpen.history.filterSortOrder, shortAutoSaveDelay: this.filesConfigurationService.getAutoSaveMode() === AutoSaveMode.AFTER_SHORT_DELAY, preserveInput: quickAccessConfig.preserveInput }; }But couldn't figure out how I can use this in
InputLabelto manipulate the dom.
@TylerLeonhardt Hello Tyler, any thoughts on it yet?
Referencing ticket: #156062 Exactly what I was looking for.
The path is truncated from the left, like in macOS Spotlight. Tested this patch with the latest dev version and it works fine.
Note: in a kind of sick outcome, #156062 got closed as a dup of #58040, and both are closed and locked.
Related on Stack Overflow: How do I improve differentiation of long paths when searching for a file when there are others of the same name in VS Code's Quick Open feature?
