Smooth animation of command palette filtering #6939
Conversation
|
reviewer note: I removed the checklist, as given it was mostly unchecked it didn't feel strictly necessary |
zadjii-msft
added
Area-User Interface
|
Thanks for the review. My official excuse for putting this together is that it's needed for accessibility -- see bullets 5 & 6 here. |
| // Add any extra trailing items from the source | ||
| while (_filteredActions.Size() < actions.size()) | ||
| { | ||
| _filteredActions.Append(actions[_filteredActions.Size()]); |
There was a problem hiding this comment.
I trust that this all works because you tested it, but I just can't for the life of me figure out how and why iterating over in index order doesn't explode the moment we start manipulating the array layout underneath us o_O
There was a problem hiding this comment.
Okay, this is a process by which we successively close gaps where _filteredActions doesn't match actions and insert actions that aren't in the right place in _filteredActions. After that, we just bulk remove _filteredActions that are off the end (because the real actions pushed them out) and bulk insert the actions that weren't represented.
Fascinating!
There was a problem hiding this comment.
Yeah sorry, I know it's opaque, and it has a "rest of the owl" moment in there. I wasn't quite sure what to put in the comments to make it clear how it works, without drowning the code in a wall of text.
The command palette is a ListView of commands. As you type into the
search box, commands are added or removed from the ListView. Currently,
each update is done by completely clearing the backing list, then adding
back any items that should be displayed. However, this defeats the
ListView's built-in animations: upon every keystroke, ListView displays
its list-clearing animation, then animates the insertion of every item
that wasn't deleted. This results in noticeable flickering.
This PR changes the update logic so that it updates the list using
(roughly) the minimum number of Insert and Remove calls, so the ListView
makes smoother transitions as you type.
Detailed Description of the Pull Request / Additional comments
I implemented it by keeping the existing code that builds the filtered
list, but I changed it to build into a scratch list. Then I grafted on
a generic delta algorithm to make the real list look like the scratch
list.
To verify the delta algorithm, I tested all 360,000 permutations of
pairs of up to 5 element lists in a toy C# app.
Validation Steps Performed
I'm not sure if my screen capture tool really caught all the flickering
here, but the screencasts below should give a rough idea of the
difference. (All the flickering was becoming a nuisance while I was
testing out the HC changes.)
Existing behavior:
New behavior:
