chrome-devtools-frontend 1.0.1624583 → 1.0.1625079

package/.agents/skills/foundation-test-migration/SKILL.md

@@ -111,9 +111,9 @@ Protocol requests/responses dynamically generated by Chrome (like Network condit
 
 ```ts
 const emulateSpy = sinon.spy();
-connection.setHandler('Network.emulateNetworkConditionsByRule', request => {
+connection.setSuccessHandler('Network.emulateNetworkConditionsByRule', request => {
   emulateSpy(request);
-  return {result: {ruleIds: []}};
+  return {ruleIds: []};
 });
 
 // Matches only the fields you care about, ignoring extra protocol fields

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../generated/protocol.js';
+import * as Protocol from '../../../generated/protocol.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
@@ -115,7 +115,11 @@ export class NetworkRequestFormatter {
   }): string {
     const lines = [];
     if (reasons.blockedReason) {
-      lines.push(`Blocked reason: ${reasons.blockedReason}`);
+      if (reasons.blockedReason === Protocol.Network.BlockedReason.Inspector) {
+        lines.push('Blocked reason: a custom network condition in DevTools is blocking this request');
+      } else {
+        lines.push(`Blocked reason: ${reasons.blockedReason}`);
+      }
     }
     if (reasons.corsErrorStatus) {
       lines.push(`CORS error: ${reasons.corsErrorStatus.corsError} ${reasons.corsErrorStatus.failedParameter}`);

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7024,6 +7024,10 @@ export const NativeFunctions = [
     name: "prependHTMLUnsafe",
     signatures: [["html","?options"]]
   },
+  {
+    name: "matchContainer",
+    signatures: [["query"]]
+  },
   {
     name: "scrollIntoViewIfNeeded",
     signatures: [["?centerIfNeeded"]]

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

@@ -31,6 +31,10 @@ export const UIStrings = {
   columnSource: 'Source',
   /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
   columnDuplicatedBytes: 'Duplicated bytes',
+  /**
+   * @description Message shown when no duplicated JavaScript is found.
+   */
+  noDuplicatedJavaScript: 'No duplicated JavaScript found',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);

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

@@ -28,6 +28,10 @@ export const UIStrings = {
   fontColumn: 'Font',
   /** Column for the amount of time wasted. */
   wastedTimeColumn: 'Wasted time',
+  /**
+   * @description Message shown when no fonts with suboptimal font-display are found.
+   */
+  noFonts: 'No fonts with suboptimal font-display found',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/FontDisplay.ts', UIStrings);

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

@@ -33,6 +33,10 @@ export const UIStrings = {
   columnScript: 'Script',
   /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */
   columnWastedBytes: 'Wasted bytes',
+  /**
+   * @description Message shown when no legacy JavaScript is found.
+   */
+  noLegacyJavaScript: 'No legacy JavaScript found',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/LegacyJavaScript.ts', UIStrings);

package/front_end/panels/emulation/DeviceModeToolbar.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.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/legacy/legacy.js';
 
@@ -11,8 +12,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, i18nTemplate, type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
@@ -187,6 +188,9 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/DeviceModeToolbar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ref, classMap} = Directives;
+const {widget} = UI.Widget;
+const {bindToSetting} = UI.UIUtils;
 
 /**
  * Even though the emulation panel uses all UI elements, the tooltips are not supported.
@@ -218,8 +222,8 @@ export class DeviceModeToolbar {
   private spanButton!: Buttons.Button.Button;
   private postureItem!: HTMLSelectElement;
   private modeButton!: Buttons.Button.Button;
-  private widthInput: HTMLInputElement;
-  private heightInput: HTMLInputElement;
+  private widthInput!: HTMLInputElement;
+  private heightInput!: HTMLInputElement;
   private deviceScaleItem!: HTMLSelectElement;
   private deviceScaleItems: HTMLElement[] = [];
   private deviceSelectItem!: HTMLSelectElement;
@@ -255,9 +259,6 @@ export class DeviceModeToolbar {
 
     this.lastMode = new Map();
 
-    this.widthInput = this.createSizeInput(i18nString(UIStrings.width), 'width');
-    this.heightInput = this.createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height');
-
     this.#element = document.createElement('div');
     this.#element.classList.add('device-mode-toolbar');
     this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
@@ -304,16 +305,22 @@ export class DeviceModeToolbar {
     return element;
   }
 
-  private createSizeInput(title: string, jslogContext: string): HTMLInputElement {
-    const input = document.createElement('input');
-    input.type = 'number';
-    input.max = String(EmulationModel.DeviceModeModel.MaxDeviceSize);
-    input.min = String(EmulationModel.DeviceModeModel.MinDeviceSize);
-    input.title = title;
-    input.classList.add('device-mode-size-input');
-    input.setAttribute('jslog', `${VisualLogging.textField().track({change: true}).context(jslogContext)}`);
-
-    input.addEventListener('keydown', (event: Event) => {
+  private createSizeInput(
+      title: string, jslogContext: string, value: string|undefined, disabled: boolean|undefined,
+      refCallback: (el: Element|undefined) => void, onChange: () => void): LitTemplate {
+    return html`
+        <input type="number"
+               max=${EmulationModel.DeviceModeModel.MaxDeviceSize}
+               min=${EmulationModel.DeviceModeModel.MinDeviceSize}
+               title=${title}
+               class="device-mode-size-input"
+               .disabled=${disabled ?? false}
+               jslog=${VisualLogging.textField().track({change: true}).context(jslogContext)}
+               .value=${value ?? ''}
+               @change=${onChange}
+               ${ref(refCallback)}
+               @keydown=${(event: Event): void => {
+      const input = event.target as HTMLInputElement;
       let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
       if (modifiedValue === null) {
         return;
@@ -324,125 +331,134 @@ export class DeviceModeToolbar {
       event.preventDefault();
       input.value = String(modifiedValue);
       input.dispatchEvent(new Event('change'));
-    });
-    return input;
+    }}>`;
   }
 
   private createMainToolbar(): UI.Toolbar.Toolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
-
-    mainToolbar.append(this.createEmptyToolbarElement());
-    this.deviceSelectItem = document.createElement('select');
-    this.deviceSelectItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    this.deviceSelectItem.title = i18nString(UIStrings.deviceType);
-    UI.ARIAUtils.setLabel(this.deviceSelectItem, i18nString(UIStrings.deviceType));
-    this.deviceSelectItem.addEventListener('change', this.onDeviceChange.bind(this));
-    this.deviceSelectItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('device')}`);
-    const dimensionsSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dimensions, {PH1: this.deviceSelectItem});
-    mainToolbar.append(...dimensionsSpan.childNodes);
-    mainToolbar.append(this.deviceSelectItem);
-
-    this.widthInput.addEventListener('change', () => {
-      const width = Number(this.widthInput.value);
-      if (this.autoAdjustScaleSetting.get()) {
-        this.model.setWidthAndScaleToFit(width);
-      } else {
-        this.model.setWidth(width);
-      }
-    });
-    this.heightInput.addEventListener('change', () => {
-      const height = Number(this.heightInput.value);
-      if (this.autoAdjustScaleSetting.get()) {
-        this.model.setHeightAndScaleToFit(height);
-      } else {
-        this.model.setHeight(height);
-      }
-    });
-    mainToolbar.append(this.widthInput);
-    this.xItem = document.createElement('div');
-    this.xItem.classList.add('device-mode-x');
-    this.xItem.textContent = '×';
-    mainToolbar.append(this.xItem);
-    mainToolbar.append(this.heightInput);
-
-    mainToolbar.append(this.createEmptyToolbarElement());
-    this.scaleItem = document.createElement('select');
-    this.scaleItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    this.scaleItem.title = i18nString(UIStrings.zoom);
-    UI.ARIAUtils.setLabel(this.scaleItem, i18nString(UIStrings.zoom));
-    this.scaleItem.addEventListener('change', this.onScaleChange.bind(this));
-    this.scaleItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('scale')}`);
-    mainToolbar.append(this.scaleItem);
-
-    const autoAdjustScaleButton = new UI.Toolbar.ToolbarSettingToggle(
-        this.autoAdjustScaleSetting, 'center-focus-weak', i18nString(UIStrings.autoadjustZoom));
-    mainToolbar.appendToolbarItem(autoAdjustScaleButton);
-
-    mainToolbar.append(this.createEmptyToolbarElement());
-
-    this.deviceScaleItem = document.createElement('select');
-    this.deviceScaleItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    this.deviceScaleItem.title = i18nString(UIStrings.devicePixelRatio);
-    UI.ARIAUtils.setLabel(this.deviceScaleItem, i18nString(UIStrings.devicePixelRatio));
-    this.deviceScaleItem.addEventListener('change', this.onDeviceScaleChange.bind(this));
-    this.deviceScaleItem.setAttribute(
-        'jslog', `${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}`);
-    const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem});
+    // clang-format off
+    render(html`
+      <div class="device-mode-empty-toolbar-element"></div>
+      ${i18nTemplate(str_, UIStrings.dimensions, {PH1: html`
+        <select class="dark-text toolbar-has-dropdown-shrinkable"
+                title=${i18nString(UIStrings.deviceType)}
+                aria-label=${i18nString(UIStrings.deviceType)}
+                @change=${this.onDeviceChange.bind(this)}
+                jslog=${VisualLogging.dropDown().track({change: true}).context('device')}
+                ${ref(el => { this.deviceSelectItem = el as HTMLSelectElement; })}>
+        </select>`})}
+
+      ${this.createSizeInput(
+        i18nString(UIStrings.width), 'width', this.widthInput?.value, this.widthInput?.disabled,
+        el => { this.widthInput = el as HTMLInputElement; },
+        () => {
+          const width = Number(this.widthInput.value);
+          if (this.autoAdjustScaleSetting.get()) {
+            this.model.setWidthAndScaleToFit(width);
+          } else {
+            this.model.setWidth(width);
+          }
+        })}
+
+      <div class="device-mode-x" ${ref(el => { this.xItem = el as HTMLElement; })}>×</div>
+      ${this.createSizeInput(
+        i18nString(UIStrings.heightLeaveEmptyForFull), 'height', this.heightInput?.value, this.heightInput?.disabled,
+        el => { this.heightInput = el as HTMLInputElement; },
+        () => {
+          const height = Number(this.heightInput.value);
+          if (this.autoAdjustScaleSetting.get()) {
+            this.model.setHeightAndScaleToFit(height);
+          } else {
+            this.model.setHeight(height);
+          }
+        })}
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <select class="dark-text toolbar-has-dropdown-shrinkable"
+              title=${i18nString(UIStrings.zoom)}
+              aria-label=${i18nString(UIStrings.zoom)}
+              @change=${this.onScaleChange.bind(this)}
+              jslog=${VisualLogging.dropDown().track({change: true}).context('scale')}
+              ${ref((el: Element|undefined) => { this.scaleItem = el as HTMLSelectElement; })}>
+      </select>
+
+      <devtools-button .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'center-focus-weak',
+                                toggledIconName: 'center-focus-weak', toggleType: Buttons.Button.ToggleType.PRIMARY} as Buttons.Button.ButtonData}
+                       class="toolbar-button" title=${i18nString(UIStrings.autoadjustZoom)}
+                       ${bindToSetting(this.autoAdjustScaleSetting)}>
+      </devtools-button>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+
+      <span>
+        ${i18nTemplate(str_, UIStrings.dpr, {
+          PH1: html`
+            <select class="dark-text toolbar-has-dropdown-shrinkable"
+                    title=${i18nString(UIStrings.devicePixelRatio)}
+                    aria-label=${i18nString(UIStrings.devicePixelRatio)}
+                    @change=${this.onDeviceScaleChange.bind(this)}
+                    jslog=${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}
+                    ${ref(el => { this.deviceScaleItem = el as HTMLSelectElement; })}>
+            </select>`
+        })}
+      </span>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <select class="dark-text toolbar-has-dropdown-shrinkable
+                     ${classMap({hidden: !this.showUserAgentTypeSetting.get()})}"
+              title=${i18nString(UIStrings.deviceType)}
+              aria-label=${i18nString(UIStrings.deviceType)}
+              @change=${this.onUAChange.bind(this)}
+              jslog=${VisualLogging.dropDown().track({change: true}).context('device-type')}
+              ${ref(el => { this.uaItem = el as HTMLSelectElement; })}>
+      </select>
+      <select class="dark-text" ${widget(MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect, {
+        title: i18nString(UIStrings.throttling),
+        bindToGlobalConditions: true,
+      })}></select>
+      <select class="dark-text toolbar-has-dropdown-shrinkable" ${widget(
+          MobileThrottling.ThrottlingManager.SaveDataOverrideSelect)}></select>
+
+      <div class="device-mode-empty-toolbar-element"></div>
+      <devtools-button class="toolbar-button"
+                       .data=${{variant: Buttons.Button.Variant.ICON, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
+                       jslog=${VisualLogging.action('screen-rotation').track({click: true})}
+                       @click=${this.modeMenuClicked.bind(this)}
+                       ${ref(el => { this.modeButton = el as Buttons.Button.Button; })}>
+      </devtools-button>
+
+      <!-- Show dual screen toolbar -->
+      <devtools-button class="toolbar-button"
+                       .data=${{variant: Buttons.Button.Variant.ICON, iconName: 'device-fold'} as Buttons.Button.ButtonData}
+                       jslog=${VisualLogging.action('device-fold').track({click: true})}
+                       @click=${this.spanClicked.bind(this)}
+                       ${ref(el => { this.spanButton = el as Buttons.Button.Button; })}>
+      </devtools-button>
+
+      <!-- Show posture toolbar menu for foldable devices. -->
+      <div class="device-mode-empty-toolbar-element"></div>
+      <select class="dark-text toolbar-has-dropdown-shrinkable"
+              title=${i18nString(UIStrings.devicePosture)}
+              aria-label=${i18nString(UIStrings.devicePosture)}
+              @change=${this.onPostureChange.bind(this)}
+              jslog=${VisualLogging.dropDown().track({change: true}).context('device-posture')}
+              ${ref(el => { this.postureItem = el as HTMLSelectElement; })}>
+      </select>`,
+      mainToolbar);
+    // clang-format on
+    const deviceScaleSpan = this.deviceScaleItem.parentElement as HTMLElement;
     for (const node of Array.from(deviceScaleSpan.childNodes)) {
-      if (node === this.deviceScaleItem) {
-        this.deviceScaleItem.classList.toggle('hidden', !this.showDeviceScaleFactorSetting.get());
-        this.deviceScaleItems.push(this.deviceScaleItem);
-        mainToolbar.append(this.deviceScaleItem);
-      } else {
-        const item = new UI.Toolbar.ToolbarText(node.textContent || '');
-        item.setVisible(this.showDeviceScaleFactorSetting.get());
-        this.deviceScaleItems.push(item.element);
-        mainToolbar.appendToolbarItem(item);
+      if (node instanceof HTMLElement) {
+        this.deviceScaleItems.push(node);
+      } else if (node instanceof Text) {
+        const span = document.createElement('span');
+        span.classList.add('toolbar-text');
+        span.appendChild(node);
+        this.deviceScaleItems.push(span);
       }
     }
-    mainToolbar.append(this.createEmptyToolbarElement());
-    this.uaItem = document.createElement('select');
-    this.uaItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    this.uaItem.title = i18nString(UIStrings.deviceType);
-    UI.ARIAUtils.setLabel(this.uaItem, i18nString(UIStrings.deviceType));
-    this.uaItem.addEventListener('change', this.onUAChange.bind(this));
-    this.uaItem.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context('device-type')}`);
-    this.uaItem.classList.toggle('hidden', !this.showUserAgentTypeSetting.get());
-    mainToolbar.append(this.uaItem);
-
-    MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
-        mainToolbar, i18nString(UIStrings.throttling));
-    const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
-    saveDataItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    mainToolbar.append(saveDataItem);
-
-    mainToolbar.append(this.createEmptyToolbarElement());
-    this.modeButton = new Buttons.Button.Button();
-    this.modeButton.classList.add('toolbar-button');
-    this.modeButton.data = {variant: Buttons.Button.Variant.ICON, iconName: 'screen-rotation'};
-    this.modeButton.setAttribute('jslog', `${VisualLogging.action('screen-rotation').track({click: true})}`);
-    this.modeButton.addEventListener('click', this.modeMenuClicked.bind(this));
-    mainToolbar.append(this.modeButton);
-
-    // Show dual screen toolbar.
-    this.spanButton = new Buttons.Button.Button();
-    this.spanButton.classList.add('toolbar-button');
-    this.spanButton.data = {variant: Buttons.Button.Variant.ICON, iconName: 'device-fold'};
-    this.spanButton.setAttribute('jslog', `${VisualLogging.action('device-fold').track({click: true})}`);
-    this.spanButton.addEventListener('click', this.spanClicked.bind(this));
-    mainToolbar.append(this.spanButton);
-
-    // Show posture toolbar menu for foldable devices.
-    mainToolbar.append(this.createEmptyToolbarElement());
-    this.postureItem = document.createElement('select');
-    this.postureItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
-    this.postureItem.title = i18nString(UIStrings.devicePosture);
-    UI.ARIAUtils.setLabel(this.postureItem, i18nString(UIStrings.devicePosture));
-    this.postureItem.addEventListener('change', this.onPostureChange.bind(this));
-    this.postureItem.setAttribute(
-        'jslog', `${VisualLogging.dropDown().track({change: true}).context('device-posture')}`);
-    mainToolbar.append(this.postureItem);
-
+    deviceScaleSpan.replaceWith(...this.deviceScaleItems);
+    this.updateDeviceScaleFactorVisibility();
     return mainToolbar;
   }
 

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -206,7 +206,6 @@ export class SidebarSingleInsightSet extends UI.Widget.Widget {
     const activeInsight = this.#data.activeInsight;
     const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
     const isActiveInsight = activeInsight?.model === model;
-
     const componentClass = INSIGHT_NAME_TO_COMPONENT[insightName as keyof typeof INSIGHT_NAME_TO_COMPONENT];
     const widgetConfig = {
       selected: isActiveInsight,
@@ -222,10 +221,19 @@ export class SidebarSingleInsightSet extends UI.Widget.Widget {
       fieldMetrics,
     };
 
+    const items = [{componentClass, widgetConfig}];
+
     // clang-format off
-    return html`<devtools-widget class="insight-component-widget" ?highlight-insight=${isActiveInsight && this.#isActiveInsightHighlighted}
-      ${widget(componentClass, widgetConfig)}
-    ></devtools-widget>`;
+    // We use `repeat` to force the widget to be recreated if the model
+    // changes (e.g. on new trace import). If Lit tries to reuse DOM
+    // across different traces, where the ordering of the sidebar
+    // insights changes, this causes errors.
+    const output = Lit.Directives.repeat(items, data => data.widgetConfig.model, data => {
+      return html`<devtools-widget class="insight-component-widget" ?highlight-insight=${isActiveInsight && this.#isActiveInsightHighlighted}
+        ${widget(data.componentClass, data.widgetConfig)}
+      ></devtools-widget>`;
+    });
+    return html`${output}`;
     // clang-format on
   }
 

package/front_end/panels/timeline/components/insights/DuplicatedJavaScript.ts

@@ -58,6 +58,10 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicatedJavaScr
       return Lit.nothing;
     }
 
+    if (this.model.duplicationGroupedByNodeModules.size === 0) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noDuplicatedJavaScript)}</div>`;
+    }
+
     const rows: TableDataRow[] =
         [...this.model.duplicationGroupedByNodeModules.entries()].slice(0, 10).map(([source, data]) => {
           const scriptToOverlay = new Map();

package/front_end/panels/timeline/components/insights/FontDisplay.ts

@@ -73,6 +73,10 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
       return Lit.nothing;
     }
 
+    if (this.model.fonts.length === 0) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noFonts)}</div>`;
+    }
+
     const rows = createLimitedRows(this.model.fonts, this);
 
     // clang-format off

package/front_end/panels/timeline/components/insights/LegacyJavaScript.ts

@@ -58,6 +58,10 @@ export class LegacyJavaScript extends BaseInsightComponent<LegacyJavaScriptInsig
       return Lit.nothing;
     }
 
+    if (this.model.legacyJavaScriptResults.size === 0) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLegacyJavaScript)}</div>`;
+    }
+
     const rows: TableDataRow[] =
         [...this.model.legacyJavaScriptResults.entries()].slice(0, 10).map(([script, result]) => {
           const overlays: Trace.Types.Overlays.Overlay[] = [];

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e388465394450fcfccc5529cf634c8561999f3b8
+Revision: 9f3e9aaccba63bd2ec30334e45e0bfd07ebcc8f1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -152,18 +152,236 @@ interface NodeChildren {
 export interface ObjectTreeOptions {
   readonly propertiesMode: ObjectPropertiesMode;
   readonly readOnly: boolean;
+  readonly expansionTracker?: ObjectTreeExpansionTracker;
+}
+
+type KeyTypes = {
+  [K in keyof Required<NodeChildren>]: Key<Required<NodeChildren>[K][0]>;
+};
+
+type Key<T> = T extends ObjectTreeNode ? string : T extends ArrayGroupTreeNode ? ArrayGroupRange : never;
+interface TrackingKey {
+  type: keyof KeyTypes;
+  key: KeyTypes[keyof KeyTypes];
+}
+
+class NodeExpansionLog {
+  properties = new Map<string, NodeExpansionLog>();
+  internalProperties = new Map<string, NodeExpansionLog>();
+  arrayRanges = new Map<string, NodeExpansionLog>();
+  accessors = new Map<string, NodeExpansionLog>();
+
+  remove(key: TrackingKey): boolean {
+    return this[key.type].delete(NodeExpansionLog.#serializeKey(key));
+  }
+
+  get(key: TrackingKey): NodeExpansionLog|undefined {
+    return this[key.type].get(NodeExpansionLog.#serializeKey(key));
+  }
+
+  getOrInsert(key: TrackingKey): NodeExpansionLog {
+    const map = this[key.type];
+    const serializedKey = NodeExpansionLog.#serializeKey(key);
+    const log = map.get(serializedKey) ?? new NodeExpansionLog();
+    if (!map.has(serializedKey)) {
+      map.set(serializedKey, log);
+    }
+    return log;
+  }
+
+  clear(type: keyof KeyTypes): void {
+    this[type].clear();
+  }
+
+  clearMissing(type: keyof KeyTypes, seen: TrackingKey[]): void {
+    const seenSet = new Set(seen.map(NodeExpansionLog.#serializeKey));
+    const map = this[type];
+    for (const key of map.keys()) {
+      if (!seenSet.has(key)) {
+        map.delete(key);
+      }
+    }
+  }
+
+  get empty(): boolean {
+    return this.properties.size === 0 && this.internalProperties.size === 0 && this.arrayRanges.size === 0 &&
+        this.accessors.size === 0;
+  }
+
+  static #serializeKey(key: TrackingKey): string {
+    if (typeof key.key === 'string') {
+      return `${key.type}:${key.key}`;
+    }
+    return `${key.type}:${key.key.fromIndex}-${key.key.toIndex}`;
+  }
+}
+
+export class ObjectTreeExpansionTracker {
+  #log: NodeExpansionLog|null = null;
+
+  /**
+   * For nodes physically nested within a parent's [[Prototype]] internal property, the node's
+   * parent property points to the logical parent (skipping the [[Prototype]] node). This helper
+   * finds that skipped [[Prototype]] node if it contains the given node.
+   */
+  static #protoParent(node: ObjectTreeNodeBase): ObjectTreeNode|undefined {
+    if (!(node instanceof ObjectTreeNode)) {
+      return undefined;
+    }
+    return node.parent?.children?.internalProperties?.find(
+        p => p.name === '[[Prototype]]' && p.children?.properties?.includes(node));
+  }
+
+  static #keyType(node: ObjectTreeNodeBase): keyof NodeChildren|null {
+    if (node instanceof ObjectTreeNode) {
+      if (node.parent?.children?.properties?.includes(node)) {
+        return 'properties';
+      }
+      if (node.parent?.children?.internalProperties?.includes(node)) {
+        return 'internalProperties';
+      }
+      if (node.parent?.children?.accessors?.includes(node)) {
+        return 'accessors';
+      }
+      const proto = ObjectTreeExpansionTracker.#protoParent(node);
+      if (proto) {
+        return 'properties';
+      }
+    }
+    if (node instanceof ArrayGroupTreeNode && node.parent?.children?.arrayRanges?.includes(node)) {
+      return 'arrayRanges';
+    }
+    return null;
+  }
+
+  static #key(type: keyof KeyTypes, node: ObjectTreeNodeBase): TrackingKey|null {
+    switch (type) {
+      case 'arrayRanges':
+        return node instanceof ArrayGroupTreeNode ? {type, key: node.range} : null;
+      default:
+        return node instanceof ObjectTreeNode ? {type, key: node.name} : null;
+    }
+  }
+
+  clear(): void {
+    this.#log = null;
+  }
+
+  async #apply(log: NodeExpansionLog, node: ObjectTreeNodeBase): Promise<void> {
+    const apply = async<KeyType extends keyof KeyTypes>(type: KeyType): Promise<void> => {
+      const nodes = node.children?.[type];
+      if (!nodes) {
+        log.clear(type);
+        return;
+      }
+      const seen: TrackingKey[] = [];
+      for (const childNode of nodes) {
+        const key = ObjectTreeExpansionTracker.#key(type, childNode);
+        if (!key) {
+          continue;
+        }
+        const childLog = log.get(key);
+        if (childLog) {
+          await this.#apply(childLog, childNode);
+          seen.push(key);
+        }
+      }
+      log.clearMissing(type, seen);
+    };
+
+    node.expanded = true;
+    await node.populateChildrenIfNeeded();
+    await apply('properties');
+    await apply('internalProperties');
+    await apply('arrayRanges');
+    await apply('accessors');
+  }
+
+  async apply(node: ObjectTree): Promise<void> {
+    if (this.#log) {
+      return await this.#apply(this.#log, node);
+    }
+  }
+
+  static * #path(node: ObjectTreeNodeBase|undefined): Generator<TrackingKey> {
+    if (!node) {
+      return;
+    }
+
+    const proto = ObjectTreeExpansionTracker.#protoParent(node);
+    if (proto) {
+      yield* this.#path(proto);
+    } else {
+      yield* this.#path(node.parent);
+    }
+
+    const keyType = this.#keyType(node);
+    const key = keyType && ObjectTreeExpansionTracker.#key(keyType, node);
+    if (key) {
+      yield key;
+    }
+  }
+
+  collapse(node: ObjectTreeNodeBase): void {
+    if (!this.#log) {
+      return;
+    }
+    if (node instanceof ObjectTree) {
+      this.#log = null;
+      return;
+    }
+
+    let lastKey;
+    let parent: NodeExpansionLog|null = null;
+    let log: NodeExpansionLog = this.#log;
+    for (const key of ObjectTreeExpansionTracker.#path(node)) {
+      lastKey = key;
+      parent = log;
+      const nextLog = log.get(key);
+      if (!nextLog) {
+        return;
+      }
+      log = nextLog;
+    }
+
+    if (lastKey && parent) {
+      parent.remove(lastKey);
+    }
+  }
+
+  expand(node: ObjectTreeNodeBase): void {
+    if (!this.#log) {
+      this.#log = new NodeExpansionLog();
+    }
+    let log: NodeExpansionLog = this.#log;
+    for (const key of ObjectTreeExpansionTracker.#path(node)) {
+      log = log.getOrInsert(key);
+    }
+  }
 }
 
 export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<ObjectTreeNodeBase.EventTypes> {
   #children?: NodeChildren;
   protected filter: {includeNullOrUndefinedValues: boolean, regex: RegExp|null}|null = null;
   protected extraProperties: ObjectTreeNode[] = [];
-  expanded = false;
+  #expanded = false;
 
   constructor(readonly parent: ObjectTreeNodeBase|undefined, protected readonly options: ObjectTreeOptions) {
     super();
     this.filter = parent?.filter ?? null;
   }
+  get expanded(): boolean {
+    return this.#expanded;
+  }
+
+  set expanded(val: boolean) {
+    if (val) {
+      this.options.expansionTracker?.expand(this);
+    } else {
+      this.options.expansionTracker?.collapse(this);
+    }
+    this.#expanded = val;
+  }
 
   get readOnly(): boolean {
     return this.options.readOnly;
@@ -253,11 +471,22 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     return this.#children;
   }
 
+  #populatePromise?: Promise<NodeChildren>;
   async populateChildrenIfNeeded(): Promise<NodeChildren> {
-    if (!this.#children) {
-      this.#children = await this.populateChildrenIfNeededImpl();
+    if (this.#children) {
+      return this.#children;
     }
-    return this.#children;
+    if (!this.#populatePromise) {
+      this.#populatePromise = this.populateChildrenIfNeededImpl()
+                                  .then(children => {
+                                    this.#children = children;
+                                    return children;
+                                  })
+                                  .finally(() => {
+                                    this.#populatePromise = undefined;
+                                  });
+    }
+    return await this.#populatePromise;
   }
 
   protected async populateChildrenIfNeededImpl(): Promise<NodeChildren> {
@@ -271,9 +500,12 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
     if (this.arrayLength > ARRAY_LOAD_THRESHOLD) {
       const ranges = await arrayRangeGroups(object, 0, this.arrayLength - 1);
       const arrayRanges = ranges?.ranges.map(
-          ([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(
-              object, {fromIndex, toIndex, count}, effectiveParent,
-              {readOnly: this.readOnly, propertiesMode: this.propertiesMode}));
+          ([fromIndex, toIndex, count]) =>
+              new ArrayGroupTreeNode(object, {fromIndex, toIndex, count}, effectiveParent, {
+                readOnly: this.readOnly,
+                propertiesMode: this.propertiesMode,
+                expansionTracker: this.options.expansionTracker
+              }));
       if (!arrayRanges) {
         return {};
       }
@@ -282,15 +514,18 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
           await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(
               this.object, true /* generatePreview */, true /* nonIndexedPropertiesOnly */);
 
-      const properties = objectProperties?.map(
-          p => new ObjectTreeNode(
-              p, effectiveParent,
-              {readOnly: this.readOnly, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED}));
-
-      const internalProperties = objectInternalProperties?.map(
-          p => new ObjectTreeNode(
-              p, effectiveParent,
-              {readOnly: this.readOnly, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED}));
+      const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
+                                                 readOnly: this.readOnly,
+                                                 propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+                                                 expansionTracker: this.options.expansionTracker
+                                               }));
+
+      const internalProperties =
+          objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
+                                          readOnly: this.readOnly,
+                                          propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+                                          expansionTracker: this.options.expansionTracker
+                                        }));
       return {arrayRanges, properties, internalProperties};
     }
 
@@ -307,18 +542,21 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
         break;
     }
 
-    const properties = objectProperties?.map(
-        p => new ObjectTreeNode(
-            p, effectiveParent,
-            {readOnly: this.readOnly, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED}));
+    const properties = objectProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
+                                               readOnly: this.readOnly,
+                                               propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+                                               expansionTracker: this.options.expansionTracker
+                                             }));
     properties?.push(...this.extraProperties);
     properties?.sort(ObjectPropertiesSection.compareProperties);
-    const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties);
-
-    const internalProperties = objectInternalProperties?.map(
-        p => new ObjectTreeNode(
-            p, effectiveParent,
-            {readOnly: this.readOnly, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED}));
+    const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties, this.options);
+
+    const internalProperties =
+        objectInternalProperties?.map(p => new ObjectTreeNode(p, effectiveParent, {
+                                        readOnly: this.readOnly,
+                                        propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+                                        expansionTracker: this.options.expansionTracker
+                                      }));
     return {properties, internalProperties, accessors};
   }
 
@@ -336,26 +574,34 @@ export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrap
   }
 
   addExtraProperties(...properties: SDK.RemoteObject.RemoteObjectProperty[]): void {
-    this.extraProperties.push(...properties.map(
-        p => new ObjectTreeNode(
-            p, this, {readOnly: this.readOnly, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED})));
+    this.extraProperties.push(...properties.map(p => new ObjectTreeNode(p, this, {
+                                                  readOnly: this.readOnly,
+                                                  propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+                                                  expansionTracker: this.options.expansionTracker
+                                                })));
   }
 
-  static getGettersAndSetters(properties: ObjectTreeNode[]): ObjectTreeNode[] {
+  static getGettersAndSetters(properties: ObjectTreeNode[], options: ObjectTreeOptions): ObjectTreeNode[] {
     const gettersAndSetters = [];
     for (const property of properties) {
       if (property.property.isOwn) {
         if (property.property.getter) {
           const getterProperty = new SDK.RemoteObject.RemoteObjectProperty(
               'get ' + property.property.name, property.property.getter, false);
-          gettersAndSetters.push(new ObjectTreeNode(
-              getterProperty, property.parent, {propertiesMode: property.propertiesMode, readOnly: property.readOnly}));
+          gettersAndSetters.push(new ObjectTreeNode(getterProperty, property.parent, {
+            propertiesMode: property.propertiesMode,
+            readOnly: property.readOnly,
+            expansionTracker: options.expansionTracker
+          }));
         }
         if (property.property.setter) {
           const setterProperty = new SDK.RemoteObject.RemoteObjectProperty(
               'set ' + property.property.name, property.property.setter, false);
-          gettersAndSetters.push(new ObjectTreeNode(
-              setterProperty, property.parent, {propertiesMode: property.propertiesMode, readOnly: property.readOnly}));
+          gettersAndSetters.push(new ObjectTreeNode(setterProperty, property.parent, {
+            propertiesMode: property.propertiesMode,
+            readOnly: property.readOnly,
+            expansionTracker: options.expansionTracker
+          }));
         }
       }
     }
@@ -388,12 +634,18 @@ export class ObjectTree extends ObjectTreeNodeBase {
   }
 }
 
-class ArrayGroupTreeNode extends ObjectTreeNodeBase {
+interface ArrayGroupRange {
+  fromIndex: number;
+  toIndex: number;
+  count: number;
+}
+
+export class ArrayGroupTreeNode extends ObjectTreeNodeBase {
   readonly #object: SDK.RemoteObject.RemoteObject;
-  readonly #range: {fromIndex: number, toIndex: number, count: number};
+  readonly #range: ArrayGroupRange;
   constructor(
-      object: SDK.RemoteObject.RemoteObject, range: {fromIndex: number, toIndex: number, count: number},
-      parent: ObjectTreeNodeBase, options: ObjectTreeOptions) {
+      object: SDK.RemoteObject.RemoteObject, range: ArrayGroupRange, parent: ObjectTreeNodeBase,
+      options: ObjectTreeOptions) {
     super(parent, options);
     this.#object = object;
     this.#range = range;
@@ -403,9 +655,11 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     if (this.#range.count > ArrayGroupingTreeElement.bucketThreshold) {
       const ranges = await arrayRangeGroups(this.object, this.#range.fromIndex, this.#range.toIndex);
       const arrayRanges = ranges?.ranges.map(
-          ([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(
-              this.object, {fromIndex, toIndex, count}, this,
-              {readOnly: this.readOnly, propertiesMode: this.propertiesMode}));
+          ([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(this.object, {fromIndex, toIndex, count}, this, {
+            readOnly: this.readOnly,
+            propertiesMode: this.propertiesMode,
+            expansionTracker: this.options.expansionTracker
+          }));
       return {arrayRanges};
     }
 
@@ -421,11 +675,14 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     const allProperties =
         await arrayFragment.getAllProperties(false /* accessorPropertiesOnly */, true /* generatePreview */);
     arrayFragment.release();
-    const properties = allProperties.properties?.map(
-        p => new ObjectTreeNode(p, this, {propertiesMode: this.propertiesMode, readOnly: this.readOnly}));
+    const properties = allProperties.properties?.map(p => new ObjectTreeNode(p, this, {
+                                                       propertiesMode: this.propertiesMode,
+                                                       readOnly: this.readOnly,
+                                                       expansionTracker: this.options.expansionTracker
+                                                     }));
     properties?.push(...this.extraProperties);
     properties?.sort(ObjectPropertiesSection.compareProperties);
-    const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties);
+    const accessors = properties && ObjectTreeNodeBase.getGettersAndSetters(properties, this.options);
     return {properties, accessors};
   }
 
@@ -433,7 +690,7 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     return this.#range.fromIndex === this.#range.toIndex;
   }
 
-  get range(): {fromIndex: number, toIndex: number, count: number} {
+  get range(): ArrayGroupRange {
     return this.#range;
   }
 
@@ -559,8 +816,10 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       object: SDK.RemoteObject.RemoteObject, title?: string|Element|null, linkifier?: Components.Linkifier.Linkifier,
       showOverflow?: boolean, editable = true) {
     super();
-    this.root = new ObjectTree(
-        object, {readOnly: !editable, propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED});
+    this.root = new ObjectTree(object, {
+      readOnly: !editable,
+      propertiesMode: ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
     if (!showOverflow) {
       this.setHideOverflow(true);
     }
@@ -995,15 +1254,20 @@ export class RootElement extends UI.TreeOutline.TreeElement {
     this.toggleOnClick = true;
     this.listItemElement.classList.add('object-properties-section-root-element');
     this.listItemElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
+    if (object.expanded) {
+      this.expand();
+    }
   }
 
   override onexpand(): void {
+    this.object.expanded = true;
     if (this.treeOutline) {
       this.treeOutline.element.classList.add('expanded');
     }
   }
 
   override oncollapse(): void {
+    this.object.expanded = false;
     if (this.treeOutline) {
       this.treeOutline.element.classList.remove('expanded');
     }
@@ -1350,7 +1614,11 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.maxNumPropertiesToShow = InitialVisibleChildrenLimit;
     this.listItemElement.addEventListener('contextmenu', this.contextMenuFired.bind(this), false);
     this.listItemElement.dataset.objectPropertyNameForTest = property.name;
+    this.updateExpandable();
     this.setExpandRecursively(property.name !== '[[Prototype]]');
+    if (property.expanded) {
+      this.expand();
+    }
   }
 
   static async populate(
@@ -1523,10 +1791,12 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onexpand(): void {
+    this.property.expanded = true;
     this.#widget.expanded = true;
   }
 
   override oncollapse(): void {
+    this.property.expanded = false;
     this.#widget.expanded = false;
   }
 
@@ -1750,6 +2020,9 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
     this.#child.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.onpopulate, this);
     this.toggleOnClick = true;
     this.linkifier = linkifier;
+    if (child.expanded) {
+      this.expand();
+    }
   }
 
   static async populate(
@@ -1773,6 +2046,14 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
     ObjectPropertyTreeElement.populateWithProperties(treeNode, children, false, false, linkifier);
   }
 
+  override onexpand(): void {
+    this.#child.expanded = true;
+  }
+
+  override oncollapse(): void {
+    this.#child.expanded = false;
+  }
+
   override async onpopulate(): Promise<void> {
     this.removeChildren();
     await ObjectPropertyTreeElement.populate(this, this.#child, false, false, this.linkifier);

package/package.json

@@ -105,5 +105,5 @@
     "ip-address": "10.1.0",
     "basic-ftp": "5.2.2"
   },
-  "version": "1.0.1624583"
+  "version": "1.0.1625079"
 }