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!
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | -1 |
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!
#renderForcedReflow(): LitHtml.LitTemplate {
Yanling WangJust 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)
Jack FranklinYes, 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).
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?
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | +0 |
this LGTM from the technical perspective, however I remove my vote given the blocking request to reconsider the UX
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!
#renderForcedReflow(): LitHtml.LitTemplate {
Yanling WangJust 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)
Jack FranklinYes, 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).
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?
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.
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
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!
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | +0 |
#renderForcedReflow(): LitHtml.LitTemplate {
Yanling WangJust 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)
Jack FranklinYes, 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).
Yanling WangI 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?
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.
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 😊
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
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!
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
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!
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | +1 |
Sorry for the delay. This lgtm from the technical perspective. Paul do you have any remaining thoughts?
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Commit-Queue | +1 |
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!
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | +1 |
some wording tweaks. otherwise the previous updates to the stacks are nice.
thank you and sorry for the delay.
title: 'Forced Reflow',
```suggestion
title: 'Forced reflow',
```
'Learn more about [Forced Reflow](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts).',
```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.',
```
relatedStackTrace: 'Related stack trace',
```suggestion
relatedStackTrace: 'Stack trace',
```
topTimeConsumingFunctionCall: 'Top time-consuming function call',
```suggestion
topTimeConsumingFunctionCall: 'Top function call',
```
totalReflowTime: 'Total Reflow Time',
```suggestion
totalReflowTime: 'Total reflow time',
```
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Thanks for reviewing it! I've updated the strings as suggested.
title: 'Forced Reflow',
```suggestion
title: 'Forced reflow',
```
Acknowledged
```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.',
```
Acknowledged
relatedStackTrace: 'Related stack trace',
```suggestion
relatedStackTrace: 'Stack trace',
```
Acknowledged
topTimeConsumingFunctionCall: 'Top time-consuming function call',
```suggestion
topTimeConsumingFunctionCall: 'Top function call',
```
Acknowledged
totalReflowTime: 'Total Reflow Time',
```suggestion
totalReflowTime: 'Total reflow time',
```
Acknowledged
#renderForcedReflow(): LitHtml.LitTemplate {
Yanling WangJust 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)
Jack FranklinYes, 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).
Yanling WangI 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?
Jack FranklinThanks 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.
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 😊
Done
bottomUpCallStackData?
bottomUpCallStackData.map(data =>{
Yanling WangAlternatively 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 WangThe data here are couple of single frames so we can't use the EventRef.
Done
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Code-Review | +1 |
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Commit-Queue | +2 |
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
[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
Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |