core(details-renderer): snippet details renderer type #6999

mattzeunert · 2019-01-13T16:10:41Z

Summary

Details renderer type that shows a code snippet with error highlights.

Example LH report using code snippets for structured data

Status

~~Not 100% finished but would be good to get some initial review.~~

Functionality is complete now.

Reverted JSON-LD commit is just here because I use it for testing.

Related Issues/PRs

Closes: #6901

mattzeunert · 2019-01-13T16:11:47Z

Getting this on local, is there anything else I need to do for i18n?

google.protobuf.json_format.ParseError: Failed to parse i18n field: Failed to parse rendererFormattedStrings field: Message type "I18n.RendererFormattedStrings" has no field named "codeSnippetCollapse".

patrickhulce

really neat and powerful little snippet renderer! insanely better UX for the code I want to steal this for the unused CSS now :D

lighthouse-core/report/html/renderer/code-snippet-renderer.js

lighthouse-core/report/html/templates.html

lighthouse-core/report/html/renderer/util.js

lighthouse-core/report/html/renderer/code-snippet-renderer.js

lighthouse-core/report/html/renderer/details-renderer.js

lighthouse-core/test/audits/audit-test.js

lighthouse-core/test/report/html/renderer/code-snippet-renderer-test.js

patrickhulce · 2019-01-14T16:25:28Z

Getting this on local, is there anything else I need to do for i18n?

yeah you'll have to update the I18n.RendererFormattedStrings message in proto/lighthouse-result.proto with the new property

lighthouse-core/report/html/renderer/code-snippet-renderer.js

mattzeunert · 2019-01-23T20:37:59Z

We'd like the error message text to always wrap within the visible area, so you can read it without scrolling. Like this:

But right now it doesn't work if the lines themselves are scrollable:

@rviscomi and I are ok with it, since having error messages that long is pretty rare. But let me know if you know some magic CSS trick that would fix this 🙂

This is the live example.

mattzeunert · 2019-01-30T18:42:55Z

@patrickhulce What do you think of the PR now?

patrickhulce

lookin' real good!!

for the amount of complexity that's here I'm hoping for a bit broader test coverage if possible. Especially around some of the cases I'm talking about in the code where I'm confused :)

lighthouse-core/audits/audit.js

lighthouse-core/report/html/renderer/code-snippet-renderer.js

patrickhulce · 2019-01-31T14:50:50Z

lighthouse-core/report/html/renderer/code-snippet-renderer.js

+
+    snippet.append(CodeSnippetRenderer.renderSnippetLines(dom, tmpl, details));
+
+    // If expanded view still doesn't include all lines then indicate that that


s/that that/that/

also what about the collapsed view?

I'm very shaky on all the omitted lines placeholder logic, why wouldn't the other chunk of logic handle this case already?

if lines[0].number !== 1 then wouldn't line && !previousLine be true in renderSnippetLines for lines[0]?

also what about the collapsed view?

We don't show it there, but maybe we should. The reason against showing it is that it makes the UI look more cluttered. Usually it's clear from the code that it's cut off and you have the "Expand snippet" button as well.

lighthouse-core/report/html/renderer/code-snippet-renderer.js

patrickhulce · 2019-01-31T15:02:06Z

lighthouse-core/report/html/renderer/code-snippet-renderer.js

+    let hasSeenHighlight = false;
+    for (let lineNumber = 1; lineNumber <= lineCount; lineNumber++) {
+      const {line, previousLine} = getLineAndPreviousLine(lines, lineNumber);
+      const {line: collapsedLine, previousLine: collapsedPreviousLine} =


WDYT about some comments or more descriptive names here?

is this right?

!previousLine is just telling us if this current line is the start of a visible block and we need to render the omitted lines placeholder for the stuff that came before?

collapsedLine is just telling us if this current line should be shown even when the snippet is collapsed?

!collapsedPreviousLine is just telling us if this current line is the start of a visible block and we need to render the omitted lines placeholder for the stuff that came before?

I've cleaned up the rendering logic a bit more, though it's still not exactly nice code 🤔

Let me know what you think.

lighthouse-core/report/html/renderer/code-snippet-renderer.js

lighthouse-core/report/html/renderer/details-renderer.js

lighthouse-core/test/audits/audit-test.js

lighthouse-core/report/html/renderer/code-snippet-renderer.js

lighthouse-core/report/html/renderer/util.js

mattzeunert · 2019-02-03T09:54:55Z

for the amount of complexity that's here I'm hoping for a bit broader test coverage if possible. Especially around some of the cases I'm talking about in the code where I'm confused :)

