report(font-size): linkify selectors in devtools

[connorjclark]

Set lh-node attribute for each node shown in the font-size report. See a11y.

[connorjclark]

This actually isn't useful :)

[connorjclark]

This actually isn't useful :)

That's because I wasn't attempting to link to the range specific to the CSS rule we are highlighting. That would be very useful!

The CSSStyle.range property has startLine/startColumn relative to the start of the stylesheet (0 for network stylesheets, but relative to <style> location for inline).

For inline styles, @paulirish and I just confirmed that we can use LH.Crdp.CSS.CSSStyleSheetHeader.{startLine,startColumn} to link to the sources panel for the HTML at the position where the style rule begins. Usually that'd show you some ugly looking code until you hit Prettify. But luckily there's some movement towards shipping the experimental DT feature "always prettify".

So the idea would be to create something similar to lh-node, but have it contain the URL / line / col (UILocation) to open in the sources panel. lh-ui-location? Then, linkify it in the Audits panel.

[connorjclark]

although, the location of a style element in the HTML will very likely change across every page load, so we'll see a lot of the same issues from node revealing (#2289)