Open Bug 1363709 Opened 7 years ago Updated 2 years ago

Incorrect line numbers for CSS rules.

Categories

(DevTools :: Style Editor, defect, P3)

54 Branch
defect

Tracking

(Not tracked)

UNCONFIRMED

People

(Reporter: qdirks, Unassigned)

References

(Blocks 1 open bug)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170508140042

Steps to reproduce:

1. Go to https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

2. Open the developer tools inspector.

3. Look at the CSS rule inspector and note the line numbers.

4. Click on the link to the line location of one of the rules and you'll be taken to the style editor tab. You can specifically try a rule from stylesheet mdn.945582cfe665.css to reproduce this bug (all of the stylesheets were producing this bug in my case).

5. Note how the rule you clicked is not at the location of your cursor. Further note that the line numbers for the "@media rules" in the right pane are also wrong.

6. With your style editor in focus, press the space-bar or otherwise make a change to the stylesheet. Note the line numbers for the @media rules in the right pane immediately update to the correct lines.

7. Go back to the inspector tab.

8. Look at the CSS rule inspector and note the line numbers here have also updated for the rules of the stylesheet you changed.

9. Rules residing in other stylesheets that produce this bug are still wrong until the same steps are followed for them.

10. Refresh the page and the bug happens again.

I was also able to reproduce this bug at https://www.progressive.com/.



Actual results:

The wrong line numbers are displayed for CSS stylesheet rules shown in the CSS rule inspector. This leads to some confusion when rules cannot be found at the line numbers indicated by the CSS rule inspector.


Expected results:

The correct line numbers should be shown from the outset.
Component: Untriaged → Developer Tools: CSS Rules Inspector
I reproduced the issue with FF33, it's probably an old issue.
The rule line number is actually displayed correctly in the rules view. The problem is that we prettify the stylesheet source in the style editor when we open it the stylesheet.
Component: Developer Tools: CSS Rules Inspector → Developer Tools: Style Editor
Priority: -- → P3
See Also: → 1169770
Product: Firefox → DevTools
I'd like to help solving this one!

So, is that okay to fix it with the following steps?

- prettify css sheets
- remember to update line number index <- what I'll add

My concern here is that maybe there're some cases which need the un-prettify css sheet and line number?
Sounds like an rare case to me.
(In reply to Ying Ruei Liang [:KK] from comment #3)
> I'd like to help solving this one!
> 
> So, is that okay to fix it with the following steps?
> 
> - prettify css sheets
> - remember to update line number index <- what I'll add
> 
> My concern here is that maybe there're some cases which need the un-prettify
> css sheet and line number?
> Sounds like an rare case to me.

See bug #724505 for some discussion on how to fix this.
I tend to think this bug is a dup of that one.
Blocks: 1528426
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.