I think the cases where you're confused about line rendering all already have test cases 😂 Maybe you meant something else, or I need make the test names more descriptive?

mattzeunert · 2019-02-03T09:57:03Z

FAIL ./dist/viewer/src/viewer.js: 65.11kB > maxSize 65kB gzip

So sad 😞

brendankenny

Looking good so far! I'm really liking this new renderer.

Also, very brave to go wading into the details types, sorry they're in such rough shape :S

lighthouse-core/report/html/renderer/util.js

lighthouse-core/test/report/html/renderer/details-renderer-test.js

lighthouse-core/report/html/renderer/details-renderer.js

lighthouse-core/report/html/renderer/snippet-list-renderer.js

brendankenny · 2019-02-04T23:19:12Z

lighthouse-core/report/html/renderer/snippet-list-renderer.js

+  };
+}
+
+class SnippetListRenderer {


I feel like we need an overview for this type/renderer somewhere, though I'm not sure exactly where. Basically the only way to understand how it works right now is to read this file :)

In this file? On the details type in audit.d.ts?

Added some comments in audit-details.d.ts.

lighthouse-core/test/report/html/renderer/snippet-list-renderer-test.js

types/audit.d.ts

lighthouse-core/audits/audit.js

brendankenny · 2019-02-04T23:49:29Z

FAIL ./dist/viewer/src/viewer.js: 65.11kB > maxSize 65kB gzip

This might be unavoidable because right now the viewer is like 60K after gzip and it includes all report renderer code twice (once for rendering, once for self replication), so a 11K+ new file would be expected to run right into that. There may be no choice but to bump the limit.

lighthouse-core/report/html/renderer/util.js

brendankenny · 2019-02-08T01:20:10Z

having spent some time back in details land looking at basically all of our existing audits, I'd like to propose splitting this (back?) into two details types, list and snippet.

I've noticed that we already have several audits using single-column tables to get an ugly list, and switching them to a dedicated list type (sometime in the future) would be great, so let's leave that path open to them. So:

export interface DetailsRendererList {
  type: 'list',
  items: DetailsRendererSnippet[]
}

aka items still has to be an array of only snippets, but that will allow us to easily expand what's allowed in items in the future. THen

move snippet-list-renderer.js to snippet-renderer.js, and move SnippetListRenderer.render() into details-renderer.js as DetailsRenderer._renderList()
SnippetListRenderer.renderSnippet() moves to SnippetRenderer.render(), and the new DetailsRenderer._renderList() would then call that (fine to leave _renderList() specialized as it is because we only support rendering snippets in a list for now.
add type: 'snippet' to the DetailsRendererSnippet interface

I don't think this will be much of a code change, but it will leave us with plenty of flexibility.

WDYT?

This reverts commit 249dd67b984c0071a29bcd9190092e98dc52f1cb.

mattzeunert · 2019-02-11T10:31:42Z

Have separated snippet and list into separate details renderer types.

Also, highlights is now lineMessages and generalMessages.

export interface List {
  type: "list";
  items: Snippet[];
}

export interface Snippet {
  type: "snippet";
  lines: {
    content: string;
    lineNumber: number;
    truncated?: boolean;
  }[];
  title: string;
  lineMessages: {
    lineNumber: number;
    message: string;
  }[];
  generalMessages: {
    message: string;
  }[];
  lineCount: number;
  node?: NodeValue;
}

danbri · 2019-02-14T05:59:25Z

How does it get its knowledge of what terms and structures are in Schema.org? e.g. the "unexpected property" in the screenshot at the top of this PR. /cc @vholland @rvguha

paulirish · 2019-02-14T06:02:23Z

Dan, see #6750

patrickhulce

LGTM!

lighthouse-core/report/html/renderer/details-renderer.js

lighthouse-core/report/html/renderer/snippet-renderer.js

brendankenny · 2019-02-20T02:51:51Z

lighthouse-core/report/html/renderer/details-renderer.js

+          // @ts-ignore - TODO(bckenny): Fix type hierarchy
+          /** @type {LH.Audit.Details.List} */ (details)
+        );
+      case 'snippet':


let's not add snippet here (it's just going to be immediately removed anyways)

