Skip to content

report: display plugins in footer - #17125

Merged
connorjclark merged 7 commits into
GoogleChrome:mainfrom
NickNojiri:fix/plugin-footer-display
Sep 17, 2026
Merged

report: display plugins in footer#17125
connorjclark merged 7 commits into
GoogleChrome:mainfrom
NickNojiri:fix/plugin-footer-display

Conversation

@NickNojiri

@NickNojiri NickNojiri commented Jul 12, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Adds the plugins used during a run to the report footer's meta block. Plugin categories are detected by their lighthouse-plugin- id prefix (same mechanism as the existing plugin gauge badge) and rendered as a Plugins: <ids> item with the puzzle-piece icon. Reports with no plugins are unchanged.

Includes a new localizable runtimeSettingsPlugins string, regenerated locale/sample fixtures, and unit tests covering both the plugin and no-plugin cases.

Related Issues/PRs

Fixes #9934

@NickNojiri
NickNojiri requested a review from a team as a code owner July 12, 2026 07:44
@NickNojiri
NickNojiri requested review from connorjclark and removed request for a team July 12, 2026 07:44
@google-cla

google-cla Bot commented Jul 12, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@NickNojiri
NickNojiri force-pushed the fix/plugin-footer-display branch from 18a4861 to f5b79ba Compare July 12, 2026 20:09
@NickNojiri

NickNojiri commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author

Done

connorjclark
connorjclark requested changes Sep 10, 2026
View reviewed changes

@connorjclark connorjclark left a comment •
edited
Loading

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

This doesn't match the intended design laid out here: #9934 (comment)

Namely, one row per plugin; including the version (takes some work to get this); linking to npm; adding to credits. As it is, just listing the plugin names is not useful.

EDIT: I handled adding to the LHR credits here: #17232

@NickNojiri
report: one footer row per plugin, with version and npm link
e7911e7 
Addresses review feedback on GoogleChrome#17125: listing plugin names alone isn't
useful. Each plugin now gets its own footer row showing its npm package
name and version, linked to that package on npm.

A plugin's category ID is its npm package name, so it doubles as the link
target. The version comes from the LHR credits -- the same channel the
axe-core version already uses -- and is omitted when absent, so reports
from runners that don't record it degrade to just the name.
@NickNojiri
Merge remote-tracking branch 'upstream/main' into fix/plugin-footer-d…
9b91413 
…isplay
@NickNojiri

NickNojiri commented Sep 14, 2026

Copy link
Copy Markdown
Contributor Author

Updated — each plugin now gets its own footer row showing package name and
version, linked to npm. The version reads from the credits you added in
#17232 (thanks, that's what made the version feasible), and degrades to just
the name when absent.

Merged main so #17232 is in, and verified end-to-end against
lighthouse-plugin-simple — renders as Plugin: lighthouse-plugin-simple 1.0.0
linking to npmjs.com/package/lighthouse-plugin-simple.

One thing I ran into: your credits code handles scoped plugins
(@scope/lighthouse-plugin-*), but ReportUtils.isPluginCategory only matches
unscoped names, so a scoped plugin gets a version in credits and no footer row
at all. Confirmed with a scoped fixture. Since that also affects the gauge badge
and plugin grouping, widening it felt out of scope here — happy to do it in this
PR or file it separately, whichever you'd prefer.

@connorjclark connorjclark mentioned this pull request Sep 16, 2026
Merged
connorjclark
connorjclark reviewed Sep 16, 2026
View reviewed changes
Comment thread report/assets/styles.css
Comment on lines +517 to +519
.lh-report-icon--plugin::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
}

@connorjclark connorjclark Sep 16, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Logo clips:

Image

This looks right:

Suggested change
.lh-report-icon--plugin::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
}
.lh-report-icon--plugin::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>');
}

connorjclark
connorjclark reviewed Sep 16, 2026
View reviewed changes
Comment thread report/renderer/report-utils.js Outdated
/** Label for a row in a table that shows the screen resolution and DPR that was emulated for the Lighthouse run. Example values: '800x600, DPR: 3' */
runtimeSettingsScreenEmulation: 'Screen emulation',
/** Label for a row naming a single Lighthouse plugin used for this run, followed by that plugin's npm package name and version. Example row values: 'lighthouse-plugin-publisher-ads 1.2.3', 'lighthouse-plugin-field-performance 3.0.1' */
runtimeSettingsPlugin: 'Plugin',

@connorjclark connorjclark Sep 16, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

On second thought: let's drop this prefix. Just the plugin name. Otherwise it don't fit well:

Image

Besides, the word plugin is in the package name already.

@connorjclark

connorjclark commented Sep 16, 2026

Copy link
Copy Markdown
Collaborator

Good catch re: ReportUtils.isPluginCategory - fixed in #17243

@NickNojiri
report: address review feedback on plugin footer rows
62a3573 
- Drop the "Plugin:" label prefix. The row now shows just the package name
  and version: the word "plugin" is already in the package name, and the
  prefix overflowed the row.
- Remove the now-unused runtimeSettingsPlugin UI string.
- Stop giving the plugin icon SVG an intrinsic 24px size, so it scales to
  the 16px meta-icon box instead of being clipped.
@connorjclark
connorjclark merged commit 5019225 into GoogleChrome:main Sep 17, 2026
32 of 33 checks passed
@connorjclark

connorjclark commented Sep 17, 2026

Copy link
Copy Markdown
Collaborator

Thank you!

btw, have you developed a Lighthouse plugin?

@NickNojiri

NickNojiri commented Sep 17, 2026

Copy link
Copy Markdown
Contributor Author

No, I haven't. I just picked up #9934 off the issue list, and the work was
all in the report renderer.

Why do you ask? Happy to take another one if there's something useful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@connorjclark connorjclark connorjclark approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Display plugins in footer of report

2 participants

@NickNojiri @connorjclark