Autocomplete for extension search @-operators by JacksonKearl · Pull Request #53915 · microsoft/vscode

JacksonKearl · 2018-07-10T00:45:22Z

Closes #46333
This PR replaces the simple input box for extension search in the extension viewlet with a monaco editor with auto-complete support.
The auto-completion support is for pre-defined filters

ramya-rao-a · 2018-07-18T01:37:43Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

-		this.disposables.push(addStandardDisposableListener(this.searchBox, EventType.BLUR, () => removeClass(this.searchBox, 'synthetic-focus')));
+		this.monacoStyleContainer = append(header, $('.monaco-container'));
+		this.searchBox = this.instantiationService.createInstance(CodeEditorWidget, this.monacoStyleContainer, SEARCH_INPUT_OPTIONS, {});
+		this.placeholderText = append(this.monacoStyleContainer, $('.search-placeholder', null, 'Search Extensions in Marketplace'));


The text here should be localized

ramya-rao-a · 2018-07-18T01:39:00Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts


-	private onEscape(): void {
-		this.search('');
+	private autoComplete(query: string, position: number): { fullText: string, additionalText: string, overwrite: number }[] {


The additionalText in the returned object doesnt seem to be used anywhere

ramya-rao-a · 2018-07-18T02:02:19Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

+							label: item.fullText,
+							insertText: item.fullText,
+							overwriteBefore: item.overwrite,
+							sortText: item.fullText.indexOf(':') === -1 ? 'a' : item.fullText.indexOf('sort') !== -1 ? 'b' : 'c', // things with no colon; sorts; everything else


Is the idea for this sorting to show the pre-defined views first, followed by the most commonly used "@sort", and then the rest?
This makes tag and ext go to the very bottom. We can probably bring them up.

How about this:

It doesn't make sense to me to have "sort:" and "category:" in the list, as a user would never want to select them. We could just change the sort algorithm to put "ext:" and "tag:" before "category:*"?

sure, that works

ramya-rao-a · 2018-07-18T02:13:00Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

-		const onKeyDownForList = onKeyDown.filter(() => this.count() > 0);
-		onKeyDownForList.filter(e => e.keyCode === KeyCode.Enter).on(this.onEnter, this, this.disposables);
+		const onKeyDownMonaco = chain(this.searchBox.onKeyDown);
+		onKeyDownMonaco.filter(e => e.keyCode === KeyCode.Tab).on(e => e.stopPropagation(), this, this.disposables);


Pressing tab when the suggest widget is open should result in the selected suggestion being accepted. But this doesnt happen due to the above.

For this and below, I don't know of a good way to enable keys based on the suggest widget being open. the repl does something with contextkeys that's moderately complicated and doesn't actually work all that well.

I'll look into what we do in the core editor

So core editor doesn't actually help much here I think, because in core editor they don't need to disable tabbing inside the editor. Unfortunately I cant find a way to get a trigger when the dropdown closes (the dropdown can close on click in addition to tab/esc/enter; we can listen to the keys, but not the click)

ramya-rao-a · 2018-07-18T02:15:32Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts


-		const onKeyDown = chain(domEvent(this.searchBox, 'keydown'))
-			.map(e => new StandardKeyboardEvent(e));
-		onKeyDown.filter(e => e.keyCode === KeyCode.Escape).on(this.onEscape, this, this.disposables);


why are removing the binding of esc key to clearing of the text?

Both because of the above regarding the escape needing to operate on the suggest widget, but also more generally is "esc" to clear input a common thing? We use it to get rid of modals, which technically also clears their input, but besides that we don't use it anywhere else in the program.

Looking around on Win10 and MacOS it turns out there are a fair number of places where Esc clears input (I've personally never known about that until now). But we still don't do in in Code, and browsers inputs don't do it by default

Oh, we do it in settings search and keybindings. But still nowhere in the viewlets. I don't know what the best move is here.

As discussed, lets not try to add this back. esc when suggest widget is open should remove the widget, otherwise esc need not do anything

ramya-rao-a · 2018-07-18T02:18:29Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts


 	private onEnter(): void {
-		(<ExtensionsListView>this.panels[0]).select();
+		(<ExtensionsListView>this.panels[0]).focus();


On enter, I see that we reach this line of code. But visually I dont see any focus changing. So what does this do?

Select also didn't do anything... this is dependent on #53616. I could bring those changes into this PR and close that one?

as discussed, lets not try to do anything on Enter or Escape and focus on getting the tab to work

ramya-rao-a · 2018-07-18T02:22:58Z

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

+		horizontal: 'hidden',
+		vertical: 'hidden'
+	},
+	ariaLabel: 'Search Extensions in Marketplace',


This should be localized as well.

src/vs/workbench/parts/extensions/electron-browser/extensionsViewlet.ts

+
+let SEARCH_INPUT_OPTIONS: IEditorOptions =
+{
+	fontSize: 13,


JacksonKearl · 2018-07-19T16:01:31Z

Tab handling is fixed dependent on #54672.

ramya-rao-a · 2018-07-19T18:42:51Z

fyi @sandy081

Jackson Kearl added 4 commits July 9, 2018 14:43

WIP

237de58

WIP again

9e5fca7

Feature complete, refactor to Query class

4c1805c

Add tests

8af49de

JacksonKearl requested a review from ramya-rao-a July 10, 2018 00:45

Jackson Kearl added 2 commits July 9, 2018 17:46

Spacing

138cdee

Add tests and refactor

a42524f

JacksonKearl self-assigned this Jul 10, 2018

Jackson Kearl added 4 commits July 9, 2018 18:04

Maybe fix tests? Cant run locally.

1df3b79

Use monaco editor for completions

2be0c3a

Remove escape handler

60863b4

Update coloring

e545362

ramya-rao-a suggested changes Jul 18, 2018

View reviewed changes

Jackson Kearl added 5 commits July 18, 2018 10:26

Add localizations, remove unused

5d77087

Fix spacing

e61f209

update serach ordering

9a991f4

Remove enter handling

06964e1

Fix tab handling

4fb6ff5

JacksonKearl force-pushed the autocomplete branch from 0032efa to 4fb6ff5 Compare July 19, 2018 16:00

Jackson Kearl added 3 commits July 19, 2018 09:06

Merge branch 'master' into autocomplete

378d422

Improve autosuggest enablment condition

7bd2463

Conditional styling of cursor

d161f82

ramya-rao-a approved these changes Jul 19, 2018

View reviewed changes

Merge branch 'master' into autocomplete

8e0e6df

ramya-rao-a merged commit a0f07e3 into microsoft:master Jul 19, 2018

JacksonKearl mentioned this pull request Jul 30, 2018

Test: autosuggest in extensions search #55386

Closed

2 tasks

waldyrious mentioned this pull request Aug 14, 2018

Auto-complete of @ in extension sidebar stops working when text is deleted from search box #56375

Closed

github-actions bot locked and limited conversation to collaborators Mar 27, 2020

Conversation

JacksonKearl commented Jul 10, 2018 • edited by ramya-rao-a Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ramya-rao-a Jul 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JacksonKearl Jul 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

JacksonKearl commented Jul 19, 2018

Uh oh!

ramya-rao-a commented Jul 19, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JacksonKearl commented Jul 10, 2018 •

edited by ramya-rao-a

Loading

ramya-rao-a Jul 18, 2018 •

edited

Loading

JacksonKearl Jul 18, 2018 •

edited

Loading