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>
Created attachment 414364 [details] Patch
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 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.