[webkit-changes] [WebKit/WebKit] 4f10dc: Web Inspector: virtualize `WI.TreeOutline` in `WI....

[Devin Rousso]

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 4f10dc814d0c21ce07c2fe213e2a6d3d065c6236
      https://github.com/WebKit/WebKit/commit/4f10dc814d0c21ce07c2fe213e2a6d3d065c6236
  Author: Devin Rousso <hi at devinrousso.com>
  Date:   2025-02-04 (Tue, 04 Feb 2025)

  Changed paths:
    M Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js
    M Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css
    M Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js
    M Source/WebInspectorUI/UserInterface/Views/TreeOutline.js

  Log Message:
  -----------
  Web Inspector: virtualize `WI.TreeOutline` in `WI.OpenResourceDialog`
https://bugs.webkit.org/show_bug.cgi?id=286724

Reviewed by BJ Burg.

This should improve the performance of searching for and jumping to a resource when inspecting sites that have a lot of resources as there will be less elements in the DOM.

* Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.js:
(WI.OpenResourceDialog):

* Source/WebInspectorUI/UserInterface/Views/OpenResourceDialog.css:
(.open-resource-dialog > .scroll-container): Renamed from `.open-resource-dialog > .tree-outline`.
(.open-resource-dialog.has-results .scroll-container): Renamed from `.open-resource-dialog.has-results > .tree-outline`.
(.open-resource-dialog .tree-outline .item): Renamed from `.open-resource-dialog > .tree-outline .item`.
(.open-resource-dialog .tree-outline.large .item): Renamed from `.open-resource-dialog > .tree-outline.large .item`.
(.open-resource-dialog .tree-outline.large .item .icon): Renamed from `.open-resource-dialog > .tree-outline.large .item .icon`.
(.open-resource-dialog .tree-outline .item.selected): Renamed from `.open-resource-dialog > .tree-outline .item.selected`.
(.open-resource-dialog .tree-outline .item.selected .highlighted): Renamed from `.open-resource-dialog > .tree-outline .item.selected .highlighted`.
(.open-resource-dialog .tree-outline .item.selected .subtitle): Renamed from `.open-resource-dialog > .tree-outline .item.selected .subtitle`.
(@media (prefers-color-scheme: dark) .open-resource-dialog .tree-outline .item.selected): Renamed from `@media (prefers-color-scheme: dark) .open-resource-dialog > .tree-outline .item.selected`.
Move the `WI.TreeOutline` into it's own container so that only it is scrolled without having to account for the `<input>`.

* Source/WebInspectorUI/UserInterface/Views/TreeOutline.js:
(WI.TreeOutline.prototype._updateVirtualizedElements):
Drive-by: prevent the scrollbar from jumping around when scrolling from the top down by ensuring that the first item index will never be negative as that's used to calculate how tall to make the bottom spacer which affects the scrollbar size.

* Source/WebInspectorUI/UserInterface/Models/ResourceQueryResult.js:
(WI.ResourceQueryResult):

Drive-by: remove incorrect assertion since this can also be created with `WI.Script` and `WI.CSSStyleSheet`.
Canonical link: https://commits.webkit.org/289844@main



To unsubscribe from these emails, change your notification settings at https://github.com/WebKit/WebKit/settings/notifications