[RPP] Add forced reflow insight [devtools/devtools-frontend : main]

1 view
Skip to first unread message

Yanling Wang (Gerrit)

unread,
Nov 22, 2024, 7:18:22 PM11/22/24
to Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Jack Franklin, Connor Clark, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Connor Clark, Jack Franklin and Paul Irish

Yanling Wang added 1 comment

Patchset-level comments
File-level comment, Patchset 11 (Latest):
Yanling Wang . resolved

Hi, I've addressed all the comments and rebased the branch. Could you please take a look at it when you have time? Thank you!

Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Connor Clark
  • Jack Franklin
  • Paul Irish
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 11
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Sat, 23 Nov 2024 00:18:19 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
unsatisfied_requirement
open
diffy

Andres Olivares (Gerrit)

unread,
Nov 25, 2024, 3:53:15 AM11/25/24
to Yanling Wang, Devtools-frontend LUCI CQ, Paul Irish, Jack Franklin, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Jack Franklin, Paul Irish and Yanling Wang

Andres Olivares voted Code-Review+1

Code-Review+1
Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Jack Franklin
  • Paul Irish
  • Yanling Wang
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 11
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Mon, 25 Nov 2024 08:53:09 +0000
Gerrit-HasComments: No
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Jack Franklin (Gerrit)

unread,
Nov 25, 2024, 10:34:11 AM11/25/24
to Yanling Wang, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Paul Irish and Yanling Wang

Jack Franklin voted and added 2 comments

Votes added by Jack Franklin

Code-Review-1

2 comments

Patchset-level comments
Jack Franklin . resolved

leaving a -1 not because I am against this insight or the technical implementation in this CL, but I think the UX could use some thought and attention before it lands and I don't want it to land without this being considered. Thanks!

File front_end/panels/timeline/components/insights/ForcedReflow.ts
Line 79, Patchset 1: #renderForcedReflow(): LitHtml.LitTemplate {
Paul Irish . unresolved

Just so we're aligned on the goal here.. is it fair to describe the current UI (https://imgur.com/45Xd0MX) here as this?

  • the most responsible function call for forced reflow costs
  • the 3 top distinct forced reflow callstacks from aggregated data. (maximum 3 call frames)
Yanling Wang

Yes, that's correct. We'll show the most responsible function call for forced reflow costs and its related forced reflow callstacks (maximum 3 call frames including the recalcTraceCallFrame).

Jack Franklin

I think there is a solid amount of room for iteration on the UI here; we have tried with the other insights to keep them brief and not pack them with information. Looking at the mock-up that Paul linked to above, it's really not clear to me what I do with that information as a user and what the next steps are. What do you want people to do with this information?

Could we instead consider highlighting particular calls, or using the overlays to draw the user's attention to it, and keep the insight much more concise?

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Paul Irish
  • Yanling Wang
Submit Requirements:
  • requirement is blockingCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 11
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Mon, 25 Nov 2024 15:34:04 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
Comment-In-Reply-To: Yanling Wang <yanli...@microsoft.com>
Comment-In-Reply-To: Paul Irish <paul...@chromium.org>
blocking_requirement
unsatisfied_requirement
open
diffy

Andres Olivares (Gerrit)

unread,
Nov 25, 2024, 10:56:25 AM11/25/24
to Yanling Wang, Jack Franklin, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Paul Irish and Yanling Wang

Andres Olivares voted and added 1 comment

Votes added by Andres Olivares

Code-Review+0

1 comment

Patchset-level comments
Andres Olivares . resolved

this LGTM from the technical perspective, however I remove my vote given the blocking request to reconsider the UX

Gerrit-Comment-Date: Mon, 25 Nov 2024 15:56:19 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
blocking_requirement
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Nov 27, 2024, 6:11:45 AM11/27/24
to Jack Franklin, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Jack Franklin and Paul Irish

Yanling Wang added 2 comments

Patchset-level comments
File-level comment, Patchset 11:
Yanling Wang . resolved

Hi Jack, thanks for reviewing the change. I've updated the UI and also added overlay for forced reflow. Can you please take another look when you have time? Thank you!

File front_end/panels/timeline/components/insights/ForcedReflow.ts
Line 79, Patchset 1: #renderForcedReflow(): LitHtml.LitTemplate {
Paul Irish . unresolved