brendankenny · 2019-02-20T02:52:32Z

lighthouse-core/report/html/renderer/details-renderer.js

+
+    details.items.forEach(item => {
+      // @ts-ignore TODO(bckenny): this can never be null
+      listContainer.appendChild(this.render(item));


rather than call this.render(item), just call SnippetRenderer.render() directly (then also don't have to deal with null)

brendankenny · 2019-02-20T02:52:50Z

lighthouse-core/report/html/renderer/details-renderer.js

+      type: string,
+      items: Array<DetailsJSON>
+  }} ListDetailsJSON
+ */


I think this can be deleted?

brendankenny · 2019-02-20T02:55:40Z

types/audit-details.d.ts

+       * Snippet of text with line numbers and annotations.
+       */
+      export interface Snippet {
+        type: "snippet",


Suggested change

type: "snippet",

type: 'snippet',

brendankenny · 2019-02-20T02:57:12Z

types/audit-details.d.ts

+      /**
+       * Snippet of text with line numbers and annotations.
+       */
+      export interface Snippet {


SnippetValue to keep in line with the others, but otherwise this looks great!

brendankenny

LGTM!

📜 🔼
📜✂️📜
📜 🔽

mattzeunert requested a review from patrickhulce January 13, 2019 16:10

mattzeunert requested review from brendankenny and paulirish as code owners January 13, 2019 16:10

patrickhulce reviewed Jan 14, 2019

View reviewed changes

brendankenny reviewed Jan 14, 2019

View reviewed changes

lighthouse-core/report/html/renderer/code-snippet-renderer.js Outdated Show resolved Hide resolved

mattzeunert force-pushed the code-snippet branch 2 times, most recently from 638ebda to 3f7e50d Compare January 20, 2019 09:57

mattzeunert requested a review from exterkamp as a code owner January 20, 2019 09:57

mattzeunert changed the title ~~WIP: core(details-renderer): code-snippet details renderer type~~ core(details-renderer): code-snippet details renderer type Jan 29, 2019

patrickhulce suggested changes Jan 31, 2019

View reviewed changes

connorjclark reviewed Jan 31, 2019

View reviewed changes

lighthouse-core/report/html/renderer/util.js Show resolved Hide resolved

connorjclark reviewed Jan 31, 2019

View reviewed changes

lighthouse-core/report/html/renderer/util.js Show resolved Hide resolved

mattzeunert force-pushed the code-snippet branch 2 times, most recently from 5bbd284 to c4237ed Compare February 2, 2019 12:00

mattzeunert changed the title ~~core(details-renderer): code-snippet details renderer type~~ core(details-renderer): snippet-list details renderer type Feb 2, 2019

mattzeunert force-pushed the code-snippet branch from e490a89 to 624690f Compare February 3, 2019 09:29

brendankenny requested changes Feb 4, 2019

View reviewed changes

brendankenny mentioned this pull request Feb 5, 2019

core(tsc): begin clean up of audit details types #7154

Merged

connorjclark reviewed Feb 5, 2019

View reviewed changes

lighthouse-core/report/html/renderer/util.js Outdated Show resolved Hide resolved

mattzeunert added 3 commits February 11, 2019 09:38

Snippet renderer

12d56af

JSON LD Stuff

281791d

Revert "JSON LD Stuff"

3eb8c65

This reverts commit 249dd67b984c0071a29bcd9190092e98dc52f1cb.

mattzeunert added 4 commits February 11, 2019 09:38

Clean up tests

68eb06a

Test case for list rendering

60fbb1f

Test case for header/expanding

e2eab1d

Rename lineRanges to availableLineRanges

8aa311d

mattzeunert force-pushed the code-snippet branch from 4e9b17a to 8aa311d Compare February 11, 2019 10:11

mattzeunert changed the title ~~core(details-renderer): snippet-list details renderer type~~ core(details-renderer): snippet details renderer type Feb 11, 2019

Assert tag name

7de63a0

mattzeunert added 8 commits February 11, 2019 10:36

Test case tweaks

557f7dc

Test case for truncated lines

6585304

Explain snippet details

983cd38

Tweaks

e0648de

Test highlight logic

0948b4f

Tweaks

e200a53

Comment

f64c552

highlights -> messages

092725a

rviscomi mentioned this pull request Feb 13, 2019

[SEO Audits] Structured data is valid #4359

Open

patrickhulce approved these changes Feb 17, 2019

View reviewed changes

lighthouse-core/report/html/renderer/details-renderer.js Outdated Show resolved Hide resolved

lighthouse-core/report/html/renderer/snippet-renderer.js Outdated Show resolved Hide resolved

lighthouse-core/report/html/renderer/snippet-renderer.js Outdated Show resolved Hide resolved

mattzeunert added 3 commits February 18, 2019 07:31

todo comment

fcbd748

Plural

193a6d8

Comment tweak

9529f91

brendankenny reviewed Feb 20, 2019

View reviewed changes

PR feedback

721f15d

brendankenny approved these changes Feb 20, 2019

View reviewed changes

brendankenny merged commit a9c3832 into GoogleChrome:master Feb 20, 2019

brendankenny mentioned this pull request May 10, 2022

core(responsiveness): add element screenshot to INP diagnostic #13984

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

core(details-renderer): snippet details renderer type #6999

core(details-renderer): snippet details renderer type #6999

mattzeunert commented Jan 13, 2019 •

edited

Loading

mattzeunert commented Jan 13, 2019

patrickhulce left a comment

patrickhulce commented Jan 14, 2019

mattzeunert commented Jan 23, 2019

mattzeunert commented Jan 30, 2019

patrickhulce left a comment

patrickhulce Jan 31, 2019

patrickhulce Jan 31, 2019

mattzeunert Feb 2, 2019

patrickhulce Jan 31, 2019

mattzeunert Feb 3, 2019 •

edited

Loading

mattzeunert commented Feb 3, 2019

mattzeunert commented Feb 3, 2019

brendankenny left a comment

brendankenny Feb 4, 2019

mattzeunert Feb 11, 2019

brendankenny commented Feb 4, 2019

brendankenny commented Feb 8, 2019 •

edited

Loading

mattzeunert commented Feb 11, 2019

danbri commented Feb 14, 2019

paulirish commented Feb 14, 2019 via email

patrickhulce left a comment

brendankenny Feb 20, 2019

brendankenny Feb 20, 2019

brendankenny Feb 20, 2019

mattzeunert Feb 20, 2019

brendankenny Feb 20, 2019

brendankenny Feb 20, 2019

brendankenny left a comment


		snippet.append(CodeSnippetRenderer.renderSnippetLines(dom, tmpl, details));

		// If expanded view still doesn't include all lines then indicate that that

core(details-renderer): snippet details renderer type #6999

core(details-renderer): snippet details renderer type #6999

Conversation

mattzeunert commented Jan 13, 2019 • edited Loading

mattzeunert commented Jan 13, 2019

patrickhulce left a comment

Choose a reason for hiding this comment

patrickhulce commented Jan 14, 2019

mattzeunert commented Jan 23, 2019

mattzeunert commented Jan 30, 2019

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattzeunert Feb 3, 2019 • edited Loading

Choose a reason for hiding this comment

mattzeunert commented Feb 3, 2019

mattzeunert commented Feb 3, 2019

brendankenny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brendankenny commented Feb 4, 2019

brendankenny commented Feb 8, 2019 • edited Loading

mattzeunert commented Feb 11, 2019

danbri commented Feb 14, 2019

paulirish commented Feb 14, 2019 via email

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brendankenny left a comment

Choose a reason for hiding this comment

mattzeunert commented Jan 13, 2019 •

edited

Loading

mattzeunert Feb 3, 2019 •

edited

Loading

brendankenny commented Feb 8, 2019 •

edited

Loading