Add table list formatter for HTML audits #1505

ebidel · 2017-01-21T00:43:25Z

R: all

This adds a new <table> formatter for HTML reports which increases clarity, fixes some overflow UI bugs we had with text, and will allow us to more easily add additional extended info in the future (e.g. extra properties from the gatherers, RUM data column, etc.)

An audit uses the formatter like so:

const createTable = Formatter.getByName('table').createTable;
...
extendedInfo: {
    formatter: Formatter.SUPPORTED_FORMATS.TABLE,
    value: {
      table: createTable({url: 'URL', protocol: 'Protocol'}, resources),
      results: resources
    }
}

Notes:

All the cells are overflow: auto so you can scroll them to reveal more of the url/code snippets
the original results are also being returned in extendedInfo so unit testing is easier and so we have the full objects as returned by the gatherer. Might want to change this in the future b/c it does mean the JSON results will be larger than they need to be.
This PR was getting big, so I only did 3 audits. When we're happy with this, we can move over other URLIST audits to use the TABLE formatter.

After:

Before:

patrickhulce · 2017-01-23T17:18:41Z

Niiiiiiiiiiiice, I was needing something like this!

patrickhulce

awesome stuff!

patrickhulce · 2017-01-23T17:23:35Z

lighthouse-core/audits/dobetterweb/uses-optimized-images.js

+      results.push({
+        url,
+        total: `${originalKb} KB`,
+        webpSavings: `${webpSavings ? webpSavings.percent + '%' : ''}`,


don't need the check here for webpSavings

patrickhulce · 2017-01-23T17:24:15Z

lighthouse-core/audits/dobetterweb/uses-optimized-images.js

+        url,
+        total: `${originalKb} KB`,
+        webpSavings: `${webpSavings ? webpSavings.percent + '%' : ''}`,
+        jpegSavings: `${jpegSavings ? jpegSavings.percent + '%' : ''}`


either add a check for it to be positive here or move jpegSavings = ... inside the if above?

probably also move these out of `` strings :)

patrickhulce · 2017-01-23T17:26:58Z

lighthouse-core/audits/dobetterweb/uses-passive-event-listeners.js

-        value: groupedResults
+        formatter: Formatter.SUPPORTED_FORMATS.TABLE,
+        value: {
+          results: groupedResults,


no changes needed to the mapping?

nope. The table formatter will pull from thegroupedResults object as needed, based on the keys used in the first arg to createTable({url: 'URL', lineCol: 'Line/Col', type: 'Type', code: 'Snippet'}).

Ah so the extra info was already in there and was being ignored by URLLIST?

patrickhulce · 2017-01-23T17:27:14Z

lighthouse-core/formatters/partials/table.html

+<style>
+.table_list {
+  margin-top: 8px;
+  border: 1px solid #EBEBEB;


do we care about alphabetizing our rules?

There's a PR that alphabetizing selectors was brought up (can't find it now), but we deemed it unrealistic without tooling.

a-ok by me!

patrickhulce · 2017-01-23T17:30:29Z

lighthouse-core/formatters/table.js

+   * @param {!Object<string, string>} headings for the table. The order of this
+   *     object's key/value will be the order of the table's headings.
+   * @param {!Array<*>} results Audit results.
+   * @return {!{headings: string, rows: [{cols: [*]}]}} headings


nit: no ! needed, headings is Array<string> isn't it?

thanks. done.

ebidel · 2017-01-23T19:55:51Z

PTAL

brendankenny · 2017-01-24T02:42:58Z

To keep formatting out of the audits (and avoiding the Formatter.getByName(Formatter.SUPPORTED_FORMATS.TABLE) monster), rather than have each audit access the createTable function, you could do something like add a

static getHelpers() {
  createTable
}

to the formatter, then have the extendedInfo be something like

extendedInfo: {
  formatter: Formatter.SUPPORTED_FORMATS.TABLE,
  value: {
    results,
    tableHeaders
  }
}

and then have createTable be applied to results in the partial to create the table at that point (and pretty could just call createTable inside itself)

WDYT?

brendankenny · 2017-01-24T02:44:42Z

this is a huge improvement

brendankenny · 2017-01-24T02:51:12Z

lighthouse-core/formatters/table.js

+
+  /**
+   * Preps a formatted table (headings/col vals) for output.
+   * @param {!Object<string, string>} headings for the table. The order of this


nit: can just do !Object<string> (since all object keys are strings)

brendankenny · 2017-01-24T02:51:40Z

lighthouse-core/formatters/table.js

+      const cols = headingKeys.map(key => {
+        switch (key) {
+          case 'code':
+            // Wrap code snippets in markdown ticks.


worth documenting these special keys in jsdoc?

done. added to the function description. If we ad more one-offs, that'll be easy to doc more.

brendankenny · 2017-01-24T02:52:17Z

lighthouse-core/formatters/table.js

+   * Preps a formatted table (headings/col vals) for output.
+   * @param {!Object<string, string>} headings for the table. The order of this
+   *     object's key/value will be the order of the table's headings.
+   * @param {!Array<*>} results Audit results.


looks like you maybe expect this to be !Array<!Object>?

brendankenny · 2017-01-24T02:53:58Z

lighthouse-core/formatters/table.js

+   * @param {!Object<string, string>} headings for the table. The order of this
+   *     object's key/value will be the order of the table's headings.
+   * @param {!Array<*>} results Audit results.
+   * @return {{headings: Array<string>, rows: [{cols: [*]}]}} headings


maybe @return {{headings: !Array<string>, rows: !Array<{cols: !Array<*>}>}}?

ebidel · 2017-01-24T07:32:32Z

PTAL. getHelpers refactor and new tests.

brendankenny

LGTM
┬─┬

ebidel added 5 commits January 19, 2017 22:26

Table formatter and some usage

c624b6e

Create table helper and update tests

7056a53

Add test

fc593f3

Typo

0283448

Add comment and fix smoke tests

1644176

patrickhulce suggested changes Jan 23, 2017

View reviewed changes

feedback

2cb4469

patrickhulce approved these changes Jan 23, 2017

View reviewed changes

brendankenny reviewed Jan 24, 2017

View reviewed changes

feedback

9a82143

brendankenny approved these changes Jan 25, 2017

View reviewed changes

brendankenny merged commit e1fc9e0 into master Jan 25, 2017

brendankenny deleted the tablelist branch January 25, 2017 00:40

brendankenny mentioned this pull request Jan 25, 2017

URL blocking patterns configuration UI #1455

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add table list formatter for HTML audits #1505

Add table list formatter for HTML audits #1505

ebidel commented Jan 21, 2017 •

edited

patrickhulce commented Jan 23, 2017

patrickhulce left a comment

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

patrickhulce Jan 23, 2017

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

patrickhulce Jan 23, 2017

patrickhulce Jan 23, 2017

ebidel Jan 23, 2017

ebidel commented Jan 23, 2017

brendankenny commented Jan 24, 2017

brendankenny commented Jan 24, 2017

brendankenny Jan 24, 2017

ebidel Jan 24, 2017

brendankenny Jan 24, 2017

ebidel Jan 24, 2017 •

edited

brendankenny Jan 24, 2017

ebidel Jan 24, 2017

brendankenny Jan 24, 2017

ebidel Jan 24, 2017

ebidel commented Jan 24, 2017

brendankenny left a comment

Add table list formatter for HTML audits #1505

Add table list formatter for HTML audits #1505

Conversation

ebidel commented Jan 21, 2017 • edited

patrickhulce commented Jan 23, 2017

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

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

Choose a reason for hiding this comment

ebidel commented Jan 23, 2017

brendankenny commented Jan 24, 2017

brendankenny commented Jan 24, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ebidel Jan 24, 2017 • edited

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

ebidel commented Jan 24, 2017

brendankenny left a comment

Choose a reason for hiding this comment

ebidel commented Jan 21, 2017 •

edited

ebidel Jan 24, 2017 •

edited