Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

report(details-renderer): use new details types #7192

Merged
merged 1 commit into from
Feb 20, 2019
Merged

Conversation

brendankenny
Copy link
Member

Uses the new audit details types from #7177 in DetailsRenderer, finally deleting all those super old (and confusing) typedefs. Internal functionality is changed, but the generated DOM should be exactly the same.

Majority of the PR is tests because details-renderer-test.js was really really light before this :)

Main things were

  • finally completing an old TODO to merge opportunity and table rendering (since they're both really tables). This required a _getCanonicalizedTableHeadings method because they have different heading formats (which we can hopefully fix next breaking version).
  • deleting a bunch of cases from the DetailsRenderer.render() switch statement reflecting the audit-details.d.ts type structure that has a few root details types, with all the common types (text, url, etc) within details items. These are now rendered in _renderTableValue().

As mentioned in #7177, there's nothing special about which types fall into render or _renderTableValue, this organization just keeps things narrowed to how we actually use these types. If at some point we need code to be directly used, it's as simple as adding LH.Audit.Details.Code to the LH.Audit.Details type union and adding _renderCode() back to the DetailsRenderer.render() switch.

Copy link
Member

@exterkamp exterkamp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM great changes!

@@ -43,52 +41,29 @@ class DetailsRenderer {
}

/**
* @param {DetailsJSON|OpportunityDetails} details
* @param {LH.Audit.Details} details
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add a comment for what this render function does. i.e. render the top level categories of details.

@@ -100,7 +100,6 @@ declare global {
id: string;
/** A more detailed description that describes why the audit is important and links to Lighthouse documentation on the audit; markdown links supported. */
description: string;
// TODO(bckenny): define details
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

Copy link
Member

@paulirish paulirish left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hot.


// Internal-only details, not for rendering.
case 'screenshot':
case 'diagnostic':
return null;
// Fallback for old LHRs, where no type meant don't render.
case undefined:
return null;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we console.error or something?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we console.error or something?

I don't think it matters. This is for loading < 4.2 or whatever LHRs in the viewer. Things like diagnostics.js and metrics.js didn't have a type before, now they do (type: 'diagnostic'), so just need an explicit handling of the no-type type.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants