chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -163,7 +163,8 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
    * DOM nodes can't be sent over a runtime binding, so we have to retrieve
    * them separately.
    */
-  async #resolveNodeRef(index: number, executionContextId: Protocol.Runtime.ExecutionContextId): Promise<NodeRef|null> {
+  async #resolveNodeRef(index: number, executionContextId: Protocol.Runtime.ExecutionContextId):
+      Promise<SDK.DOMModel.DOMNode|null> {
     if (!this.#target) {
       return null;
     }
@@ -195,8 +196,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
         return null;
       }
 
-      const link = await Common.Linkifier.Linkifier.linkify(node);
-      return {node, link};
+      return node;
     } catch {
       return null;
     } finally {
@@ -236,26 +236,23 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       ...this.#layoutShifts.flatMap(shift => shift.affectedNodeRefs),
     ].filter(nodeRef => !!nodeRef);
 
-    const idsToRefresh = new Set(toRefresh.map(nodeRef => nodeRef.node.backendNodeId()));
+    const idsToRefresh = new Set(toRefresh.map(nodeRef => nodeRef.backendNodeId()));
     const nodes = await domModel.pushNodesByBackendIdsToFrontend(idsToRefresh);
     if (!nodes) {
       return;
     }
 
-    const allPromises = toRefresh.map(async nodeRef => {
-      const refreshedNode = nodes.get(nodeRef.node.backendNodeId());
+    for (let i = 0; i < toRefresh.length; i++) {
+      const refreshedNode = nodes.get(toRefresh[i].backendNodeId());
 
       // It is possible for the refreshed node to be undefined even though it was defined previously.
       // We should keep the affected nodes consistent from the user perspective, so we will just keep the stale node instead of removing it.
       if (!refreshedNode) {
-        return;
+        continue;
       }
 
-      nodeRef.node = refreshedNode;
-      nodeRef.link = await Common.Linkifier.Linkifier.linkify(refreshedNode);
-    });
-
-    await Promise.all(allPromises);
+      toRefresh[i] = refreshedNode;
+    }
 
     this.#sendStatusUpdate();
   }
@@ -599,14 +596,9 @@ export interface MetricValue {
   warnings?: string[];
 }
 
-export interface NodeRef {
-  node: SDK.DOMModel.DOMNode;
-  link: Node;
-}
-
 export interface LcpValue extends MetricValue {
   phases: Spec.LcpPhases;
-  nodeRef?: NodeRef;
+  nodeRef?: SDK.DOMModel.DOMNode;
 }
 
 export interface InpValue extends MetricValue {
@@ -621,7 +613,7 @@ export interface ClsValue extends MetricValue {
 export interface LayoutShift {
   score: number;
   uniqueLayoutShiftId: Spec.UniqueLayoutShiftId;
-  affectedNodeRefs: NodeRef[];
+  affectedNodeRefs: SDK.DOMModel.DOMNode[];
 }
 
 export interface Interaction {
@@ -633,7 +625,7 @@ export interface Interaction {
   nextPaintTime: number;
   phases: Spec.InpPhases;
   longAnimationFrameTimings: Spec.PerformanceLongAnimationFrameTimingJSON[];
-  nodeRef?: NodeRef;
+  nodeRef?: SDK.DOMModel.DOMNode;
 }
 
 export interface StatusEvent {

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -10,6 +10,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import accessibilityNodeStyles from './accessibilityNode.css.js';
 import {AXAttributes, AXNativeSourceTypes, AXSourceTypes} from './AccessibilityStrings.js';
@@ -587,8 +588,11 @@ export class AXRelatedNodeElement {
       const valueElement = document.createElement('span');
       element.appendChild(valueElement);
       void this.deferredNode.resolvePromise().then(node => {
-        void Common.Linkifier.Linkifier.linkify(node, {tooltip: undefined, preventKeyboardFocus: true})
-            .then(linkfied => valueElement.appendChild(linkfied));
+        if (!node) {
+          return;
+        }
+        valueElement.appendChild(PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
+            node, {tooltip: undefined, preventKeyboardFocus: true}));
       });
     } else if (this.idref) {
       element.classList.add('invalid');

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -17,6 +17,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -474,7 +475,7 @@ function agentToConversationType(agent: AiAssistanceModel.AiAgent.AiAgent<unknow
   }
 
   if (agent instanceof AiAssistanceModel.PerformanceAgent.PerformanceAgent) {
-    return agent.getConversationType();
+    return AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
   }
 
   throw new Error('Provided agent does not have a corresponding conversation type');
@@ -957,7 +958,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onDeleteClick: this.#onDeleteClicked.bind(this),
       onExportConversationClick: this.#onExportConversationClick.bind(this),
       onHelpClick: () => {
-        UI.UIUtils.openInNewTab(AI_ASSISTANCE_HELP);
+        UIHelpers.openInNewTab(AI_ASSISTANCE_HELP);
       },
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');

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

@@ -12,7 +12,7 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
-import * as ElementsPanel from '../../../panels/elements/elements.js';
+import * as PanelsCommon from '../../../panels/common/common.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -532,7 +532,6 @@ export class ChatView extends HTMLElement {
             suggestions: this.#props.emptyStateSuggestions,
             userInfo: this.#props.userInfo,
             markdownRenderer: this.#props.markdownRenderer,
-            conversationType: this.#props.conversationType,
             changeSummary: this.#props.changeSummary,
             changeManager: this.#props.changeManager,
             onSuggestionClick: this.#handleSuggestionClick,
@@ -932,7 +931,7 @@ function renderContextTitle(
     // FIXME: move this to the model code.
     const hiddenClassList = item.classNames().filter(
         className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME));
-    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ElementsPanel.DOMLinkifier.DOMNodeLink, {
+    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
       node: item,
       options: {hiddenClassList, disabled}
     })}></devtools-widget>`;
@@ -1458,7 +1457,6 @@ function renderMainContents({
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
   onCopyResponseClick: (message: ModelChatMessage) => void,
   onMessageContainerRef: (el: Element|undefined) => void,
-  conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType,
   changeSummary?: string,
 }): Lit.LitTemplate {
   if (messages.length > 0) {

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

@@ -8,6 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 
@@ -84,7 +85,7 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
       return;
     }
 
-    const linkedNode = await Common.Linkifier.Linkifier.linkify(node, {textContent: label});
+    const linkedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
     return linkedNode;
   }
 }

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

@@ -8,6 +8,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -321,7 +322,7 @@ export class UserActionRow extends UI.Widget.Widget implements UserActionRowWidg
         {
           onSuggestionClick: this.onSuggestionClick,
           onRatingClick: this.#handleRateClick.bind(this),
-          onReportClick: () => UI.UIUtils.openInNewTab(REPORT_URL),
+          onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
           onCopyResponseClick: this.onCopyResponseClick,
           scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
           onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),

package/front_end/panels/animation/AnimationTimeline.ts

@@ -18,6 +18,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import {AnimationGroupPreviewUI} from './AnimationGroupPreviewUI.js';
 import animationTimelineStyles from './animationTimeline.css.js';
@@ -1222,13 +1223,12 @@ export class NodeUI {
     }
     this.#node = node;
     this.nodeChanged();
-    void Common.Linkifier.Linkifier.linkify(node).then(link => {
-      link.addEventListener('click', () => {
-        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimatedNodeDescriptionClicked);
-      });
-
-      this.#description.appendChild(link);
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node);
+    link.addEventListener('click', () => {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AnimatedNodeDescriptionClicked);
     });
+
+    this.#description.appendChild(link);
     if (!node.ownerDocument) {
       this.nodeRemoved();
     }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -51,13 +51,13 @@ import {BackForwardCacheTreeElement} from './BackForwardCacheTreeElement.js';
 import {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
-import * as ApplicationComponents from './components/components.js';
 import {type DOMStorage, DOMStorageModel, Events as DOMStorageModelEvents} from './DOMStorageModel.js';
 import {
   Events as ExtensionStorageModelEvents,
   type ExtensionStorage,
   ExtensionStorageModel,
 } from './ExtensionStorageModel.js';
+import {FrameDetailsReportView} from './FrameDetailsView.js';
 import {
   type Database as IndexedDBModelDatabase,
   type DatabaseId,
@@ -2149,8 +2149,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
   private readonly treeElementForResource: Map<string, FrameResourceTreeElement>;
   private treeElementForWindow: Map<Protocol.Target.TargetID, FrameWindowTreeElement>;
   private treeElementForWorker: Map<Protocol.Target.TargetID, WorkerTreeElement>;
-  private view: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.FrameDetailsView.FrameDetailsReportView>|null;
+  private view: FrameDetailsReportView|null;
 
   constructor(section: ResourcesSection, frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     super(section.panel, '', false, 'frame');
@@ -2195,8 +2194,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     this.treeElementForWorker.clear();
 
     if (this.selected) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(this.frame));
+      this.view = new FrameDetailsReportView();
+      this.view.frame = this.frame;
       this.showView(this.view);
     } else {
       this.view = null;
@@ -2233,8 +2232,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(this.frame));
+      this.view = new FrameDetailsReportView();
+      this.view.frame = this.frame;
     }
     Host.userMetrics.panelShown('frame-details');
     this.showView(this.view);