chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/panels/network/NetworkConfigView.ts

@@ -65,6 +65,19 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let networkConfigViewInstance: NetworkConfigView;
 
 export class NetworkConfigView extends UI.Widget.VBox {
+  readonly #cacheDisabledSetting =
+      Common.Settings.Settings.instance().resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor);
+  readonly #customUserAgentSetting = Common.Settings.Settings.instance().createSetting('custom-user-agent', '');
+  readonly #customUserAgentMetadataSetting =
+      Common.Settings.Settings.instance().createSetting<Protocol.Emulation.UserAgentMetadata|null>(
+          'custom-user-agent-metadata', null);
+
+  #autoCheckbox?: UI.UIUtils.CheckboxLabel;
+  #customUserAgentSelectBox?: HTMLElement;
+  #customSelectAndInput?: {select: HTMLSelectElement, input: HTMLInputElement, error: HTMLElement};
+  #clientHints?: EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm;
+  #userAgentUpdateButtonStatusText?: HTMLElement;
+
   constructor() {
     super({
       jslog: `${VisualLogging.panel('network-conditions').track({resize: true})}`,
@@ -91,18 +104,14 @@ export class NetworkConfigView extends UI.Widget.VBox {
     return networkConfigViewInstance;
   }
 
-  static createUserAgentSelectAndInput(title: string): {
+  private createUserAgentSelectAndInput(title: string): {
     select: HTMLSelectElement,
     input: HTMLInputElement,
     error: HTMLElement,
   } {
-    const userAgentSetting = Common.Settings.Settings.instance().createSetting('custom-user-agent', '');
-    const userAgentMetadataSetting =
-        Common.Settings.Settings.instance().createSetting<Protocol.Emulation.UserAgentMetadata|null>(
-            'custom-user-agent-metadata', null);
     const userAgentSelectElement = document.createElement('select');
     userAgentSelectElement.setAttribute(
-        'jslog', `${VisualLogging.dropDown().track({change: true}).context(userAgentSetting.name)}`);
+        'jslog', `${VisualLogging.dropDown().track({change: true}).context(this.#customUserAgentSetting.name)}`);
     UI.ARIAUtils.setLabel(userAgentSelectElement, title);
 
     const customOverride = {title: i18nString(UIStrings.custom), value: 'custom'};
@@ -132,9 +141,9 @@ export class NetworkConfigView extends UI.Widget.VBox {
 
     const otherUserAgentElement = UI.UIUtils.createInput('', 'text');
     otherUserAgentElement.setAttribute(
-        'jslog', `${VisualLogging.textField().track({change: true}).context(userAgentSetting.name)}`);
-    otherUserAgentElement.value = userAgentSetting.get();
-    UI.Tooltip.Tooltip.install(otherUserAgentElement, userAgentSetting.get());
+        'jslog', `${VisualLogging.textField().track({change: true}).context(this.#customUserAgentSetting.name)}`);
+    otherUserAgentElement.value = this.#customUserAgentSetting.get();
+    UI.Tooltip.Tooltip.install(otherUserAgentElement, this.#customUserAgentSetting.get());
     otherUserAgentElement.placeholder = i18nString(UIStrings.enterACustomUserAgent);
     otherUserAgentElement.required = true;
     UI.ARIAUtils.setLabel(otherUserAgentElement, otherUserAgentElement.placeholder);
@@ -146,57 +155,11 @@ export class NetworkConfigView extends UI.Widget.VBox {
       errorElement.textContent = i18nString(UIStrings.customUserAgentFieldIsRequired);
     }
 
-    settingChanged();
-    userAgentSelectElement.addEventListener('change', userAgentSelected, false);
-    otherUserAgentElement.addEventListener('input', applyOtherUserAgent, false);
-
-    function userAgentSelected(): void {
-      const value = userAgentSelectElement.options[userAgentSelectElement.selectedIndex].value;
-      if (value !== customOverride.value) {
-        userAgentSetting.set(value);
-        otherUserAgentElement.value = value;
-        UI.Tooltip.Tooltip.install(otherUserAgentElement, value);
-        const userAgentMetadata = getUserAgentMetadata(value);
-        userAgentMetadataSetting.set(userAgentMetadata);
-        SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(value, userAgentMetadata);
-      } else {
-        userAgentMetadataSetting.set(null);
-        otherUserAgentElement.select();
-      }
-      errorElement.textContent = '';
-      const userAgentChangeEvent = new CustomEvent('user-agent-change', {detail: {value}});
-      userAgentSelectElement.dispatchEvent(userAgentChangeEvent);
-    }
-
-    function settingChanged(): void {
-      const value = userAgentSetting.get();
-      const options = userAgentSelectElement.options;
-      let selectionRestored = false;
-      for (let i = 0; i < options.length; ++i) {
-        if (options[i].value === value) {
-          userAgentSelectElement.selectedIndex = i;
-          selectionRestored = true;
-          break;
-        }
-      }
-
-      if (!selectionRestored) {
-        userAgentSelectElement.selectedIndex = 0;
-      }
-    }
-
-    function applyOtherUserAgent(): void {
-      if (userAgentSetting.get() !== otherUserAgentElement.value) {
-        if (!otherUserAgentElement.value) {
-          errorElement.textContent = i18nString(UIStrings.customUserAgentFieldIsRequired);
-        } else {
-          errorElement.textContent = '';
-        }
-        userAgentSetting.set(otherUserAgentElement.value);
-        UI.Tooltip.Tooltip.install(otherUserAgentElement, otherUserAgentElement.value);
-        settingChanged();
-      }
-    }
+    this.#settingChanged(userAgentSelectElement);
+    userAgentSelectElement.addEventListener('change', () => this.#onUserAgentSelect(userAgentSelectElement.value),
+                                            false);
+    otherUserAgentElement.addEventListener('input', () => this.#onCustomUserAgentInput(otherUserAgentElement.value),
+                                           false);
 
     return {select: userAgentSelectElement, input: otherUserAgentElement, error: errorElement};
   }
@@ -212,9 +175,8 @@ export class NetworkConfigView extends UI.Widget.VBox {
 
   private createCacheSection(): void {
     const section = this.createSection(i18nString(UIStrings.caching), 'network-config-disable-cache');
-    section.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.disableCache),
-        Common.Settings.Settings.instance().resolve(SDK.SDKSettings.cacheDisabledSettingDescriptor)));
+    section.appendChild(
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.disableCache), this.#cacheDisabledSetting));
   }
 
   private createNetworkThrottlingSection(): void {
@@ -227,82 +189,145 @@ export class NetworkConfigView extends UI.Widget.VBox {
   }
 
   private createUserAgentSection(): void {
-    const userAgentMetadataSetting =
-        Common.Settings.Settings.instance().createSetting<Protocol.Emulation.UserAgentMetadata|null>(
-            'custom-user-agent-metadata', null);
-    const customUserAgentSetting = Common.Settings.Settings.instance().createSetting('custom-user-agent', '');
-
     const title = i18nString(UIStrings.userAgent);
     const section = this.createSection(title, 'network-config-ua');
-    const autoCheckbox = UI.UIUtils.CheckboxLabel.create(
-        i18nString(UIStrings.selectAutomatically), true, undefined, customUserAgentSetting.name);
-    section.appendChild(autoCheckbox);
+    this.#autoCheckbox = UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.selectAutomatically), true, undefined,
+                                                         this.#customUserAgentSetting.name);
+    section.appendChild(this.#autoCheckbox);
 
-    customUserAgentSetting.addChangeListener(() => {
-      if (autoCheckbox.checked) {
+    this.#customUserAgentSetting.addChangeListener(() => {
+      if (this.#autoCheckbox?.checked) {
         return;
       }
-      const customUA = customUserAgentSetting.get();
+      const customUA = this.#customUserAgentSetting.get();
       const userAgentMetadata = getUserAgentMetadata(customUA);
       SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, userAgentMetadata);
     });
-    const customUserAgentSelectBox = section.createChild('div', 'network-config-ua-custom');
-    autoCheckbox.addEventListener('change', userAgentSelectBoxChanged);
-    const customSelectAndInput = NetworkConfigView.createUserAgentSelectAndInput(title);
-    customUserAgentSelectBox.appendChild(customSelectAndInput.select);
-    customUserAgentSelectBox.appendChild(customSelectAndInput.input);
-    customUserAgentSelectBox.appendChild(customSelectAndInput.error);
-
-    const clientHints = new EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm();
-    const userAgentMetaDataSetting = userAgentMetadataSetting.get();
-    const initialUserAgentMetaData = getUserAgentMetadata(customSelectAndInput.select.value);
-    clientHints.value = {
+    this.#customUserAgentSelectBox = section.createChild('div', 'network-config-ua-custom');
+    this.#autoCheckbox.addEventListener('change',
+                                        () => this.#onAutoCheckboxChange(this.#autoCheckbox?.checked ?? false));
+    this.#customSelectAndInput = this.createUserAgentSelectAndInput(title);
+    this.#customUserAgentSelectBox.appendChild(this.#customSelectAndInput.select);
+    this.#customUserAgentSelectBox.appendChild(this.#customSelectAndInput.input);
+    this.#customUserAgentSelectBox.appendChild(this.#customSelectAndInput.error);
+
+    this.#clientHints = new EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm();
+    const userAgentMetaDataSetting = this.#customUserAgentMetadataSetting.get();
+    const initialUserAgentMetaData = getUserAgentMetadata(this.#customSelectAndInput.select.value);
+    this.#clientHints.value = {
       showMobileCheckbox: true,
       showSubmitButton: true,
       metaData: userAgentMetaDataSetting || initialUserAgentMetaData || undefined,
     };
-    customUserAgentSelectBox.appendChild(clientHints);
+    this.#customUserAgentSelectBox.appendChild(this.#clientHints);
+
+    this.#clientHints.addEventListener('clienthintschange', () => this.#onClientHintsChange());
+    this.#clientHints.addEventListener('clienthintssubmit',
+                                       event => this.#onClientHintsSubmit((event as CustomEvent).detail.value as
+                                                                          Protocol.Emulation.UserAgentMetadata));
+
+    this.#userAgentUpdateButtonStatusText = section.createChild('span', 'status-text');
+    this.#userAgentUpdateButtonStatusText.textContent = '';
+
+    this.#onAutoCheckboxChange(this.#autoCheckbox.checked);
+  }
+
+  #onAutoCheckboxChange(checked: boolean): void {
+    const useCustomUA = !checked;
+    if (this.#customUserAgentSelectBox && this.#customSelectAndInput && this.#clientHints) {
+      this.#customUserAgentSelectBox.classList.toggle('checked', useCustomUA);
+      this.#customSelectAndInput.select.disabled = !useCustomUA;
+      this.#customSelectAndInput.input.disabled = !useCustomUA;
+      this.#customSelectAndInput.error.hidden = !useCustomUA;
+      this.#clientHints.disabled = !useCustomUA;
+    }
+    const customUA = useCustomUA ? this.#customUserAgentSetting.get() : '';
+    const userAgentMetadata = useCustomUA ? getUserAgentMetadata(customUA) : null;
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, userAgentMetadata);
+  }
 
-    customSelectAndInput.select.addEventListener('user-agent-change', (event: Event) => {
-      const userStringValue = (event as CustomEvent).detail.value;
-      const userAgentMetadata = userStringValue ? getUserAgentMetadata(userStringValue) : null;
-      clientHints.value = {
+  #onUserAgentSelect(value: string): void {
+    if (!this.#customSelectAndInput || !this.#clientHints || !this.#userAgentUpdateButtonStatusText) {
+      return;
+    }
+    const customOverride = 'custom';
+    if (value !== customOverride) {
+      this.#customUserAgentSetting.set(value);
+      this.#customSelectAndInput.input.value = value;
+      UI.Tooltip.Tooltip.install(this.#customSelectAndInput.input, value);
+      const userAgentMetadata = getUserAgentMetadata(value);
+      this.#customUserAgentMetadataSetting.set(userAgentMetadata);
+      SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(value, userAgentMetadata);
+      this.#clientHints.value = {
         metaData: userAgentMetadata || undefined,
         showMobileCheckbox: true,
         showSubmitButton: true,
       };
-      userAgentUpdateButtonStatusText.textContent = '';
-    });
+    } else {
+      this.#customUserAgentMetadataSetting.set(null);
+      this.#clientHints.value = {
+        showMobileCheckbox: true,
+        showSubmitButton: true,
+      };
+      this.#customSelectAndInput.input.select();
+    }
+    this.#customSelectAndInput.error.textContent = '';
+    this.#userAgentUpdateButtonStatusText.textContent = '';
+  }
 
