chrome-devtools-frontend 1.0.923302 → 1.0.925026

package/front_end/third_party/lighthouse/locales/en-US.json

@@ -554,6 +554,12 @@
   "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | columnDisplayedDimensions": {
     "message": "Displayed dimensions"
   },
+  "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | failureTitle": {
+    "message": "Images were larger than their displayed size"
+  },
+  "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | title": {
+    "message": "Images were appropriate for their displayed size"
+  },
   "lighthouse-core/audits/byte-efficiency/uses-responsive-images.js | description": {
     "message": "Serve images that are appropriately-sized to save cellular data and improve load time. [Learn more](https://web.dev/uses-responsive-images/)."
   },

package/front_end/third_party/lighthouse/locales/en-XL.json

@@ -554,6 +554,12 @@
   "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | columnDisplayedDimensions": {
     "message": "D̂íŝṕl̂áŷéd̂ d́îḿêńŝíôńŝ"
   },
+  "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | failureTitle": {
+    "message": "Îḿâǵêś ŵér̂é l̂ár̂ǵêŕ t̂h́âń t̂h́êír̂ d́îśp̂ĺâýêd́ ŝíẑé"
+  },
+  "lighthouse-core/audits/byte-efficiency/uses-responsive-images-snapshot.js | title": {
+    "message": "Îḿâǵêś ŵér̂é âṕp̂ŕôṕr̂íât́ê f́ôŕ t̂h́êír̂ d́îśp̂ĺâýêd́ ŝíẑé"
+  },
   "lighthouse-core/audits/byte-efficiency/uses-responsive-images.js | description": {
     "message": "Ŝér̂v́ê ím̂áĝéŝ t́ĥát̂ ár̂é âṕp̂ŕôṕr̂íât́êĺŷ-śîźêd́ t̂ó ŝáv̂é ĉél̂ĺûĺâŕ d̂át̂á âńd̂ ím̂ṕr̂óv̂é l̂óâd́ t̂ím̂é. [L̂éâŕn̂ ḿôŕê](https://web.dev/uses-responsive-images/)."
   },

package/front_end/third_party/lighthouse/report/bundle.d.ts

@@ -1,5 +1,5 @@
 
-export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'envItem' | 'footer' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'metricsToggle' | 'opportunity' | 'opportunityHeader' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'topbar' | 'warningsToplevel';
+export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'envItem' | 'footer' | 'fraction' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'metricsToggle' | 'opportunity' | 'opportunityHeader' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'topbar' | 'warningsToplevel';
 export type I18n<T> = any;
 export type CRCSegment = {
     node: any[string];
@@ -343,9 +343,12 @@ declare class CategoryRenderer {
     /**
      * @param {LH.ReportResult.Category} category
      * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+     * @param {{gatherMode: LH.Result.GatherMode}=} options
      * @return {DocumentFragment}
      */
-    renderCategoryHeader(category: any, groupDefinitions: Record<string, any>): DocumentFragment;
+    renderCategoryHeader(category: any, groupDefinitions: Record<string, any>, options?: {
+        gatherMode: any;
+    } | undefined): DocumentFragment;
     /**
      * Renders the group container for a group of audits. Individual audit elements can be added
      * directly to the returned element.
@@ -384,12 +387,26 @@ declare class CategoryRenderer {
         auditRefs: Array<any>;
         description?: string;
     }): Element;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+     * @param {{gatherMode: LH.Result.GatherMode}=} options
+     * @return {DocumentFragment}
+     */
+    renderCategoryScore(category: any, groupDefinitions: Record<string, any>, options?: {
+        gatherMode: any;
+    } | undefined): DocumentFragment;
     /**
      * @param {LH.ReportResult.Category} category
      * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
      * @return {DocumentFragment}
      */
     renderScoreGauge(category: any, groupDefinitions: Record<string, any>): DocumentFragment;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @return {DocumentFragment}
+     */
+    renderCategoryFraction(category: any): DocumentFragment;
     /**
      * Returns true if an LH category has any non-"notApplicable" audits.
      * @param {LH.ReportResult.Category} category
@@ -433,12 +450,16 @@ declare class CategoryRenderer {
      *   ├── …
      *   ⋮
      * @param {LH.ReportResult.Category} category
-     * @param {Object<string, LH.Result.ReportGroup>} [groupDefinitions]
+     * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+     * @param {{environment?: 'PSI', gatherMode: LH.Result.GatherMode}=} options
      * @return {Element}
      */
     render(category: any, groupDefinitions?: {
         [x: string]: any;
-    }): Element;
+    } | undefined, options?: {
+        environment?: 'PSI';
+        gatherMode: any;
+    } | undefined): Element;
     /**
      * Create a non-semantic span used for hash navigation of categories
      * @param {Element} element

package/front_end/third_party/lighthouse/report/bundle.js

@@ -848,6 +848,24 @@ function createFooterComponent(dom) {
   return el0;
 }
 
+/**
+ * @param {DOM} dom
+ */
+function createFractionComponent(dom) {
+  const el0 = dom.document().createDocumentFragment();
+  const el1 = dom.createElement('a', 'lh-fraction__wrapper');
+  el1.setAttribute('href', '#');
+  const el2 = dom.createElement('div', 'lh-fraction__content-wrapper');
+  const el3 = dom.createElement('div', 'lh-fraction__content');
+  const el4 = dom.createElement('div', 'lh-fraction__background');
+  el3.append(' ', el4, ' ');
+  el2.append(' ', el3, ' ');
+  const el5 = dom.createElement('div', 'lh-fraction__label');
+  el1.append(' ', el2, ' ', el5, ' ');
+  el0.append(el1);
+  return el0;
+}
+
 /**
  * @param {DOM} dom
  */
