Bug 217196

Summary:

Web Inspector: Blackboxing URL patters should apply to source mapped locations

Product:

WebKit

Reporter:

Nikita Vasilyev <nvasilyev>

Component:

Web Inspector

Assignee:

Nikita Vasilyev <nvasilyev>

Status:

ASSIGNED ---

Severity:

Normal

CC:

ews-watchlist, hi, inspector-bugzilla-changes, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

Attachments:

Description	Flags
[Image] Bug	none
Patch	hi: review-, nvasilyev: commit-queue-
[Video] With patch applied	none

Description Nikita Vasilyev 2020-10-01 16:54:46 PDT

Created attachment 410282 [details]
[Image] Bug

The implications of this is that I can't blackbox react-dom.js and Webpack internals when using https://reactjs.org/docs/create-a-new-react-app.html#create-react-app.

STEPS:
1. Create a React app with https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
2. In src/App.js, add `debugger` inside of App function.
3. Add `react-dom\.development\.js$` blackboxing URL pattern.
4. Open Web Inspector
5. Open the React app in Safari

EXPECTED:
Debugger blackboxes all "react-dom.development.js" items. 

ACTUAL:
Debugger didn't blackbox any "react-dom.development.js" items.

    App (App.js:6)
    renderWithHooks (react-dom.development.js:14803)
    mountIndeterminateComponent (react-dom.development.js:17482)
    beginWork (react-dom.development.js:18596)
    beginWork$1 (react-dom.development.js:23179)
    performUnitOfWork (react-dom.development.js:22157)
    workLoopSync (react-dom.development.js:22130)
    performSyncWorkOnRoot (react-dom.development.js:21756)
    scheduleUpdateOnFiber (react-dom.development.js:21188)
    updateContainer (react-dom.development.js:24373)
    (anonymous function) (react-dom.development.js:24758)
    unbatchedUpdates (react-dom.development.js:21903)
    legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    render (react-dom.development.js:24840)
    ./src/index.js (index.js:7)

---

<rdar://66200665>

Comment 1 Nikita Vasilyev 2020-11-17 12:04:06 PST

Created attachment 414364 [details]
Patch

Comment 2 Nikita Vasilyev 2020-11-17 12:06:41 PST

Created attachment 414365 [details]
[Video] With patch applied

To reproduce what's on the video, I suggest setting up create-react-app. I couldn't easily host it because it uses WebSockets.

Comment 3 Devin Rousso 2020-11-19 16:11:52 PST

Comment on attachment 414364 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=414364&action=review

r- as this appears to be a purely visual change that doesn't actually make blackboxing work with "virtual" source map resources.  If you set a breakpoint inside the "virtual" `react-dom.development.js` source map resource (e.g. inside `registerTwoPhaseEvent`) it will still pause even if the `react-dom\.development\.js$` pattern is blackboxed (the call frames in the "virtual" `react-dom.development.js ` source map resource also do not appear as though they are blackboxed when doing this).  Also, it's worth mentioning that "virtual" source map resources are not allowed to be individually blackboxed (see `get supportsScriptBlackboxing`).

> Source/WebInspectorUI/ChangeLog:10
> +        Select first non-blackboxed call frame on pause.

Why is this necessary?  The definition of script blackboxing means that the first call frame is not blackboxed, as otherwise we wouldn't pause in it.

> Source/WebInspectorUI/UserInterface/Models/CallFrame.js:70
> +        return !!WI.debuggerManager.blackboxDataForSourceCode(this._sourceCodeLocation.displaySourceCode);

please see <https://webkit.org/b/216897#c21>

> Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js:104
> +            this._callFrame.sourceCodeLocation.addEventListener(WI.SourceCodeLocation.Event.DisplayLocationChanged, this._updateStatus, this);

This doesn't really make any sense.  Something is either blackboxed or it isn't.  That shouldn't change depending on what source code location Web Inspector decides to show for it.