Just so we're aligned on the goal here.. is it fair to describe the current UI (https://imgur.com/45Xd0MX) here as this?

  • the most responsible function call for forced reflow costs
  • the 3 top distinct forced reflow callstacks from aggregated data. (maximum 3 call frames)
Yanling Wang

Yes, that's correct. We'll show the most responsible function call for forced reflow costs and its related forced reflow callstacks (maximum 3 call frames including the recalcTraceCallFrame).

Jack Franklin

I think there is a solid amount of room for iteration on the UI here; we have tried with the other insights to keep them brief and not pack them with information. Looking at the mock-up that Paul linked to above, it's really not clear to me what I do with that information as a user and what the next steps are. What do you want people to do with this information?

Could we instead consider highlighting particular calls, or using the overlays to draw the user's attention to it, and keep the insight much more concise?

Yanling Wang

Thanks for your feedback. I've added an overlay for forced reflow. The default overlay now displays the corresponding top time-consuming function calls. Additionally, I've updated the UI to only include bottom-up call frames. When you hover or click on it, the overlay shows the related events. Here's the current UI: https://imgur.com/a/qwBByxH.

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Jack Franklin
  • Paul Irish
Submit Requirements:
  • requirement is blockingCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 13
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Wed, 27 Nov 2024 11:11:41 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
Comment-In-Reply-To: Jack Franklin <jacktf...@chromium.org>
blocking_requirement
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Dec 3, 2024, 8:27:13 PM12/3/24
to Jack Franklin, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Jack Franklin and Paul Irish

Yanling Wang added 1 comment

Patchset-level comments
File-level comment, Patchset 16 (Latest):
Yanling Wang . resolved

Hi, I've updated the UI and pasted the latest screenshot link in the description box. Could you please take another look at it? Thank you for your time!

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Jack Franklin
  • Paul Irish
Submit Requirements:
  • requirement is blockingCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 16
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Wed, 04 Dec 2024 01:27:08 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
blocking_requirement
unsatisfied_requirement
open
diffy

Jack Franklin (Gerrit)

unread,
Dec 6, 2024, 10:13:04 AM12/6/24
to Yanling Wang, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Paul Irish and Yanling Wang

Jack Franklin voted and added 1 comment

Votes added by Jack Franklin

Code-Review+0

1 comment

File front_end/panels/timeline/components/insights/ForcedReflow.ts
Line 79, Patchset 1: #renderForcedReflow(): LitHtml.LitTemplate {
Paul Irish . unresolved

Just so we're aligned on the goal here.. is it fair to describe the current UI (https://imgur.com/45Xd0MX) here as this?

  • the most responsible function call for forced reflow costs
  • the 3 top distinct forced reflow callstacks from aggregated data. (maximum 3 call frames)
Yanling Wang

Yes, that's correct. We'll show the most responsible function call for forced reflow costs and its related forced reflow callstacks (maximum 3 call frames including the recalcTraceCallFrame).

Jack Franklin

I think there is a solid amount of room for iteration on the UI here; we have tried with the other insights to keep them brief and not pack them with information. Looking at the mock-up that Paul linked to above, it's really not clear to me what I do with that information as a user and what the next steps are. What do you want people to do with this information?

Could we instead consider highlighting particular calls, or using the overlays to draw the user's attention to it, and keep the insight much more concise?

Yanling Wang

Thanks for your feedback. I've added an overlay for forced reflow. The default overlay now displays the corresponding top time-consuming function calls. Additionally, I've updated the UI to only include bottom-up call frames. When you hover or click on it, the overlay shows the related events. Here's the current UI: https://imgur.com/a/qwBByxH.

Jack Franklin

Thanks for updating it! This looks better to me but I would like to see what Paul thinks. I will remove my -1 though as I am OOO soon and I don't want to block. Appreciate you taking the feedback onboard 😊

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Paul Irish
  • Yanling Wang
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 22
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Fri, 06 Dec 2024 15:12:59 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Dec 9, 2024, 7:05:13 PM12/9/24
to Jack Franklin, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark and Paul Irish

Yanling Wang added 1 comment

Patchset-level comments
File-level comment, Patchset 22 (Latest):
Yanling Wang . resolved

Hi Andres, Connor, and Paul,
I've updated the UX for forced reflow and addressed all the comments. Could you please take a look when you get a chance?
Thank you!

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Paul Irish
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 22
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Tue, 10 Dec 2024 00:05:09 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Dec 17, 2024, 1:07:54 PM12/17/24
to Robert Paveza, Jack Franklin, Andres Olivares, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Connor Clark and Paul Irish

