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

Improve layout trace viewer with a screenshot of each step #23339

Open
ferjm opened this issue May 7, 2019 · 1 comment
Open

Improve layout trace viewer with a screenshot of each step #23339

ferjm opened this issue May 7, 2019 · 1 comment

Comments

@ferjm
Copy link
Member

@ferjm ferjm commented May 7, 2019

I'm not sure if this is doable, but it would be really nice to improve the layout trace viewer with a screenshot of each step or each reflow, highlighting the different boxes like in this reflow visualization from Gecko

hqdefault

@highfive
Copy link

@highfive highfive commented May 7, 2019

@ferjm ferjm mentioned this issue Feb 19, 2020
2 of 2 tasks complete
bors-servo added a commit that referenced this issue Feb 21, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
bors-servo added a commit that referenced this issue Feb 21, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
bors-servo added a commit that referenced this issue Feb 21, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
bors-servo added a commit that referenced this issue Feb 23, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
bors-servo added a commit that referenced this issue Feb 24, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
bors-servo added a commit that referenced this issue Feb 24, 2020
Layout viewer for layout 2020

- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

This PR makes layout 2020 dump the box and fragment tree states into json files that can be visualized with the layout viewer tool. This tool has not much functionality other than displaying these trees and allowing to inspect each node additional data, so there is a lot of room for improvements. Some ideas for follow-ups:

- Make the tool create and display diffs between tree states.
- Actually allow creating new debug scopes during box tree and fragment tree construction. Right now there is a single scope created after constructing both trees, which is not ideal as it only allows looking at the reflow result.
-  Right now an independent JSON file is created per reflow. It would be nice to unify the data obtained on each reflow on a single JSON, so diffs between reflows can be displayed as well.
- Dump and display the DOM tree. Link boxes to DOM nodes.
- #23339
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.