chrome-devtools-frontend 1.0.1526630 → 1.0.1529186

package/front_end/panels/console/consoleInsightTeaser.css

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .teaser-tooltip-container {
+    width: var(--sys-size-31);
+    padding: var(--sys-size-1) var(--sys-size-3) var(--sys-size-3);
+    margin-top: var(--sys-size-2);
+  }
+
+  @keyframes gradient {
+    0% { background-position: 100% 0; }
+    100% { background-position: -100% 0; }
+  }
+
+  .loader {
+    background-size: 400% 100%;
+    animation: gradient 4s infinite linear;
+    margin-top: var(--sys-size-5);
+  }
+
+  @media (prefers-color-scheme: light) {
+    .loader {
+      background-image: linear-gradient(
+        70deg,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 0%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 30%,
+        color-mix(in srgb, var(--sys-color-on-surface) 15%, transparent) 50%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 70%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 100%
+      );
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .loader {
+      background-image: linear-gradient(
+        70deg,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 0%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 30%,
+        color-mix(in srgb, var(--sys-color-on-surface) 30%, transparent) 50%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 70%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 100%
+      );
+    }
+  }
+
+  h2 {
+    font: var(--sys-typescale-body4-bold);
+    margin: 0 0 var(--sys-size-3);
+  }
+
+  .lightbulb-icon {
+    color: var(--sys-color-on-primary);
+    height: var(--sys-size-7);
+    margin-left: calc(-1 * var(--sys-size-4));
+  }
+
+  .learn-more {
+    padding-top: 7px;
+  }
+
+  .info-tooltip-text {
+    max-width: var(--sys-size-26);
+  }
+
+  .tooltip-footer {
+    padding: var(--sys-size-5) 0 0;
+    display: flex;
+    align-items: center;
+
+    .info-icon {
+      margin-left: var(--sys-size-4);
+    }
+
+    devtools-checkbox {
+      margin-left: auto;
+    }
+  }
+}

package/front_end/panels/coverage/CoverageListView.ts

@@ -177,32 +177,46 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class CoverageListView extends UI.Widget.VBox {
-  private highlightRegExp: RegExp|null;
+  #highlightRegExp: RegExp|null;
   #coverageInfo: CoverageListItem[] = [];
   #selectedUrl: Platform.DevToolsPath.UrlString|null = null;
   #maxSize = 0;
   #view: View;
 
-  constructor(view = DEFAULT_VIEW) {
-    super({useShadowDom: true, delegatesFocus: true});
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, delegatesFocus: true});
     this.#view = view;
-    this.highlightRegExp = null;
+    this.#highlightRegExp = null;
   }
 
-  update(coverageInfo: CoverageListItem[], highlightRegExp: RegExp|null): void {
-    this.highlightRegExp = highlightRegExp;
-    this.#maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
+  set highlightRegExp(highlightRegExp: RegExp|null) {
+    this.#highlightRegExp = highlightRegExp;
+    this.requestUpdate();
+  }
+
+  get highlightRegExp(): RegExp|null {
+    return this.#highlightRegExp;
+  }
+
+  set coverageInfo(coverageInfo: CoverageListItem[]) {
     this.#coverageInfo = coverageInfo;
+    this.#maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
     this.requestUpdate();
   }
 
+  get coverageInfo(): CoverageListItem[] {
+    return this.#coverageInfo;
+  }
+
   override performUpdate(): void {
     const input: ViewInput = {
       items: this.#coverageInfo,
       selectedUrl: this.#selectedUrl,
       maxSize: this.#maxSize,
-      onOpen: this.selectByUrl.bind(this),
-      highlightRegExp: this.highlightRegExp,
+      onOpen: (url: Platform.DevToolsPath.UrlString) => {
+        this.selectedUrl = url;
+      },
+      highlightRegExp: this.#highlightRegExp,
     };
     this.#view(input, {}, this.contentElement);
   }
@@ -213,7 +227,7 @@ export class CoverageListView extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  selectByUrl(url: Platform.DevToolsPath.UrlString): void {
+  set selectedUrl(url: Platform.DevToolsPath.UrlString|null) {
     const info = this.#coverageInfo.find(info => info.url === url);
     if (!info) {
       return;
@@ -222,13 +236,17 @@ export class CoverageListView extends UI.Widget.VBox {
       this.#selectedUrl = url as Platform.DevToolsPath.UrlString;
       this.requestUpdate();
     }
-    const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
+    const sourceCode = url ? Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url) : null;
     if (!sourceCode) {
       return;
     }
 
     void Common.Revealer.reveal(sourceCode);
   }
+
+  get selectedUrl(): Platform.DevToolsPath.UrlString|null {
+    return this.#selectedUrl;
+  }
 }
 
 let percentageFormatter: Intl.NumberFormat|null = null;