1695640 - List bundled sources (webpack:///... et al.) under the relevant host

Status: NEW

(DevTools :: Debugger, defect, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: image.png

Originally reported here: https://github.com/firefox-devtools/debugger/issues/8060

Opening this for discussion. My apologies if this was decided against already.

Could we perhaps nest the Webpack folder (or Angular or other bundler-specific folders) under the relevant host? As far as I know, when we have webpack:///... sources they were identified in the source map for a JS or CSS file hosted on a specific origin. It would be better to reflect this association in the sources tree, for the following reasons:

1. The same-origin policy has a lot of impact in JavaScript, so it would be better to reflect that origin to users.
2. Related: we should avoid creating the illusion that "Webpack" or "Angular" are some magical web origins. I'm working with a lot of developers, juniors devs, including some from a other backgrounds, and the basic concepts of URLs and HTTP are not always known (people know the structure of their git repository and run a magical command that spawns a web server on localhost:3000 for them); it would help if Debugger reflected origins and URLS a bit better.
3. How do we manage it if we have webpack:///... sources from 2+ different domains? We may end up creating a "Webpack" tree that is nonsensical and merges different projects together.

Nesting the Webpack/Angular/etc. "folders" under their host could be a good compromise between reflecting URLs and still giving quick access to the original sources bundled by those tools.

Current result & expected result at the attached screenshot.

This would solve part of #7921 too.