Closed Bug 1520136 Opened 6 years ago Closed 6 years ago

Source maps with non-SASS CSS imports

Categories

(DevTools :: Inspector, defect, P2)

64 Branch
defect

Tracking

(firefox-esr60 unaffected, firefox64 wontfix, firefox65 wontfix, firefox66 wontfix)

RESOLVED DUPLICATE of bug 1519166
Tracking Status
firefox-esr60 --- unaffected
firefox64 --- wontfix
firefox65 --- wontfix
firefox66 --- wontfix

People

(Reporter: mrpeteb+bugzilla, Unassigned)

References

Details

(Keywords: regression, Whiteboard: [dt-q])

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

There is a minimal demo to reproduce:
https://github.com/peteboere/sourcemap-issue

Actual results:

The developer inspector no longer correctly reports rule file/line location with a non-SASS CSS source map. This that had been previously working in Firefox. And still works fine in Safari and Chrome.

Expected results:

Correct reporting of rule file/line number location of inspected element

Please provide detailed instruction step by step how I can reproduce the problem.

Component: Untriaged → Inspector
Flags: needinfo?(mrpeteb+bugzilla)
Product: Firefox → DevTools
  1. git clone https://github.com/peteboere/sourcemap-issue

  2. cd sourcemap-issue

  3. php -S localhost:8080 (Or any simple html server)

  4. Open http://localhost:8080 in Firefox

  5. Open devtools and inspect the styles for the heading and the paragraph on the page

  6. Observe that there are two elements and two CSS rules which are reporting to be from the compiled output (./dist/styles.css).
    But the two rules are from two different files (./styles.css and ./css/imported.css) so the devtools inspector should reflect that information.

Flags: needinfo?(mrpeteb+bugzilla)

Have made the reproduction easier with github's pages feature:

  1. Open https://peteboere.github.io/sourcemap-issue/ in Firefox

  2. Open devtools and inspect the styles for the heading and the paragraph on the page

  3. There are two rules in the stylesheet which was compiled from two files. One rule for the <h1> element and one rule for the <p> element. They should both report the source filename/line (Works in Chrome and Safari). But the filename/line is only the compiled output. There are no sourcemap error warnings.

Thanks for the report!

I can confirm the issue. I ran mozregression, the first occurrence was 2018-10-05 so it affects Fx 64, 65 and 66.

Here's the regression range: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=52029571d897b132696818c5edf51ebd7cdcb686&tochange=c161940934133ef7899b83cf273b17e6ac6ff572

Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(jlaster)
Keywords: regression
Priority: -- → P2
Whiteboard: [dt-q]

My understanding is we're not going to have another 64 dot release given the impending 65 release.

I'm confused on how backing out a debugger update caused this, but regardless, it's too late for 65 at this point with the RC builds coming next week.

Hey logan, my guess is that this is related to the sourcemaps upgrade.

Flags: needinfo?(jlaster) → needinfo?(lsmyth)

This appears to be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1519166

The mappings in https://github.com/peteboere/sourcemap-issue/blob/master/dist/style.css.map#L8 translate to

[
  [],
  [],
  [],
  [
    // [generatedColumn, source, originalLine, originalColumn]
    [ 0, 1, 0, -1 ],
    [ 14, 0, 2, 0 ]
  ]
]

which is invalid because -1 is not a valid originalColumn value.

This seems to be a bug in whatever tool was used to generate those mappings.

Status: NEW → RESOLVED
Closed: 6 years ago
Flags: needinfo?(lsmyth)
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.