Refactor preference UI + add 'Commonly Used' section #9439

colin-grant-work · 2021-05-05T19:51:04Z

What it does

Fixes: #9138 by adding a 'Commonly Used' section.
Fixes: #9438

Easily visible changes:

Cleans up left-hand-tree:

Before	After

Adds 'Commonly Used' section:

Removes headlines and shows full ID path when filtering

Before	After

- Makes the 'Modified in...' messages clickable - clicking on one will set the search bar to the id of the preference and switch to the named scope.

Less visible changes

All React code in the PreferencesEditorWidget replaced with DOM methods.
Renderers now @injectable() and able to take advantage of and be instantiated by dependency injection.
Various changes to interfaces to make better use of Theia built-ins.
Addition of PreferenceTreeLabelProvider to allow for dynamic headline generation.
A few changes in other packages
- Added a DEFAULT_SCROLL_OPTIONS constant to widget.ts. In all cases in which a widget uses scroll options in the framework, they use the same settings, but I haven't converted those to references to DEFAULT_SCROLL_OPTIONS.
- Added a static .deepEqual() method to the PreferenceProvider class for use in PreferenceProviders and the node renderers in the preferences package.
- Added a default type JSONValue to the generic on the PreferenceInspection type, since it always will be a JSONValue.

How to test

Use the preferences UI in its various use cases:

Set preferences
- In particular, use string and number inputs, and ensure that there are no jerky interactions with incoming preference change events.
Change scopes - make sure the values update and the headlines correctly reflect other modified scopes.
Search for particular values - make sure the display is correct and reasonably fast
Search and change scopes - make sure that everything that should happen in both scenarios happens when both are active together.
Click on a 'Modified in...' message and see that both scope and searchbar are updated.

Review checklist

as an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

as a reviewer, I agree to behave in accordance with the review guidelines

Signed-off-by: Colin Grant colin.grant@ericsson.com

kenneth-marut-work · 2021-05-12T21:40:45Z

I've done a highlevel functionality test and for the most part things seem to be working as expected. The tree format looks much cleaner as well 🌳. Though I've noticed a couple of functionality issues/regressions that I've listed below:

Scrolling in the editor widget results seems to 'skip over' some tree nodes (more than master), this is more obvious when scrolling by dragging the scrollbar

When expanding filtered results, previously expanded nodes collapse (this is a regression). Also I believe the nodes should be expanded by default (non regression)

When selecting a preference that is shared between scopes, changing the scope resets the tree view (this seems to be a regression)

Clicking on the "Features" node in a folder scope shows subheadings with empty contents

colin-grant-work · 2021-05-12T23:27:33Z

packages/preferences/src/browser/preference-tree-model.ts

                this.lastSearchedLiteral = newSearchTerm;
                this.lastSearchedFuzzy = newSearchTerm.replace(/\s/g, '');
                this._isFiltered = newSearchTerm.length > 2;
                this.updateFilteredRows(PreferenceFilterChangeSource.Search);
+                if (!wasFiltered && this.isFiltered) {
+                    this.expandAll();


Makes node expansion the default when searching. At the moment, it only occurs when you switch modes unfiltered -> filtered, but it could be applied on every change of the filter, if that's preferable.

That feels much nicer. I think having the expansion applied on every change of the filter would be a good addition, seems that VSCode does it that way as well

packages/preferences/src/browser/views/preference-editor-widget.ts

colin-grant-work · 2021-05-12T23:30:26Z

@kenneth-marut-work, thanks for taking a look. I've addressed the issues you identified, I believe.

kenneth-marut-work · 2021-05-26T19:45:07Z

This looks good to me 👌

Signed-off-by: Colin Grant <colin.grant@ericsson.com>

paul-marechal

Some minor comments, looks great!

packages/preferences/src/browser/views/preference-widget-bindings.ts

packages/preferences/src/browser/views/preference-editor-widget.ts

vince-fugnitto

I confirmed the functionality of the changeset 👍

the preferences-tree is categorized better, and more organized
scrolling, expanding, and collapsing the preferences-tree is responsive and quick
scrolling the preferences-editor correctly updates the preferences-tree
switching scopes works correctly and is quick
clicking the modified in link works correctly
support for single and multi-root workspaces works correctly
setting preferences works correctly (string, number, enum values)
edit in settings.json links work correctly
searching for preferences shows the whole path

Signed-off-by: Colin Grant <colin.grant@ericsson.com>

) refactor preference ui + add commonly used section

colin-grant-work force-pushed the feature/commonly-used-preferences branch 2 times, most recently from 0c9cd65 to 82b4442 Compare May 5, 2021 20:00

