Handle additional audit result details

[BioPhoton]

User story

As an user, I want to be able to add additional details to my plugin results to be able to provide meaningful information to the report consumers in addition to issues. At the moment the existing option issues is insufficient for information that is related to more than one line of code.

Acceptance criteria

• [ ] The details field of an AuditDetails should provide a new optional property for additional information
• [ ] The information is displayed in the md format of reports

Implementation details

• To start with a details type that matches most of the available data we could introduce a table type.
• This information should get displayed after the issues if present.
• The details should have issues and table optional.

Types:

type Headings = {
    key: string;
    label?: string;
}

type Table = {
  headings: Headings[]
  items: (unknown | Record<string, unknown>)[]
}

Examples:

const list: Table = {
  items: [ 'Tina', 'John' ]
}

Output:

• Tina
• John

---

const tableOfItemsOnly: Table = {
  items: [
    { name: 'Tina', age: 42, height: 165},
    { name: 'John', age: 21, height: 172},
  ]
}

Output:

name	age	height
Tina	42	165
John	21	172

---

const tableWithHeading: Table = {
  heading: [
    { key: 'name' },
    { key: 'age'},
  ],
  items: [
    { name: 'Tina', age: 42, height: 165},
    { name: 'John', age: 21, height: 172},
  ]
}

Output:

name	age
Tina	42
John	21

---

const tableHeadingLabels: Table = {
  heading: [
    { key: 'name', label: 'Name'},
    { key: 'age', label: 'Age'},
  ],
  items: [
    { name: 'Tina', age: 42, height: 165},
    { name: 'John', age: 21, height: 172},
  ]
}

Output:

Name	Age
Tina	42
John	21

---

Example Before:

---

Largest Contentful Paint (Lighthouse)

🟨 3.2 s (score: 73)

Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric

---

Example After:

---

Largest Contentful Paint (Lighthouse)

🟨 3.2 s (score: 73)

Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric

LCP Breakdown:

Phase	% of LCP	Timing
TTFB	27%	620 ms
Load Delay	25%	580 ms
Load Time	41%	940 ms
Render Delay	6%	140 ms

Element:

<img _ngcontent-ng-c1817005767="" alt="poster movie" class="aspectRatio-2-3 gradient" width="154" height="205" loading="eager" fetchpriority="high" ng-img="true" src="https://image.tmdb.org/t/p/w185/hu40Uxp9WtpL34jv3zyWLb5zEVY.jpg" srcset="https://image.tmdb.org/t/p/w185/hu40Uxp9WtpL34jv3zyWLb5zEVY.jpg 185w, http…" sizes="(min-width: 600px) 21vw, 15vw">

---

Research

Community plugin on measuring style usage

Example of the current output in the md report:

lighthouse reports

Lighthouse is a perfect example for considering this new detail property as a LHR provides a multitude of additional information that is at the moment not possible to be included in details.

Here a list of possible lighthouse audit results and how they are displayed on their end.

Example of Details.Debugdata

{
    "details": {
      "type": "debugdata",
      "items": [
        {
          "cumulativeLayoutShiftMainFrame": 0.000_350_978_852_728_593_95
        }
      ]
    }
}

Example of Details.Opportunity

{
        "details": {
          "type": "opportunity",
          "headings": [
            {
              "key": "url",
              "valueType": "url",
              "label": "URL",
            },
            {
              "key": "responseTime",
              "valueType": "timespanMs",
              "label": "Time Spent",
            },
          ],
          "items": [
            {
              "url": 'https://staging.code-pushup.dev/login',
              "responseTime": 449.292_000_000_000_03,
            },
          ],
          "overallSavingsMs": 349.292_000_000_000_03,
        }
      },

Example of Details.Table in Details.List

   {
      "scoreDisplayMode": "informative",
      "displayValue": "2,240 ms",
      "details": {
        "type": "list",
        "items": [
          {
            "type": "table",
            "headings": [
              {
                "key": "node",
                "valueType": "node",
                "label": "Element"
              }
            ],
            "items": [
              {
                "node": {
                  "type": "node",
                  "lhId": "page-0-IMG",
                  "path": "1,HTML,1,BODY,1,APP-ROOT,0,APP-SHELL,2,DIV,2,DIV,1,CT-MOVIES-LIST,0,ARTICLE,2,UI-MOVIE-LIST,0,UI-GRID-LIST,0,A,0,IMG",
                  "selector": "ui-movie-list > ui-grid-list > a.ui-grid-list-item > img.aspectRatio-2-3",
                  "boundingRect": {
                    "top": 175,
                    "bottom": 413,
                    "left": 30,
                    "right": 189,
                    "width": 158,
                    "height": 238
                  },
                  "snippet": "<img _ngcontent-ng-c1817005767=\"\" alt=\"poster movie\" class=\"aspectRatio-2-3 gradient\" width=\"154\" height=\"205\" loading=\"eager\" fetchpriority=\"high\" ng-img=\"true\" src=\"https://image.tmdb.org/t/p/w185/hu40Uxp9WtpL34jv3zyWLb5zEVY.jpg\" srcset=\"https://image.tmdb.org/t/p/w185/hu40Uxp9WtpL34jv3zyWLb5zEVY.jpg 185w, http…\" sizes=\"(min-width: 600px) 21vw, 15vw\">",
                  "nodeLabel": "poster movie"
                }
              }
            ]
          },
          {
            "type": "table",
            "headings": [
              {
                "key": "phase",
                "valueType": "text",
                "label": "Phase"
              },
              {
                "key": "percent",
                "valueType": "text",
                "label": "% of LCP"
              },
              {
                "key": "timing",
                "valueType": "ms",
                "label": "Timing"
              }
            ],
            "items": [
              {
                "phase": "TTFB",
                "timing": 618.4395,
                "percent": "28%"
              },
              {
                "phase": "Load Delay",
                "timing": 108.52322934454139,
                "percent": "5%"
              },
              {
                "phase": "Load Time",
                "timing": 1359.7222634888808,
                "percent": "61%"
              },
              {
                "phase": "Render Delay",
                "timing": 156.7545071665777,
                "percent": "7%"
              }
            ]
          }
        ]
      }
    },

Other audits to exclude:

A Lighthouse result contains a couple of audits that have no score.

There are multiple scenarios that I was able to track down:

• The provided URL is not accessible. In this case all audits have a score of null but are still present in the result.
• If the URL is valid, the following scoreDisplayMode have a score of null:
  • informative
  • notApplicable
  • manual

Here a screenshot:

LHR example: report.json

[eneajaho]

Hello @BioPhoton A table type would be really helpful. Also, it would be great, because we can also add as much info as we need to and not be blocked by the 1048 max chars (hope so).

Also, what would be great, is to have some global css classes for basic styling (pills (success, warning, error))

I see that you already added DS component styles usage. And the table option would be a perfect fit for that one.

[BioPhoton]

closed by #667