report: use entity classification to filter third-parties

report/renderer/details-renderer.js

@@ -65,8 +65,8 @@ export class DetailsRenderer {
         return null;
 
       default: {
-        // @ts-expect-error tsc thinks this is unreachable, but be forward compatible
-        // with new unexpected detail types.
+        // @ts-expect-error - all detail types need to be handled above so tsc thinks this is unreachable.
+        // Call _renderUnknown() to be forward compatible with new, unexpected detail types.
         return this._renderUnknown(details.type, details);
       }
     }
@@ -398,9 +398,22 @@ export class DetailsRenderer {
     let even = true;
     for (const item of details.items) {
       const rowsFragment = this._renderTableRowsFromItem(item, details.headings);
+
+      // The attribute item.entity could be a string (entity-classification), or
+      // a LinkValue for ThirdPartySummary audit.
+      let entityName;
+      if (typeof item.entity === 'object' && item.entity.type === 'link') {
+        entityName = item.entity.text;
+      } else if (typeof item.entity === 'string') {
+        entityName = item.entity;
+      }
+
       for (const rowEl of this._dom.findAll('tr', rowsFragment)) {
         // For zebra styling.
         rowEl.classList.add(even ? 'lh-row--even' : 'lh-row--odd');
+        if (entityName && !rowEl.classList.contains('lh-sub-item-row')) {
+          rowEl.dataset.entity = entityName;
+        }
       }
       even = !even;
       tbodyElem.append(rowsFragment);

report/renderer/report-ui-features.js

@@ -244,7 +244,9 @@ export class ReportUIFeatures {
 
     tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
-      const thirdPartyRows = this._getThirdPartyRows(rowEls, Util.getFinalDisplayedUrl(this.json));
+      const primaryRowEls = rowEls.filter(rowEl => !rowEl.classList.contains('lh-sub-item-row'));
+      const thirdPartyRowEls = this._getThirdPartyRows(
+        primaryRowEls, Util.getFinalDisplayedUrl(this.json));
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
@@ -253,9 +255,9 @@ export class ReportUIFeatures {
       filterInput.addEventListener('change', e => {
         const shouldHideThirdParty = e.target instanceof HTMLInputElement && !e.target.checked;
         let even = true;
-        let rowEl = rowEls[0];
+        let rowEl = primaryRowEls[0];
         while (rowEl) {
-          const shouldHide = shouldHideThirdParty && thirdPartyRows.includes(rowEl);
+          const shouldHide = shouldHideThirdParty && thirdPartyRowEls.includes(rowEl);
 
           // Iterate subsequent associated sub item rows.
           do {
@@ -272,12 +274,12 @@ export class ReportUIFeatures {
       });
 
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
-          `${thirdPartyRows.length}`;
+          `${thirdPartyRowEls.length}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =
           Globals.strings.thirdPartyResourcesLabel;
 
-      const allThirdParty = thirdPartyRows.length === rowEls.length;
-      const allFirstParty = !thirdPartyRows.length;
+      const allThirdParty = thirdPartyRowEls.length === primaryRowEls.length;
+      const allFirstParty = !thirdPartyRowEls.length;
 
       // If all or none of the rows are 3rd party, hide the control.
       if (allThirdParty || allFirstParty) {
@@ -319,25 +321,29 @@ export class ReportUIFeatures {
    * @return {Array<HTMLElement>}
    */
   _getThirdPartyRows(rowEls, finalDisplayedUrl) {
-    /** @type {Array<HTMLElement>} */
-    const thirdPartyRows = [];
     const finalDisplayedUrlRootDomain = Util.getRootDomain(finalDisplayedUrl);
+    const firstPartyEntityName = this.json.entities?.firstParty;
 
+    /** @type {Array<HTMLElement>} */
+    const thirdPartyRowEls = [];
     for (const rowEl of rowEls) {
-      if (rowEl.classList.contains('lh-sub-item-row')) continue;
-
-      const urlItem = rowEl.querySelector('div.lh-text__url');
-      if (!urlItem) continue;
-
-      const datasetUrl = urlItem.dataset.url;
-      if (!datasetUrl) continue;
-      const isThirdParty = Util.getRootDomain(datasetUrl) !== finalDisplayedUrlRootDomain;
-      if (!isThirdParty) continue;
+      if (firstPartyEntityName) {
+        // We rely on entity-classification for new LHRs that support it.
+        if (!rowEl.dataset.entity || rowEl.dataset.entity === firstPartyEntityName) continue;
+      } else {
+        // Without 10.0's entity classification, fallback to the older root domain-based filtering.
+        const urlItem = rowEl.querySelector('div.lh-text__url');
+        if (!urlItem) continue;
+        const datasetUrl = urlItem.dataset.url;
+        if (!datasetUrl) continue;
+        const isThirdParty = Util.getRootDomain(datasetUrl) !== finalDisplayedUrlRootDomain;
+        if (!isThirdParty) continue;
+      }
 
-      thirdPartyRows.push(rowEl);
+      thirdPartyRowEls.push(rowEl);
     }
 
-    return thirdPartyRows;
+    return thirdPartyRowEls;
   }
 
   /**

report/renderer/report-utils.js

@@ -90,6 +90,9 @@ class ReportUtils {
           }
         }
 
+        // Attach table/opportunity items with entity information.
+        ReportUtils.classifyEntities(result.entities, audit);
+
         // TODO: convert printf-style displayValue.
         // Added:   #5099, v3
         // Removed: #6767, v4
@@ -187,6 +190,75 @@ class ReportUtils {
     return clone;
   }
 
+  /**
+   * Given an audit's details, identify and return a URL locator function that
+   * can be called later with an `item` to extract the URL of it.
+   * @param {LH.FormattedIcu<LH.Audit.Details.TableColumnHeading[]>} headings
+   * @return {{(item: LH.FormattedIcu<LH.Audit.Details.TableItem>): string|undefined}=}
+   */
+  static getUrlLocatorFn(headings) {
+    // The most common type, valueType=url.
+    const urlKey = headings.find(heading => heading.valueType === 'url')?.key;
+    if (urlKey && typeof urlKey === 'string') {
+      // Return a function that extracts item.url.
+      return (item) => {
+        const url = item[urlKey];
+        if (typeof url === 'string') return url;
+      };
+    }
+
+    // The second common type, valueType=source-location.
+    const srcLocationKey = headings.find(heading => heading.valueType === 'source-location')?.key;
+    if (srcLocationKey) {
+      // Return a function that extracts item.source.url.
+      return (item) => {
+        const sourceLocation = item[srcLocationKey];
+        if (typeof sourceLocation === 'object' && sourceLocation.type === 'source-location') {
+          return sourceLocation.url;
+        }
+      };
+    }
+
+    // More specific tests go here, as we need to identify URLs in more audits.
+  }
+
+  /**
+   * Mark TableItems/OpportunityItems with entity names.
+   * @param {LH.Result.Entities|undefined} entityClassification
+   * @param {import('../../types/lhr/audit-result').Result} audit
+   */
+  static classifyEntities(entityClassification, audit) {
+    if (!entityClassification) return;
+    if (audit.details?.type !== 'opportunity' && audit.details?.type !== 'table') {
+      return;
+    }
+
+    // If details.items are already marked with entity attribute during an audit, nothing to do here.
+    const {items, headings} = audit.details;
+    if (!items.length || items.some(item => item.entity)) return;
+
+    // Identify a URL-locator function that we could call against each item to get its URL.
+    const urlLocatorFn = ReportUtils.getUrlLocatorFn(headings);
+    if (!urlLocatorFn) return;
+
+    for (const item of items) {
+      const url = urlLocatorFn(item);
+      if (!url) continue;
+
+      let origin;
+      try {
+        // Non-URLs can appear in valueType: url columns, like 'Unattributable'
+        origin = Util.parseURL(url).origin;
+      } catch {}
+      if (!origin) continue;
+
+      const entityIndex = entityClassification.entityIndexByOrigin[origin];
+      if (entityIndex === undefined) return;
+      const entity = entityClassification.list[entityIndex];
+      item.entity = entity.name;
+    }
+  }
+
   /**
    * @param {LH.Result['configSettings']} settings
    * @return {!{deviceEmulation: string, screenEmulation?: string, networkThrottling: string, cpuThrottling: string, summary: string}}