colin-grant-work marked this pull request as ready for review May 6, 2021 15:12

colin-grant-work mentioned this pull request May 10, 2021

It's easy to get language overrides without languages #9460

Open

colin-grant-work force-pushed the feature/commonly-used-preferences branch from fb8bac1 to 76e1cb1 Compare May 12, 2021 23:24

colin-grant-work commented May 12, 2021

View reviewed changes

packages/preferences/src/browser/views/preference-editor-widget.ts Show resolved Hide resolved

colin-grant-work commented May 12, 2021

View reviewed changes

packages/preferences/src/browser/views/preference-editor-widget.ts Show resolved Hide resolved

colin-grant-work commented May 12, 2021

View reviewed changes

packages/preferences/src/browser/views/preference-editor-widget.ts Show resolved Hide resolved

colin-grant-work commented May 12, 2021

View reviewed changes

packages/preferences/src/browser/views/preference-editor-widget.ts Show resolved Hide resolved

colin-grant-work added the preferences issues related to preferences label May 26, 2021

colin-grant-work force-pushed the feature/commonly-used-preferences branch 4 times, most recently from 1875312 to f35c308 Compare May 28, 2021 14:46

colin-grant-work mentioned this pull request Jun 2, 2021

Track index in Pref Tree to facilitate automatic scrolling #9549

Merged

1 task

kenneth-marut-work approved these changes Jun 9, 2021

View reviewed changes

vince-fugnitto self-requested a review June 10, 2021 11:55

Refactor Preference UI; Add commonly used section

ea5d25a

Signed-off-by: Colin Grant <colin.grant@ericsson.com>

colin-grant-work force-pushed the feature/commonly-used-preferences branch from f35c308 to ea5d25a Compare June 10, 2021 14:33

paul-marechal reviewed Jun 10, 2021

View reviewed changes

vince-fugnitto approved these changes Jun 10, 2021

View reviewed changes

PM comments

0ab4907

Signed-off-by: Colin Grant <colin.grant@ericsson.com>

colin-grant-work force-pushed the feature/commonly-used-preferences branch from bdcd361 to 0ab4907 Compare June 10, 2021 17:10

paul-marechal merged commit b86616b into eclipse-theia:master Jun 10, 2021

paul-marechal added this to the 1.15.0 milestone Jun 10, 2021

vince-fugnitto mentioned this pull request Jun 11, 2021

Font settings show under "Find" section, should be under "Fonts" section #8341

Closed

vince-fugnitto mentioned this pull request Jul 1, 2021

preference UI is very slow #7875

Closed

vince-fugnitto mentioned this pull request Jul 15, 2021

preferences: improve category headers #7745

Closed

dna2github pushed a commit to dna2fork/theia that referenced this pull request Aug 25, 2021

Refactor preference UI + add 'Commonly Used' section (eclipse-theia#9439

db58a52

) refactor preference ui + add commonly used section

westbury pushed a commit to ARMmbed/theia that referenced this pull request Nov 9, 2021

Refactor preference UI + add 'Commonly Used' section (eclipse-theia#9439

0a553c4

) refactor preference ui + add commonly used section

colin-grant-work deleted the feature/commonly-used-preferences branch April 14, 2022 22:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor preference UI + add 'Commonly Used' section #9439

Refactor preference UI + add 'Commonly Used' section #9439

colin-grant-work commented May 5, 2021 •

edited by vince-fugnitto

Loading

kenneth-marut-work commented May 12, 2021

colin-grant-work May 12, 2021

kenneth-marut-work May 26, 2021

colin-grant-work commented May 12, 2021

kenneth-marut-work commented May 26, 2021 •

edited

Loading

paul-marechal left a comment

vince-fugnitto left a comment

Refactor preference UI + add 'Commonly Used' section #9439

Refactor preference UI + add 'Commonly Used' section #9439

Conversation

colin-grant-work commented May 5, 2021 • edited by vince-fugnitto Loading

What it does

Easily visible changes:

Less visible changes

How to test

Review checklist

Reminder for reviewers

kenneth-marut-work commented May 12, 2021

colin-grant-work May 12, 2021

Choose a reason for hiding this comment

kenneth-marut-work May 26, 2021

Choose a reason for hiding this comment

colin-grant-work commented May 12, 2021

kenneth-marut-work commented May 26, 2021 • edited Loading

paul-marechal left a comment

Choose a reason for hiding this comment

vince-fugnitto left a comment

Choose a reason for hiding this comment

colin-grant-work commented May 5, 2021 •

edited by vince-fugnitto

Loading

kenneth-marut-work commented May 26, 2021 •

edited

Loading