RPP: toggle insights only when clicking the "top" area
This CL updates how we click on the insights to toggle them; when an
insight is expanded any clicks on the actual content should not cause
the insight to close.
Bug: 351758501
Change-Id: Ia1389c38af87bb0580e3aceda46833a2d2993d14
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5752823
Reviewed-by: Andres Olivares <andoli@chromium.org>
Commit-Queue: Andres Olivares <andoli@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/front_end/panels/timeline/components/insights/LCPDiscovery.ts b/front_end/panels/timeline/components/insights/LCPDiscovery.ts
index cfb54d6..c14462e 100644
--- a/front_end/panels/timeline/components/insights/LCPDiscovery.ts
+++ b/front_end/panels/timeline/components/insights/LCPDiscovery.ts
@@ -133,40 +133,42 @@
}
#renderDiscovery(imageData: ImageData): LitHtml.TemplateResult {
+ // clang-format off
return LitHtml.html`
- <div class="insights" @click=${() => this.#sidebarClicked()}>
- <${SidebarInsight.SidebarInsight.litTagName} .data=${{
- title: this.#insightTitle,
- expanded: this.#isActive(),
- } as SidebarInsight.InsightDetails}>
- <div slot="insight-description" class="insight-description">
- The LCP image should be requested as early as possible.
- <div class="insight-results">
- <div class="insight-entry">
- ${this.#adviceIcon(imageData.shouldIncreasePriorityHint)}
- fetchpriority=high applied
- </div>
- <div class="insight-entry">
- ${this.#adviceIcon(imageData.shouldPreloadImage)}
- Request is discoverable in initial document
- </div>
- <div class="insight-entry">
- ${this.#adviceIcon(imageData.shouldRemoveLazyLoading)}
- lazyload not applied
- </div>
- </div>
+ <div class="insights">
+ <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+ title: this.#insightTitle,
+ expanded: this.#isActive(),
+ } as SidebarInsight.InsightDetails}
+ @insighttoggleclick=${this.#sidebarClicked}
+ >
+ <div slot="insight-description" class="insight-description">
+ The LCP image should be requested as early as possible.
+ <div class="insight-results">
+ <div class="insight-entry">
+ ${this.#adviceIcon(imageData.shouldIncreasePriorityHint)}
+ fetchpriority=high applied
+ </div>
+ <div class="insight-entry">
+ ${this.#adviceIcon(imageData.shouldPreloadImage)}
+ Request is discoverable in initial document
+ </div>
+ <div class="insight-entry">
+ ${this.#adviceIcon(imageData.shouldRemoveLazyLoading)}
+ lazyload not applied
+ </div>
</div>
- <div slot="insight-content" class="insight-content">
- <img class="element-img" data-src=${imageData.resource.args.data.url} src=${
- imageData.resource.args.data.url}>
- <div class="element-img-details">
- ${Common.ParsedURL.ParsedURL.extractName(imageData.resource.args.data.url ?? '')}
- <div class="element-img-details-size">${
- Platform.NumberUtilities.bytesToString(imageData.resource.args.data.decodedBodyLength ?? 0)}</div>
- </div>
+ </div>
+ <div slot="insight-content" class="insight-content">
+ <img class="element-img" data-src=${imageData.resource.args.data.url} src=${imageData.resource.args.data.url}>
+ <div class="element-img-details">
+ ${Common.ParsedURL.ParsedURL.extractName(imageData.resource.args.data.url ?? '')}
+ <div class="element-img-details-size">${Platform.NumberUtilities.bytesToString(imageData.resource.args.data.decodedBodyLength ?? 0)}</div>
</div>
- </${SidebarInsight.SidebarInsight}>
- </div>`;
+ </div>
+ </${SidebarInsight.SidebarInsight}>
+ </div>`;
+ // clang-format on
}
connectedCallback(): void {
diff --git a/front_end/panels/timeline/components/insights/LCPPhases.ts b/front_end/panels/timeline/components/insights/LCPPhases.ts
index f254607..2050632 100644
--- a/front_end/panels/timeline/components/insights/LCPPhases.ts
+++ b/front_end/panels/timeline/components/insights/LCPPhases.ts
@@ -216,11 +216,13 @@
#renderLCPPhases(phaseData: PhaseData[]): LitHtml.LitTemplate {
// clang-format off
return LitHtml.html`
- <div class="insights" @click=${this.#sidebarClicked}>
+ <div class="insights">
<${SidebarInsight.SidebarInsight.litTagName} .data=${{
title: this.#insightTitle,
expanded: this.#isActive(),
- } as SidebarInsight.InsightDetails}>
+ } as SidebarInsight.InsightDetails}
+ @insighttoggleclick=${this.#sidebarClicked}
+ >
<div slot="insight-description" class="insight-description">
Each
<x-link class="link" href="https://web.dev/articles/optimize-lcp#lcp-breakdown">phase has specific recommendations to improve.</x-link>
diff --git a/front_end/panels/timeline/components/insights/SidebarInsight.ts b/front_end/panels/timeline/components/insights/SidebarInsight.ts
index 72b2f03..c770605 100644
--- a/front_end/panels/timeline/components/insights/SidebarInsight.ts
+++ b/front_end/panels/timeline/components/insights/SidebarInsight.ts
@@ -55,19 +55,29 @@
void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
}
+ #dispatchInsightToggle(): void {
+ this.dispatchEvent(new CustomEvent('insighttoggleclick'));
+ }
+
#render(): void {
let output: LitHtml.TemplateResult;
if (!this.#expanded) {
output = LitHtml.html`
<div class="insight closed">
+ <header @click=${this.#dispatchInsightToggle}>
<h3 class="insight-title">${this.#insightTitle}</h3>
+ </header>
</div>`;
} else {
output = LitHtml.html`
<div class="insight">
+ <header @click=${this.#dispatchInsightToggle}>
<h3 class="insight-title">${this.#insightTitle}</h3>
+ </header>
+ <div class="insight-body">
<slot name="insight-description"></slot>
<slot name="insight-content"></slot>
+ </div>
</div>`;
}
LitHtml.render(output, this.#shadow, {host: this});
diff --git a/front_end/panels/timeline/components/insights/sidebarInsight.css b/front_end/panels/timeline/components/insights/sidebarInsight.css
index f3a258d..e3016c8 100644
--- a/front_end/panels/timeline/components/insights/sidebarInsight.css
+++ b/front_end/panels/timeline/components/insights/sidebarInsight.css
@@ -9,20 +9,31 @@
width: auto;
height: auto;
margin: 10px 0;
- padding: 10px;
- border-radius: 3px;
+ border-radius: var(--sys-shape-corner-extra-small);
overflow: hidden;
- border: 1px solid var(--sys-color-outline);
+ border: 1px solid var(--sys-color-divider);
background-color: var(--sys-color-base);
&.closed {
- background-color: var(--sys-color-neutral-container);
+ background-color: var(--sys-color-surface3);
border: none;
}
&.closed:hover {
background-color: var(--sys-color-state-disabled-container);
}
+
+ header {
+ padding: 10px;
+
+ h3 {
+ font: var(--sys-typescale-body4-medium);
+ }
+ }
+}
+
+.insight-body {
+ padding: 0 10px;
}
.insight-title {
