lighthouse 10.0.2 → 10.1.0-dev.20230324

package/report/renderer/details-renderer.js

@@ -24,22 +24,26 @@
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.TableItem>} TableItem */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.ItemValue>} TableItemValue */
 /** @typedef {LH.FormattedIcu<LH.Audit.Details.TableColumnHeading>} TableColumnHeading */
+/** @typedef {LH.FormattedIcu<LH.Audit.Details.Table | LH.Audit.Details.Opportunity>} TableLike */
 
 import {Util} from '../../shared/util.js';
 import {CriticalRequestChainRenderer} from './crc-details-renderer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
 import {Globals} from './report-globals.js';
+import {ReportUtils} from './report-utils.js';
 
 const URL_PREFIXES = ['http://', 'https://', 'data:'];
+const SUMMABLE_VALUETYPES = ['bytes', 'numeric', 'ms', 'timespanMs'];
 
 export class DetailsRenderer {
   /**
    * @param {DOM} dom
-   * @param {{fullPageScreenshot?: LH.Result.FullPageScreenshot}} [options]
+   * @param {{fullPageScreenshot?: LH.Result.FullPageScreenshot, entities?: LH.Result.Entities}} [options]
    */
   constructor(dom, options = {}) {
     this._dom = dom;
     this._fullPageScreenshot = options.fullPageScreenshot;
+    this._entities = options.entities;
   }
 
   /**
@@ -376,7 +380,110 @@ export class DetailsRenderer {
   }
 
   /**
-   * @param {{headings: TableColumnHeading[], items: TableItem[]}} details
+   * Adorn a table row element with entity chips based on [data-entity] attribute.
+   * @param {HTMLTableRowElement} rowEl
+   */
+  _adornEntityGroupRow(rowEl) {
+    const entityName = rowEl.dataset.entity;
+    if (!entityName) return;
+    const matchedEntity = this._entities?.find(e => e.name === entityName);
+    if (!matchedEntity) return;
+
+    const firstTdEl = this._dom.find('td', rowEl);
+
+    if (matchedEntity.category) {
+      const categoryChipEl = this._dom.createElement('span');
+      categoryChipEl.classList.add('lh-audit__adorn');
+      categoryChipEl.textContent = matchedEntity.category;
+      firstTdEl.append(' ', categoryChipEl);
+    }
+
+    if (matchedEntity.isFirstParty) {
+      const firstPartyChipEl = this._dom.createElement('span');
+      firstPartyChipEl.classList.add('lh-audit__adorn', 'lh-audit__adorn1p');
+      firstPartyChipEl.textContent = Globals.strings.firstPartyChipLabel;
+      firstTdEl.append(' ', firstPartyChipEl);
+    }
+
+    if (matchedEntity.homepage) {
+      const entityLinkEl = this._dom.createElement('a');
+      entityLinkEl.href = matchedEntity.homepage;
+      entityLinkEl.target = '_blank';
+      entityLinkEl.title = Globals.strings.openInANewTabTooltip;
+      entityLinkEl.classList.add('lh-report-icon--external');
+      firstTdEl.append(' ', entityLinkEl);
+    }
+  }
+
+  /**
+   * Renders an entity-grouped row.
+   * @param {TableItem} item
+   * @param {LH.Audit.Details.TableColumnHeading[]} headings
+   */
+  _renderEntityGroupRow(item, headings) {
+    const entityColumnHeading = {...headings[0]};
+    // In subitem-situations (unused-javascript), ensure Entity name is not rendered as code, etc.
+    entityColumnHeading.valueType = 'text';
+    const groupedRowHeadings = [entityColumnHeading, ...headings.slice(1)];
+    const fragment = this._dom.createFragment();
+    fragment.append(this._renderTableRow(item, groupedRowHeadings));
+    this._dom.find('tr', fragment).classList.add('lh-row--group');
+    return fragment;
+  }
+
+  /**
+   * Returns an array of entity-grouped TableItems to use as the top-level rows in
+   * an grouped table. Each table item returned represents a unique entity, with every
+   * applicable key that can be grouped as a property. Optionally, supported columns are
+   * summed by entity, and sorted by specified keys.
+   * @param {TableLike} details
+   * @return {TableItem[]}
+   */
+  _getEntityGroupItems(details) {
+    const {items, headings, sortedBy} = details;
+    // Exclude entity-grouped audits and results without entity classification.
+    // Eg. Third-party Summary comes entity-grouped.
+    if (!items.length || details.isEntityGrouped || !items.some(item => item.entity)) {
+      return [];
+    }
+
+    const skippedColumns = new Set(details.skipSumming || []);
+    /** @type {string[]} */
+    const summableColumns = [];
+    for (const heading of headings) {
+      if (!heading.key || skippedColumns.has(heading.key)) continue;
+      if (SUMMABLE_VALUETYPES.includes(heading.valueType)) {
+        summableColumns.push(heading.key);
+      }
+    }
+
+    // Grab the first column's key to group by entity
+    const firstColumnKey = headings[0].key;
+    if (!firstColumnKey) return [];
+
+    /** @type {Map<string | undefined, TableItem>} */
+    const byEntity = new Map();
+    for (const item of items) {
+      const entityName = typeof item.entity === 'string' ? item.entity : undefined;
+      const groupedItem = byEntity.get(entityName) || {
+        [firstColumnKey]: entityName || Globals.strings.unattributable,
+        entity: entityName,
+      };
+      for (const key of summableColumns) {
+        groupedItem[key] = Number(groupedItem[key] || 0) + Number(item[key] || 0);
+      }
+      byEntity.set(entityName, groupedItem);
+    }
+
+    const result = [...byEntity.values()];
+    if (sortedBy) {
+      result.sort(ReportUtils.getTableItemSortComparator(sortedBy));
+    }
+    return result;
+  }
+
+  /**
+   * @param {TableLike} details
    * @return {Element}
    */
   _renderTable(details) {
@@ -394,29 +501,45 @@ export class DetailsRenderer {
       this._dom.createChildOf(theadTrElem, 'th', classes).append(labelEl);
     }
 
+    const entityItems = this._getEntityGroupItems(details);
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
-    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;
+    if (entityItems.length) {
+      for (const entityItem of entityItems) {
+        const entityName = typeof entityItem.entity === 'string' ? entityItem.entity : undefined;
+        const entityGroupFragment = this._renderEntityGroupRow(entityItem, details.headings);
+        // Render all the items that match the heading row
+        for (const item of details.items.filter((item) => item.entity === entityName)) {
+          entityGroupFragment.append(this._renderTableRowsFromItem(item, details.headings));
+        }
+        const rowEls = this._dom.findAll('tr', entityGroupFragment);
+        if (entityName && rowEls.length) {
+          rowEls.forEach(row => row.dataset.entity = entityName);
+          this._adornEntityGroupRow(rowEls[0]);
+        }
+        tbodyElem.append(entityGroupFragment);
       }
-
-      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;
+    } else {
+      let even = true;
+      for (const item of details.items) {
+        const rowsFragment = this._renderTableRowsFromItem(item, details.headings);
+        const rowEls = this._dom.findAll('tr', rowsFragment);
+        const firstRowEl = rowEls[0];
+        if (typeof item.entity === 'string') {
+          firstRowEl.dataset.entity = item.entity;
+        }
+        if (details.isEntityGrouped && item.entity) {
+          // If the audit is already grouped, consider first row as a heading row.
+          firstRowEl.classList.add('lh-row--group');
+          this._adornEntityGroupRow(firstRowEl);
+        } else {
+          for (const rowEl of rowEls) {
+            // For zebra styling (same shade for a row and its sub-rows).
+            rowEl.classList.add(even ? 'lh-row--even' : 'lh-row--odd');
+          }
         }
+        even = !even;
+        tbodyElem.append(rowsFragment);
       }
-      even = !even;
-      tbodyElem.append(rowsFragment);
     }
 
     return tableElem;

package/report/renderer/performance-category-renderer.js

@@ -68,7 +68,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       return element;
     }
     const details = audit.result.details;
-    if (details.type !== 'opportunity') {
+    if (details.overallSavingsMs === undefined) {
       return element;
     }
 
@@ -98,7 +98,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
    * @return {number}
    */
   _getWastedMs(audit) {
-    if (audit.result.details && audit.result.details.type === 'opportunity') {
+    if (audit.result.details) {
       const details = audit.result.details;
       if (typeof details.overallSavingsMs !== 'number') {
         throw new Error('non-opportunity details passed to _getWastedMs');
@@ -165,7 +165,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
    */
   _classifyPerformanceAudit(audit) {
     if (audit.group) return null;
-    if (audit.result.details && audit.result.details.type === 'opportunity') {
+    if (audit.result.details?.overallSavingsMs !== undefined) {
       return 'load-opportunity';
     }
     return 'diagnostic';

package/report/renderer/report-renderer.js

@@ -268,6 +268,7 @@ export class ReportRenderer {
 
     const detailsRenderer = new DetailsRenderer(this._dom, {
       fullPageScreenshot: report.fullPageScreenshot ?? undefined,
+      entities: report.entities,
     });
 
     const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer);

package/report/renderer/report-ui-features.js

@@ -244,9 +244,11 @@ export class ReportUIFeatures {
 
     tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
-      const primaryRowEls = rowEls.filter(rowEl => !rowEl.classList.contains('lh-sub-item-row'));
-      const thirdPartyRowEls = this._getThirdPartyRows(
-        primaryRowEls, Util.getFinalDisplayedUrl(this.json));
+      const nonSubItemRows = rowEls.filter(rowEl => !rowEl.classList.contains('lh-sub-item-row'));
+      const thirdPartyRowEls = this._getThirdPartyRows(nonSubItemRows,
+        Util.getFinalDisplayedUrl(this.json));
+      // Entity-grouped tables don't have zebra lines.
+      const hasZebraStyle = rowEls.some(rowEl => rowEl.classList.contains('lh-row--even'));
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
@@ -255,16 +257,19 @@ export class ReportUIFeatures {
       filterInput.addEventListener('change', e => {
         const shouldHideThirdParty = e.target instanceof HTMLInputElement && !e.target.checked;
         let even = true;
-        let rowEl = primaryRowEls[0];
+        let rowEl = nonSubItemRows[0];
         while (rowEl) {
           const shouldHide = shouldHideThirdParty && thirdPartyRowEls.includes(rowEl);
 
           // Iterate subsequent associated sub item rows.
           do {
             rowEl.classList.toggle('lh-row--hidden', shouldHide);
-            // Adjust for zebra styling.
-            rowEl.classList.toggle('lh-row--even', !shouldHide && even);
-            rowEl.classList.toggle('lh-row--odd', !shouldHide && !even);
+
+            if (hasZebraStyle) {
+              // Adjust for zebra styling.
+              rowEl.classList.toggle('lh-row--even', !shouldHide && even);
+              rowEl.classList.toggle('lh-row--odd', !shouldHide && !even);
+            }
 
             rowEl = /** @type {HTMLElement} */ (rowEl.nextElementSibling);
           } while (rowEl && rowEl.classList.contains('lh-sub-item-row'));
@@ -273,12 +278,16 @@ export class ReportUIFeatures {
         }
       });
 
+      // thirdPartyRowEls contains both heading and item rows.
+      // Filter out heading rows to get third party resource count.
+      const thirdPartyResourceCount = thirdPartyRowEls.filter(
+        rowEl => !rowEl.classList.contains('lh-row--group')).length;
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
-          `${thirdPartyRowEls.length}`;
+        `${thirdPartyResourceCount}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =
           Globals.strings.thirdPartyResourcesLabel;
 
-      const allThirdParty = thirdPartyRowEls.length === primaryRowEls.length;
+      const allThirdParty = thirdPartyRowEls.length === nonSubItemRows.length;
       const allFirstParty = !thirdPartyRowEls.length;
 
       // If all or none of the rows are 3rd party, hide the control.

package/report/renderer/report-utils.d.ts

@@ -13,15 +13,21 @@ export class ReportUtils {
      * 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}=}
+     * @return {((item: LH.FormattedIcu<LH.Audit.Details.TableItem>) => string|undefined)=}
      */
     static getUrlLocatorFn(headings: LH.FormattedIcu<LH.Audit.Details.TableColumnHeading[]>): ((item: LH.FormattedIcu<LH.Audit.Details.TableItem>) => string | undefined) | undefined;
     /**
      * Mark TableItems/OpportunityItems with entity names.
-     * @param {LH.Result.Entities|undefined} entities
-     * @param {import('../../types/lhr/audit-result').Result} audit
+     * @param {LH.Result.Entities} entities
+     * @param {LH.FormattedIcu<LH.Audit.Details.Opportunity|LH.Audit.Details.Table>} details
      */
-    static classifyEntities(entities: LH.Result.Entities | undefined, audit: import('../../types/lhr/audit-result').Result): void;
+    static classifyEntities(entities: LH.Result.Entities, details: LH.FormattedIcu<LH.Audit.Details.Opportunity | LH.Audit.Details.Table>): void;
+    /**
+     * Returns a comparator created from the supplied list of keys
+     * @param {Array<string>} sortedBy
+     * @return {((a: LH.Audit.Details.TableItem, b: LH.Audit.Details.TableItem) => number)}
+     */
+    static getTableItemSortComparator(sortedBy: Array<string>): (a: LH.Audit.Details.TableItem, b: LH.Audit.Details.TableItem) => number;
     /**
      * @param {LH.Result['configSettings']} settings
      * @return {!{deviceEmulation: string, screenEmulation?: string, networkThrottling: string, cpuThrottling: string, summary: string}}
@@ -125,5 +131,8 @@ export namespace UIStrings {
     const collapseView: string;
     const runtimeSlow4g: string;
     const runtimeCustom: string;
+    const firstPartyChipLabel: string;
+    const openInANewTabTooltip: string;
+    const unattributable: string;
 }
 //# sourceMappingURL=report-utils.d.ts.map

package/report/renderer/report-utils.js

@@ -27,7 +27,13 @@ class ReportUtils {
 
     for (const audit of Object.values(clone.audits)) {
       // Attach table/opportunity items with entity information.
-      ReportUtils.classifyEntities(clone.entities, audit);
+      if (audit.details) {
+        if (audit.details.type === 'opportunity' || audit.details.type === 'table') {
+          if (!audit.details.isEntityGrouped && clone.entities) {
+            ReportUtils.classifyEntities(clone.entities, audit.details);
+          }
+        }
+      }
     }
 
     // For convenience, smoosh all AuditResults into their auditRef (which has just weight & group)
@@ -79,7 +85,7 @@ class ReportUtils {
    * 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}=}
+   * @return {((item: LH.FormattedIcu<LH.Audit.Details.TableItem>) => string|undefined)=}
    */
   static getUrlLocatorFn(headings) {
     // The most common type, valueType=url.
@@ -109,17 +115,12 @@ class ReportUtils {
 
   /**
    * Mark TableItems/OpportunityItems with entity names.
-   * @param {LH.Result.Entities|undefined} entities
-   * @param {import('../../types/lhr/audit-result').Result} audit
+   * @param {LH.Result.Entities} entities
+   * @param {LH.FormattedIcu<LH.Audit.Details.Opportunity|LH.Audit.Details.Table>} details
    */
-  static classifyEntities(entities, audit) {
-    if (!entities) return;
-    if (audit.details?.type !== 'opportunity' && audit.details?.type !== 'table') {
-      return;
-    }
-
+  static classifyEntities(entities, details) {
     // If details.items are already marked with entity attribute during an audit, nothing to do here.
-    const {items, headings} = audit.details;
+    const {items, headings} = 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.
@@ -142,6 +143,30 @@ class ReportUtils {
     }
   }
 
+  /**
+   * Returns a comparator created from the supplied list of keys
+   * @param {Array<string>} sortedBy
+   * @return {((a: LH.Audit.Details.TableItem, b: LH.Audit.Details.TableItem) => number)}
+   */
+  static getTableItemSortComparator(sortedBy) {
+    return (a, b) => {
+      for (const key of sortedBy) {
+        const aVal = a[key];
+        const bVal = b[key];
+        if (typeof aVal !== typeof bVal || !['number', 'string'].includes(typeof aVal)) {
+          console.warn(`Warning: Attempting to sort unsupported value type: ${key}.`);
+        }
+        if (typeof aVal === 'number' && typeof bVal === 'number' && aVal !== bVal) {
+          return bVal - aVal;
+        }
+        if (typeof aVal === 'string' && typeof bVal === 'string' && aVal !== bVal) {
+          return aVal.localeCompare(bVal);
+        }
+      }
+      return 0;
+    };
+  }
+
   /**
    * @param {LH.Result['configSettings']} settings
    * @return {!{deviceEmulation: string, screenEmulation?: string, networkThrottling: string, cpuThrottling: string, summary: string}}
@@ -440,6 +465,13 @@ const UIStrings = {
   runtimeSlow4g: 'Slow 4G throttling',
   /** Label indicating that Lighthouse throttled the page using custom throttling settings. */
   runtimeCustom: 'Custom throttling',
+
+  /** This label is for a decorative chip that is included in a table row. The label indicates that the entity/company name in the row belongs to the first-party (or "1st-party"). First-party label is used to identify resources that are directly controlled by the owner of the web page. */
+  firstPartyChipLabel: '1st party',
+  /** Descriptive explanation in a tooltip form for a link to be opened in a new tab of the browser. */
+  openInANewTabTooltip: 'Open in a new tab',
+  /** Generic category name for all resources that could not be attributed to a 1st or 3rd party entity. */
+  unattributable: 'Unattributable',
 };
 
 export {

package/shared/localization/locales/ar-XB.json

@@ -1497,7 +1497,7 @@
     "message": "‏‮Map‬‏ ‏‮URL‬‏"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "‏‮Source‬‏ ‏‮maps‬‏ ‏‮translate‬‏ ‏‮minified‬‏ ‏‮code‬‏ ‏‮to‬‏ ‏‮the‬‏ ‏‮original‬‏ ‏‮source‬‏ ‏‮code‬‏. ‏‮This‬‏ ‏‮helps‬‏ ‏‮developers‬‏ ‏‮debug‬‏ ‏‮in‬‏ ‏‮production‬‏. ‏‮In‬‏ ‏‮addition‬‏, ‏‮Lighthouse‬‏ ‏‮is‬‏ ‏‮able‬‏ ‏‮to‬‏ ‏‮provide‬‏ ‏‮further‬‏ ‏‮insights‬‏. ‏‮Consider‬‏ ‏‮deploying‬‏ ‏‮source‬‏ ‏‮maps‬‏ ‏‮to‬‏ ‏‮take‬‏ ‏‮advantage‬‏ ‏‮of‬‏ ‏‮these‬‏ ‏‮benefits‬‏. [‏‮Learn‬‏ ‏‮more‬‏ ‏‮about‬‏ ‏‮source‬‏ ‏‮maps‬‏](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "‏‮Source‬‏ ‏‮maps‬‏ ‏‮translate‬‏ ‏‮minified‬‏ ‏‮code‬‏ ‏‮to‬‏ ‏‮the‬‏ ‏‮original‬‏ ‏‮source‬‏ ‏‮code‬‏. ‏‮This‬‏ ‏‮helps‬‏ ‏‮developers‬‏ ‏‮debug‬‏ ‏‮in‬‏ ‏‮production‬‏. ‏‮In‬‏ ‏‮addition‬‏, ‏‮Lighthouse‬‏ ‏‮is‬‏ ‏‮able‬‏ ‏‮to‬‏ ‏‮provide‬‏ ‏‮further‬‏ ‏‮insights‬‏. ‏‮Consider‬‏ ‏‮deploying‬‏ ‏‮source‬‏ ‏‮maps‬‏ ‏‮to‬‏ ‏‮take‬‏ ‏‮advantage‬‏ ‏‮of‬‏ ‏‮these‬‏ ‏‮benefits‬‏. [‏‮Learn‬‏ ‏‮more‬‏ ‏‮about‬‏ ‏‮source‬‏ ‏‮maps‬‏](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "‏‮Missing‬‏ ‏‮source‬‏ ‏‮maps‬‏ ‏‮for‬‏ ‏‮large‬‏ ‏‮first‬‏-‏‮party‬‏ ‏‮JavaScript‬‏"

package/shared/localization/locales/ar.json

@@ -1497,7 +1497,7 @@
     "message": "عنوان URL لخريطة المصدر"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "تحوِّل خرائط المصدر الرمز المصغَّر إلى رمز المصدر الأصلي. ويساعد هذا الإجراء المطوّرين على تصحيح الأخطاء في مرحلة الإنتاج. ويمكن لأداة Lighthouse أيضًا أن توفّر معلومات إضافية. ننصحك بنشر خرائط المصدر للاستفادة من هذه المزايا. [مزيد من المعلومات حول خرائط المصدر](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)"
+    "message": "تحوِّل خرائط المصدر الرمز المصغَّر إلى رمز المصدر الأصلي. ويساعد هذا الإجراء المطوّرين على تصحيح الأخطاء في مرحلة الإنتاج. ويمكن لأداة Lighthouse أيضًا أن توفّر معلومات إضافية. ننصحك بنشر خرائط المصدر للاستفادة من هذه المزايا. [مزيد من المعلومات حول خرائط المصدر](https://developer.chrome.com/docs/devtools/javascript/source-maps/)"
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "عدم توفّر خرائط مصدر للغة JavaScript من الطرف الأول الكبير"

package/shared/localization/locales/bg.json

@@ -1497,7 +1497,7 @@
     "message": "URL адрес на карта"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Картите на изходния код преобразуват минимизирания код в оригиналния му вид. Това помага на програмистите да отстраняват грешки в стандартния канал. Също така Lighthouse може да предоставя допълнителни статистически данни. Препоръчваме да внедрите карти на изходния код, за да се възползвате от тези предимства. [Научете повече за картите](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Картите на изходния код преобразуват минимизирания код в оригиналния му вид. Това помага на програмистите да отстраняват грешки в стандартния канал. Също така Lighthouse може да предоставя допълнителни статистически данни. Препоръчваме да внедрите карти на изходния код, за да се възползвате от тези предимства. [Научете повече за картите](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Липсват карти на изходния код за големи файлове на JavaScript"

package/shared/localization/locales/ca.json

@@ -1497,7 +1497,7 @@
     "message": "URL del mapa"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Els mapes d'origen tradueixen el codi reduït al codi font original. Això ajuda els desenvolupadors a depurar durant la producció. A més, Lighthouse pot proporcionar estadístiques addicionals. Planteja't implementar mapes d'origen per treure partit d'aquests avantatges. [Obtén més informació sobre els mapes d'origen](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Els mapes d'origen tradueixen el codi reduït al codi font original. Això ajuda els desenvolupadors a depurar durant la producció. A més, Lighthouse pot proporcionar estadístiques addicionals. Planteja't implementar mapes d'origen per treure partit d'aquests avantatges. [Obtén més informació sobre els mapes d'origen](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Falten mapes d'origen per a un fitxer JavaScript propi gran"

package/shared/localization/locales/cs.json

@@ -1497,7 +1497,7 @@
     "message": "Adresa URL souboru sourcemap"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Soubory sourcemap překládají minifikovaný kód na původní zdrojový kód. To vývojářům usnadňuje ladění produkčních verzí. Kromě toho to nástroji Lighthouse umožňuje poskytovat více informací. Zvažte implementaci souborů sourcemap, abyste tyto výhody získali. [Další informace o souborech sourcemap](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)"
+    "message": "Soubory sourcemap překládají minifikovaný kód na původní zdrojový kód. To vývojářům usnadňuje ladění produkčních verzí. Kromě toho to nástroji Lighthouse umožňuje poskytovat více informací. Zvažte implementaci souborů sourcemap, abyste tyto výhody získali. [Další informace o souborech sourcemap](https://developer.chrome.com/docs/devtools/javascript/source-maps/)"
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Chybí soubory sourcemap pro velké soubory JavaScript první strany"

package/shared/localization/locales/da.json

@@ -1497,7 +1497,7 @@
     "message": "Kortets webadresse"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Kildekort oversætter formindsket kode til den originale kildekode. Dette hjælper udviklere med at fejlrette under produktion. Derudover kan Lighthouse levere yderligere indsigter. Overvej at implementere kildekort for at drage fordel af disse. [Få flere oplysninger om kildekort](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Kildekort oversætter formindsket kode til den originale kildekode. Dette hjælper udviklere med at fejlrette under produktion. Derudover kan Lighthouse levere yderligere indsigter. Overvej at implementere kildekort for at drage fordel af disse. [Få flere oplysninger om kildekort](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Manglende kildekort til stor førsteparts-JavaScript"

package/shared/localization/locales/de.json

@@ -1497,7 +1497,7 @@
     "message": "Zuordnungs-URL"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Quellzuordnungen übersetzen reduzierten Code in den ursprünglichen Quellcode. Dies hilft Entwicklern beim Debugging in der Produktionsphase. Zusätzlich kann Lighthouse weitere Informationen liefern. Wir empfehlen, Quellzuordnungen bereitzustellen, um diese Vorteile zu nutzen. [Weitere Informationen zu Quellzuordnungen.](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)"
+    "message": "Quellzuordnungen übersetzen reduzierten Code in den ursprünglichen Quellcode. Dies hilft Entwicklern beim Debugging in der Produktionsphase. Zusätzlich kann Lighthouse weitere Informationen liefern. Wir empfehlen, Quellzuordnungen bereitzustellen, um diese Vorteile zu nutzen. [Weitere Informationen zu Quellzuordnungen.](https://developer.chrome.com/docs/devtools/javascript/source-maps/)"
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Fehlende Quellzuordnungen für große eigene JavaScript-Dateien"

package/shared/localization/locales/el.json

@@ -1497,7 +1497,7 @@
     "message": "URL αντιστοίχισης"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Οι αντιστοιχίσεις πηγής μεταφράζουν ελαχιστοποιημένο κώδικα στον αρχικό πηγαίο κώδικα. Αυτό βοηθά τους προγραμματιστές με τον εντοπισμό σφαλμάτων στην παραγωγή. Επίσης, το Lighthouse μπορεί να παράσχει περαιτέρω insight. Εξετάστε το ενδεχόμενο ανάπτυξης αντιστοιχίσεων πηγών, για να αξιοποιήσετε αυτά τα οφέλη. [Μάθετε περισσότερα σχετικά με τις αντιστοιχίσεις πηγών](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Οι αντιστοιχίσεις πηγής μεταφράζουν ελαχιστοποιημένο κώδικα στον αρχικό πηγαίο κώδικα. Αυτό βοηθά τους προγραμματιστές με τον εντοπισμό σφαλμάτων στην παραγωγή. Επίσης, το Lighthouse μπορεί να παράσχει περαιτέρω insight. Εξετάστε το ενδεχόμενο ανάπτυξης αντιστοιχίσεων πηγών, για να αξιοποιήσετε αυτά τα οφέλη. [Μάθετε περισσότερα σχετικά με τις αντιστοιχίσεις πηγών](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Λείπουν οι αντιστοιχίσεις πηγής για μεγάλες βιβλιοθήκες JavaScript πρώτου μέρους"

package/shared/localization/locales/en-GB.json

@@ -1497,7 +1497,7 @@
     "message": "Map URL"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Source maps translate minified code to the original source code. This helps developers to debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more about source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Source maps translate minified code to the original source code. This helps developers to debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more about source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Missing source maps for large first-party JavaScript"

package/shared/localization/locales/en-US.json

@@ -1323,7 +1323,7 @@
     "message": "robots.txt is valid"
   },
   "core/audits/seo/tap-targets.js | description": {
-    "message": "Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more about tap targets](https://developer.chrome.com/docs/lighthouse/seo/tap-targets/)."
+    "message": "Interactive elements like buttons and links should be large enough (48x48px), or have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more about tap targets](https://developer.chrome.com/docs/lighthouse/seo/tap-targets/)."
   },
   "core/audits/seo/tap-targets.js | displayValue": {
     "message": "{decimalProportion, number, percent} appropriately sized tap targets"
@@ -1497,7 +1497,7 @@
     "message": "Map URL"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more about source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)."
+    "message": "Source maps translate minified code to the original source code. This helps developers debug in production. In addition, Lighthouse is able to provide further insights. Consider deploying source maps to take advantage of these benefits. [Learn more about source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps/)."
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "Missing source maps for large first-party JavaScript"
@@ -3047,6 +3047,9 @@
   "report/renderer/report-utils.js | expandView": {
     "message": "Expand view"
   },
+  "report/renderer/report-utils.js | firstPartyChipLabel": {
+    "message": "1st party"
+  },
   "report/renderer/report-utils.js | footerIssue": {
     "message": "File an issue"
   },
@@ -3065,6 +3068,9 @@
   "report/renderer/report-utils.js | notApplicableAuditsGroupTitle": {
     "message": "Not applicable"
   },
+  "report/renderer/report-utils.js | openInANewTabTooltip": {
+    "message": "Open in a new tab"
+  },
   "report/renderer/report-utils.js | opportunityResourceColumnLabel": {
     "message": "Opportunity"
   },
@@ -3143,6 +3149,9 @@
   "report/renderer/report-utils.js | toplevelWarningsMessage": {
     "message": "There were issues affecting this run of Lighthouse:"
   },
+  "report/renderer/report-utils.js | unattributable": {
+    "message": "Unattributable"
+  },
   "report/renderer/report-utils.js | varianceDisclaimer": {
     "message": "Values are estimated and may vary. The [performance score is calculated](https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/) directly from these metrics."
   },

package/shared/localization/locales/en-XA.json

@@ -1497,7 +1497,7 @@
     "message": "[Måþ ÛŔĻ one]"
   },
   "core/audits/valid-source-maps.js | description": {
-    "message": "[Šöûŕçé måþš ţŕåñšļåţé mîñîƒîéð çöðé ţö ţĥé öŕîĝîñåļ šöûŕçé çöðé. Ţĥîš ĥéļþš ðévéļöþéŕš ðéбûĝ îñ þŕöðûçţîöñ. Îñ åððîţîöñ, Ļîĝĥţĥöûšé îš åбļé ţö þŕövîðé ƒûŕţĥéŕ îñšîĝĥţš. Çöñšîðéŕ ðéþļöýîñĝ šöûŕçé måþš ţö ţåķé åðvåñţåĝé öƒ ţĥéšé бéñéƒîţš. ᐅ[ᐊĻéåŕñ möŕé åбöûţ šöûŕçé måþšᐅ](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps)ᐊ. one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twentyone twentytwo twentythree twentyfour twentyfive twentysix twentyseven twentyeight twentynine thirty thirtyone thirtytwo thirtythree thirtyfour]"
+    "message": "[Šöûŕçé måþš ţŕåñšļåţé mîñîƒîéð çöðé ţö ţĥé öŕîĝîñåļ šöûŕçé çöðé. Ţĥîš ĥéļþš ðévéļöþéŕš ðéбûĝ îñ þŕöðûçţîöñ. Îñ åððîţîöñ, Ļîĝĥţĥöûšé îš åбļé ţö þŕövîðé ƒûŕţĥéŕ îñšîĝĥţš. Çöñšîðéŕ ðéþļöýîñĝ šöûŕçé måþš ţö ţåķé åðvåñţåĝé öƒ ţĥéšé бéñéƒîţš. ᐅ[ᐊĻéåŕñ möŕé åбöûţ šöûŕçé måþšᐅ](https://developer.chrome.com/docs/devtools/javascript/source-maps/)ᐊ. one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twentyone twentytwo twentythree twentyfour twentyfive twentysix twentyseven twentyeight twentynine thirty thirtyone thirtytwo thirtythree thirtyfour]"
   },
   "core/audits/valid-source-maps.js | failureTitle": {
     "message": "[Mîššîñĝ šöûŕçé måþš ƒöŕ ļåŕĝé ƒîŕšţ-þåŕţý ĴåvåŠçŕîþţ one two three four five six seven eight nine ten eleven]"