chrome-devtools-frontend 1.0.1636056 → 1.0.1640418

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -14,11 +14,15 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
-  PerfInsightAiWidget, PerformanceTraceAiWidget, SourceFileAiWidget, StylePropertiesAiWidget,
-  TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  NetworkRequestGeneralHeadersAiWidget, PerfInsightAiWidget, PerformanceTraceAiWidget, SourceCodeAiWidget,
+  SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget, TimelineEventSummaryAiWidget,
+  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
+import * as Formatter from '../../../models/formatter/formatter.js';
+import * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
 import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -32,6 +36,8 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
 import * as Lighthouse from '../../lighthouse/lighthouse.js';
+import * as NetworkForward from '../../network/forward/forward.js';
+import * as Network from '../../network/network.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
 import type {BaseInsightComponent} from '../../timeline/components/insights/BaseInsightComponent.js';
 import * as TimelineInsights from '../../timeline/components/insights/insights.js';
@@ -384,6 +390,14 @@ const UIStringsNotTranslate = {
    * @description Title for the viewport optimization widget.
    */
   viewport: 'Viewport optimization',
+  /**
+   * @description Accessible label for the reveal button in the network request general headers widget.
+   */
+  revealNetworkRequest: 'Reveal network request',
+  /**
+   * @description Title for the network request general headers widget.
+   */
+  networkRequest: 'Network request',
   /**
    * @description Accessible label for the reveal button in the modern HTTP usage widget.
    */
@@ -400,6 +414,10 @@ const UIStringsNotTranslate = {
    * @description Title for the character set declaration widget.
    */
   characterSet: 'Character set declaration',
+  /**
+   * @description Title for the source files list widget.
+   */
+  inspectedFileNames: 'Inspected file names',
 } as const;
 
 export interface Step {
@@ -1353,6 +1371,101 @@ async function makeSourceFileWidget(widgetData: SourceFileAiWidget): Promise<Wid
   };
 }
 
+async function makeSourceCodeWidget(widgetData: SourceCodeAiWidget): Promise<WidgetMakerResponse|null> {
+  const url = widgetData.data.url;
+  const filename = url.split('/').pop() || url;
+  const line = widgetData.data.line;
+  const column = widgetData.data.column;
+
+  // If both line and column numbers are provided, we represent a specific function execution,
+  // so the widget title is formatted as 'filename:line:column' (matching the Sources Panel style).
+  // Otherwise, if line and column are not provided, we are viewing the entire file contents,
+  // so the header simply displays 'filename'.
+  const header = line !== undefined && column !== undefined ? `${filename}:${line}:${column}` : filename;
+
+  const uiSourceCode =
+      Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url as Platform.DevToolsPath.UrlString);
+  const lastDotIndex = filename.lastIndexOf('.');
+  const fileExtension = lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1) : '';
+
+  let code = widgetData.data.code;
+  if (TextUtils.TextUtils.isMinified(code)) {
+    const canonicalMimeType = uiSourceCode?.contentType().canonicalMimeType() || 'text/javascript';
+    const formatted = await Formatter.ScriptFormatter.formatScriptContent(canonicalMimeType, code, '  ');
+    code = formatted.formattedContent;
+  }
+
+  const renderedWidget = html`
+    <devtools-code-block
+      class="source-code-widget"
+      .displayLimit=${20}
+      .code=${code}
+      .codeLang=${fileExtension}
+      .displayToolbar=${false}
+      .displayNotice=${false}
+    ></devtools-code-block>
+  `;
+
+  return {
+    renderedWidget,
+    title: lockedString(header),
+    revealable: uiSourceCode,
+    accessibleRevealLabel: i18n.i18n.lockedString(`Show ${filename} in Sources`),
+    jslogContext: 'source-code-widget',
+  };
+}
+
+function renderFileRevealButton(
+    file: Workspace.UISourceCode.UISourceCode,
+    collapsed: boolean,
+    ): Lit.TemplateResult {
+  const onReveal = (): void => {
+    void Common.Revealer.reveal(file);
+  };
+  const accessibleLabel = i18n.i18n.lockedString(`Show ${file.fullDisplayName()}`);
+  const className = `widget-reveal-button ${collapsed ? 'collapsed-file' : 'visible-file'}`;
+  return html`
+    <devtools-button class=${className}
+      .variant=${Buttons.Button.Variant.TEXT}
+      .accessibleLabel=${accessibleLabel}
+      .jslogContext=${'reveal'}
+      @click=${onReveal}>
+      ${file.fullDisplayName()}
+      <devtools-icon name='tab-move'></devtools-icon>
+    </devtools-button>
+  `;
+}
+
+async function makeSourceFilesListWidget(widgetData: SourceFilesListAiWidget): Promise<WidgetMakerResponse|null> {
+  const files = widgetData.data.uiSourceCodes;
+  if (files.length === 0) {
+    return null;
+  }
+
+  // If there are more than 10 files, only show the first 10, and hide the rest unless "Show all" is clicked.
+  // clang-format off
+  const renderedWidget = html`
+    <div class="source-files-widget">
+      ${files.slice(0, 10).map(file => renderFileRevealButton(file, /* collapsed */ false))}
+      ${files.length > 10 ? html`
+        <details class="source-files-details">
+          <summary class="show-more-summary">${i18n.i18n.lockedString(`Show all ${files.length} files`)}</summary>
+          ${files.slice(10).map(file => renderFileRevealButton(file, /* collapsed */ true))}
+        </details> ` : Lit.nothing}
+    </div>`;
+  // clang-format on
+
+  const title = lockedString(UIStringsNotTranslate.inspectedFileNames);
+
+  return {
+    renderedWidget,
+    title,
+    revealable: files[0],
+    accessibleRevealLabel: i18n.i18n.lockedString('Reveal first file in Sources panel'),
+    jslogContext: 'source-files-list-widget',
+  };
+}
+
 function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget['data']['networkRequest']>):
     Lit.TemplateResult {
   const filename = networkRequest.url.split('/').pop() || networkRequest.url;
@@ -1460,10 +1573,16 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'SOURCE_FILE':
       return `${widget.name}:${widget.data.uiSourceCode.url()}`;
+    case 'SOURCE_FILES_LIST':
+      return `${widget.name}:${widget.data.uiSourceCodes.map(f => f.url()).join(',')}`;
     case 'LIGHTHOUSE_REPORT':
       return `${widget.name}:${widget.data.report.fetchTime}`;
     case 'TIMELINE_EVENT_SUMMARY':
       return `${widget.name}:${widget.data.event.ts}:${widget.data.event.name}`;
+    case 'NETWORK_REQUEST_GENERAL_HEADERS':
+      return `${widget.name}:${widget.data.request.requestId()}`;
+    case 'SOURCE_CODE':
+      return `${widget.name}:${widget.data.url}:${widget.data.line ?? ''}:${widget.data.column ?? ''}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1550,12 +1669,21 @@ async function renderWidgets(
       case 'SOURCE_FILE':
         response = await makeSourceFileWidget(widgetData);
         break;
+      case 'SOURCE_FILES_LIST':
+        response = await makeSourceFilesListWidget(widgetData);
+        break;
       case 'LIGHTHOUSE_REPORT':
         response = await makeLighthouseReportWidget(widgetData);
         break;
       case 'TIMELINE_EVENT_SUMMARY':
         response = await makeTimelineEventSummaryWidget(widgetData);
         break;
+      case 'NETWORK_REQUEST_GENERAL_HEADERS':
+        response = await makeNetworkRequestGeneralHeadersWidget(widgetData);
+        break;
+      case 'SOURCE_CODE':
+        response = await makeSourceCodeWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
@@ -2131,3 +2259,21 @@ async function makeTimelineEventSummaryWidget(widgetData: TimelineEventSummaryAi
     jslogContext: 'timeline-event-summary-widget',
   };
 }
+
+async function makeNetworkRequestGeneralHeadersWidget(widgetData: NetworkRequestGeneralHeadersAiWidget):
+    Promise<WidgetMakerResponse|null> {
+  const renderedWidget = html`<devtools-widget class="network-request-general-headers-widget" ${widget(() => {
+    return Network.RequestHeadersView.RequestHeadersView.createGeneralHeadersView(widgetData.data.request);
+  })}></devtools-widget>`;
+
+  return {
+    renderedWidget,
+    revealable: NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+        widgetData.data.request,
+        NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT,
+        ),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealNetworkRequest),
+    title: lockedString(UIStringsNotTranslate.networkRequest),
+    jslogContext: 'network-request-general-headers-widget',
+  };
+}

package/front_end/panels/ai_assistance/components/PerformanceAgentMarkdownRenderer.ts

@@ -17,8 +17,7 @@ const {until} = Lit.Directives;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
   constructor(
-      private mainFrameId = '',
-      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
+      private mainFrameId = '', private lookupEvent: (key: string) => Trace.Types.Events.Event | null = () => null) {
     super();
   }
 
@@ -31,7 +30,7 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
             until(this.#linkifyNode(nodeId, token.text).then(node => node || token.text), token.text)}</span>`;
       }
 
