report: source-location for linkifying

[connorjclark]

Linkify source code in DevTools.

Fixes: #6436, second half of #5443,

I've done font-size here. I haven't explored what other audits this could be done for. font-size only applies to CSS, but the changes here should be sufficient for JS/HTML too.

I've also made the line/columns that font-size reports more accurate. Namely:

1. For inline styles, the stylesheet's startColumn was always being add to the rule's column. However, this is only valid if the stylesheet and the rule begin on the same line in the HTML.
2. For inline styles with a sourceURL magic comment, the line/column was relative to the HTML file. I've changed it to be relative to the beginning of the style tag, as if it were its own file. This may be worse for UX (harder to pinpoint where to look in the HTML?). Open to tweaking this - note that, the data {url: <source mapped url>, line: <line relative to script tag>, column: <ditto>} is necessary for DevTools to link to this file in the Source panel, so without this change that gets complicated.

LH report (outside DevTools) before/after ...

Before:

After:

http://misc-hoten.surge.sh/lh-reports/pr-9354.html

GIF of it working in DevTools:

Associated Chromium changes: https://chromium-review.googlesource.com/c/chromium/src/+/1694144

Test it out:

node lighthouse-cli/ http://misc-hoten.surge.sh/lh-ui-location-font-size/ --only-audits=font-size --view

[patrickhulce]

this is awesome!! a few concerns with the new attribution method, but I think this approach puts us in a much better place to be able to handle those challenges 👍

[brendankenny]

I've also made the line/columns that font-size reports more accurate.

can we deal with these separately? They seem related but with significantly different concerns (audit internals vs report rendering/devtools integration)

[connorjclark]

can we deal with these separately? They seem related but with significantly different concerns (audit internals vs report rendering/devtools integration)

Done! #9356

[connorjclark]

this message is missing a space so i fixed it: https://chromium-review.googlesource.com/c/chromium/src/+/1790201

[paulirish]

@brendankenny can you take a look

[paulirish]

@brendankenny we're gonna merge tomorrow, FYI

too late, hot plate