chrome-devtools-frontend 1.0.1586699 → 1.0.1587905

package/front_end/panels/elements/ElementsPanel.ts

@@ -227,6 +227,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   domTreeButton?: HTMLElement;
   private selectedNodeOnReset?: SDK.DOMModel.DOMNode;
   private hasNonDefaultSelectedNode?: boolean;
+  #restorationGeneration = 0;
   private searchConfig?: UI.SearchableView.SearchConfig;
   private omitDefaultSelection?: boolean;
   private notFirstInspectElement?: boolean;
@@ -609,6 +610,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     if (focus) {
       this.selectedNodeOnReset = selectedNode;
       this.hasNonDefaultSelectedNode = true;
+      this.#restorationGeneration++;
     }
 
     const executionContexts = selectedNode.domModel().runtimeModel().executionContexts();
@@ -645,32 +647,128 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     const savedSelectedNodeOnReset = this.selectedNodeOnReset;
-    void restoreNode.call(this, domModel, this.selectedNodeOnReset || null);
+    void this.restoreSelectedNodeAfterUpdate(domModel, this.selectedNodeOnReset || null, savedSelectedNodeOnReset);
+  }
+
+  /**
+   * Best-effort restoration of the previously focused node after a reload.
+   *
+   * The CDP path-based mechanism works well for stable DOMs, but can be
+   * unreliable for pages that render asynchronously after the initial
+   * document update. To improve reliability we retry a few times, and also
+   * fall back to evaluating a JS path (document.querySelector(...)) when
+   * possible.
+   *
+   * Node resolution (computation) is separated from view state updates:
+   * resolveNode returns a DOMNode|null, and this method handles selection.
+   */
+  private async restoreSelectedNodeAfterUpdate(
+      domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null,
+      savedSelectedNodeOnReset: SDK.DOMModel.DOMNode|undefined): Promise<void> {
+    // Fast path: no previous node to restore -- just select the fallback
+    // synchronously so callers that check selection immediately still work.
+    if (!staleNode) {
+      this.trySetFallbackSelection(domModel);
+      return;
+    }
+
+    const nodePath = staleNode.path();
+
+    // Keep the panel usable quickly by selecting a reasonable default node as
+    // soon as we can, but continue trying to restore the stale node.
+    let didSetFallbackSelection = false;
 
-    async function restoreNode(
-        this: ElementsPanel, domModel: SDK.DOMModel.DOMModel, staleNode: SDK.DOMModel.DOMNode|null): Promise<void> {
-      const nodePath = staleNode ? staleNode.path() : null;
-      const restoredNodeId = nodePath ? await domModel.pushNodeByPathToFrontend(nodePath) : null;
+    // Retry with exponential-ish backoff, capping total wait at ~3s.
+    // Most async-rendered pages settle well within this window.
+    const attemptDelaysMs = [0, 250, 500, 1000, 1500];
 
+    // Capture the restoration generation so any user interaction (node
+    // selection, style editing, node reveal, etc.) cancels pending retries.
+    const restorationGeneration = this.#restorationGeneration;
+
+    for (let attempt = 0; attempt < attemptDelaysMs.length; ++attempt) {
       if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
         return;
       }
-      let node = domModel.nodeForId(restoredNodeId);
-      if (!node) {
-        const inspectedDocument = domModel.existingDocument();
-        node = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
       }
-      // If `node` is null here, the document hasn't been transmitted from the backend yet
-      // and isn't in a valid state to have a default-selected node. Another document update
-      // should be forthcoming. In the meantime, don't set the default-selected node or notify
-      // the test that it's ready, because it isn't.
-      if (node) {
-        this.setDefaultSelectedNode(node);
+
+      if (attemptDelaysMs[attempt]) {
+        await new Promise<void>(resolve => window.setTimeout(resolve, attemptDelaysMs[attempt]));
+      }
+
+      if (savedSelectedNodeOnReset !== this.selectedNodeOnReset) {
+        return;
+      }
+      if (this.hasNonDefaultSelectedNode || this.pendingNodeReveal ||
+          restorationGeneration !== this.#restorationGeneration) {
+        return;
+      }
+
+      // Computation: resolve the node without touching view state.
+      const restoredNode = await this.resolveNodeForRestoration(domModel, nodePath);
+
+      if (restoredNode) {
+        this.setDefaultSelectedNode(restoredNode);
         this.lastSelectedNodeSelectedForTest();
+        return;
+      }
+
+      if (!didSetFallbackSelection) {
+        // If we cannot compute a fallback selection yet, the document likely
+        // has not been transmitted from the backend and isn't in a valid state
+        // to have a default-selected node. Another document update should be
+        // forthcoming. In the meantime, don't notify tests that selection is
+        // ready, because it isn't.
+        if (!this.trySetFallbackSelection(domModel)) {
+          return;
+        }
+        didSetFallbackSelection = true;
       }
     }
   }
 
+  /**
+   * Attempts to resolve a DOM node by its CDP path.
+   * Pure computation -- does not modify view state.
+   */
+  private async resolveNodeForRestoration(domModel: SDK.DOMModel.DOMModel, nodePath: string|null):
+      Promise<SDK.DOMModel.DOMNode|null> {
+    try {
+      if (nodePath) {
+        const restoredNodeId = await domModel.pushNodeByPathToFrontend(nodePath);
+        const restoredNode = domModel.nodeForId(restoredNodeId);
+        if (restoredNode) {
+          return restoredNode;
+        }
+      }
+    } catch {
+      // CDP calls (pushNodeByPathToFrontend) can reject when the target or
+      // session is closed, e.g. if the page navigates again while we are
+      // retrying. Safe to swallow: we either retry on the next iteration or
+      // fall through to the fallback node.
+    }
+    return null;
+  }
+
+  private trySetFallbackSelection(domModel: SDK.DOMModel.DOMModel): boolean {
+    const inspectedDocument = domModel.existingDocument();
+    const fallbackNode = inspectedDocument ? inspectedDocument.body || inspectedDocument.documentElement : null;
+    if (!fallbackNode) {
+      return false;
+    }
+
+    this.setDefaultSelectedNode(fallbackNode);
+    this.lastSelectedNodeSelectedForTest();
+    return true;
+  }
+
+  cancelPendingRestoration(): void {
+    this.#restorationGeneration++;
+  }
+
   private lastSelectedNodeSelectedForTest(): void {
   }
 
@@ -1373,6 +1471,7 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer<
       omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
+    panel.cancelPendingRestoration();
 
     return (new Promise<void>(revealPromise)).catch((reason: Error) => {
       let message: string;

package/front_end/panels/elements/PropertiesWidget.ts

@@ -73,6 +73,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface PropertiesWidgetInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
+  onRegexToggled: () => void;
+  isRegex: boolean;
   treeOutlineElement: HTMLElement;
   displayNoMatchingPropertyMessage: boolean;
 }
@@ -85,7 +87,13 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     <div jslog=${VisualLogging.pane('element-properties').track({resize: true})}>
       <div class="hbox properties-widget-toolbar">
         <devtools-toolbar class="styles-pane-toolbar" role="presentation">
-          <devtools-toolbar-input type="filter" @change=${input.onFilterChanged} style="flex-grow:1; flex-shrink:1"></devtools-toolbar-input>
+          <devtools-toolbar-input
+            type="filter"
+            ?regex=${true}
+            @change=${input.onFilterChanged}
+            @regextoggle=${input.onRegexToggled}
+            style="flex-grow:1; flex-shrink:1"
+          ></devtools-toolbar-input>
           <devtools-checkbox title=${i18nString(UIStrings.showAllTooltip)} ${bindToSetting(getShowAllPropertiesSetting())}>
             ${i18nString(UIStrings.showAll)}
           </devtools-checkbox>
@@ -110,6 +118,8 @@ export class PropertiesWidget extends UI.Widget.VBox {
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   readonly #view: View;
   #displayNoMatchingPropertyMessage = false;
+  #isRegex = false;
+  #filterText = '';
 
   constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
@@ -140,11 +150,33 @@ export class PropertiesWidget extends UI.Widget.VBox {
     void this.performUpdate();
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
   private onFilterChanged(event: CustomEvent<string>): void {
-    this.filterRegex = event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null;
+    this.#filterText = event.detail;
+    this.filterRegex = this.#buildFilterRegex(event.detail);
     this.filterAndScheduleUpdate();
   }
 
+  private onRegexToggled(): void {
+    this.#isRegex = !this.#isRegex;
+    this.filterRegex = this.#buildFilterRegex(this.#filterText);
+    this.internalFilterProperties();
+    this.#renderView();
+  }
+
   private filterAndScheduleUpdate(): void {
     const previousDisplay = this.#displayNoMatchingPropertyMessage;
     this.internalFilterProperties();
@@ -195,9 +227,15 @@ export class PropertiesWidget extends UI.Widget.VBox {
           treeElement, await root.populateChildrenIfNeeded(), true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
+    this.#renderView();
+  }
+
+  #renderView(): void {
     this.#view(
         {
           onFilterChanged: this.onFilterChanged.bind(this),
+          onRegexToggled: this.onRegexToggled.bind(this),
+          isRegex: this.#isRegex,
           treeOutlineElement: this.treeOutline.element,
           displayNoMatchingPropertyMessage: this.#displayNoMatchingPropertyMessage,
         },

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -184,6 +184,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private userOperation = false;
   isEditingStyle = false;
   #filterRegex: RegExp|null = null;
+  #isRegex = false;
+  #filterText = '';
   private isActivePropertyHighlighted = false;
   private initialUpdateCompleted = false;
   hasMatchedStyles = false;
@@ -486,9 +488,28 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
-    const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
-    this.setFilter(regex);
+    this.#filterText = event.data;
+    this.setFilter(this.#buildFilterRegex(event.data));
+  }
+
+  private onRegexToggled(): void {
+    this.#isRegex = !this.#isRegex;
+    this.setFilter(this.#buildFilterRegex(this.#filterText));
   }
 
   setFilter(regex: RegExp|null): void {
@@ -1392,7 +1413,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
     toolbar.role = 'presentation';
-    const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
+    const filterInput = new UI.Toolbar.ToolbarFilter(
+        undefined, 1, 1, undefined, undefined, false, undefined, undefined, /* showRegexToggle=*/ true,
+        this.onRegexToggled.bind(this));
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
     void toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1621,6 +1621,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.select();
         void action.execute();
       }, {capture: true});
+      // We need this as else the images get open under it.
+      floatingButton.addEventListener('dblclick', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
       floatingButton.addEventListener('mousedown', ev => {
         ev.stopPropagation();
       }, {capture: true});

package/front_end/panels/network/NetworkItemView.ts

@@ -8,11 +8,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Annotations from '../../models/annotations/annotations.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
-import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -22,6 +19,7 @@ import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestDeviceBoundSessionsView} from './RequestDeviceBoundSessionsView.js';
+import {RequestHeadersView} from './RequestHeadersView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
@@ -148,7 +146,7 @@ const requestToPreviewView = new WeakMap<SDK.NetworkRequest.NetworkRequest, Requ
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   #request: SDK.NetworkRequest.NetworkRequest;
   readonly #resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  readonly #headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
+  readonly #headersViewComponent: RequestHeadersView|undefined;
   #payloadView: RequestPayloadView|null = null;
   readonly #responseView: RequestResponseView|undefined;
   #cookiesView: RequestCookiesView|null = null;
@@ -174,11 +172,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.headers));
     } else {
       this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-      this.#headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.#headersViewComponent = new RequestHeadersView();
+      this.#headersViewComponent.request = request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
-          LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.#headersViewComponent),
-          i18nString(UIStrings.headers));
+          this.#headersViewComponent, i18nString(UIStrings.headers));
     }
 
     this.#resourceViewTabSetting =
@@ -281,14 +279,6 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       this.#initialTab = undefined;
     }
 
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
-          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, this.resolveInitialState.bind(this),
-          this.element);
-
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
-          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS);
-    }
   }
 
   override willHide(): void {
@@ -377,34 +367,6 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
-  async resolveInitialState(
-      parentElement: Element, reveal: boolean, lookupId: string,
-      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
-    const request = anchor as SDK.NetworkRequest.NetworkRequest;
-    if ((request && request !== this.request()) || (lookupId !== this.request().requestId())) {
-      return null;
-    }
-
-    if (!this.#headersViewComponent) {
-      return null;
-    }
-    await this.#headersViewComponent.render();
-
-    const element = this.#headersViewComponent.getHeaderElementById('request-url');
-    if (!element) {
-      return null;
-    }
-
-    const targetRect = element.getBoundingClientRect();
-    const parentRect = parentElement.getBoundingClientRect();
-    // Adjust the anchor position slightly.
-    const adjustX = 15;
-    const adjustY = -19;
-    const relativeX = targetRect.x - parentRect.x + adjustX;
-    const relativeY = targetRect.y - parentRect.y + adjustY;
-    return {x: relativeX, y: relativeY};
-  }
-
   private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;
@@ -426,7 +388,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.#headersViewComponent?.revealHeader(section, header);
   }
 
-  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
+  getHeadersViewComponent(): RequestHeadersView|undefined {
     return this.#headersViewComponent;
   }
 }