Skip to content

Fix inspector Auto Scroll - #4283

Merged
CoderDake merged 26 commits into
flutter:masterfrom
CoderDake:inspector-scroll
Sep 14, 2022
Merged

CoderDake merged 26 commits into
flutter:masterfrom
CoderDake:inspector-scroll

Conversation

@CoderDake

Copy link
Copy Markdown
Contributor

Fixes #3561

This change fixes scrollToRect and related areas so that autoscrolling will always snap to the top left of the screen ( with 3 rows of padding).

If the focused node is already on the screen, no scrolling is done.

Spent time really debugging why the indexes were mismatched. Fixed the row index and height calculations, so that they will work properly and give precise values.
Also removed inflation because it ended up bringing us to the wrong row when asking to scroll to it
@CoderDake
CoderDake requested a review from kenzieschmoll July 22, 2022 19:09
// a node is selected, its properties will also be selected as by
// convention properties are the first children of a node and properties
// typically do not have children and are never expanded by default.
for (InspectorTreeNode child in node.children) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why was this logic removed? If the problem is it does bad things with too many properties, we can tweak the logic to only require some small number of children.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While updating the scrolling code, I ended up changing the behaviour so that scrolling always snaps the focused item to the top left of the viewport. So adding any children to the bounding box doesn't change the result of the scrolling.

I am also changing the behaviour, so that we don't distinguish between properties and their parents. The reason for this is that sometimes I would be scrolling the properties with my arrow keys and the focus would go off the screen but the scroll would not update since the parent would be on the screen. I figured that simplifying the whole process to "Just make sure whatever I'm focused on is visible" would help make the experience more consistent.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scrolling to the top left corner of the screen will be jarring for cases like going through a list of search results.
For example image stepping through search results and you get one that is slightly off the screen but now you scroll ALL the way up till it is at the top of the screen.
I would try to maintain the previous functionality which is pretty much industry standard for how you should scroll to bring some new content to be visible on the screen. Instead I would special case so we abandon making the parent visible when it is not possible as the list of properties is larger than the height of the screen.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We chatted about this during a 1:1 and decided together that scrolling to the center of the screen is a happy medium we can agree on.

@jacob314 jacob314 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good with a few questions.

@CoderDake
CoderDake marked this pull request as ready for review September 8, 2022 20:31
Comment on lines +83 to +87
final approximateIconWidth = calculateTextSpanWidth(
const TextSpan(
text: 'A',
),
);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not use the actual icon width here?

@CoderDake

Copy link
Copy Markdown
Contributor Author

Tested on Macos and Web with:

  • searching across the widgets
  • keyboard navigation
  • hanging widgets off of the screen and clicking on them

@CoderDake
CoderDake merged commit c94f754 into flutter:master Sep 14, 2022
@CoderDake
CoderDake deleted the inspector-scroll branch September 14, 2022 21:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Inspector tree search needs to scroll active search into view horizontally

3 participants