Skip to content

Improve the vertical scrolling of our treeviews#4332

Merged
julienw merged 5 commits into
firefox-devtools:mainfrom
julienw:scroll-after-search
Nov 28, 2022
Merged

Improve the vertical scrolling of our treeviews#4332
julienw merged 5 commits into
firefox-devtools:mainfrom
julienw:scroll-after-search

Conversation

@julienw
Copy link
Copy Markdown
Contributor

@julienw julienw commented Nov 18, 2022

This makes the following changes:

production
deploy preview

I considered having a different generation state to distinguish centering vs simply navigating, but this is more changes that I wanted to do now. Instead I used an heuristic to detect the "jumps": that's happening when it's more than 16 times the item height (navigating with page down/page up moves by 15 items, so the number was chosen for this). It's not perfect because sometimes when clicking repeatedly in the timeline we don't always trigger this heuristic. But this is right in most times.

);
}

_scrollContainerHorizontally(container: HTMLDivElement, offsetX: CssPixels) {
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.

Note: the offsetX we pass here is usually wrong because it doensn't take into account the fixed column widths. I intend to change this once #4204 is done.

@codecov
Copy link
Copy Markdown

codecov Bot commented Nov 18, 2022

Codecov Report

Base: 88.34% // Head: 88.33% // Decreases project coverage by -0.01% ⚠️

Coverage data is based on head (7ef9abd) compared to base (229a018).
Patch has no changes to coverable lines.

❗ Current head 7ef9abd differs from pull request most recent head fdcf5d4. Consider uploading reports for the commit fdcf5d4 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4332      +/-   ##
==========================================
- Coverage   88.34%   88.33%   -0.02%     
==========================================
  Files         282      282              
  Lines       25302    25229      -73     
  Branches     6817     6797      -20     
==========================================
- Hits        22354    22285      -69     
+ Misses       2735     2731       -4     
  Partials      213      213              
Impacted Files Coverage Δ
src/profile-logic/active-tab.js 82.79% <0.00%> (-2.16%) ⬇️
src/profile-logic/marker-data.js 93.38% <0.00%> (-0.20%) ⬇️
src/test/fixtures/profiles/gecko-profile.js 100.00% <0.00%> (ø)
src/test/fixtures/profiles/processed-profile.js 94.67% <0.00%> (ø)
src/profile-logic/process-profile.js 91.23% <0.00%> (+0.12%) ⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

@mstange
Copy link
Copy Markdown
Contributor

mstange commented Nov 20, 2022

I like it!

@julienw
Copy link
Copy Markdown
Contributor Author

julienw commented Nov 23, 2022

I had a look at tests, but the VirtualList component is very difficult to test with our current infrastructure using jsdom, because we don't have Layout nor scrolling. Therefore I don't think I can do useful tests for this PR :/

@julienw julienw requested a review from canova November 23, 2022 15:04
@julienw julienw force-pushed the scroll-after-search branch from 3620a67 to 92e2905 Compare November 23, 2022 17:16
Copy link
Copy Markdown
Member

@canova canova left a comment

Choose a reason for hiding this comment

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

Looks good to me, thanks!


let scrollMargin = 3 * this.props.itemHeight;
if (container.clientHeight < 2 * scrollMargin) {
// The container is too small to use a margin.
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.

Good to think about this case!

itemTop + bigJump < container.scrollTop ||
itemBottom - bigJump > container.scrollTop + container.clientHeight
) {
const scrollTopToCenterItem =
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.

nit: it would ne nice to explain why we have this case in a comment for future reference.

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.

Good idea, thanks!

@julienw julienw force-pushed the scroll-after-search branch from 92e2905 to fdcf5d4 Compare November 28, 2022 11:03
@julienw julienw merged commit ade7bc6 into firefox-devtools:main Nov 28, 2022
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.

3 participants