@@ -1000,10 +1018,11 @@ function createMetricComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('div', 'lh-metric');
   const el2 = dom.createElement('div', 'lh-metric__innerwrap');
-  const el3 = dom.createElement('span', 'lh-metric__title');
-  const el4 = dom.createElement('div', 'lh-metric__value');
-  const el5 = dom.createElement('div', 'lh-metric__description');
-  el2.append(' ', el3, ' ', el4, ' ', el5, ' ');
+  const el3 = dom.createElement('div', 'lh-metric__icon');
+  const el4 = dom.createElement('span', 'lh-metric__title');
+  const el5 = dom.createElement('div', 'lh-metric__value');
+  const el6 = dom.createElement('div', 'lh-metric__description');
+  el2.append(' ', el3, ' ', el4, ' ', el5, ' ', el6, ' ');
   el1.append(' ', el2, ' ');
   el0.append(el1);
   return el0;
@@ -1391,7 +1410,7 @@ function createWarningsToplevelComponent(dom) {
 }
 
 
-/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'envItem'|'footer'|'gauge'|'gaugePwa'|'heading'|'metric'|'metricsToggle'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'topbar'|'warningsToplevel'} ComponentName */
+/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'envItem'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'metricsToggle'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'topbar'|'warningsToplevel'} ComponentName */
 /**
  * @param {DOM} dom
  * @param {ComponentName} componentName
@@ -1409,6 +1428,7 @@ function createComponent(dom, componentName) {
     case 'elementScreenshot': return createElementScreenshotComponent(dom);
     case 'envItem': return createEnvItemComponent(dom);
     case 'footer': return createFooterComponent(dom);
+    case 'fraction': return createFractionComponent(dom);
     case 'gauge': return createGaugeComponent(dom);
     case 'gaugePwa': return createGaugePwaComponent(dom);
     case 'heading': return createHeadingComponent(dom);
@@ -1859,13 +1879,14 @@ class CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {DocumentFragment}
    */