-    clientHints.addEventListener('clienthintschange', () => {
-      customSelectAndInput.select.value = 'custom';
-      userAgentUpdateButtonStatusText.textContent = '';
-    });
+  #onCustomUserAgentInput(value: string): void {
+    if (!this.#customSelectAndInput) {
+      return;
+    }
+    if (this.#customUserAgentSetting.get() !== value) {
+      if (!value) {
+        this.#customSelectAndInput.error.textContent = i18nString(UIStrings.customUserAgentFieldIsRequired);
+      } else {
+        this.#customSelectAndInput.error.textContent = '';
+      }
+      this.#customUserAgentSetting.set(value);
+      UI.Tooltip.Tooltip.install(this.#customSelectAndInput.input, value);
+      this.#settingChanged(this.#customSelectAndInput.select);
+    }
+  }
 
-    clientHints.addEventListener('clienthintssubmit', event => {
-      const metaData: Protocol.Emulation.UserAgentMetadata = (event as CustomEvent).detail.value;
-      const customUA = customUserAgentSetting.get();
-      userAgentMetadataSetting.set(metaData);
-      SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, metaData);
-      userAgentUpdateButtonStatusText.textContent = i18nString(UIStrings.clientHintsStatusText);
-    });
+  #settingChanged(selectElement?: HTMLSelectElement): void {
+    const select = selectElement ?? this.#customSelectAndInput?.select;
+    if (!select) {
+      return;
+    }
+    const value = this.#customUserAgentSetting.get();
+    const options = select.options;
+    let selectionRestored = false;
+    for (let i = 0; i < options.length; ++i) {
+      if (options[i].value === value) {
+        select.selectedIndex = i;
+        selectionRestored = true;
+        break;
+      }
+    }
 
-    const userAgentUpdateButtonStatusText = section.createChild('span', 'status-text');
-    userAgentUpdateButtonStatusText.textContent = '';
+    if (!selectionRestored) {
+      select.selectedIndex = 0;
+    }
+  }
 
-    userAgentSelectBoxChanged();
+  #onClientHintsChange(): void {
+    if (!this.#customSelectAndInput || !this.#userAgentUpdateButtonStatusText) {
+      return;
+    }
+    this.#customSelectAndInput.select.value = 'custom';
+    this.#userAgentUpdateButtonStatusText.textContent = '';
+  }
 
-    function userAgentSelectBoxChanged(): void {
-      const useCustomUA = !autoCheckbox.checked;
-      customUserAgentSelectBox.classList.toggle('checked', useCustomUA);
-      customSelectAndInput.select.disabled = !useCustomUA;
-      customSelectAndInput.input.disabled = !useCustomUA;
-      customSelectAndInput.error.hidden = !useCustomUA;
-      clientHints.disabled = !useCustomUA;
-      const customUA = useCustomUA ? customUserAgentSetting.get() : '';
-      const userAgentMetadata = useCustomUA ? getUserAgentMetadata(customUA) : null;
-      SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, userAgentMetadata);
+  #onClientHintsSubmit(metaData: Protocol.Emulation.UserAgentMetadata): void {
+    if (!this.#userAgentUpdateButtonStatusText) {
+      return;
     }
