1635701 - Sourcemaps don't work for SCSS files

Status: RESOLVED FIXED

(DevTools :: General, defect, P3)

Description

[piotrpalek]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

I tried to debug a CSS issue and wanted to see where a rule was defined in the source.

I have build an example angular app where this happens (because it happens in an angular app I'm working on):

1. Open https://piotrpalek.github.io/ff-scss-sourcemap-issue/
2. Inspect the "Test" h1 tag
3. There should be an ".sass-class" there, and on the right side I see a "inline" link which normally should link to where the rule is defined
4. When I click it I'm taken to the general "style editor" tab

Here's the repo: https://github.com/piotrpalek/ff-scss-sourcemap-issue
It's generally a purely generated angular app with just minimal changes.

Actual results:

I clicked the link that's supposed to take me to the source, but it has taken me to some general css file.

Expected results:

I should see the file where the rule was defined.

Comment 1

[piotrpalek]

I should also note that this work on Chrome for me (can inspect this and see where the rule was defined)

Comment 2

[Firefox Bug Husbandry Bot]

Because this bug's Severity is normal and has not been changed, and this bug's priority is -- (none,) indicating it has has not been previously triaged, the bug's Severity is being updated to -- (default, untriaged.)

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:Honza, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 4

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

Thanks for the report!
I can reproduce the problem on my machine.

I am seeing the following CSP error in the Browser Console:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”). 4 panel.js:78:24

Brad, could this related to the work on bug 1228985?
Or any other existing CSP bug?

Honza

Comment 5

[Brad Werth [:bradwerth]]

I don't think this is a CSP issue. The CSP error in comment 4 is something that appears when we load devtools, or various panels in devtools. It's a devtools internal problem. I don't think the example page even has a CSP applied.

When I inspect the page, I see two style tags that were dynamically added. The first style tag is the interesting one:

<style>/* You can add global styles to this file, and also import other style files */ .sass-class { color: red; font-size: 12px; } /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkU6XFxkZXZcXHRlc3QtYXBwLW5nL3NyY1xcc3R5bGVzLnNjc3MiLCJzdHlsZXMuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSw4RUFBQTtBQUVBO0VBQ0UsVUFBQTtFQUNBLGVBQUE7QUNBRiIsImZpbGUiOiJzdHlsZXMuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIFlvdSBjYW4gYWRkIGdsb2JhbCBzdHlsZXMgdG8gdGhpcyBmaWxlLCBhbmQgYWxzbyBpbXBvcnQgb3RoZXIgc3R5bGUgZmlsZXMgKi9cblxuLnNhc3MtY2xhc3Mge1xuICBjb2xvcjogcmVkO1xuICBmb250LXNpemU6IDEycHg7XG59XG4iLCIvKiBZb3UgY2FuIGFkZCBnbG9iYWwgc3R5bGVzIHRvIHRoaXMgZmlsZSwgYW5kIGFsc28gaW1wb3J0IG90aGVyIHN0eWxlIGZpbGVzICovXG4uc2Fzcy1jbGFzcyB7XG4gIGNvbG9yOiByZWQ7XG4gIGZvbnQtc2l6ZTogMTJweDtcbn0iXX0= */</style>

The source map encoded there points to two sources, styles.scss and src/styles.scss, both of which define .sass-class. I'm not sure which of the two is "winning" the cascade, but surely the rule view should point to one of them. Maybe Logan will know more how to debug this?

Comment 6

[Brad Werth [:bradwerth]]

Or perhaps Razvan, since it's the Rule View that isn't tracking the source map?

Comment 7

[Logan Smyth [:loganfsmyth]]

This appears to be fixed by the patchsets from https://bugzilla.mozilla.org/show_bug.cgi?id=1642371 and https://bugzilla.mozilla.org/show_bug.cgi?id=1643180, we'll have to check again once those land.

Comment 8

[:Harald Kirschner :digitarald]

This seems to work now, can you confirm Razvan?

Comment 9

[Razvan Caliman [:rcaliman]]

Confirmed fixed in Nightly.

This is resolved thanks to Logan's recent work on sourcemaps in bug 1642371 and bug 1643180. Thank you, Logan!