chrome-devtools-frontend 1.0.1529904 → 1.0.1531367

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -257,10 +257,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
   async #generateSampleForRequest(request: Host.AidaClient.CompletionRequest, cursor: number): Promise<{
     suggestionText: string,
-    sampleId: number,
     fromCache: boolean,
     citations: Host.AidaClient.Citation[],
     rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
   }|null> {
     const {response, fromCache} = await this.#completeCodeCached(request);
     debugLog('At cursor position', cursor, {request, response, fromCache});
@@ -417,7 +417,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
-  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number): void {
+  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;
     const nanos = Math.floor(remainingMs * 1_000_000);
@@ -443,7 +443,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionDisplayed);
   }
 
-  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number): void {
+  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
       disable_user_content_logging: true,

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -296,28 +296,30 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
     const {sourceMap, script} = sourceMapAndScript;
     const {lineNumber, columnNumber} = script.relativeLocationToRawLocation(frame);
 
-    if (!sourceMap.hasInlinedFrames(lineNumber, columnNumber) && !sourceMap.isOutlinedFrame(lineNumber, columnNumber)) {
-      // No outlining or inlining: Get the original function name and map the call-site.
-      const mapping = sourceMap.findEntry(lineNumber, columnNumber);
-      if (!mapping?.sourceURL) {
+    if (!sourceMap.isOutlinedFrame(lineNumber, columnNumber)) {
+      const frames = sourceMap.translateCallSite(lineNumber, columnNumber);
+      if (!frames.length) {
         return false;
       }
 
-      const originalName = sourceMap.findOriginalFunctionName({line: lineNumber, column: columnNumber});
       rawFrames.shift();
+      const result: typeof translatedFrames[0] = [];
+      translatedFrames.push(result);
+
       const project = this.#sourceMapToProject.get(sourceMap);
-      const uiSourceCode = project?.uiSourceCodeForURL(mapping.sourceURL);
-      translatedFrames.push([{
-        line: mapping.sourceLineNumber,
-        column: mapping.sourceColumnNumber,
-        name: originalName ?? undefined,
-        uiSourceCode: uiSourceCode ?? undefined,
-        url: uiSourceCode ? undefined : mapping.sourceURL
-      }]);
+      for (const frame of frames) {
+        // Switch out url for UISourceCode where we have it.
+        const uiSourceCode = frame.url ? project?.uiSourceCodeForURL(frame.url) : undefined;
+        result.push({
+          ...frame,
+          url: uiSourceCode ? undefined : frame.url,
+          uiSourceCode: uiSourceCode ?? undefined,
+        });
+      }
+
       return true;
     }
 
-    // TODO(crbug.com/433162438): Expand inlined frames.
     // TODO(crbug.com/433162438): Consolidate outlined frames.
     return false;
   }

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -7,7 +7,7 @@ import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterA
 
 export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
-let formatterWorkerPoolInstance: FormatterWorkerPool;
+let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 
 export class FormatterWorkerPool {
   private taskQueue: Task[];
@@ -26,6 +26,22 @@ export class FormatterWorkerPool {
     return formatterWorkerPoolInstance;
   }
 
+  dispose(): void {
+    for (const task of this.taskQueue) {
+      console.error('rejecting task');
+      task.errorCallback(new Event('Worker terminated'));
+    }
+    for (const [worker, task] of this.workerTasks.entries()) {
+      task?.errorCallback(new Event('Worker terminated'));
+      worker.terminate(/* immediately=*/ true);
+    }
+  }
+
+  static removeInstance(): void {
+    formatterWorkerPoolInstance?.dispose();
+    formatterWorkerPoolInstance = undefined;
+  }
+
   private createWorker(): Common.Worker.WorkerWrapper {
     const worker = Common.Worker.WorkerWrapper.fromURL(
         new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url));

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -687,7 +687,7 @@ export const NativeFunctions = [
   {
     name: "toJSON",
     signatures: [["?key"]],
-    receivers: ["Date"]
+    receivers: ["Date","CSPViolationReportBody","ReportBody","CoopAccessViolationReportBody","DeprecationReportBody","DocumentPolicyViolationReportBody","IntegrityViolationReportBody","InterventionReportBody","PermissionsPolicyViolationReportBody","TestReportBody"]
   },
   {
     name: "parse",
@@ -6041,7 +6041,13 @@ export const NativeFunctions = [
   },
   {
     name: "waitUntil",
-    signatures: [["f"]]
+    signatures: [["f"]],
+    receivers: ["ExtendableEvent"]
+  },
+  {
+    name: "waitUntil",
+    signatures: [["promise"]],
+    receivers: ["ViewTransition"]
   },
   {
     name: "respondWith",

package/front_end/models/trace/ModelImpl.ts

@@ -81,8 +81,13 @@ export class Model extends EventTarget {
    * });
    * void this.traceModel.parse(events);
    **/
-  async parse(traceEvents: readonly Types.Events.Event[], config?: Types.Configuration.ParseOptions): Promise<void> {
-    const metadata = config?.metadata || {};
+  async parse(traceEvents: readonly Types.Events.Event[], config: Types.Configuration.ParseOptions = {}):
+      Promise<void> {
+    if (config.showAllEvents === undefined) {
+      config.showAllEvents = this.#config.showAllEvents;
+    }
+
+    const metadata = config.metadata || {};
     // During parsing, periodically update any listeners on each processors'
     // progress (if they have any updates).
     const onTraceUpdate = (event: Event): void => {
@@ -98,7 +103,7 @@ export class Model extends EventTarget {
     try {
       // Wait for all outstanding promises before finishing the async execution,
       // but perform all tasks in parallel.
-      await this.#processor.parse(traceEvents, config ?? {});
+      await this.#processor.parse(traceEvents, config);
       if (!this.#processor.data) {
         throw new Error('processor did not parse trace');
       }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -6,6 +6,10 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
+import type {FinalizeOptions} from './types.js';
+
+let config: {showAllEvents: boolean};
+
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId: FrameProcessData = new Map();
 
@@ -349,7 +353,9 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
-export async function finalize(): Promise<void> {
+export async function finalize(options?: FinalizeOptions): Promise<void> {
+  config = {showAllEvents: Boolean(options?.showAllEvents)};
+
   // We try to set the minimum time by finding the event with the smallest
   // timestamp. However, if we also got a timestamp from the
   // TracingStartedInBrowser event, we should always use that.
@@ -431,6 +437,7 @@ export async function finalize(): Promise<void> {
 }
 
 export interface MetaHandlerData {
+  config: {showAllEvents: boolean};
   traceIsGeneric: boolean;
   traceBounds: Types.Timing.TraceWindowMicro;
   browserProcessId: Types.Events.ProcessID;
@@ -494,6 +501,7 @@ export type FrameProcessData =
 
 export function data(): MetaHandlerData {
   return {
+    config,
     traceBounds,
     browserProcessId,
     browserThreadId,

package/front_end/models/trace/types/Configuration.ts

@@ -66,6 +66,7 @@ export function configToCacheKey(config: Configuration): string {
 }
 
 export interface ParseOptions {
+  showAllEvents?: boolean;
   /**
    * If the trace was just recorded on the current page, rather than an imported file.
    * TODO(paulirish): Maybe remove. This is currently unused by the Processor and Handlers

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1187,7 +1187,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       contextMenu.defaultSection().appendCheckboxItem(title, () => {
         void this.#openHistoricConversation(conversation);
-      }, {checked: (this.#conversation === conversation)});
+      }, {checked: (this.#conversation === conversation), jslogContext: 'freestyler.history-item'});
     }
 
     const historyEmpty = contextMenu.defaultSection().items.length === 0;

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -215,6 +215,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showOverrides),
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
+  condition: () => !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return Sources.SourcesNavigator.OverridesNavigatorView.instance();
@@ -228,7 +229,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showContentScripts),
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
-  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html',
+  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html' && !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return new Sources.SourcesNavigator.ContentScriptsNavigatorView();

package/front_end/panels/changes/CombinedDiffView.ts

@@ -10,7 +10,6 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import type * as Diff from '../../third_party/diff/diff.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as CopyToClipboard from '../../ui/components/copy_to_clipboard/copy_to_clipboard.js';
 import type * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -168,7 +167,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
       return;
     }
 
-    CopyToClipboard.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
+    UI.UIUtils.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
     this.#copiedFiles[fileUrl] = true;
     this.requestUpdate();
     setTimeout(() => {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -25,7 +25,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Link text in the disclaimer dialog, linking to a settings page containing more information
    */
-  learnMore: 'Learn more about AI summaries',
+  learnMore: 'Learn more',
+  /**
+   * @description Link text in the Console Insights Teaser info tooltip, linking to an explainer on how data is being used in this feature
+   */
+  learnMoreAboutAiSummaries: 'Learn more about AI summaries',
   /**
    * @description Description of the console insights feature
    */
@@ -57,6 +61,10 @@ const UIStringsNotTranslate = {
    * @description Header text during loading state while an AI summary is being generated
    */
   summarizing: 'Summarizing…',
+  /**
+   * @description Header text during longer lasting loading state while an AI summary is being generated
+   */
+  summarizingTakesABitLonger: 'Summarizing takes a bit longer…',
   /**
    * @description Label for an animation shown while an AI response is being generated
    */
@@ -69,6 +77,14 @@ const UIStringsNotTranslate = {
    * @description Label for a checkbox which turns off the teaser explanation feature
    */
   dontShow: 'Don’t show',
+  /**
+   * @description Aria-label for an infor-button triggering a tooltip with more info about data usage
+   */
+  learnDataUsage: 'Learn more about how your data is used',
+  /**
+   * @description Header text if there was an error during AI summary generation
+   */
+  summaryNotAvailable: 'Summary not available',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -76,6 +92,7 @@ const lockedString = i18n.i18n.lockedString;
 const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
 const DATA_USAGE_URL = 'https://developer.chrome.com/docs/devtools/ai-assistance/get-started#data-use';
 const EXPLAIN_TEASER_ACTION_ID = 'explain.console-message.teaser';
+const SLOW_GENERATION_CUTOFF_MILLISECONDS = 3500;
 
 interface ViewInput {
   onTellMeMoreClick: (event: Event) => void;
@@ -87,6 +104,8 @@ interface ViewInput {
   isInactive: boolean;
   dontShowChanged: (e: Event) => void;
   hasTellMeMoreButton: boolean;
+  isSlowGeneration: boolean;
+  isError: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -96,6 +115,51 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
   }
 
   const showPlaceholder = !Boolean(input.mainText);
+  const renderFooter = (): Lit.LitTemplate => {
+    // clang-format off
+    return html`
+      <div class="tooltip-footer">
+        ${input.hasTellMeMoreButton ? html`
+          <devtools-button
+            title=${lockedString(UIStringsNotTranslate.tellMeMore)}
+            .jslogContext=${'insights-teaser-tell-me-more'},
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            @click=${input.onTellMeMoreClick}
+          >
+            <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
+            ${lockedString(UIStringsNotTranslate.tellMeMore)}
+          </devtools-button>
+        ` : Lit.nothing}
+        ${showPlaceholder ? Lit.nothing : html`
+          <devtools-button
+            .iconName=${'info'}
+            .variant=${Buttons.Button.Variant.ICON}
+            aria-details=${'teaser-info-tooltip-' + input.uuid}
+            aria-label=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+          ></devtools-button>
+          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+            <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
+            <div class="learn-more">
+              <x-link
+                class="devtools-link"
+                title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
+                href=${DATA_USAGE_URL}
+                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
+              >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+            </div>
+          </devtools-tooltip>
+        `}
+        <devtools-checkbox
+          aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
+          @change=${input.dontShowChanged}
+          jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
+          ${lockedString(UIStringsNotTranslate.dontShow)}
+        </devtools-checkbox>
+      </div>
+    `;
+    // clang-format on
+  };
+
   // clang-format off
   render(html`
     <style>${consoleInsightTeaserStyles}</style>
@@ -107,62 +171,36 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       prefer-span-left
     >
       <div class="teaser-tooltip-container">
-        ${showPlaceholder ? html`
-          <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
-          <div
-            role="presentation"
-            aria-label=${lockedString(UIStringsNotTranslate.loading)}
-            class="loader"
-            style="clip-path: url(${'#clipPath-' + input.uuid});"
-          >
-            <svg width="100%" height="52">
-              <defs>
-              <clipPath id=${'clipPath-' + input.uuid}>
-                <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
-                <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
-                <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
-              </clipPath>
-            </defs>
-            </svg>
-          </div>
-        ` : html`
-          <h2 tabindex="-1">${input.headerText}</h2>
-          <div>${input.mainText}</div>
-          <div class="tooltip-footer">
-            ${input.hasTellMeMoreButton ? html`
-              <devtools-button
-                title=${lockedString(UIStringsNotTranslate.tellMeMore)}
-                .jslogContext=${'insights-teaser-tell-me-more'},
-                .variant=${Buttons.Button.Variant.PRIMARY}
-                @click=${input.onTellMeMoreClick}
-              >
-                <devtools-icon class="lightbulb-icon" name="lightbulb-spark"></devtools-icon>
-                ${lockedString(UIStringsNotTranslate.tellMeMore)}
-              </devtools-button>
-            ` : Lit.nothing}
-            <devtools-icon
-              name="info"
-              class="info-icon"
-              aria-details=${'teaser-info-tooltip-' + input.uuid}
-            ></devtools-icon>
-            <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
-              <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
-              <div class="learn-more">
-                <x-link
-                  class="devtools-link"
-                  title=${lockedString(UIStringsNotTranslate.learnMore)}
-                  href=${DATA_USAGE_URL}
-                  jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-                >${lockedString(UIStringsNotTranslate.learnMore)}</x-link>
-              </div>
-            </devtools-tooltip>
-            <devtools-checkbox
-              @change=${input.dontShowChanged}
-              jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
-              ${lockedString(UIStringsNotTranslate.dontShow)}
-            </devtools-checkbox>
-          </div>
-        `}
+        ${input.isError ? html`
+          <h2>${lockedString(UIStringsNotTranslate.summaryNotAvailable)}</h2>
+        ` :
+          showPlaceholder ? html`
+            <h2>${input.isSlowGeneration ?
+              lockedString(UIStringsNotTranslate.summarizingTakesABitLonger) :
+              lockedString(UIStringsNotTranslate.summarizing)
+            }</h2>
+            <div
+              role="presentation"
+              aria-label=${lockedString(UIStringsNotTranslate.loading)}
+              class="loader"
+              style="clip-path: url(${'#clipPath-' + input.uuid});"
+            >
+              <svg width="100%" height="52">
+                <defs>
+                <clipPath id=${'clipPath-' + input.uuid}>
+                  <rect x="0" y="0" width="100%" height="12" rx="8"></rect>
+                  <rect x="0" y="20" width="100%" height="12" rx="8"></rect>
+                  <rect x="0" y="40" width="100%" height="12" rx="8"></rect>
+                </clipPath>
+              </defs>
+              </svg>
+            </div>
+          ` : html`
+            <h2>${input.headerText}</h2>
+            <div>${input.mainText}</div>
+          `
+        }
+        ${input.isError || input.isSlowGeneration || !showPlaceholder ? renderFooter() : Lit.nothing}
       </div>
     </devtools-tooltip>
   `, target);
@@ -182,6 +220,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   #consoleViewMessage: ConsoleViewMessage;
   #isInactive = false;
   #abortController: null|AbortController = null;
+  #isSlow = false;
+  #timeoutId: ReturnType<typeof setTimeout>|null = null;
+  #isError = false;
 
   constructor(uuid: string, consoleViewMessage: ConsoleViewMessage, element?: HTMLElement, view?: View) {
     super(element);
@@ -275,6 +316,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       this.#abortController.abort();
     }
     this.#isGenerating = false;
+    if (this.#timeoutId) {
+      clearTimeout(this.#timeoutId);
+    }
   }
 
   setInactive(isInactive: boolean): void {
@@ -285,8 +329,14 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  #setSlow(): void {
+    this.#isSlow = true;
+    this.requestUpdate();
+  }
+
   async #generateTeaserText(): Promise<void> {
     this.#isGenerating = true;
+    this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     let teaserText = '';
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
@@ -296,12 +346,16 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       // Ignore `AbortError` errors, which are thrown on mouse leave.
       if (err.name !== 'AbortError') {
         console.error(err.name, err.message);
+        this.#isError = true;
       }
       this.#isGenerating = false;
+      clearTimeout(this.#timeoutId);
+      this.requestUpdate();
       return;
     }
 
-    // TODO(crbug.com/443618746): Add user-facing error message instead of staying in loading state
+    clearTimeout(this.#timeoutId);
+    this.#isGenerating = false;
     let responseObject = {
       header: null,
       explanation: null,
@@ -310,10 +364,15 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       responseObject = JSON.parse(teaserText);
     } catch (err) {
       console.error(err.name, err.message);
+      this.#isError = true;
+      this.requestUpdate();
+      return;
     }
     this.#headerText = responseObject.header || '';
     this.#mainText = responseObject.explanation || '';
-    this.#isGenerating = false;
+    if (!this.#headerText || !this.#mainText) {
+      this.#isError = true;
+    }
     this.requestUpdate();
   }
 
@@ -363,6 +422,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
               !Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').get(),
           dontShowChanged: this.#dontShowChanged.bind(this),
           hasTellMeMoreButton: this.#hasTellMeMoreButton(),
+          isSlowGeneration: this.#isSlow,
+          isError: this.#isError,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/console/ConsolePrompt.ts

@@ -396,7 +396,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           if (accepted) {
             this.dispatchEventToListeners(
                 Events.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED, {citations: this.aiCodeCompletionCitations});
-            if (suggestion?.rpcGlobalId && suggestion?.sampleId) {
+            if (suggestion?.rpcGlobalId) {
               this.aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
             }
           }

package/front_end/panels/console/ConsoleSidebar.ts

@@ -52,7 +52,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIS
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, nothing, Directives} = Lit;
 
-const enum GroupName {
+export const enum GroupName {
   CONSOLE_API = 'user message',
   ALL = 'message',
   ERROR = 'error',
@@ -112,7 +112,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
-                        ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+                        ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
                         role="treeitem"
                         ?selected=${urlGroup.filter === input.selectedFilter}
                         title=${urlGroup.url ?? ''}>
@@ -126,7 +126,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
-class ConsoleFilterGroup {
+export class ConsoleFilterGroup {
   readonly urlGroups = new Map<string|null, {filter: ConsoleFilter, url: string|null, count: number}>();
   messageCount = 0;
   readonly name: GroupName;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -380,7 +380,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   wasShown(): void {
     this.isVisibleInternal = true;
     if (this.elementInternal) {
-      this.#teaser?.show(this.elementInternal);
+      this.#teaser?.show(this.elementInternal, this.consoleRowWrapper);
     }
   }
 
@@ -1343,14 +1343,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.contentElementInternal;
   }
 
-  #onMouseEnter(_event: MouseEvent): void {
+  #startTeaserGeneration(): void {
     if (this.#teaser &&
         Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
       this.#teaser.maybeGenerateTeaser();
     }
   }
 
-  #onMouseLeave(): void {
+  #abortTeaserGeneration(): void {
     this.#teaser?.abortTeaserGeneration();
   }
 
@@ -1361,8 +1361,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal = document.createElement('div');
     this.elementInternal.tabIndex = -1;
     this.elementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener));
-    this.elementInternal.addEventListener('mouseenter', this.#onMouseEnter.bind(this));
-    this.elementInternal.addEventListener('mouseleave', this.#onMouseLeave.bind(this));
+    this.elementInternal.addEventListener('mouseenter', this.#startTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('focusin', this.#startTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('mouseleave', this.#abortTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('focusout', this.#abortTeaserGeneration.bind(this));
     this.updateMessageElement();
     this.elementInternal.classList.toggle('console-adjacent-user-command-result', this.#adjacentUserCommandResult);
     return this.elementInternal;

package/front_end/panels/console/consoleInsightTeaser.css

@@ -72,10 +72,6 @@
     display: flex;
     align-items: center;
 
-    .info-icon {
-      margin-left: var(--sys-size-4);
-    }
-
     devtools-checkbox {
       margin-left: auto;
     }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -41,7 +41,6 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as CopyToClipboard from '../../ui/components/copy_to_clipboard/copy_to_clipboard.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
@@ -736,7 +735,7 @@ export class ElementsTreeOutline extends
     }
     void node.getOuterHTML(includeShadowRoots).then(outerHTML => {
       if (outerHTML !== null) {
-        CopyToClipboard.copyTextToClipboard(outerHTML);
+        UI.UIUtils.copyTextToClipboard(outerHTML);
       }
     });
     this.setClipboardData({node, isCut});