[RPP] Create LCP phases overlay [devtools/devtools-frontend : main]
Adriana Ixba (Gerrit)
Adriana Ixba voted Commit-Queue+1![]( "Open in Gerrit")
| Commit-Queue | +1 |
Related details
- Alina Varkki
- Paul Irish
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Adriana Ixba (Gerrit)
Adriana Ixba voted Commit-Queue+1![]( "Open in Gerrit")
| Commit-Queue | +1 |
Related details
- Alina Varkki
- Paul Irish
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Alina Varkki (Gerrit)
Alina Varkki added 8 comments![]( "Open in Gerrit")
const TIMESPAN_BREAKDOWN_OVERLAY_STAGGER_PX = 5;We could move this to `TimespanBreakdownOverlay` as a static variable and import it here to try keep the object rendering logic there
const leftEdgePixel = this.#xPixelForMicroSeconds('main', overlay.sections[0].bounds.min);Let's check if `overlay.sections[0]` exists
sidebarInsightEnabled(): void {nit: `toggleSidebarInsights`
this.#timespanBreakdownOverlay = null;I think we can remove this line to not recalculate `this.#timespanBreakdownOverlay` since it won't ever change. We can just add the same object to overlays again when the insights are turned on if we calculated it before.
{bounds: renderDelay, label: 'Element render delay'},We probably need to add those labels to `const UIStrings = {}`
export class SidebarInsightEnabled extends Event {Maybe let's rename it to `ToggleSidebarInsights` since it's turning them on/off?
<div class="insights" @click=${this.#toggleLCPPhaseClick}>${this.#renderLCPPhases()}</div>Is that the final solution to make it show up? This component doesn't look very clickable when you look at it 😅
<div class="insights">${this.#renderLCPPhases()}</div>We can add `@click=${this.#toggleLCPPhaseClick}` here too
Related details
- Adriana Ixba
- Paul Irish
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Adriana Ixba (Gerrit)
Adriana Ixba voted and added 8 comments![]( "Open in Gerrit")
Votes added by Adriana Ixba
| Commit-Queue | +1 |
8 comments
We could move this to `TimespanBreakdownOverlay` as a static variable and import it here to try keep the object rendering logic there
Done
const leftEdgePixel = this.#xPixelForMicroSeconds('main', overlay.sections[0].bounds.min);Let's check if `overlay.sections[0]` exists
Done
sidebarInsightEnabled(): void {Adriana Ixbanit: `toggleSidebarInsights`
Done
I think we can remove this line to not recalculate `this.#timespanBreakdownOverlay` since it won't ever change. We can just add the same object to overlays again when the insights are turned on if we calculated it before.
Done
We probably need to add those labels to `const UIStrings = {}`
Done
Maybe let's rename it to `ToggleSidebarInsights` since it's turning them on/off?
Done
<div class="insights" @click=${this.#toggleLCPPhaseClick}>${this.#renderLCPPhases()}</div>Is that the final solution to make it show up? This component doesn't look very clickable when you look at it 😅
Ah yeah! The sidebar insights that are not clicked look different than those that are (they are unexpanded and gray). That bit is not on this CL but will be added in a follow up!
<div class="insights">${this.#renderLCPPhases()}</div>We can add `@click=${this.#toggleLCPPhaseClick}` here too
- Alina Varkki
- Paul Irish
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |
Adriana Ixba (Gerrit)
Adriana Ixba voted and added 1 comment![]( "Open in Gerrit")
Votes added by Adriana Ixba
| Commit-Queue | +1 |
1 comment
<div class="insights" @click=${this.#toggleLCPPhaseClick}>${this.#renderLCPPhases()}</div>Adriana IxbaIs that the final solution to make it show up? This component doesn't look very clickable when you look at it 😅
Ah yeah! The sidebar insights that are not clicked look different than those that are (they are unexpanded and gray). That bit is not on this CL but will be added in a follow up!
Related details
- Alina Varkki
- Paul Irish
Code-Review
| Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings. |