[webkit-changes] [WebKit/WebKit] d2d000: Web Inspector: Sources: allow Response Local Overr...

Fri Aug 11 11:41:44 PDT 2023

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: d2d000b6a9a6352273112c97f382c88347493cff
      https://github.com/WebKit/WebKit/commit/d2d000b6a9a6352273112c97f382c88347493cff
  Author: Devin Rousso <hi at devinrousso.com>
  Date:   2023-08-11 (Fri, 11 Aug 2023)

  Changed paths:
    M LayoutTests/TestExpectations
    A LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-directory-expected.txt
    A LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-directory.html
    M LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-file-expected.txt
    M LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-file.html
    M LayoutTests/platform/mac-wk1/TestExpectations
    M LayoutTests/platform/mac-wk2/TestExpectations
    M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
    M Source/WebInspectorUI/UserInterface/Base/FileUtilities.js
    M Source/WebInspectorUI/UserInterface/Base/Main.js
    M Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js
    M Source/WebInspectorUI/UserInterface/Images/Disk.svg
    M Source/WebInspectorUI/UserInterface/Models/LocalResource.js
    M Source/WebInspectorUI/UserInterface/Models/LocalResourceOverride.js
    M Source/WebInspectorUI/UserInterface/Models/Resource.js
    M Source/WebInspectorUI/UserInterface/Views/ContentView.js
    M Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css
    M Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js
    M Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js
    M Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
    M Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js
    M Source/WebKit/UIProcess/Inspector/mac/WKInspectorViewController.mm

  Log Message:
  -----------
  Web Inspector: Sources: allow Response Local Overrides to map to a directory on disk
https://bugs.webkit.org/show_bug.cgi?id=256427

Reviewed by Alexey Proskuryakov.

This allows for developers who are trying to do the "simple" thing of "I have a local copy of my website on my computer and want to use those files instead" to do it with a single Local Override instead of having to create one for each file they want to replace.

* Source/WebInspectorUI/UserInterface/Models/LocalResourceOverride.js:
(WI.LocalResourceOverride.create):
(WI.LocalResourceOverride.displayNameForNetworkStageOfType):
(WI.LocalResourceOverride.displayNameForType):
(WI.LocalResourceOverride.prototype.get networkStage): Added.
(WI.LocalResourceOverride.prototype.get displayType): Added.
(WI.LocalResourceOverride.prototype.generateSubpathForMappedDirectory): Added.
(WI.LocalResourceOverride.prototype.get canMapToFile):
Introduce a new `WI.LocalResourceOverride.InterceptType.ResponseMappedDirectory` in order to make the logic of creating a Local Override that's mapped to a directory on disk easier.
This is because in order to do directory mapping, we cannot have per-request response MIME type, status code, status text, or headers. Instead, we derive what we can from the ultimate file loaded from disk (see below) and pass through everything else (unless the file on disk doesn't exist, in which case everything is passed through). As such, we also cannot support skipping the network.

* Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js:
(WI.NetworkManager):
(WI.NetworkManager.prototype.async requestIntercepted):
(WI.NetworkManager.prototype.async responseIntercepted):
(WI.NetworkManager.prototype._commandArgumentsForInterception):
(WI.NetworkManager.prototype._handleFrameMainResourceDidChange):
When intercepting requests using `WI.LocalResourceOverride.InterceptType.ResponseMappedDirectory`, attempt to load the corresponding file at
```
mappedFilePath + response.url.replace(localResourceOverride.url, localResourceOverride.localResource.url)
```
where the `response.url` is the intercepted URL, the `localResourceOverride.url` is the regex used to define the interception, and `localResourceOverride.localResource.url` is the subpath that uses capture groups from the `localResourceOverride.url`. If no file exists at that location, don't override the response. This allows for very general directory mapping without having to worry about every possible file needing to be defined inside that folder (and subfolders).
Drive-by: Fix incorrect `Network.Response.statusCode` to be `Network.Response.status`.

* Source/WebInspectorUI/UserInterface/Models/LocalResource.js:
(WI.LocalResource):
(WI.LocalResource.resetPathsThatFailedToLoadFromFileSystem): Added.
(WI.LocalResource.prototype.set mappedFilePath):
(WI.LocalResource.prototype.get isMappedToDirectory): Added.
(WI.LocalResource.prototype.async requestContentFromMappedDirectory): Added.
(WI.LocalResource.prototype.async requestContent):
(WI.LocalResource.prototype.async _loadFromFileSystem):
(WI.LocalResource.prototype.async _updateContentFromFileSystem): Added.
Expose a way to manually load content from a file on disk using the `mappedFilePath` (with a required `subpath` if it's a directory).

* Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.js:
(WI.LocalResourceOverridePopover):
(WI.LocalResourceOverridePopover.prototype.get serializedData):
(WI.LocalResourceOverridePopover.prototype.show):
(WI.LocalResourceOverridePopover.prototype.show.createEditorId): Added.
(WI.LocalResourceOverridePopover.prototype.show.updateMappedDirectoryPath): Added.
(WI.LocalResourceOverridePopover.prototype.show.updateMappedFilePath): Added.
* Source/WebInspectorUI/UserInterface/Views/LocalResourceOverridePopover.css:
(.popover .local-resource-override-popover-content.request .editor:is(.url, .redirect), .popover .local-resource-override-popover-content.response-mapped-directory :is(.editor:is(.url, .mapped-directory-subpath), .mapped-directory-path)): Renamed from `.popover .local-resource-override-popover-content.request .editor:is(.url, .redirect)`.
(.popover .local-resource-override-popover-content.block .editor.url, .popover .local-resource-override-popover-content.response :is(.editor.url, .mapped-file-path)): Renamed from `(.popover .local-resource-override-popover-content:is(.response, .block) .editor.url`.
(.popover .local-resource-override-popover-content :is(.mapped-directory-path, .mapped-file-path)): Added.
(.popover .local-resource-override-popover-content :is(.mapped-directory-path, .mapped-file-path) > .value:not(:empty) + .placeholder): Added.
(.popover .local-resource-override-popover-content :is(.mapped-directory-path, .mapped-file-path) > button): Added.
Rework the "Type" dropdown to have "Response" be a group name containing "File" and "Directory", the former being the existing "Response" and the latter being the way to create a `WI.LocalResourceOverride.InterceptType.ResponseMappedDirectory`.
In order to successfully create a `WI.LocalResourceOverride.InterceptType.ResponseMappedDirectory` we must have a interception regex (with capture groups), a subpath string (using the capture groups), and an input to choose the mapped directory path.
Drive-by: Also add an input to choose a mapped file path when creating a "File" Local Override.

* Source/WebInspectorUI/UserInterface/Base/Main.js:
* Source/WebInspectorUI/UserInterface/Views/ContentView.js:
(WI.ContentView.resolvedRepresentedObjectForRepresentedObject):
* Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js:
(WI.ResourceContentView):
(WI.ResourceContentView.prototype.async _handleMapLocalResourceOverrideToFile):
Handle the new `WI.LocalResourceOverride.InterceptType.ResponseMappedDirectory`.

* Source/WebInspectorUI/UserInterface/Models/Resource.js:
(WI.Resource.classNamesForResource):
* Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js:
(WI.ResourceTreeElement.prototype._updateTitles):
(WI.ResourceTreeElement.prototype._updateIcon):
* Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css:
(.resource-icon.override.mapped-file .icon): Added.
(body:not(.window-inactive, .window-docked-inactive) :is(.table, .data-grid):focus-within .selected .resource-icon.override.mapped-file .icon, body:not(.window-inactive, .window-docked-inactive) .tree-outline:focus-within .selected.resource-icon.override.mapped-file .icon): Added.
(@media (prefers-color-scheme: dark) .resource-icon.override.mapped-file .icon): Added.
Add an icon for when the Local Override is mapped to a file/folder.

* Source/WebInspectorUI/UserInterface/Base/FileUtilities.js:
(WI.FileUtilities.prototype.longestCommonPrefix): Added.
(WI.FileUtilities.prototype.import):
Add a way to set `webkitdirectory` in order to allow selecting a directory.

* Source/WebKit/UIProcess/Inspector/mac/WKInspectorViewController.mm:
(-[WKInspectorViewController webView:runOpenPanelWithParameters:initiatedByFrame:completionHandler:]):
Allow Web Inspector to upload directories if requested, such as for `<input type="file" multiple webkitdirectory>`.

* Source/WebInspectorUI/UserInterface/Images/Disk.svg:
Add light and dark variants.

* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:

* LayoutTests/TestExpectations:
* LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-directory.html: Added.
* LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-directory-expected.txt: Added.
* LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-file.html:
* LayoutTests/http/tests/inspector/network/local-resource-override-mapped-to-file-expected.txt:
* LayoutTests/platform/mac-wk1/TestExpectations:
* LayoutTests/platform/mac-wk2/TestExpectations:

Canonical link: https://commits.webkit.org/266821@main