Yanling Wang added 1 comment

Yanling Wang . resolved

Hi Andres, Connor, and Paul,
I've updated the UX for forced reflow and addressed all the comments. Could you please take a look when you get a chance?
Thank you!

Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Connor Clark
  • Paul Irish
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 24
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Tue, 17 Dec 2024 18:07:51 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
unsatisfied_requirement
open
diffy

Andres Olivares (Gerrit)

unread,
Dec 17, 2024, 1:09:21 PM12/17/24
to Yanling Wang, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, Paul Irish, Connor Clark, devtools-rev...@chromium.org
Attention needed from Connor Clark, Paul Irish and Yanling Wang

Andres Olivares voted and added 1 comment

Votes added by Andres Olivares

Code-Review+1

1 comment

Patchset-level comments
Andres Olivares . resolved

Sorry for the delay. This lgtm from the technical perspective. Paul do you have any remaining thoughts?

Open in Gerrit

Related details

Attention is currently required from:
  • Connor Clark
  • Paul Irish
  • Yanling Wang
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 24
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Connor Clark <cja...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Attention: Connor Clark <cja...@chromium.org>
Gerrit-Comment-Date: Tue, 17 Dec 2024 18:09:14 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Jan 7, 2025, 7:00:28 PMJan 7
to Andres Olivares, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, Paul Irish, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Jack Franklin and Paul Irish

Yanling Wang voted and added 1 comment

Votes added by Yanling Wang

Commit-Queue+1

1 comment

Patchset-level comments
File-level comment, Patchset 26 (Latest):
Yanling Wang . resolved

Hi Andres, Jack and Paul,
I've rebased the branch and made the necessary updates. Could you please review it when you have a moment?
Thank you!

Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Jack Franklin
  • Paul Irish
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 26
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Comment-Date: Wed, 08 Jan 2025 00:00:17 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Jan 15, 2025, 4:55:21 PMJan 15
to Andres Olivares, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, Paul Irish, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Jack Franklin and Paul Irish

Yanling Wang added 1 comment

Gerrit-Comment-Date: Wed, 15 Jan 2025 21:55:18 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
unsatisfied_requirement
open
diffy

Paul Irish (Gerrit)

unread,
Jan 23, 2025, 6:14:39 PMJan 23
to Yanling Wang, Andres Olivares, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Jack Franklin and Yanling Wang

Paul Irish voted and added 6 comments

Votes added by Paul Irish

Code-Review+1

6 comments

Patchset-level comments
File-level comment, Patchset 26:
Paul Irish . resolved

some wording tweaks. otherwise the previous updates to the stacks are nice.
thank you and sorry for the delay.

File front_end/models/trace/insights/ForcedReflow.ts
Line 27, Patchset 26: title: 'Forced Reflow',
Paul Irish . unresolved
```suggestion
title: 'Forced reflow',
```
Line 32, Patchset 26: 'Learn more about [Forced Reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts).',
Paul Irish . unresolved
```suggestion
'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',
```
File front_end/panels/timeline/components/insights/ForcedReflow.ts
Line 25, Patchset 26: relatedStackTrace: 'Related stack trace',
Paul Irish . unresolved
```suggestion
relatedStackTrace: 'Stack trace',
```
Line 29, Patchset 26: topTimeConsumingFunctionCall: 'Top time-consuming function call',
Paul Irish . unresolved
```suggestion
topTimeConsumingFunctionCall: 'Top function call',
```
Line 33, Patchset 26: totalReflowTime: 'Total Reflow Time',
Paul Irish . unresolved
```suggestion
totalReflowTime: 'Total reflow time',
```
Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Jack Franklin
  • Yanling Wang
Submit Requirements:
  • requirement is not satisfiedCode-Review
  • requirement is not satisfiedNo-Unresolved-Comments
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 28
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Comment-Date: Thu, 23 Jan 2025 23:14:30 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Jan 23, 2025, 8:23:00 PMJan 23
to Paul Irish, Andres Olivares, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Jack Franklin and Paul Irish

Yanling Wang added 8 comments

Patchset-level comments
File-level comment, Patchset 29 (Latest):
Yanling Wang . resolved

Thanks for reviewing it! I've updated the strings as suggested.

File front_end/models/trace/insights/ForcedReflow.ts
Line 27, Patchset 26: title: 'Forced Reflow',
Paul Irish . resolved
```suggestion
title: 'Forced reflow',
```
Yanling Wang

Acknowledged

Paul Irish . resolved
```suggestion
'Many APIs, typically reading layout geometry, force the rendering engine to pause script execution in order to calculate the style and layout. Learn more about [forced reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and its mitigations.',
```
Yanling Wang

Acknowledged

File front_end/panels/timeline/components/insights/ForcedReflow.ts
Line 25, Patchset 26: relatedStackTrace: 'Related stack trace',
Paul Irish . resolved
```suggestion
relatedStackTrace: 'Stack trace',
```
Yanling Wang

Acknowledged

Line 29, Patchset 26: topTimeConsumingFunctionCall: 'Top time-consuming function call',
Paul Irish . resolved
```suggestion
topTimeConsumingFunctionCall: 'Top function call',
```
Yanling Wang

Acknowledged

Line 33, Patchset 26: totalReflowTime: 'Total Reflow Time',
Paul Irish . resolved
```suggestion
totalReflowTime: 'Total reflow time',
```
Yanling Wang

Acknowledged

Line 79, Patchset 1: #renderForcedReflow(): LitHtml.LitTemplate {
Paul Irish . resolved

Just so we're aligned on the goal here.. is it fair to describe the current UI (https://imgur.com/45Xd0MX) here as this?

  • the most responsible function call for forced reflow costs
  • the 3 top distinct forced reflow callstacks from aggregated data. (maximum 3 call frames)
Yanling Wang

Yes, that's correct. We'll show the most responsible function call for forced reflow costs and its related forced reflow callstacks (maximum 3 call frames including the recalcTraceCallFrame).

Jack Franklin

I think there is a solid amount of room for iteration on the UI here; we have tried with the other insights to keep them brief and not pack them with information. Looking at the mock-up that Paul linked to above, it's really not clear to me what I do with that information as a user and what the next steps are. What do you want people to do with this information?

Could we instead consider highlighting particular calls, or using the overlays to draw the user's attention to it, and keep the insight much more concise?

Yanling Wang

Thanks for your feedback. I've added an overlay for forced reflow. The default overlay now displays the corresponding top time-consuming function calls. Additionally, I've updated the UI to only include bottom-up call frames. When you hover or click on it, the overlay shows the related events. Here's the current UI: https://imgur.com/a/qwBByxH.

Jack Franklin

Thanks for updating it! This looks better to me but I would like to see what Paul thinks. I will remove my -1 though as I am OOO soon and I don't want to block. Appreciate you taking the feedback onboard 😊

Yanling Wang

Done

