Improve how HTML elements are displayed in the results table

[mattzeunert]

A few things that could be improved:

• UX: hide irrelevant info, make sure important info is shown (like the text content)
• Reduce result size (by hiding irrelevant info)
• Be more consistent across different audits (different data sources might make this difficult, e.g. expression evaluated in page, driver.getNodesInDocument, or aXe)

Here are two example results:

Related ticket about the node selectors we show on hover - might also benefit from some standardization: #4015

cc @rviscomi @patrickhulce

[connorjclark]

Related to this - linking to the actual element if the page is still open. Some audits do this, some don't. There's just one ticket atm for font-size: #6436. I'll probably knock this out next week.

[mattzeunert]

Just playing around a bit... showing the textContent and outerHTML.

@rviscomi What do you think about how we can improve this?

Master branch:

Experiment:

[rviscomi]

Text content LGTM!

In the case where the anchor content is an image, I wonder if we could/should render a thumbnail of the image?? cc @AVGP

[mattzeunert]

@paulirish @hwikyounglee How do you feel about showing text content for node elements in the details table?

[mattzeunert]

Be more consistent across different audits (different data sources might make this difficult, e.g. expression evaluated in page, driver.getNodesInDocument, or aXe)

Some related discussion here.

Also, seems like lots of type: 'node' details renderer types don't have a path/selector at all right now.

[hwikyounglee]

@paulirish @hwikyounglee How do you feel about showing text content for node elements in the details table?

Are we referring to the black text e.g. Vasil, help, blocking, etc., compared to not showing them but just tags in green? The proposed design LGTM. Thanks Matt!

[mattzeunert]

@hwikyounglee Yeah, exactly. Latest screenshot is here – same thing but looks a bit different because it's after the report redesign.