1169770 - Clicking a CSS error link in the console doesn't highlight the right line in the style editor

Status: NEW

(DevTools :: Style Editor, defect, P2)

Description

[Boris Zbarsky [:bzbarsky]]

Consider this testcase:

<style>
  .foo {
    nosuchprop: bar;
  }
</style>

If you load that in your browser and have CSS warnings enabled, you get a warning about it in the console.  The warning says it's on line 3, column 14.  Clicking that link opens the style editor with the right text, but doesn't highlight the right line.

This is not a huge deal in this case, but I was just dealing with a CSS file with 20k-some lines in it, and dozens of warnings, and having to manually scroll to the right line in the file for each warning was a huge PITA.

This used to work correctly back when CSS warning links opened up view source....

Comment 1

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 3

[Tom Tromey :tromey]

Maybe related to bug 1324385.

Comment 4

[Patrick Brosset <:pbro>]

We recently fixed a related bug (bug 1530612) but that didn't fix this. It only made it better for <link>'d stylesheets.
For inline <style> stylesheets, the problem still exists.

The first problem we have is that when the link is clicked in the console, the information sent to the style-editor is the URL, the line and the column.
The URL in this case is the URL of the parent HTML document. Now, because we only compare this to the stylesheet URLs in the style-editor, that doesn't work.
We need to make a change to _isEditorToSelect in /devtools/client/styleeditor/StyleEditorUI.jsm so we also consider editor.styleSheet.nodeHref when editor.styleSheet.href does not exist.

But, that's not the only problem. There are 2 others.

• If there are several <style> stylesheets in the page, we won't know which one is the right one
• The line numbers displayed in the style-editor are relative to the <style> node, not absolute on the HTML page, which the CSS warning is.

So, I suggest the following:

When a StyleSheetActor form is passed to the client, it should come with an offset number. This would be the line number at which the parent <style> node appears in the HTML doc.

This way, when trying to select the right stylesheet in the style-editor, we would be able to compare the CSS warning line number to the offsets we have, to select the right one.
And we would also be able to subtract this offset from the absolute line number when trying to move the cursor.

If we do this, we should probably close bug 1324385. That one requests line numbers to be absolute in the rule-view, but if we did that, we would be jumping again to the wrong location.

Other take on this problem: stop showing inline stylesheets as separate files in the style-editor and instead show an entry for the HTML document where the entire document is displayed, with all its <style> tags. That would solve the problem of linking from the console to that document. But would make it less easily usable.
That's what Chrome does in its Sources tab, but they don't really have something like the Style Editor.