AI: remove bottom border on CWV widget

Fixed: 496944754
Change-Id: I449e8b866cba5ce7442ae1b5e3c14f55761a71ed
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7706058
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kateryna Prokopenko <kprokopenko@chromium.org>
Reviewed-by: Kateryna Prokopenko <kprokopenko@chromium.org>

Author: jackfranklin

front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -771,10 +771,9 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   };
 }
 
-async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
+async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
   // clang-format off
-  const renderedWidget = html`<devtools-widget
-      class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data})}>
+  const renderedWidget = html`<devtools-widget class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data, skipBottomBorder: true})}>
   </devtools-widget>`;
   // clang-format on
 
@@ -1011,7 +1010,7 @@ async function renderWidgets(
         response = await makeComputedStyleWidget(widgetData);
         break;
       case 'CORE_VITALS':
-        response = await makeCoreVitalsWidget(widgetData);
+        response = await makeCoreWebVitalsWidget(widgetData);
         break;
       case 'STYLE_PROPERTIES':
         response = await makeStylePropertiesWidget(widgetData);

front_end/panels/timeline/components/CWVMetrics.ts

@@ -121,6 +121,7 @@ interface MetricsViewInput {
   didDismissFieldMismatchNotice: boolean;
   onDismisFieldMismatchNotice: () => void;
   onClickMetric: (traceEvent: Trace.Types.Events.Event) => void;
+  skipBottomBorder: boolean;
 }
 
 type MetricsView = (input: MetricsViewInput, output: undefined, target: HTMLElement) => void;
@@ -210,7 +211,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
       <span>${clsEl}</span>
       <span class="row-label">Local</span>
     </div>
-    <span class="row-border"></span>
+    ${!field && input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
   `;
 
   let fieldMetricsTemplateResult;
@@ -234,7 +235,7 @@ const CWV_METRICS_VIEW: MetricsView = (input, _output, target) => {
         <span>${clsEl}</span>
         <span class="row-label">${i18nString(UIStrings.fieldScoreLabel, {PH1: scope})}</span>
       </div>
-      <span class="row-border"></span>
+      ${input.skipBottomBorder ? Lit.nothing : html`<span class="row-border"></span>`}
     `;
     // clang-format on
   }
@@ -293,6 +294,8 @@ export class CWVMetrics extends UI.Widget.Widget {
 
   #didDismissFieldMismatchNotice = false;
 
+  #skipBottomBorder = false;
+
   constructor(element?: HTMLElement, view: MetricsView = CWV_METRICS_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
@@ -303,6 +306,18 @@ export class CWVMetrics extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  get skipBottomBorder(): boolean {
+    return this.#skipBottomBorder;
+  }
+
+  set skipBottomBorder(x: boolean) {
+    if (x === this.#skipBottomBorder) {
+      return;
+    }
+    this.#skipBottomBorder = x;
+    this.requestUpdate();
+  }
+
   #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
     this.element.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
   }
@@ -333,6 +348,7 @@ export class CWVMetrics extends UI.Widget.Widget {
       didDismissFieldMismatchNotice: this.#didDismissFieldMismatchNotice,
       onDismisFieldMismatchNotice: this.#onDismisFieldMismatchNotice.bind(this),
       onClickMetric: this.#onClickMetric.bind(this),
+      skipBottomBorder: this.#skipBottomBorder,
     };
     this.#view(input, undefined, this.contentElement);
   }