Line 102, Patchset 1: bottomUpCallStackData?
bottomUpCallStackData.map(data =>{
Paul Irish . resolved

Alternatively we could just link to these 3 events (with the new EventRef) because their stacks are visible when the recalc is selected. (right?? or is it just the single frame?)

Then we'd still be showing the same info...
but more neatly.

Yanling Wang

The data here are couple of single frames so we can't use the EventRef.

Yanling Wang

Done

Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Jack Franklin
  • Paul Irish
Submit Requirements:
  • requirement is not satisfiedCode-Review
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 29
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Paul Irish <paul...@chromium.org>
Gerrit-Comment-Date: Fri, 24 Jan 2025 01:22:57 +0000
Gerrit-HasComments: Yes
Gerrit-Has-Labels: No
unsatisfied_requirement
open
diffy

Paul Irish (Gerrit)

unread,
Jan 24, 2025, 12:23:49 PMJan 24
to Yanling Wang, Andres Olivares, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Andres Olivares, Jack Franklin and Yanling Wang

Paul Irish voted Code-Review+1

Code-Review+1
Open in Gerrit

Related details

Attention is currently required from:
  • Andres Olivares
  • Jack Franklin
  • Yanling Wang
Submit Requirements:
  • requirement is not satisfiedCode-Review
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 29
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Andres Olivares <and...@chromium.org>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Comment-Date: Fri, 24 Jan 2025 17:23:44 +0000
Gerrit-HasComments: No
Gerrit-Has-Labels: Yes
unsatisfied_requirement
open
diffy

Andres Olivares (Gerrit)

unread,
Jan 24, 2025, 12:24:30 PMJan 24
to Yanling Wang, Paul Irish, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Jack Franklin and Yanling Wang

Andres Olivares voted Code-Review+1

Code-Review+1
Open in Gerrit

Related details

Attention is currently required from:
  • Jack Franklin
  • Yanling Wang
Submit Requirements:
  • requirement satisfiedCode-Review
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 29
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Attention: Yanling Wang <yanli...@microsoft.com>
Gerrit-Comment-Date: Fri, 24 Jan 2025 17:24:22 +0000
Gerrit-HasComments: No
Gerrit-Has-Labels: Yes
satisfied_requirement
open
diffy

Yanling Wang (Gerrit)

unread,
Jan 24, 2025, 12:27:50 PMJan 24
to Andres Olivares, Paul Irish, Robert Paveza, Jack Franklin, Devtools-frontend LUCI CQ, devtools-rev...@chromium.org
Attention needed from Jack Franklin

Yanling Wang voted Commit-Queue+2

Commit-Queue+2
Open in Gerrit

Related details

Attention is currently required from:
  • Jack Franklin
Submit Requirements:
  • requirement satisfiedCode-Review
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: comment
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 29
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
Gerrit-Attention: Jack Franklin <jacktf...@chromium.org>
Gerrit-Comment-Date: Fri, 24 Jan 2025 17:27:46 +0000
Gerrit-HasComments: No
Gerrit-Has-Labels: Yes
satisfied_requirement
open
diffy

Devtools-frontend LUCI CQ (Gerrit)

unread,
Jan 24, 2025, 12:29:43 PMJan 24
to Yanling Wang, Andres Olivares, Paul Irish, Robert Paveza, Jack Franklin, devtools-rev...@chromium.org

Devtools-frontend LUCI CQ submitted the change

Change information

Commit message:
[RPP] Add forced reflow insight

This insight displays the most time-consuming function calls resulting
in forced reflows along with related bottom-up stack trace data.

Screenshot: https://imgur.com/a/qwBByxH
Bug: 369766156
Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Commit-Queue: Yanling Wang <yanli...@microsoft.com>
Reviewed-by: Paul Irish <paul...@chromium.org>
Reviewed-by: Andres Olivares <and...@chromium.org>
Files:
  • M config/gni/devtools_grd_files.gni
  • M front_end/models/trace/Processor.test.ts
  • M front_end/models/trace/Processor.ts
  • M front_end/models/trace/insights/BUILD.gn
  • A front_end/models/trace/insights/ForcedReflow.test.ts
  • A front_end/models/trace/insights/ForcedReflow.ts
  • M front_end/models/trace/insights/Models.ts
  • M front_end/models/trace/insights/types.ts
  • M front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts
  • M front_end/panels/timeline/components/SidebarSingleInsightSet.ts
  • M front_end/panels/timeline/components/insights/BUILD.gn
  • A front_end/panels/timeline/components/insights/ForcedReflow.ts
  • M front_end/panels/timeline/components/insights/insights.ts
  • M front_end/panels/timeline/fixtures/traces/BUILD.gn
  • A front_end/panels/timeline/fixtures/traces/forced-reflow.json.gz
  • M front_end/ui/visual_logging/KnownContextValues.ts
Change size: L
Delta: 16 files changed, 399 insertions(+), 0 deletions(-)
Branch: refs/heads/main
Submit Requirements:
  • requirement satisfiedCode-Review: +1 by Paul Irish, +1 by Andres Olivares
Open in Gerrit
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. DiffyGerrit
Gerrit-MessageType: merged
Gerrit-Project: devtools/devtools-frontend
Gerrit-Branch: main
Gerrit-Change-Id: I7b0256a97519c242c45008ccfafcde2839cadc98
Gerrit-Change-Number: 5894042
Gerrit-PatchSet: 30
Gerrit-Owner: Yanling Wang <yanli...@microsoft.com>
Gerrit-Reviewer: Andres Olivares <and...@chromium.org>
Gerrit-Reviewer: Devtools-frontend LUCI CQ <devtools-fro...@luci-project-accounts.iam.gserviceaccount.com>
Gerrit-Reviewer: Jack Franklin <jacktf...@chromium.org>
Gerrit-Reviewer: Paul Irish <paul...@chromium.org>
Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>
Gerrit-CC: Robert Paveza <Rob.P...@microsoft.com>
open
diffy
satisfied_requirement
Reply all
Reply to author
Forward
0 new messages