audits(font-size): calculate accurate line/column for inline styles

[connorjclark]

split off of #9354

1. For inline styles, the stylesheet's startColumn was always being added 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.
3. Lines are 1-indexed, but columns are 0-indexed. All columns were off by one.

before:

after:

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

[connorjclark]

I verified that creating elements before a style element is declared does not affect the line/column of the parsed style declaration.

[patrickhulce]

thanks for splitting out!

[connorjclark]

adding these two cases made the actual items jump around in font-size, on account of most items being the same text length and the audit using an unstable sort on that property. I added filler text to maintain the order.

[patrickhulce]

LGTM!

[brendankenny]

style suggestion, but otherwise LGTM!

[brendankenny]

just a style issue, but interleaving the offset makes this read a little more confusingly than it is. What about something like

let line = range.startLine + 1;
let column = range.startColumn;

// Add the startLine/startColumn of the <style> element to the range, if stylesheet is inline
// and a sourceURL magic comment is not present (`hasSourceURL` is true).
const addHtmlLocationOffset = stylesheet.isInline && !stylesheet.hasSourceURL;
if (addHtmlLocationOffset) {
  line += stylesheet.startLine;
  column += stylesheet.startColumn;
}

source += `:${line}:${column}`;

[brendankenny]

also may be worth calling out why sourceURL means you don't want the offset because it isn't obvious from this context, at least (admittedly I've paged all font-size stuff out of my brain :)

[connorjclark]

done and done

[paulirish]

lg. a few suggestions but nothing huge

[paulirish]

sourceURL's appear at the end of the block, by convention.. but they can show up at the top.

i think your code handles this situation, but FYI in case you want the coverage.

[connorjclark]

should be good, from what i know of the css parser. would just be testing the css parser (which I'm already doing perhaps too much here w/ the offset stuff ...)

[paulirish]

i'd separate these concerns a little more but its no big deal really. calling out the +1 for lines but not columns is potentially worthwhile.

          let line = range.startLine;
          line++; // lines are 0-indexed in the protocol, but users expect 1-indexed line values;
          if (addHtmlLocationOffset) line += stylesheet.startLine;

[paulirish]

ah nvm brendan's is nicer.