Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scheduling Profiler: Add network measures #22112

Merged

Conversation

@bvaughn
Copy link
Contributor

@bvaughn bvaughn commented Aug 17, 2021

Several UI changes (mostly small). Commits can be reviewed individually for readability:

  • Added Network measures to the Scheduling Profiler. Also slightly refactored the preprocessData data function to split separate sections out into helper functions for readability. (We can do more of this for other mark types in a follow up commit.)
  • Slightly tweaked scroll event bubbling behavior. Don't allow wheel events to bubble past this view even if we've scrolled to the edge. It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page. The only exception is when the container fits the content (no scrolling). Also don't prevent mouse move events from bubbling if dragging horizontally within a vertical scroll view or vertically within a horizontal scroll view.
  • Text utils (draw and measure) performance improvements. Better handle the case of extremely long strings (which previously draw and measures by removing one character at a time) to instead use a binary search pattern of finding the biggest string that fits.
  • Adjust Canvas borders (1px) to account for high-dpi devices. This is a small tweak, but it makes the profiler UI look crisper. (See video below.)
network-measures.mp4
Better handle the case of extemely long strings (which previously draw and measures by removing one character at a time) to instead use a binary search pattern of finding the biggest string that fits.
@bvaughn bvaughn marked this pull request as draft Aug 17, 2021
@bvaughn bvaughn force-pushed the bvaughn:devtools-scheduling-profiler-network-meaures branch from 6537f2a to 1a6693a Aug 17, 2021
@bvaughn bvaughn requested review from lunaruan and jstejada Aug 17, 2021
@bvaughn bvaughn force-pushed the bvaughn:devtools-scheduling-profiler-network-meaures branch from 1a6693a to 7984301 Aug 17, 2021
Don't allow wheel events to bubble past this view even if we've scrolled to the edge. It just feels bad to have the scrolling jump unexpectedly from in a container to the outer page. The only exception is when the container fitst the contnet (no scrolling).

Also don't prevent mouse move events from bubbling if dragging horizontally within a vertical scroll view or vertically within a horizontal scroll view.
@bvaughn bvaughn force-pushed the bvaughn:devtools-scheduling-profiler-network-meaures branch from 7984301 to 0ed0eb9 Aug 17, 2021
bvaughn added 2 commits Aug 17, 2021
Also slightly refactored the preprocessData data function to split separate sections out into helper functions for readability. (We can do more of this for other mark types in a follow up commit.)
@bvaughn bvaughn force-pushed the bvaughn:devtools-scheduling-profiler-network-meaures branch from 0ed0eb9 to 033f932 Aug 17, 2021
@bvaughn bvaughn marked this pull request as ready for review Aug 17, 2021
@bvaughn bvaughn merged commit f51579f into facebook:main Aug 18, 2021
34 checks passed
34 checks passed
@facebook-github-tools
Facebook CLA Check Contributor License Agreement is valid!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: build_devtools_and_process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: get_base_build Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts_combined Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: sizebot Your tests passed on CircleCI!
Details
ci/circleci: sync_reconciler_forks Your tests passed on CircleCI!
Details
ci/circleci: yarn_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_build_combined Your tests passed on CircleCI!
Details
ci/circleci: yarn_flow Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=experimental --env=development Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=experimental --env=development --persistent Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=experimental --env=production Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=stable --env=development Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=stable --env=development --persistent Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=stable --env=production Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=development --variant=false Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=development --variant=true Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=production --variant=false Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-classic --env=production --variant=true Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=development --variant=false Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=development --variant=true Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=production --variant=false Your tests passed on CircleCI!
Details
ci/circleci: yarn_test--r=www-modern --env=production --variant=true Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build---project=devtools -r=experimental Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=experimental --env=development Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=experimental --env=production Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=stable --env=development Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build--r=stable --env=production Your tests passed on CircleCI!
Details
@codesandbox
ci/codesandbox Building packages succeeded.
Details
@bvaughn bvaughn deleted the bvaughn:devtools-scheduling-profiler-network-meaures branch Aug 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants