chrome-devtools-frontend 1.0.1601661 → 1.0.1602348

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

@@ -62,29 +62,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   private constructor() {
     super();
-    const targetManager = SDK.TargetManager.TargetManager.instance();
-    targetManager.observeTargets(this, {scoped: true});
-    // Listen for target info changes to detect prerender activation.
-    // Scoped observers don't receive events when a prerendered target becomes
-    // primary because setScopeTarget() isn't called during that transition.
-    targetManager.addEventListener(
-        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, this.#onAvailableTargetsChanged, this);
-  }
-
-  #onAvailableTargetsChanged(): void {
-    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (primaryTarget && primaryTarget !== this.#target) {
-      // Primary target changed (e.g., prerender activation). Switch to it.
-      void this.#switchToTarget(primaryTarget);
-    }
-  }
-
-  async #switchToTarget(newTarget: SDK.Target.Target): Promise<void> {
-    if (this.#target) {
-      await this.disable();
-    }
-    this.#target = newTarget;
-    await this.enable();
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
   }
 
   static instance(opts: {forceNew?: boolean} = {forceNew: false}): LiveMetrics {
@@ -393,6 +371,31 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#sendStatusUpdate();
   }
 
+  async #getFrameForExecutionContextId(executionContextId: Protocol.Runtime.ExecutionContextId):
+      Promise<SDK.ResourceTreeModel.ResourceTreeFrame|null> {
+    if (!this.#target) {
+      return null;
+    }
+
+    const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);
+    if (!runtimeModel) {
+      return null;
+    }
+
+    const executionContext = runtimeModel.executionContext(executionContextId);
+    if (!executionContext) {
+      return null;
+    }
+
+    const frameId = executionContext.frameId;
+    if (!frameId) {
+      return null;
+    }
+
+    const frameManager = SDK.FrameManager.FrameManager.instance();
+    return await frameManager.getOrWaitForFrame(frameId);
+  }
+
   async #onBindingCalled(event: {data: Protocol.Runtime.BindingCalledEvent}): Promise<void> {
     const {data} = event;
     if (data.name !== Spec.EVENT_BINDING_NAME) {
@@ -404,8 +407,22 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     await this.#mutex.run(async () => {
       const webVitalsEvent = JSON.parse(data.payload) as Spec.WebVitalsEvent;
 
-      // Track the execution context from 'reset' events for logInteractionScripts().
-      if (webVitalsEvent.name === 'reset') {
+      // This ensures that `#lastResetContextId` will always be an execution context on the
+      // primary frame. If we receive events from this execution context then we automatically
+      // know that they are for the primary frame.
+      if (this.#lastResetContextId !== data.executionContextId) {
+        if (webVitalsEvent.name !== 'reset') {
+          return;
+        }
+
+        // We should avoid calling this function for every event.
+        // If an interaction triggers a pre-rendered navigation then the old primary frame could
+        // be removed before we reach this point, and then it will hang forever.
+        const frame = await this.#getFrameForExecutionContextId(data.executionContextId);
+        if (!frame?.isPrimaryFrame()) {
+          return;
+        }
+
         this.#lastResetContextId = data.executionContextId;
       }
 
@@ -447,7 +464,6 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetAdded(target: SDK.Target.Target): Promise<void> {
-    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
       return;
     }
@@ -456,12 +472,20 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
-    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== this.#target) {
       return;
     }
     await this.disable();
     this.#target = undefined;
+
+    // If the user navigates to a page that was pre-rendered then the primary page target
+    // will be swapped and the old target will be removed. We should ensure live metrics
+    // remain enabled on the new primary page target.
+    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (primaryPageTarget) {
+      this.#target = primaryPageTarget;
+      await this.enable();
+    }
   }
 
   async enable(): Promise<void> {
@@ -531,10 +555,6 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    // Reset to ensure clean state when re-enabling on a new target.
-    // See crbug.com/478832430.
-    this.#lastResetContextId = undefined;
-
     await this.#killAllLiveMetricContexts();
 
     const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -26,6 +26,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/ARIAAttributesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   propertyCompletions: Map<SDK.DOMModel.Attribute, string[]>;
@@ -62,8 +63,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
          html`
           <style>${accessibilityPropertiesStyles}</style>
           <devtools-widget
-            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget,
-                                                   {text: i18nString(UIStrings.noAriaAttributes)})}
+            ${widget(UI.EmptyWidget.EmptyWidget, {text: i18nString(UIStrings.noAriaAttributes)})}
             class="gray-info-message info-message-overflow"></devtools-widget>` :
          html`<devtools-tree
            hide-overflow

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

@@ -22,6 +22,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import chatInputStyles from './chatInput.css.js';
 
 const {html, Directives: {createRef, ref}} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -332,7 +333,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             html`
                               <devtools-widget
                                 class="title"
-                                .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+                                ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {
                                   node: input.context.getItem(),
                                   options: {
                                     disabled: !input.isContextSelected,
@@ -352,7 +353,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
                             Lit.nothing}
-                            <span 
+                            <span
                               role="button"
                               class="title"
                               tabindex="0"

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

@@ -736,15 +736,13 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
     return null;
   }
 
-  const widgetConfig = UI.Widget.widgetConfig(TimelineInsights.LCPBreakdown.LCPBreakdown, {
-    model: insight,
-    minimal: true,
-  });
-
   // clang-format off
   const renderedWidget = html`<devtools-widget
     class="lcp-breakdown-widget"
-    .widgetConfig=${widgetConfig}></devtools-widget>`;
+    ${widget(TimelineInsights.LCPBreakdown.LCPBreakdown, {
+      model: insight,
+      minimal: true,
+    })}></devtools-widget>`;
   // clang-format on
 
   return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableInsight(insight)};
@@ -826,24 +824,22 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
     return null;
   }
 
-  const widgetConfig = UI.Widget.widgetConfig(Elements.ElementsTreeOutline.DOMTreeWidget, {
-    maxTreeDepth: 2,
-    enableContextMenu: false,
-    showComments: false,
-    showAIButton: false,
-    disableEdits: true,
-    expandRoot: true,
-    rootDOMNode: root,
-    visibleWidth: 400,
-    wrap: true,
-  });
-
   const networkRequest = widgetData.data.networkRequest;
 
   // clang-format off
   const renderedWidget = html`
     ${networkRequest ? renderNetworkRequestPreview(networkRequest) : Lit.nothing}
-    <devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>
+    <devtools-widget class="dom-tree-widget" ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+      maxTreeDepth: 2,
+      enableContextMenu: false,
+      showComments: false,
+      showAIButton: false,
+      disableEdits: true,
+      expandRoot: true,
+      rootDOMNode: root,
+      visibleWidth: 400,
+      wrap: true,
+    })}></devtools-widget>
   `;
   // clang-format on
 

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -40,7 +40,7 @@ import {StorageItemsToolbar} from './StorageItemsToolbar.js';
 
 const {ARIAUtils} = UI;
 const {EmptyWidget} = UI.EmptyWidget;
-const {VBox, widgetConfig} = UI.Widget;
+const {VBox, widget} = UI.Widget;
 const {Size} = Geometry;
 const {repeat} = LitDirectives;
 
@@ -118,14 +118,14 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
         // clang-format off
         render(html `
             <devtools-widget
-              .widgetConfig=${widgetConfig(StorageItemsToolbar, {metadataView})}
+              ${widget(StorageItemsToolbar, {metadataView})}
               class=flex-none
               ${UI.Widget.widgetRef(StorageItemsToolbar, view => {output.toolbar = view;})}
             ></devtools-widget>
             <devtools-split-view sidebar-position="second" name="${id}-split-view-state">
                <devtools-widget
                   slot="main"
-                  .widgetConfig=${widgetConfig(VBox, {minimumSize: new Size(0, 50)})}>
+                  ${widget(VBox, {minimumSize: new Size(0, 50)})}>
                 <devtools-data-grid
                   .name=${`${id}-datagrid-with-preview`}
                   striped
@@ -160,7 +160,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
               </devtools-widget>
               <devtools-widget
                   slot="sidebar"
-                  .widgetConfig=${widgetConfig(VBox, {minimumSize: new Size(0, 50)})}
+                  ${widget(VBox, {minimumSize: new Size(0, 50)})}
                   jslog=${VisualLogging.pane('preview').track({resize: true})}>
                ${input.preview?.element}
               </devtools-widget>

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -27,6 +27,7 @@ const UIStringsNotTranslate = {
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
+const {widget} = UI.Widget;
 
 export interface AiCodeCompletionSummaryToolbarProps {
   citationsTooltipId: string;
@@ -64,7 +65,7 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
   // clang-format off
   const disclaimer = input.disclaimerTooltipId && input.spinnerTooltipId ?
     html`<devtools-widget
-            .widgetConfig=${UI.Widget.widgetConfig(AiCodeCompletionDisclaimer, {
+            ${widget(AiCodeCompletionDisclaimer, {
       disclaimerTooltipId: input.disclaimerTooltipId,
       spinnerTooltipId: input.spinnerTooltipId,
       loading: input.loading,

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -72,14 +72,8 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     accessibleName: consoleTitle,
     compact,
     groups: [
-      {
-        iconName: 'cross-circle-filled',
-        text: countToText(errors)
-      },
-      {
-        iconName: 'warning-filled',
-        text: countToText(warnings)
-      },
+      {iconName: 'cross-circle-filled', text: countToText(errors)},
+      {iconName: 'warning-filled', text: countToText(warnings)},
     ],
   };
 
@@ -201,12 +195,11 @@ export class WarningErrorCounter implements UI.Toolbar.Provider {
         document.createElement('devtools-widget') as UI.Widget.WidgetElement<WarningErrorCounterWidget>;
     const toolbarItem = new UI.Toolbar.ToolbarItemWithCompactLayout(widgetElement);
     toolbarItem.setVisible(false);
-    widgetElement.widgetConfig = UI.Widget.widgetConfig(e => {
-      const widget = new WarningErrorCounterWidget(e, toolbarItem.setVisible.bind(toolbarItem));
-      toolbarItem.addEventListener(
-          UI.Toolbar.ToolbarItemWithCompactLayoutEvents.COMPACT_LAYOUT_UPDATED, widget.onSetCompactLayout, widget);
-      return widget;
-    });
+
+    const widget = new WarningErrorCounterWidget(widgetElement, toolbarItem.setVisible.bind(toolbarItem));
+    toolbarItem.addEventListener(
+        UI.Toolbar.ToolbarItemWithCompactLayoutEvents.COMPACT_LAYOUT_UPDATED, widget.onSetCompactLayout, widget);
+
     this.toolbarItem = toolbarItem;
   }
 

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -20,6 +20,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/NodeStackTraceWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 interface ViewInput {
   stackTrace?: StackTrace.StackTrace.StackTrace;
@@ -35,7 +36,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     ${target && stackTrace ?
          html`<devtools-widget
                 class="stack-trace"
-                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
+                ${widget(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
     target);

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -55,6 +55,7 @@ const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
 const GridLanesEditor = ElementsComponents.StylePropertyEditor.GridLanesEditor;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -2688,7 +2689,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
                 e.consume(true);
               }
             }}
-            .widgetConfig=${UI.Widget.widgetConfig(CSSValueTraceView)}>
+            ${widget(CSSValueTraceView)}>
           </devtools-widget>
         </devtools-tooltip>`;
     // clang-format on

package/front_end/panels/network/RequestPayloadView.ts

@@ -51,7 +51,7 @@ import requestPayloadViewStyles from './requestPayloadView.css.js';
 import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {classMap} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {ifExpanded} = UI.TreeOutline;
 const UIStrings = {
   /**
@@ -146,7 +146,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
   const createSourceText = (text: string): TemplateResult => html`<li role=treeitem
       @contextmenu=${copyValueContextmenu(i18nString(UIStrings.copyPayload), () => text, 'copy-payload')}>
-        <devtools-widget class='payload-value source-code' .widgetConfig=${widgetConfig(ShowMoreDetailsWidget, {text})}>
+        <devtools-widget class='payload-value source-code' ${widget(ShowMoreDetailsWidget, {text})}>
         </devtools-widget>
       </li>`;
 

package/front_end/panels/recorder/RecorderController.ts

@@ -151,6 +151,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/recorder/RecorderController.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 const GET_EXTENSIONS_MENU_ITEM = 'get-extensions-link';
 const GET_EXTENSIONS_URL = 'https://goo.gle/recorder-extension-list' as Platform.DevToolsPath.UrlString;
@@ -1203,7 +1204,7 @@ export class RecorderController extends LitElement {
     // clang-format off
     return html`
       <devtools-widget
-        .widgetConfig=${UI.Widget.widgetConfig(Components.RecordingListView.RecordingListView, {
+        ${widget(Components.RecordingListView.RecordingListView, {
           recordings: recordings.map(recording => ({
             storageName: recording.storageName,
             name: recording.flow.title,
@@ -1244,7 +1245,7 @@ export class RecorderController extends LitElement {
     return html`
       <devtools-widget
           class="recording-view"
-          .widgetConfig=${UI.Widget.widgetConfig(Components.RecordingView.RecordingView, {
+          ${widget(Components.RecordingView.RecordingView, {
             recording: this.currentRecording?.flow ?? {title: '', steps: []},
             replayState: this.#replayState,
             isRecording: this.isRecording,
@@ -1291,7 +1292,7 @@ export class RecorderController extends LitElement {
     return html`
       <devtools-widget
         class="recording-view"
-        .widgetConfig=${UI.Widget.widgetConfig(Components.CreateRecordingView.CreateRecordingView, {
+        ${widget(Components.CreateRecordingView.CreateRecordingView, {
           recorderSettings: this.#recorderSettings,
           onRecordingStarted: this.#onRecordingStarted.bind(this),
           onRecordingCancelled: this.onRecordingCancelled.bind(this),

package/front_end/panels/recorder/components/CreateRecordingView.ts

@@ -101,6 +101,7 @@ const str_ = i18n.i18n.registerUIStrings(
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export interface ViewInput {
   name: string;
@@ -269,7 +270,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         <div class="controls">
           <devtools-widget
             class="control-button"
-            .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+            ${widget(ControlButton, {
               label: i18nString(UIStrings.startRecording),
               shape: 'circle',
               onClick: onRecordingStarted,

package/front_end/panels/recorder/components/RecordingView.ts

@@ -597,7 +597,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
                     return html`
                       <devtools-widget
                       @copystep=${input.onCopyStep}
-                      .widgetConfig=${UI.Widget.widgetConfig(StepView, {
+                      ${widget(StepView, {
                         step,
                         state: input.getStepState(step),
                         error: input.currentStep === step ? (input.currentError ?? undefined) : undefined,
@@ -812,7 +812,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           <div class="controls">
             <devtools-widget
               class="control-button"
-              .widgetConfig=${UI.Widget.widgetConfig(ControlButton, {
+              ${widget(ControlButton, {
                 label: footerButtonTitle,
                 shape: 'square',
                 disabled: input.recordingTogglingInProgress,

package/front_end/panels/recorder/models/RecordingPlayer.ts

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// Clang-formatter and EsLint have a mismatch due to the naming of `puppeteer-replay`
+/* eslint-disable import/order */
+
 import * as Common from '../../../core/common/common.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';

package/front_end/panels/security/SecurityPanel.ts

@@ -29,7 +29,7 @@ import {
 } from './SecurityModel.js';
 import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -552,8 +552,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLEl
       ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
       <devtools-widget
         slot="sidebar"
-        .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
-        ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
+        ${widget(SecurityPanelSidebar)}
+        ${widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
       </devtools-widget>
   </devtools-split-view>`,
     target);