chrome-devtools-frontend 1.0.1697595 → 1.0.1697998

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/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/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/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: c6c44ec6a59862a1b0027bc453fcacb9dce75c9e
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE