report: display plugins in footer

core/test/fixtures/user-flows/reports/sample-flow-result.json

@@ -6573,6 +6573,7 @@
             "runtimeSettingsCPUThrottling": "CPU throttling",
             "runtimeSettingsDevice": "Device",
             "runtimeSettingsNetworkThrottling": "Network throttling",
+            "runtimeSettingsPlugins": "Plugins",
             "runtimeSettingsScreenEmulation": "Screen emulation",
             "runtimeSettingsUANetwork": "User agent (network)",
             "runtimeSingleLoad": "Single page session",
@@ -10910,6 +10911,7 @@
             "runtimeSettingsCPUThrottling": "CPU throttling",
             "runtimeSettingsDevice": "Device",
             "runtimeSettingsNetworkThrottling": "Network throttling",
+            "runtimeSettingsPlugins": "Plugins",
             "runtimeSettingsScreenEmulation": "Screen emulation",
             "runtimeSettingsUANetwork": "User agent (network)",
             "runtimeSingleLoad": "Single page session",
@@ -16732,6 +16734,7 @@
             "runtimeSettingsCPUThrottling": "CPU throttling",
             "runtimeSettingsDevice": "Device",
             "runtimeSettingsNetworkThrottling": "Network throttling",
+            "runtimeSettingsPlugins": "Plugins",
             "runtimeSettingsScreenEmulation": "Screen emulation",
             "runtimeSettingsUANetwork": "User agent (network)",
             "runtimeSingleLoad": "Single page session",
@@ -24240,6 +24243,7 @@
             "runtimeSettingsCPUThrottling": "CPU throttling",
             "runtimeSettingsDevice": "Device",
             "runtimeSettingsNetworkThrottling": "Network throttling",
+            "runtimeSettingsPlugins": "Plugins",
             "runtimeSettingsScreenEmulation": "Screen emulation",
             "runtimeSettingsUANetwork": "User agent (network)",
             "runtimeSingleLoad": "Single page session",

core/test/results/sample_v2.json

@@ -10143,6 +10143,7 @@
       "runtimeSettingsCPUThrottling": "CPU throttling",
       "runtimeSettingsDevice": "Device",
       "runtimeSettingsNetworkThrottling": "Network throttling",
+      "runtimeSettingsPlugins": "Plugins",
       "runtimeSettingsScreenEmulation": "Screen emulation",
       "runtimeSettingsUANetwork": "User agent (network)",
       "runtimeSingleLoad": "Single page session",

report/assets/styles.css

@@ -514,6 +514,9 @@
 .lh-report-icon--experiment::before {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path d="M4.50002 17C3.86136 17 3.40302 16.7187 3.12502 16.156C2.84702 15.5933 2.90936 15.069 3.31202 14.583L7.50002 9.5V4.5H6.75002C6.54202 4.5 6.36502 4.427 6.21902 4.281C6.07302 4.135 6.00002 3.958 6.00002 3.75C6.00002 3.542 6.07302 3.365 6.21902 3.219C6.36502 3.073 6.54202 3 6.75002 3H13.25C13.458 3 13.635 3.073 13.781 3.219C13.927 3.365 14 3.542 14 3.75C14 3.958 13.927 4.135 13.781 4.281C13.635 4.427 13.458 4.5 13.25 4.5H12.5V9.5L16.688 14.583C17.0767 15.069 17.132 15.5933 16.854 16.156C16.5767 16.7187 16.1254 17 15.5 17H4.50002ZM4.50002 15.5H15.5L11 10V4.5H9.00002V10L4.50002 15.5Z" fill="black"/></svg>');
 }
+.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>');
+}
 
 /** These are still icons, but w/o the auto-color invert / opacity / etc. that come with .lh-report-icon */
 

report/renderer/report-renderer.js

@@ -159,6 +159,13 @@ export class ReportRenderer {
         `${Globals.strings.runtimeSettingsUANetwork}: "${report.environment.networkUserAgent}"`],
     ];
 
+    const pluginNames = Object.keys(report.categories)
+      .filter(categoryId => ReportUtils.isPluginCategory(categoryId));
+    if (pluginNames.length > 0) {
+      metaItems.push(['plugin',
+        `${Globals.strings.runtimeSettingsPlugins}: ${pluginNames.join(', ')}`]);
+    }
+
     const metaItemsEl = this._dom.find('.lh-meta__items', footer);
     for (const [iconname, text, tooltip] of metaItems) {
       const itemEl = this._dom.createChildOf(metaItemsEl, 'li', 'lh-meta__item');

report/renderer/report-utils.js

@@ -443,6 +443,8 @@ const UIStrings = {
   runtimeSettingsAxeVersion: 'Axe version',
   /** 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 preceding a list of the Lighthouse plugins that were used for this run and added extra categories to the report. Example plugin names: 'lighthouse-plugin-publisher-ads', 'lighthouse-plugin-field-performance' */
+  runtimeSettingsPlugins: 'Plugins',
 
   /** Label for button to create an issue against the Lighthouse GitHub project. */
   footerIssue: 'File an issue',

report/test/renderer/report-renderer-test.js

@@ -278,6 +278,27 @@ describe('ReportRenderer', () => {
       expect(itemsTxt).toMatch('412x823, DPR 1.75');
       expect(itemsTxt).toContain('Point-in-time snapshot');
     });
+
+    it('renders plugins in the footer', () => {
+      sampleResults.categories['lighthouse-plugin-someplugin'] = {
+        id: 'lighthouse-plugin-someplugin',
+        title: 'Some Plugin',
+        auditRefs: [],
+      };
+      const footer = renderer._renderReportFooter(sampleResults);
+
+      const items = Array.from(footer.querySelectorAll('.lh-meta__item'));
+      const itemsTxt = items.map(el => el.textContent).join('\n');
+      expect(itemsTxt).toContain('Plugins: lighthouse-plugin-someplugin');
+    });
+
+    it('renders no plugins footer item when no plugins were used', () => {
+      const footer = renderer._renderReportFooter(sampleResults);
+
+      const items = Array.from(footer.querySelectorAll('.lh-meta__item'));
+      const itemsTxt = items.map(el => el.textContent).join('\n');
+      expect(itemsTxt).not.toContain('Plugins:');
+    });
   });
 
   it('should add LHR channel to doc link parameters', () => {