+    const customUA = this.#customUserAgentSetting.get();
+    this.#customUserAgentMetadataSetting.set(metaData);
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setCustomUserAgentOverride(customUA, metaData);
+    this.#userAgentUpdateButtonStatusText.textContent = i18nString(UIStrings.clientHintsStatusText);
   }
 
   override wasShown(): void {

package/front_end/panels/network/NetworkPanel.ts

@@ -266,7 +266,8 @@ export class BackendLinking {
       }
       let backendLink = rule.template;
       for (const placeholder of rule.placeholders) {
-        backendLink = backendLink.replaceAll(placeholder, placeholderValues[placeholder] as string);
+        backendLink =
+            backendLink.replaceAll(placeholder, () => encodeURIComponent(placeholderValues[placeholder] as string));
       }
       try {
         return {label: rule.label, url: new URL(backendLink)};
@@ -311,14 +312,16 @@ export class NetworkPanel extends UI.Panel.Panel implements
   recordLogSetting: Common.Settings.Setting<boolean>;
   private readonly throttlingSelect: UI.Toolbar.ToolbarItem;
   private readonly displayScreenshotDelay: number;
-  readonly backendLinkingRulesSetting: Common.Settings.Setting<BackendLinkingRule[]> =
-      Common.Settings.Settings.instance().resolve(backendLinkingRulesSettingDescriptor);
-  readonly backendLinking: BackendLinking = new BackendLinking(this.backendLinkingRulesSetting);
+  readonly backendLinking: BackendLinking|null;
 
   constructor(displayScreenshotDelay: number) {
     super('network');
     this.registerRequiredCSS(networkPanelStyles);
 
+    const backendLinkingSetting =
+        Common.Settings.Settings.instance().maybeResolve(backendLinkingRulesSettingDescriptor);
+    this.backendLinking = 'setting' in backendLinkingSetting ? new BackendLinking(backendLinkingSetting.setting) : null;
+
     this.displayScreenshotDelay = displayScreenshotDelay;
     this.networkLogShowOverviewSetting =
         Common.Settings.Settings.instance().createSetting('network-log-show-overview', true);

package/front_end/panels/network/RequestHeadersView.ts

@@ -391,7 +391,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
       showResponseHeadersText: this.#showResponseHeadersText,
       showRequestHeadersText: this.#showRequestHeadersText,
       backendLink: Root.Runtime.hostConfig.devToolsNetworkBackendLinking?.enabled ?
-          NetworkPanel.instance().backendLinking.getLink(this.#request) :
+          NetworkPanel.instance().backendLinking?.getLink(this.#request) ?? null :
           null,
     };
 

package/front_end/panels/network/forward/BackendLinking.ts

@@ -41,9 +41,12 @@ export const BACKEND_LINKING_PLACEHOLDERS = [
 
 export type BackendLinkingPlaceholder = typeof BACKEND_LINKING_PLACEHOLDERS[number];
 
-export const backendLinkingRulesSettingDescriptor: Common.Settings.SettingDescriptor<BackendLinkingRule[]> = {
+export const backendLinkingRulesSettingDescriptor:
+    Common.Settings.ConditionalSettingDescriptor<BackendLinkingRule[], void> = {
   name: 'network.backend-linking-rules',
   type: Common.Settings.SettingType.ARRAY,
   defaultValue: [],
-  storageType: Common.Settings.SettingStorageType.SYNCED,
+  isAvailable: config => config.devToolsNetworkBackendLinking?.enabled ?
+      {status: Common.Settings.SettingAvailability.AVAILABLE} :
+      {status: Common.Settings.SettingAvailability.UNAVAILABLE, reason: undefined},
 };

package/front_end/panels/recorder/stepView.css

@@ -215,6 +215,7 @@ devtools-recorder-step-editor.is-selected {
 .step-actions {
   border: none;
   border-radius: 0;
+  flex-shrink: 0;
   height: var(--sys-size-11);
 
   --override-select-menu-show-button-border-radius: 0;

package/front_end/panels/security/SecurityPanel.ts

@@ -608,7 +608,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
         this.onPrimaryPageChanged, this);
 
-    this.sidebar.showLastSelectedElement();
+    this.sidebar.showOverview();
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): SecurityPanel {
@@ -657,7 +657,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   override wasShown(): void {
     super.wasShown();
     if (!this.visibleView) {
-      this.sidebar.showLastSelectedElement();
+      this.sidebar.showOverview();
     }
   }
 
@@ -808,7 +808,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    this.sidebar.showLastSelectedElement();
+    this.sidebar.showOverview();
     this.sidebar.clearOrigins();
     this.origins.clear();
     this.lastResponseReceivedForLoaderId.clear();
@@ -831,8 +831,8 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private onInterstitialShown(): void {
     // The panel might have been displaying the origin view on the
     // previously loaded page. When showing an interstitial, switch
-    // back to the sidebar's last shown view.
-    this.sidebar.showLastSelectedElement();
+    // back to the overview view.
+    this.sidebar.showOverview();
     this.sidebar.toggleOriginsList(true /* hidden */);
   }
 

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -208,7 +207,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class SecurityPanelSidebar extends UI.Widget.VBox {
-  readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
   #mainOrigin: string|null = null;
   #origins = new Map<Platform.DevToolsPath.UrlString, Protocol.Security.SecurityState>();
   #originsHidden = false;
@@ -222,9 +220,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     super(element);
     this.#view = view;
     this.registerRequiredCSS(lockIconStyles, sidebarStyles);
-
-    this.#securitySidebarLastItemSetting =
-        Common.Settings.Settings.instance().createSetting('security-last-selected-element-path', '');
   }
 
   set onShowOrigin(callback: (origin: Platform.DevToolsPath.UrlString|null) => void) {
@@ -233,12 +228,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
   override wasShown(): void {
     super.wasShown();
-    this.showLastSelectedElement();
+    this.requestUpdate();
   }
 
-  showLastSelectedElement(): void {
+  showOverview(): void {
     this.#selectedElementId = 'overview';
-    this.#securitySidebarLastItemSetting.set('overview');
     this.requestUpdate();
     this.#onShowOrigin?.(null);
   }
@@ -295,7 +289,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
       const element = {
         select: () => {
           this.#selectedElementId = origin;
-          this.#securitySidebarLastItemSetting.set(origin);
           this.requestUpdate();
           this.#onShowOrigin?.(origin);
         },
@@ -312,7 +305,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
   set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
     this.#selectedElementId = origin ?? 'overview';
-    this.#securitySidebarLastItemSetting.set(this.#selectedElementId);
     this.requestUpdate();
     this.#onShowOrigin?.(origin);
   }
@@ -333,7 +325,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     const output: ViewOutput = {
       onElementSelected: (id: string) => {
         this.#selectedElementId = id;
-        this.#securitySidebarLastItemSetting.set(id);
         this.requestUpdate();
       },
       onShowOrigin: (origin: Platform.DevToolsPath.UrlString|null) => {

package/front_end/panels/settings/BackendLinkingSettingsTab.ts

@@ -250,12 +250,17 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class BackendLinkingSettingsTab extends UI.Widget.VBox {
   readonly #view: View;
-  readonly #rulesSetting: Common.Settings.Setting<NetworkForward.BackendLinking.BackendLinkingRule[]> =
-      Common.Settings.Settings.instance().resolve(NetworkForward.BackendLinking.backendLinkingRulesSettingDescriptor);
+  readonly #rulesSetting: Common.Settings.Setting<NetworkForward.BackendLinking.BackendLinkingRule[]>;
 
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
+    const res = Common.Settings.Settings.instance().maybeResolve(
+        NetworkForward.BackendLinking.backendLinkingRulesSettingDescriptor);
+    if (!('setting' in res)) {
+      throw new Error('Backend linking setting is not available');
+    }
+    this.#rulesSetting = res.setting;
   }
 
   override wasShown(): void {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -540,7 +540,7 @@ export class DebuggerPlugin extends Plugin {
       if (!url) {
         return;
       }
-      scriptFile.addSourceMapURL(url);
+      scriptFile.addSourceMapURL(url, SDK.SourceMap.SourceMapProvenance.USER);
     }
 
     function addDebugInfoURL(

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -350,6 +350,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     // clang-format off
     return html`<li
           class=${classMap({'watch-expression-tree-item': true, 'watch-expression-editing': e.editing })}
+          ?open=${Boolean(e.result?.expanded)}
           @keydown=${onExpressionKeydown.bind(undefined, e)}
           @expand=${(event: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onExpand(e, event.detail.expanded)}
           role=treeitem>
@@ -364,12 +365,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               onContextMenu: (event: Event) => onContextMenu(e, event),
             })}></devtools-widget>
         ${e.editing || !e.result || e.exceptionDetails ||
-          !e.result.hasChildren || e.result.object.customPreview() ? nothing : html`
-          <ul role=group>
-            ${ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(
-                        e.result.children ?? {}, false /* skipProto */, false /* skipGettersAndSetters */, input.linkifier).map(
-                     node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
-          </ul>`}
+          !e.result.hasChildren || e.result.object.customPreview() ? nothing :
+          ObjectUI.ObjectPropertiesSection.renderObjectTree(e.result, input.linkifier)}
       </li>`;
     // clang-format on
   };
@@ -552,10 +549,9 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
         this.saveExpressions();
         this.requestUpdate();
       },
-      onExpand: async(e: WatchExpression, expanded: boolean): Promise<void> => {
-        if (expanded) {
-          await e.result?.populateChildrenIfNeeded();
-          this.requestUpdate();
+      onExpand: (e: WatchExpression, expanded: boolean): void => {
+        if (e.result) {
+          e.result.expanded = expanded;
         }
       },
     },
@@ -600,13 +596,12 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     return true;
   }
 
-  appendApplicableItems(
-      _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
-      target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame): void {
-    if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
-      if (!target.property.property.synthetic) {
+  appendApplicableItems(_event: Event, contextMenu: UI.ContextMenu.ContextMenu,
+                        target: ObjectUI.ObjectPropertiesSection.ObjectTreeNode|UISourceCodeFrame): void {
+    if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectTreeNode) {
+      if (!target.property.synthetic) {
         contextMenu.debugSection().appendItem(i18nString(UIStrings.addPropertyPathToWatch),
-                                              () => this.#focusAndAddExpressionToWatch(target.path()),
+                                              () => this.#focusAndAddExpressionToWatch(target.path),
                                               {jslogContext: 'add-property-path-to-watch'});
       }
       return;

package/front_end/panels/sources/sources-meta.ts

@@ -2035,7 +2035,7 @@ UI.ContextMenu.registerProvider({
   },
   contextTypes() {
     return [
-      ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement,
+      ObjectUI.ObjectPropertiesSection.ObjectTreeNode,
       ...maybeRetrieveContextTypes(Sources => [Sources.UISourceCodeFrame.UISourceCodeFrame]),
     ];
   },

package/front_end/panels/timeline/TimelineTreeView.ts

@@ -200,6 +200,9 @@ export class TimelineTreeView extends TimelineTreeViewBase implements UI.Searcha
   #compactMode = false;
   #maxLinkLength: number|undefined = undefined;
   #maxRows: number|undefined = undefined;
+  // Tracks whether a tree refresh was deferred while detached from the DOM,
+  // so it can be performed when the widget becomes visible again.
+  #dirty = false;
 
   /**
    * Determines if the first child in the data grid will be selected
@@ -392,7 +395,11 @@ export class TimelineTreeView extends TimelineTreeViewBase implements UI.Searcha
 
   override wasShown(): void {
     super.wasShown();
-    this.refreshTree();
+    // Only refresh if data or configuration changed while detached,
+    // avoiding rebuilding the DataGrid which resets expanded nodes and selection.
+    if (this.#dirty) {
+      this.refreshTree();
+    }
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, this.#onDataGridSelectionChange, this);
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.#onDataGridDeselection, this);
   }
@@ -510,8 +517,11 @@ export class TimelineTreeView extends TimelineTreeViewBase implements UI.Searcha
       // dropdown changes value. Thus, we bail out whenever the view is
       // not visible, which we know if the related element is detached
       // from the document.
+      // Mark dirty so that the refresh is deferred until shown.
+      this.#dirty = true;
       return;
     }
+    this.#dirty = false;
     this.linkifier.reset();
     this.dataGrid.rootNode().removeChildren();
     if (!this.#parsedTrace) {

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1621,9 +1621,6 @@ export class Overlays extends EventTarget {
         pin.setAttribute('role', 'button');
         pin.setAttribute('tabindex', '0');
         UI.ARIAUtils.setLabel(pin, i18nString(UIStrings.commentPin));
-        if (overlay.commentThreadId) {
-          pin.setAttribute('data-comment-id', overlay.commentThreadId);
-        }
         const cursor = document.createElement('div');
         cursor.classList.add('comment-cursor');
         pin.appendChild(cursor);

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: 199ac2cd7ab289e11c2236bd2cede848781213da
+Revision: 87625275b7c30150efc10c7dbf7c86982459704f
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE