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

• Status: ASSIGNED
• Component: Web Inspector

[Nikita Vasilyev]

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>

[Nikita Vasilyev]

Created attachment 414364 [details]
Patch

[Nikita Vasilyev]

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.

[Devin Rousso]

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.