chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/models/trace/insights/LCPPhases.ts

@@ -7,7 +7,13 @@ import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type RequiredData,
+} from './types.js';
 
 const UIStrings = {
   /**
@@ -110,8 +116,24 @@ function breakdownPhases(
   };
 }
 
-function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description'>): LCPPhasesInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<LCPPhasesInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    LCPPhasesInsightModel {
+  const relatedEvents = [];
+  if (partialModel.lcpEvent) {
+    relatedEvents.push(partialModel.lcpEvent);
+  }
+  if (partialModel.lcpRequest) {
+    relatedEvents.push(partialModel.lcpRequest);
+  }
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    // TODO: should move the component's "getPhaseData" to model.
+    shouldShow: Boolean(partialModel.phases) && (partialModel.lcpMs ?? 0) > 0,
+    ...partialModel,
+    relatedEvents,
+  };
 }
 
 export function generateInsight(

package/front_end/models/trace/insights/Models.ts

@@ -5,6 +5,7 @@
 export * as CLSCulprits from './CLSCulprits.js';
 export * as DocumentLatency from './DocumentLatency.js';
 export * as FontDisplay from './FontDisplay.js';
+export * as ImageDelivery from './ImageDelivery.js';
 export * as InteractionToNextPaint from './InteractionToNextPaint.js';
 export * as LCPDiscovery from './LCPDiscovery.js';
 export * as LCPPhases from './LCPPhases.js';

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -10,6 +10,7 @@ import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
 
 import {
+  InsightCategory,
   type InsightModel,
   type InsightSetContext,
   type InsightSetContextWithNavigation,
@@ -150,8 +151,15 @@ function computeSavings(
   return {metricSavings, requestIdToWastedMs};
 }
 
-function finalize(partialModel: Omit<RenderBlockingInsightModel, 'title'|'description'>): RenderBlockingInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<RenderBlockingInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    RenderBlockingInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.LCP,
+    shouldShow: partialModel.renderBlockingRequests.length > 0,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

package/front_end/models/trace/insights/SlowCSSSelector.ts

@@ -7,7 +7,7 @@ import * as Helpers from '../helpers/helpers.js';
 import {type SelectorTiming, SelectorTimingsKey} from '../types/TraceEvents.js';
 import * as Types from '../types/types.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /**
@@ -68,8 +68,15 @@ function aggregateSelectorStats(
   return [...selectorMap.values()];
 }
 
-function finalize(partialModel: Omit<SlowCSSSelectorInsightModel, 'title'|'description'>): SlowCSSSelectorInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<SlowCSSSelectorInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    SlowCSSSelectorInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    shouldShow: partialModel.topElapsedMs.length !== 0 && partialModel.topMatchAttempts.length !== 0,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

package/front_end/models/trace/insights/ThirdParties.ts

@@ -9,7 +9,7 @@ import type * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /** Title of an insight that provides details about the code on a web page that the user doesn't control (referred to as "third-party code"). */
@@ -52,8 +52,16 @@ function getRelatedEvents(
   return events;
 }
 
-function finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'>): ThirdPartiesInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<ThirdPartiesInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    ThirdPartiesInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.ALL,
+    shouldShow:
+        Boolean([...partialModel.summaryByEntity.entries()].find(kv => kv[0] !== partialModel.firstPartyEntity)),
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

package/front_end/models/trace/insights/Viewport.ts

@@ -6,7 +6,13 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Helpers from '../helpers/helpers.js';
 import type * as Types from '../types/types.js';
 
-import {type InsightModel, type InsightSetContext, InsightWarning, type RequiredData} from './types.js';
+import {
+  InsightCategory,
+  type InsightModel,
+  type InsightSetContext,
+  InsightWarning,
+  type RequiredData,
+} from './types.js';
 
 const UIStrings = {
   /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
@@ -30,8 +36,15 @@ export type ViewportInsightModel = InsightModel<{
   viewportEvent?: Types.Events.ParseMetaViewport,
 }>;
 
-function finalize(partialModel: Omit<ViewportInsightModel, 'title'|'description'>): ViewportInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<ViewportInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    ViewportInsightModel {
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.INP,
+    shouldShow: partialModel.mobileOptimized === false,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Common from '../../../core/common/common.js';
 import type * as Handlers from '../handlers/handlers.js';
 import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
@@ -53,9 +54,19 @@ export interface MetricSavings {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
+export enum InsightCategory {
+  ALL = 'All',
+  INP = 'INP',
+  LCP = 'LCP',
+  CLS = 'CLS',
+}
+
 export type InsightModel<R extends Record<string, unknown>> = R&{
-  title: string,
-  description: string,
+  title: Common.UIString.LocalizedString,
+  description: Common.UIString.LocalizedString,
+  category: InsightCategory,
+  /** True if there is anything of interest to display to the user. */
+  shouldShow: boolean,
   relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
   metricSavings?: MetricSavings,

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

@@ -1,6 +1,8 @@
 // Copyright 2023 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
+import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 
 import type {TraceWindowMicroSeconds} from './Timing.js';
@@ -177,7 +179,12 @@ export interface Modifications {
 export interface MetaData {
   source?: 'DevTools';
   startTime?: string;
+  emulatedDeviceTitle?: string;
+  // Only set if network throttling is active.
   networkThrottling?: string;
+  // Only set if network throttling is active.
+  networkThrottlingConditions?: Omit<SDK.NetworkManager.Conditions, 'title'>;
+  // Only set if CPU throttling is active.
   cpuThrottling?: number;
   hardwareConcurrency?: number;
   dataOrigin?: DataOrigin;

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

@@ -677,7 +677,10 @@ export interface MarkerEvent extends Event {
 }
 
 export function isMarkerEvent(event: Event): event is MarkerEvent {
-  return markerTypeGuards.some(fn => fn(event));
+  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+    return markerTypeGuards.some(fn => fn(event));
+  }
+  return false;
 }
 
 const pageLoadEventTypeGuards = [
@@ -686,7 +689,10 @@ const pageLoadEventTypeGuards = [
 ];
 
 export function eventIsPageLoadEvent(event: Event): event is PageLoadEvent {
-  return pageLoadEventTypeGuards.some(fn => fn(event));
+  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+    return pageLoadEventTypeGuards.some(fn => fn(event));
+  }
+  return false;
 }
 
 export interface LargestContentfulPaintCandidate extends Mark {
@@ -2635,6 +2641,7 @@ export function isJSInvocationEvent(event: Event): boolean {
   switch (event.name) {
     case Name.RUN_MICROTASKS:
     case Name.FUNCTION_CALL:
+    // TODO(paulirish): Define types for these Evaluate* events
     case Name.EVALUATE_SCRIPT:
     case Name.EVALUATE_MODULE:
     case Name.EVENT_DISPATCH:

package/front_end/panels/animation/AnimationTimeline.ts

@@ -860,7 +860,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         this.#pauseButton.setEnabled(false);
       }
     } else {
-      this.setDuration(Math.max(500, group.finiteDuration() + 100));
+      this.setDuration(group.finiteDuration());
       this.#playbackRateButtons.forEach(button => {
         button.removeAttribute('disabled');
       });
@@ -966,7 +966,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         lastDraw = gridWidth;
         const label = UI.UIUtils.createSVGChild(this.#grid, 'text', 'animation-timeline-grid-label');
         label.textContent = isScrollDriven ? `${time.toFixed(0)}px` : i18n.TimeUtilities.millisToString(time);
-        label.setAttribute('x', (gridWidth + 10).toString());
+        label.setAttribute('x', (gridWidth + 12).toString());
         label.setAttribute('y', '16');
       }
     }
@@ -1053,8 +1053,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.setCurrentTimeText(this.#scrubberCurrentTime());
     if (this.#scrubberPlayer.playState.toString() === 'pending' || this.#scrubberPlayer.playState === 'running') {
       this.element.window().requestAnimationFrame(this.updateScrubber.bind(this));
-    } else if (this.#scrubberPlayer.playState === 'finished') {
-      this.clearCurrentTimeText();
     }
   }
 

package/front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -196,8 +195,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('shows extension storage based on added models', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     for (const useTreeView of [false, true]) {
       Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
       const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
@@ -241,8 +238,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('does not add extension storage if already added by another model', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -36,7 +36,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -281,7 +280,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   serviceWorkersTreeElement: ServiceWorkersTreeElement;
   localStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   sessionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
-  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement|undefined;
+  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   indexedDBListTreeElement: IndexedDBTreeElement;
   interestGroupTreeElement: InterestGroupTreeElement;
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
@@ -364,17 +363,15 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      this.extensionStorageListTreeElement =
-          new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
-      this.extensionStorageListTreeElement.setLink(
-          'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
-          Platform.DevToolsPath.UrlString);
-      const extensionStorageIcon = IconButton.Icon.create('table');
-      this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
+    this.extensionStorageListTreeElement =
+        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
+    this.extensionStorageListTreeElement.setLink(
+        'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
+    const extensionStorageIcon = IconButton.Icon.create('table');
+    this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
 
-      storageTreeElement.appendChild(this.extensionStorageListTreeElement);
-    }
+    storageTreeElement.appendChild(this.extensionStorageListTreeElement);
 
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
@@ -472,14 +469,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         },
         {scoped: true});
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      SDK.TargetManager.TargetManager.instance().observeModels(
-          ExtensionStorageModel, {
-            modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
-            modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
-          },
-          {scoped: true});
-    }
+    SDK.TargetManager.TargetManager.instance().observeModels(
+        ExtensionStorageModel, {
+          modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
+          modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
+        },
+        {scoped: true});
 
     SDK.TargetManager.TargetManager.instance().observeModels(
         IndexedDBModel, {
@@ -1190,7 +1185,6 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
     (this.parent as AppManifestTreeElement)?.showManifestView();
     this.#sectionElement.scrollIntoView();
     UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
-    Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
   }
   // direct focus to the corresponding element
   onInvokeElementKeydown(event: KeyboardEvent): void {

package/front_end/panels/application/IndexedDBViews.ts

@@ -473,7 +473,10 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(true);
   }
 
-  update(objectStore: ObjectStore, index: Index|null): void {
+  override update(objectStore: ObjectStore|null = null, index: Index|null = null): void {
+    if (!objectStore) {
+      return;
+    }
     this.objectStore = objectStore;
     this.index = index;
 

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -285,7 +285,10 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     node.remove();
   }
 
-  update(cache: SDK.ServiceWorkerCacheModel.Cache): void {
+  override update(cache: SDK.ServiceWorkerCacheModel.Cache|null = null): void {
+    if (!cache) {
+      return;
+    }
     this.cache = cache;
     this.resetDataGrid();
     void this.updateData(true);

package/front_end/panels/application/StorageView.test.ts

@@ -73,7 +73,7 @@ describeWithMockConnection('StorageView', () => {
     const container = view.element.shadowRoot?.querySelector('.clear-storage-header') || null;
     assert.instanceOf(container, HTMLDivElement);
     const customQuotaCheckbox =
-        container.shadowRoot!.querySelector('.quota-override-row span')!.shadowRoot!.querySelector(
+        container.shadowRoot!.querySelector('.quota-override-row dt-checkbox')!.shadowRoot!.querySelector(
             '[title="Simulate custom storage quota"]');
     assert.instanceOf(customQuotaCheckbox, HTMLInputElement);
     customQuotaCheckbox.checked = true;

package/front_end/panels/application/resourcesSidebar.css

@@ -6,7 +6,7 @@
 
 .tree-outline {
   li.storage-group-list-item,
-  li.storage-group-list-item:not(:has(span[is="dt-checkbox"])) {
+  li.storage-group-list-item:not(:has(dt-checkbox)) {
     padding: 0 var(--sys-size-8) 0 var(--sys-size-3);
 
     &::before {

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -249,7 +249,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return null;
   }
 
-  private update(): void {
+  override update(): void {
     const target = UI.Context.Context.instance().flavor(SDK.Target.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -349,7 +349,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (this.#highlightedBreakpoint) {
       const oldHighlightedBreakpoint = this.#highlightedBreakpoint;

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -372,7 +372,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const isEmpty = this.#breakpoints.length === 0;
     this.#list.element.classList.toggle('hidden', isEmpty);
     this.#emptyElement.classList.toggle('hidden', !isEmpty);

package/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css

@@ -44,6 +44,6 @@
   z-index: -1;
 }
 
-.source-code[is="dt-checkbox"] {
+dt-checkbox.source-code {
   max-width: 100%;
 }

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -40,7 +40,7 @@
   background-color: var(--sys-color-tonal-container);
 }
 
-.breakpoint-entry [is="dt-checkbox"] {
+.breakpoint-entry dt-checkbox {
   max-width: 100%;
 }
 

package/front_end/panels/console/ConsoleViewMessage.test.ts

@@ -16,10 +16,35 @@ import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import * as Console from './console.js';
 // The css files aren't exported by the bundle, so we need to import it directly.
 // eslint-disable-next-line rulesdir/es_modules_import
 import consoleViewStyles from './consoleView.css.js';
 
+describe('ConsoleViewMessage', () => {
+  describe('concatErrorDescriptionAndIssueSummary', () => {
+    const {concatErrorDescriptionAndIssueSummary} = Console.ConsoleViewMessage;
+
+    it('correctly appends the issue summary in case of single line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.',
+      );
+    });
+
+    it('correctly inserts the issue summary in case of multi-line error descriptions', () => {
+      assert.strictEqual(
+          concatErrorDescriptionAndIssueSummary(
+              'TypeError: Failed to fetch\n  at (index):25:5',
+              'Access blocked by CORS policy: Cross origin requests are not allowed by request mode.'),
+          'TypeError: Failed to fetch. Access blocked by CORS policy: Cross origin requests are not allowed by request mode.\n  at (index):25:5',
+      );
+    });
+  });
+});
+
 describeWithMockConnection('ConsoleViewMessage', () => {
   describe('anchor rendering', () => {
     it('links to the top frame for normal console message', () => {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -221,6 +221,24 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+};
+
 // This value reflects the 18px min-height of .console-message, plus the
 // 1px border of .console-message-wrapper. Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 19;
@@ -1704,6 +1722,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     }
 
+    const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
+    if (typeof issueSummary === 'string') {
+      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+    }
+
     const linkInfos = parseSourcePositionsFromErrorStack(runtimeModel, string);
     if (!linkInfos?.length) {
       return null;

package/front_end/panels/coverage/CoverageListView.ts

@@ -195,7 +195,7 @@ export class CoverageListView extends UI.Widget.VBox {
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: URLCoverageInfo[]): void {
+  override update(coverageInfo: URLCoverageInfo[] = []): void {
     let hadUpdates = false;
     const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
     const rootNode = this.dataGrid.rootNode();

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -145,7 +145,7 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     }
   }
 
-  update(items: Iterable<SDK.PageResourceLoader.PageResource>): void {
+  override update(items: Iterable<SDK.PageResourceLoader.PageResource> = []): void {
     let hadUpdates = false;
     const rootNode = this.dataGrid.rootNode();
     for (const item of items) {

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -157,7 +157,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([classesPaneWidgetStyles]);
   }
 
-  private update(): void {
+  override update(): void {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/ElementStatePaneWidget.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
     'in-range',
     'out-of-range',
     'visited',
+    'link',
     'checked',
     'indeterminate',
     'placeholder-shown',
@@ -292,14 +293,14 @@ describeWithMockConnection('ElementStatePaneWidget', () => {
   it('Shows the specific pseudo-classes for a and area with href', async () => {
     await assertExpectedPseudoClasses(
         'a',
-        ['visited', 'read-write'],
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );
 
     await assertExpectedPseudoClasses(
         'area',
-        ['visited', 'read-write'],
+        ['visited', 'link', 'read-write'],
         false,
         ['href', 'www.google.com'],
     );