-  renderCategoryHeader(category, groupDefinitions) {
+  renderCategoryHeader(category, groupDefinitions, options) {
     const component = this.dom.createComponent('categoryHeader');
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
-    const gaugeEl = this.renderScoreGauge(category, groupDefinitions);
+    const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
     gaugeContainerEl.appendChild(gaugeEl);
 
     if (category.description) {
@@ -1999,6 +2020,19 @@ class CategoryRenderer {
     return clumpElement;
   }
 
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
+   * @return {DocumentFragment}
+   */
+  renderCategoryScore(category, groupDefinitions, options) {
+    if (options && (options.gatherMode === 'snapshot' || options.gatherMode === 'timespan')) {
+      return this.renderCategoryFraction(category);
+    }
+    return this.renderScoreGauge(category, groupDefinitions);
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
@@ -2041,6 +2075,44 @@ class CategoryRenderer {
     return tmpl;
   }
 
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @return {DocumentFragment}
+   */
+  renderCategoryFraction(category) {
+    const tmpl = this.dom.createComponent('fraction');
+    const wrapper = this.dom.find('a.lh-fraction__wrapper', tmpl);
+    this.dom.safelySetHref(wrapper, `#${category.id}`);
+
+    const numAudits = category.auditRefs.length;
+
+    let numPassed = 0;
+    let totalWeight = 0;
+    for (const auditRef of category.auditRefs) {
+      totalWeight += auditRef.weight;
+      if (Util.showAsPassed(auditRef.result)) numPassed++;
+    }
+
+    const fraction = numPassed / numAudits;
+    const content = this.dom.find('.lh-fraction__content', tmpl);
+    const text = this.dom.createElement('span');
+    text.textContent = `${numPassed}/${numAudits}`;
+    content.appendChild(text);
+
+    let rating = Util.calculateRating(fraction);
+
+    // If none of the available audits can affect the score, a rating isn't useful.
+    // The flow report should display the fraction with neutral icon and coloring in this case.
+    if (totalWeight === 0) {
+      rating = 'null';
+    }
+
+    wrapper.classList.add(`lh-fraction__wrapper--${rating}`);
+
+    this.dom.find('.lh-fraction__label', tmpl).textContent = category.title;
+    return tmpl;
+  }
+
   /**
    * Returns true if an LH category has any non-"notApplicable" audits.
    * @param {LH.ReportResult.Category} category
@@ -2122,13 +2194,14 @@ class CategoryRenderer {
    *   ├── …
    *   ⋮
    * @param {LH.ReportResult.Category} category
-   * @param {Object<string, LH.Result.ReportGroup>} [groupDefinitions]
+   * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+   * @param {{environment?: 'PSI', gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    */
-  render(category, groupDefinitions = {}) {
+  render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
     this.createPermalinkSpan(element, category.id);
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
@@ -3924,20 +3997,20 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
-   * @param {'PSI'=} environment 'PSI' and undefined are the only valid values
+   * @param {{gatherMode: LH.Result.GatherMode, environment?: 'PSI'}=} options
    * @return {Element}
    * @override
    */
-  render(category, groups, environment) {
+  render(category, groups, options) {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
-    if (environment === 'PSI') {
+    if (options && options.environment === 'PSI') {
       const gaugeEl = this.dom.createElement('div', 'lh-score__gauge');
-      gaugeEl.appendChild(this.renderScoreGauge(category, groups));
+      gaugeEl.appendChild(this.renderCategoryScore(category, groups, options));
       element.appendChild(gaugeEl);
     } else {
       this.createPermalinkSpan(element, category.id);
-      element.appendChild(this.renderCategoryHeader(category, groups));
+      element.appendChild(this.renderCategoryHeader(category, groups, options));
     }
 
     // Metrics.
@@ -4180,11 +4253,21 @@ class PwaCategoryRenderer extends CategoryRenderer {
   }
 
   /**
+   * Alias for backcompat.
    * @param {LH.ReportResult.Category} category
    * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
    * @return {DocumentFragment}
    */
   renderScoreGauge(category, groupDefinitions) {
+    return this.renderCategoryScore(category, groupDefinitions);
+  }
+
+  /**
+   * @param {LH.ReportResult.Category} category
+   * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+   * @return {DocumentFragment}
+   */
+  renderCategoryScore(category, groupDefinitions) {
     // Defer to parent-gauge style if category error.
     if (category.score === null) {
       return super.renderScoreGauge(category, groupDefinitions);
@@ -4469,11 +4552,15 @@ class ReportRenderer {
 
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
-      const categoryGauge = renderer.renderScoreGauge(category, report.categoryGroups || {});
+      const categoryGauge = renderer.renderCategoryScore(
+        category,
+        report.categoryGroups || {},
+        {gatherMode: report.gatherMode}
+      );
 
       if (Util.isPluginCategory(category.id)) {
         pluginGauges.push(categoryGauge);
-      } else if (renderer.renderScoreGauge === categoryRenderer.renderScoreGauge) {
+      } else if (renderer.renderCategoryScore === categoryRenderer.renderCategoryScore) {
         // The renderer for default categories is just the default CategoryRenderer.
         // If the functions are equal, then renderer is an instance of CategoryRenderer.
         // For example, the PWA category uses PwaCategoryRenderer, which overrides
@@ -4547,12 +4634,17 @@ class ReportRenderer {
     }
 
     const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(category, report.categoryGroups));
+      wrapper.appendChild(renderer.render(
+        category,
+        report.categoryGroups,
+        categoryOptions
+      ));
     }
 
     const reportFragment = this._dom.createFragment();
@@ -5565,16 +5657,14 @@ class ReportUIFeatures {
         return !thirdPartyFilterAuditExclusions.includes(containingAudit.id);
       });
 
-    tablesWithUrls.forEach((tableEl, index) => {
+    tablesWithUrls.forEach((tableEl) => {
       const rowEls = getTableRows(tableEl);
       const thirdPartyRows = this._getThirdPartyRows(rowEls, this.json.finalUrl);
 
       // create input box
       const filterTemplate = this._dom.createComponent('3pFilter');
       const filterInput = this._dom.find('input', filterTemplate);
-      const id = `lh-3p-filter-label--${index}`;
 
-      filterInput.id = id;
       filterInput.addEventListener('change', e => {
         const shouldHideThirdParty = e.target instanceof HTMLInputElement && !e.target.checked;
         let even = true;
@@ -5596,7 +5686,6 @@ class ReportUIFeatures {
         }
       });
 
-      this._dom.find('label', filterTemplate).setAttribute('for', id);
       this._dom.find('.lh-3p-filter-count', filterTemplate).textContent =
           `${thirdPartyRows.length}`;
       this._dom.find('.lh-3p-ui-string', filterTemplate).textContent =

package/front_end/third_party/lighthouse/report-assets/report.css

@@ -104,8 +104,8 @@
   --icon-square-size: calc(var(--score-icon-size) * 0.88);
   --image-preview-size: 48px;
   --metric-toggle-lines-fill: #7F7F7F;
+  --metric-value-font-size: 28px;
   --metrics-toggle-background-color: var(--color-gray-200);
-  --screenshot-overlay-background: rgba(0, 0, 0, 0.3);
   --plugin-badge-background-color: var(--color-white);
   --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7);
   --plugin-badge-size: calc(var(--gauge-circle-size) / 2.7);
@@ -130,9 +130,11 @@
   --score-icon-margin-right: 12px;
   --score-icon-margin: 0 var(--score-icon-margin-right) 0 var(--score-icon-margin-left);
   --score-icon-size: 12px;
+  --score-icon-size-big: 16px;
   --scores-container-padding: 20px 0 20px 0;
   --scorescale-height: 6px;
   --scorescale-width: 18px;
+  --screenshot-overlay-background: rgba(0, 0, 0, 0.3);
   --section-padding-vertical: 12px;
   --snippet-background-color: var(--color-gray-50);
   --snippet-color: #0938C2;
@@ -677,7 +679,11 @@
 
 .lh-metric__innerwrap {
   display: grid;
-  grid-template-columns: var(--audit-description-padding-left) 10fr 3fr;
+  /** 
+   * Icon -- Metric Name 
+   *      -- Metric Value
+   */
+  grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
   align-items: center;
   padding: 10px 0;
 }
@@ -703,14 +709,30 @@
 .lh-metric__description {
   display: none;
   grid-column-start: 2;
-  grid-column-end: 3;
+  grid-column-end: 4;
   color: var(--report-text-color-secondary);
 }
 
 .lh-metric__value {
+  font-size: var(--metric-value-font-size);
+  margin: calc(var(--default-padding) / 2) 0;
   white-space: nowrap; /* No wrapping between metric value and the icon */
   font-weight: 500;
-  justify-self: end;
+  grid-column-start: 2;
+}
+
+/* Change the grid to 3 columns for narrow viewport. */
+@media screen and (max-width: 535px) {
+  .lh-metric__innerwrap {
+  /** 
+   * Icon -- Metric Name -- Metric Value
+   */
+    grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
+  }
+  .lh-metric__value {
+    justify-self: end;
+    grid-column-start: unset;
+  }
 }
 
 /* No-JS toggle switch */
@@ -777,7 +799,7 @@
   flex: 1;
 }
 
-.lh-metric .lh-metric__innerwrap::before,
+.lh-metric__icon,
 .lh-scorescale-range::before {
   content: '';
   width: var(--score-icon-size);
@@ -789,7 +811,7 @@
 .lh-metric--pass .lh-metric__value {
   color: var(--color-pass-secondary);
 }
-.lh-metric--pass .lh-metric__innerwrap::before {
+.lh-metric--pass .lh-metric__icon {
   border-radius: 100%;
   background: var(--color-pass);
 }
@@ -797,7 +819,7 @@
 .lh-metric--average .lh-metric__value {
   color: var(--color-average-secondary);
 }
-.lh-metric--average .lh-metric__innerwrap::before {
+.lh-metric--average .lh-metric__icon {
   background: var(--color-average);
   width: var(--icon-square-size);
   height: var(--icon-square-size);
@@ -806,8 +828,8 @@
 .lh-metric--fail .lh-metric__value {
   color: var(--color-fail-secondary);
 }
-.lh-metric--fail .lh-metric__innerwrap::before,
-.lh-metric--error .lh-metric__innerwrap::before {
+.lh-metric--fail .lh-metric__icon,
+.lh-metric--error .lh-metric__icon {
   border-left: calc(var(--score-icon-size) / 2) solid transparent;
   border-right: calc(var(--score-icon-size) / 2) solid transparent;
   border-bottom: var(--score-icon-size) solid var(--color-fail);
@@ -1153,6 +1175,80 @@
   stroke: var(--color-not-applicable);
 }
 
+.lh-fraction__wrapper .lh-fraction__content::before {
+  content: '';
+  height: var(--score-icon-size);
+  width: var(--score-icon-size);
+  margin: var(--score-icon-margin);
+  display: inline-block;
+}
+.lh-fraction__wrapper--pass .lh-fraction__content {
+  color: var(--color-pass);
+}
+.lh-fraction__wrapper--pass .lh-fraction__background {
+  background-color: var(--color-pass);
+}
+.lh-fraction__wrapper--pass .lh-fraction__content::before {
+  background-color: var(--color-pass);
+  border-radius: 50%;
+}
+.lh-fraction__wrapper--average .lh-fraction__content {
+  color: var(--color-average);
+}
+.lh-fraction__wrapper--average .lh-fraction__background {
+  background-color: var(--color-average);
+}
+.lh-fraction__wrapper--average .lh-fraction__content::before {
+  background-color: var(--color-average);
+}
+.lh-fraction__wrapper--fail .lh-fraction__content {
+  color: var(--color-fail);
+}
+.lh-fraction__wrapper--fail .lh-fraction__background {
+  background-color: var(--color-fail);
+}
+.lh-fraction__wrapper--fail .lh-fraction__content::before {
+  border-left: calc(var(--score-icon-size) / 2) solid transparent;
+  border-right: calc(var(--score-icon-size) / 2) solid transparent;
+  border-bottom: var(--score-icon-size) solid var(--color-fail);
+}
+.lh-fraction__wrapper--null .lh-fraction__content {
+  color: var(--color-gray-700);
+}
+.lh-fraction__wrapper--null .lh-fraction__background {
+  background-color: var(--color-gray-700);
+}
+.lh-fraction__wrapper--null .lh-fraction__content::before {
+  border-radius: 50%;
+  border: 2px solid var(--color-gray-700);
+}
+
+.lh-fraction__background {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: calc(var(--gauge-circle-size) / 2);
+  opacity: 0.1;
+  z-index: -1;
+}
+
+.lh-fraction__content-wrapper {
+  height: var(--gauge-circle-size);
+  display: flex;
+  align-items: center;
+}
+
+.lh-fraction__content {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--gauge-label-font-size);
+  width: max-content;
+  padding: 1em;
+  min-width: 6em;
+}
+
 .lh-gauge {
   stroke-linecap: round;
   width: var(--gauge-circle-size);
@@ -1181,6 +1277,10 @@
 .lh-category .lh-gauge__svg-wrapper {
   --gauge-circle-size: var(--gauge-circle-size-big);
 }
+.lh-category .lh-fraction__wrapper {
+  --gauge-circle-size: var(--gauge-circle-size-big);
+  --score-icon-size: var(--score-icon-size-big)
+}
 
 /* The plugin badge overlay */
 .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
@@ -1225,7 +1325,8 @@
   --gauge-percentage-font-size: var(--gauge-percentage-font-size-big);
 }
 
-.lh-gauge__wrapper {
+.lh-gauge__wrapper,
+.lh-fraction__wrapper {
   position: relative;
   display: flex;
   align-items: center;
@@ -1240,7 +1341,8 @@
   will-change: opacity; /* Only using for layer promotion */
 }
 
-.lh-gauge__label {
+.lh-gauge__label,
+.lh-fraction__label {
   font-size: var(--gauge-label-font-size);
   line-height: var(--gauge-label-line-height);
   margin-top: 10px;
@@ -1249,16 +1351,22 @@
 }
 
 /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
-.lh-category .lh-gauge__label {
+.lh-category .lh-gauge__label,
+.lh-category .lh-fraction__label {
   --gauge-label-font-size: var(--gauge-label-font-size-big);
   --gauge-label-line-height: var(--gauge-label-line-height-big);
   margin-top: 14px;
 }
+.lh-category .lh-fraction__content {
+  --gauge-label-font-size: var(--gauge-label-font-size-big);
+}
 
 
 .lh-scores-header .lh-gauge__wrapper,
+.lh-scores-header .lh-fraction__wrapper,
 .lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
+.lh-sticky-header .lh-fraction__wrapper,
 .lh-sticky-header .lh-gauge--pwa__wrapper {
   width: var(--gauge-wrapper-width);
 }