-      const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
+      const event = this.lookupEvent(token.href.slice(1));
       if (!event) {
         return html`${token.text}`;
       }

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -281,6 +281,10 @@
     gap: var(--sys-size-2);
   }
 
+  .show-all-container {
+    padding-bottom: 0;
+  }
+
   .js-code-output {
     devtools-code-block {
       --code-block-max-code-height: 50px;
@@ -597,4 +601,27 @@
       }
     }
   }
+
+
+  .source-files-details {
+    display: contents;
+
+    summary {
+      list-style: none;
+      cursor: pointer;
+      padding: 4px 12px;
+      border: 1px solid var(--sys-color-neutral-outline);
+      border-radius: var(--sys-shape-corner-small);
+      color: var(--sys-color-primary);
+      width: fit-content;
+
+      &:hover {
+        background-color: var(--sys-color-state-hover-on-subtle);
+      }
+    }
+
+    &[open] summary {
+      display: none;
+    }
+  }
 }

package/front_end/panels/application/CookieItemsView.ts

@@ -34,6 +34,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
@@ -260,6 +261,7 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.cookieDomain = domain;
     this.refreshItems();
     this.model.addEventListener(SDK.CookieModel.Events.COOKIE_LIST_UPDATED, this.onCookieListUpdate, this);
+    this.updateAiAssistanceContext(null);
   }
 
   override performUpdate(): void {
@@ -302,6 +304,7 @@ export class CookieItemsView extends UI.Widget.VBox {
   override wasShown(): void {
     super.wasShown();
     this.refreshItems();
+    this.updateAiAssistanceContext(this.selectedCookie);
   }
 
   private showPreview(cookie: SDK.Cookie.Cookie|null): void {
@@ -310,6 +313,27 @@ export class CookieItemsView extends UI.Widget.VBox {
     }
     this.selectedCookie = cookie;
     this.requestUpdate();
+    this.updateAiAssistanceContext(cookie);
+  }
+
+  private updateAiAssistanceContext(cookie: SDK.Cookie.Cookie|null): void {
+    if (!cookie || cookie.httpOnly()) {
+      UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
+      return;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+
+    if (!mainPageOrigin) {
+      // If we don't have a primary target origin, we shouldn't allow the AI assistance context to be attached.
+      UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
+      return;
+    }
+
+    const storageItem = new AiAssistanceModel.StorageItem.CookieItem(mainPageOrigin, this.cookieDomain, cookie.name());
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 
   private handleCookieSelected(selectedCookie: SDK.Cookie.Cookie|null): void {

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -190,13 +190,18 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     const origin = parsedKey.origin;
     const storageType = this.domStorage.isLocalStorage ? 'localStorage' : 'sessionStorage';
 
-    if (!item) {
-      const storageItem = new AiAssistanceModel.StorageItem.StorageItem({origin, storageKey});
-      UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const mainPageOrigin =
+        target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';
+
+    if (!mainPageOrigin) {
+      // If we don't have a primary target origin, we shouldn't allow the AI assistance context to be attached.
+      UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, null);
       return;
     }
 
-    const storageItem = new AiAssistanceModel.StorageItem.StorageItem({origin, storageKey, storageType, key: item.key});
+    const storageItem = new AiAssistanceModel.StorageItem.DOMStorageItem(
+        mainPageOrigin, origin, storageKey, storageType, item ? item.key : undefined);
     UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
   }
 

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -454,6 +454,8 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
   PrefetchNotEligibleRedirectFromServiceWorker: {name: () => i18n.i18n.lockedString('Unknown')},
   PrefetchNotEligibleRedirectToServiceWorker: {name: () => i18n.i18n.lockedString('Unknown')},
   PrefetchEvictedAfterBrowsingDataRemoved: {name: i18nLazyString(UIStrings.PrefetchEvictedAfterBrowsingDataRemoved)},
+  PrefetchNotEligibleBlockedByConnectionAllowlist: {name: () => i18n.i18n.lockedString('Unknown')},
+  PrefetchCancelledOnUserNavigation: {name: () => i18n.i18n.lockedString('Unknown')},
 };
 
 /** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
@@ -540,6 +542,10 @@ export function prefetchFailureReason(
       return PrefetchReasonDescription['PrefetchNotEligibleRedirectToServiceWorker'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchEvictedAfterBrowsingDataRemoved:
       return PrefetchReasonDescription['PrefetchEvictedAfterBrowsingDataRemoved'].name();
+    case Protocol.Preload.PrefetchStatus.PrefetchNotEligibleBlockedByConnectionAllowlist:
+      return PrefetchReasonDescription['PrefetchNotEligibleBlockedByConnectionAllowlist'].name();
+    case Protocol.Preload.PrefetchStatus.PrefetchCancelledOnUserNavigation:
+      return PrefetchReasonDescription['PrefetchCancelledOnUserNavigation'].name();
     default:
       // Note that we use switch and exhaustiveness check to prevent to
       // forget updating these strings, but allow to handle unknown

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -475,14 +475,14 @@ export class UsedPreloadingView extends UI.Widget.VBox {
     if (prerenderLike?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE &&
         prefetch?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS) {
       kind = UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED;
-    } else if (prefetch?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS) {
-      kind = UsedKind.PREFETCH_USED;
     } else if (prerenderLike?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS) {
       kind = UsedKind.PRERENDER_USED;
-    } else if (prefetch?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE) {
-      kind = UsedKind.PREFETCH_FAILED;
+    } else if (prefetch?.status === SDK.PreloadingModel.PreloadingStatus.SUCCESS) {
+      kind = UsedKind.PREFETCH_USED;
     } else if (prerenderLike?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE) {
       kind = UsedKind.PRERENDER_FAILED;
+    } else if (prefetch?.status === SDK.PreloadingModel.PreloadingStatus.FAILURE) {
+      kind = UsedKind.PREFETCH_FAILED;
     } else {
       kind = UsedKind.NO_PRELOADS;
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -43,8 +43,6 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
-import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
-import * as Greendev from '../../models/greendev/greendev.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
@@ -63,7 +61,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as AiAssistancePanel from '../ai_assistance/ai_assistance.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
@@ -515,16 +512,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       }
     } else {
       const messageText = this.message.messageText;
-      const fragment = this.linkifyWithCustomLinkifier(messageText, (text, url, lineNumber, columnNumber) => {
-        const linkElement = url === request.url() ?
-            Components.Linkifier.Linkifier.linkifyRevealable(
-                (request), url, request.url(), undefined, undefined, 'network-request') :
-            Components.Linkifier.Linkifier.linkifyURL(
-                url, ({text, lineNumber, columnNumber} as Components.Linkifier.LinkifyURLOptions));
-        linkElement.tabIndex = -1;
-        this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
-        return linkElement;
-      });
+      const fragment =
+          ConsoleViewMessage.linkifyWithCustomLinkifier(messageText, (text, url, lineNumber, columnNumber) => {
+            const linkElement = url === request.url() ?
+                Components.Linkifier.Linkifier.linkifyRevealable(
+                    (request), url, request.url(), undefined, undefined, 'network-request') :
+                Components.Linkifier.Linkifier.linkifyURL(
+                    url, ({text, lineNumber, columnNumber} as Components.Linkifier.LinkifyURLOptions));
+            linkElement.tabIndex = -1;
+            this.selectableChildren.push({element: linkElement, forceSelect: () => linkElement.focus()});
+            return linkElement;
+          });
       appendOrShow(messageElement, fragment);
     }
     return messageElement;
@@ -1508,11 +1506,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.consoleRowWrapper.append(this.#createHoverButton());
     }
 
-    const breakpointAgentEnabled = Greendev.Prototypes.instance().isEnabled('breakpointDebuggerAgent');
-    if (breakpointAgentEnabled && this.message.level === Protocol.Log.LogEntryLevel.Error) {
-      this.consoleRowWrapper.append(this.#createBreakpointButton());
-    }
-
     if (this.repeatCountInternal > 1) {
       this.showRepeatCountElement();
     }
@@ -1606,88 +1599,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return button;
   }
 
-  #createBreakpointButton(): HTMLButtonElement {
-    const button = document.createElement('button');
-
-    const icon = new Icon();
-    icon.name = 'bug';
-    icon.style.color = 'var(--devtools-icon-color)';
-    icon.classList.add('medium');
-    button.append(icon);
-
-    const label = document.createElement('div');
-    label.classList.add('button-label');
-    const text = document.createElement('div');
-    // We use a data attribute and a CSS pseudo-element for the button label
-    // to prevent the text from being picked up by the console's custom
-    // copy-to-clipboard traversal, which only collects actual text nodes.
-    text.setAttribute('data-text', 'Debug with breakpoint AI');
-    label.append(text);
-    button.append(label);
-    button.classList.add('hover-button');
-    // Offset the button to the left of the existing one (24px width + 6px right + gap)
-    if (this.shouldShowInsights()) {
-      button.style.right = '36px';
-    }
-    button.ariaLabel = 'Debug with breakpoint AI';
-    button.tabIndex = 0;
-
-    button.onclick = async (event: Event) => {
-      event.stopPropagation();
-      const runtimeModel = this.message.runtimeModel();
-      if (!runtimeModel) {
-        return;
-      }
-      const debuggerModel = runtimeModel.debuggerModel();
-      const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-      let uiLocation: Workspace.UISourceCode.UILocation|null = null;
-
-      // 1. Try stack trace latest called line
-      if (this.message.stackTrace?.callFrames.length) {
-        const callFrame = this.message.stackTrace.callFrames[0];
-        if (callFrame.scriptId) {
-          const script = debuggerModel.scriptForId(callFrame.scriptId);
-          if (script) {
-            const rawLocation = new SDK.DebuggerModel.Location(
-                debuggerModel, callFrame.scriptId, callFrame.lineNumber, callFrame.columnNumber);
-            uiLocation = await debuggerWorkspaceBinding.rawLocationToUILocation(rawLocation);
-          }
-        }
-      }
-
-      // 2. Try scriptId on message
-      if (!uiLocation && this.message.scriptId) {
-        const script = debuggerModel.scriptForId(this.message.scriptId);
-        if (script) {
-          const rawLocation = new SDK.DebuggerModel.Location(
-              debuggerModel, this.message.scriptId, this.message.line, this.message.column);
-          uiLocation = await debuggerWorkspaceBinding.rawLocationToUILocation(rawLocation);
-        }
-      }
-
-      // 3. Try URL
-      if (!uiLocation && this.message.url) {
-        const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(this.message.url);
-        if (uiSourceCode) {
-          uiLocation = uiSourceCode.uiLocation(this.message.line, this.message.column);
-        }
-      }
-
-      if (uiLocation) {
-        await Common.Revealer.reveal(uiLocation);
-        const breakpointManager = Breakpoints.BreakpointManager.BreakpointManager.instance();
-        await breakpointManager.setBreakpoint(
-            uiLocation.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber,
-            Breakpoints.BreakpointManager.EMPTY_BREAKPOINT_CONDITION, /* enabled */ true,
-            /* isLogpoint */ false, Breakpoints.BreakpointManager.BreakpointOrigin.OTHER);
-        const aiPanel = await AiAssistancePanel.AiAssistancePanel.instance();
-        void aiPanel.handleBreakpointConversation(uiLocation, this.text);
-      }
-    };
-
-    return button;
-  }
-
   private shouldRenderAsWarning(): boolean {
     return (this.message.level === Protocol.Log.LogEntryLevel.Verbose ||
             this.message.level === Protocol.Log.LogEntryLevel.Info) &&
@@ -2029,7 +1940,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return formattedResult;
   }
 
-  private linkifyWithCustomLinkifier(
+  static linkifyWithCustomLinkifier(
       string: string,
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
       DocumentFragment|UI.Widget.Widget {
@@ -2077,7 +1988,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private linkifyStringAsFragment(string: string): DocumentFragment|UI.Widget.Widget {
-    return this.linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => {
+    return ConsoleViewMessage.linkifyWithCustomLinkifier(string, (text, url, lineNumber, columnNumber) => {
       const options = {text, lineNumber, columnNumber};
       const linkElement =
           Components.Linkifier.Linkifier.linkifyURL(url, (options as Components.Linkifier.LinkifyURLOptions));

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -327,4 +327,14 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   removeStyleUpdateListener(listener: () => void): void {
     this.removeEventListener(Events.STYLES_UPDATE_COMPLETED, listener);
   }
+
+  trackForLazyRendering(_element: Element, _callback: () => void): void {
+  }
+
+  shouldRenderLazily(): boolean {
+    return false;
+  }
+
+  untrackForLazyRendering(_element: Element): void {
+  }
 }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -343,7 +343,7 @@ export class StylePropertiesSection {
     this.#isCollapsed = false;
     this.markSelectorMatches();
     this.onpopulate();
-    this.#updateCollapsedState();
+    this.updateCollapsedState();
   }
 
   setComputedStyles(computedStyles: Map<string, string>|null): void {
@@ -1317,6 +1317,10 @@ export class StylePropertiesSection {
    * since the user intentionally toggled them off and they should remain visible.
    */
   #shouldCollapse(): boolean {
+    if (!Common.Settings.Settings.instance().moduleSetting('collapse-non-contributing-css-rules').get()) {
+      return false;
+    }
+
     const style = this.styleInternal;
     const properties = style.leadingProperties();
 
@@ -1343,7 +1347,7 @@ export class StylePropertiesSection {
     return allOverloaded;
   }
 
-  #updateCollapsedState(): void {
+  updateCollapsedState(): void {
     const shouldCollapse = this.#shouldCollapse();
     // Mark as collapsible so the toggle icon is always shown for
     // sections that can be collapsed, even after manual expansion.

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2063,6 +2063,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   #gridNames: Set<string>|undefined = undefined;
   #tooltipKeyCounts = new Map<string, number>();
 
+  #lazyRender?: boolean;
+
   constructor(
       {stylesContainer, section, matchedStyles, property, isShorthand, inherited, overloaded, newProperty}:
           StylePropertyTreeElementParams,
@@ -2080,6 +2082,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.#parentSection = section;
     this.isShorthand = isShorthand;
     this.newProperty = newProperty;
+    this.#lazyRender = stylesContainer.shouldRenderLazily();
     if (this.newProperty) {
       this.listItemElement.textContent = '';
     }
@@ -2088,6 +2091,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onunbind(): void {
+    this.#stylesContainer.untrackForLazyRendering(this.listItemElement);
+    this.#lazyRender = false;
     this.property.removeEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, this.updateTitle, this);
     super.onunbind();
   }
@@ -2371,7 +2376,31 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onattach(): void {
-    this.updateTitle();
+    if (this.#lazyRender) {
+      this.nameElement = Renderer.renderNameElement(this.name);
+      this.valueElement = Renderer.renderValueElement(this.property, null, []).valueElement;
+
+      // Add a placeholder to maintain alignment with eager rendering.
+      if (this.parent?.root || !this.property.parsedOk) {
+        const placeholder = document.createElement('span');
+        placeholder.classList.add('enabled-button');
+        this.listItemElement.appendChild(placeholder);
+      }
+
+      this.listItemElement.classList.toggle('inactive', !this.property.activeInStyle());
+      this.listItemElement.appendChild(this.nameElement);
+      const lineBreakValue = this.valueElement.firstElementChild?.tagName === 'BR';
+      this.listItemElement.createChild('span', 'styles-name-value-separator').textContent = lineBreakValue ? ':' : ': ';
+      this.listItemElement.appendChild(this.valueElement);
+      this.listItemElement.createChild('span', 'styles-semicolon').textContent = ';';
+
+      this.#stylesContainer.trackForLazyRendering(this.listItemElement, () => {
+        this.#lazyRender = false;
+        this.updateTitle();
+      });
+    } else {
+      this.updateTitle();
+    }
 
     this.listItemElement.addEventListener('mousedown', event => {
       if (event.button === 0) {

package/front_end/panels/elements/StylesContainer.ts

@@ -57,4 +57,7 @@ export interface StylesContainer {
   setActiveProperty(treeElement: StylePropertyTreeElement|null): void;
   addStyleUpdateListener(listener: () => void): void;
   removeStyleUpdateListener(listener: () => void): void;
+  trackForLazyRendering(element: Element, callback: () => void): void;
+  untrackForLazyRendering(element: Element): void;
+  shouldRenderLazily(): boolean;
 }