lighthouse 11.1.0-dev.20231001 → 11.1.0-dev.20231003

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "11.1.0-dev.20231001",
+  "version": "11.1.0-dev.20231003",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {

package/report/assets/styles.css

@@ -131,7 +131,6 @@
   --section-padding-vertical: calc(var(--default-padding) * 6);
   --snippet-background-color: var(--color-gray-50);
   --snippet-color: #0938C2;
-  --sparkline-height: 5px;
   --stackpack-padding-horizontal: 10px;
   --sticky-header-background-color: var(--report-background-color);
   --sticky-header-buffer: calc(var(--topbar-height) + var(--sticky-header-height));
@@ -238,11 +237,6 @@
     --topbar-height: 28px;
     --topbar-logo-size: 20px;
   }
-
-  /* Not enough space to adequately show the relative savings bars. */
-  .lh-sparkline {
-    display: none;
-  }
 }
 
 .lh-vars.lh-devtools {
@@ -611,7 +605,6 @@
 
 
 .lh-audit__display-text,
-.lh-load-opportunity__sparkline,
 .lh-chevron-container {
   margin: 0 var(--audit-margin-horizontal);
 }
@@ -628,14 +621,11 @@
   font-size: var(--report-monospace-font-size);
 }
 
-/* Prepend display text with em dash separator. But not in Opportunities. */
+/* Prepend display text with em dash separator. */
 .lh-audit__display-text:not(:empty):before {
   content: '—';
   margin-right: var(--audit-margin-horizontal);
 }
-.lh-audit-group.lh-audit-group--load-opportunities .lh-audit__display-text:not(:empty):before {
-  display: none;
-}
 
 /* Expandable Details (Audit Groups, Audits) */
 .lh-audit__header {
@@ -644,10 +634,6 @@
   padding: var(--default-padding);
 }
 
-.lh-audit--load-opportunity .lh-audit__header {
-  display: block;
-}
-
 
 .lh-metricfilter {
   display: grid;
@@ -875,68 +861,6 @@
   color: var(--color-fail-secondary);
 }
 
-/* Perf load opportunity */
-
-.lh-load-opportunity__cols {
-  display: flex;
-  align-items: flex-start;
-}
-
-.lh-load-opportunity__header .lh-load-opportunity__col {
-  color: var(--color-gray-600);
-  display: unset;
-  line-height: calc(2.3 * var(--report-font-size));
-}
-
-.lh-load-opportunity__col {
-  display: flex;
-}
-
-.lh-load-opportunity__col--one {
-  flex: 5;
-  align-items: center;
-  margin-right: 2px;
-}
-.lh-load-opportunity__col--two {
-  flex: 4;
-  text-align: right;
-}
-
-.lh-audit--load-opportunity .lh-audit__display-text {
-  text-align: right;
-  flex: 0 0 7.5ch;
-}
-
-
-/* Sparkline */
-
-.lh-load-opportunity__sparkline {
-  flex: 1;
-  margin-top: calc((var(--report-line-height) - var(--sparkline-height)) / 2);
-}
-
-.lh-sparkline {
-  height: var(--sparkline-height);
-  width: 100%;
-}
-
-.lh-sparkline__bar {
-  height: 100%;
-  float: right;
-}
-
-.lh-audit--pass .lh-sparkline__bar {
-  background: var(--color-pass);
-}
-
-.lh-audit--average .lh-sparkline__bar {
-  background: var(--color-average);
-}
-
-.lh-audit--fail .lh-sparkline__bar {
-  background: var(--color-fail);
-}
-
 /* Filmstrip */
 
 .lh-filmstrip-container {
@@ -1078,7 +1002,6 @@
 
 .lh-details,
 .lh-category-header__description,
-.lh-load-opportunity__header,
 .lh-audit-group__footer {
   font-size: var(--report-font-size-secondary);
   line-height: var(--report-line-height-secondary);
@@ -1964,5 +1887,231 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   }
 }
 
+/* Explodey gauge */
+
+.lh-exp-gauge-component {
+  margin-bottom: 10px;
+}
+
+.lh-exp-gauge-component circle {
+  stroke: currentcolor;
+  r: var(--radius);
+}
+
+.lh-exp-gauge-component text {
+  font-size: calc(var(--radius) * 0.2);
+}
+
+.lh-exp-gauge-component .lh-exp-gauge {
+  margin: 0 auto;
+  width: 225px;
+  stroke-width: var(--stroke-width);
+  stroke-linecap: round;
+  
+  /* for better rendering perf */
+  contain: strict;
+  height: 225px;
+  will-change: transform;
+}
+.lh-exp-gauge-component .lh-exp-gauge--faded {
+  opacity: 0.1;
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper {
+  font-family: var(--report-font-family-monospace);
+  text-align: center;
+  text-decoration: none;
+  transition: .3s;
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass {
+  color: var(--color-pass);
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--average {
+  color: var(--color-average);
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail {
+  color: var(--color-fail);
+}
+.lh-exp-gauge-component .state--expanded {
+  transition: color .3s;
+}
+.lh-exp-gauge-component .state--highlight {
+  color: var(--color-highlight);
+}
+.lh-exp-gauge-component .lh-exp-gauge__svg-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.lh-exp-gauge-component .lh-exp-gauge__label {
+  fill: var(--report-text-color);
+  font-family: var(--report-font-family);
+  font-size: 12px;
+}
+
+.lh-exp-gauge-component .lh-exp-gauge__cutout {
+  opacity: .999;
+  transition: opacity .3s;
+}
+.lh-exp-gauge-component .state--highlight .lh-exp-gauge__cutout {
+  opacity: 0;
+}
+
+.lh-exp-gauge-component .lh-exp-gauge__inner {
+  color: inherit;
+}
+.lh-exp-gauge-component .lh-exp-gauge__base {
+  fill: currentcolor;
+}
+
+
+.lh-exp-gauge-component .lh-exp-gauge__arc {
+  fill: none;
+  transition: opacity .3s;
+}
+.lh-exp-gauge-component .lh-exp-gauge__arc--metric {
+  color: var(--metric-color);
+  stroke-dashoffset: var(--metric-offset);
+  opacity: 0.3;
+}
+.lh-exp-gauge-component .lh-exp-gauge-hovertarget {
+  color: currentcolor;
+  opacity: 0.001;
+  stroke-linecap: butt;
+  stroke-width: 24;
+  /* hack. move the hover target out of the center. ideally i tweak the r instead but that rquires considerably more math. */
+  transform: scale(1.15);
+}
+.lh-exp-gauge-component .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
+  opacity: 0;
+  stroke-dasharray: 0 calc(var(--circle-meas) * var(--radius));
+  transition: 0s .005s;
+}
+.lh-exp-gauge-component .state--expanded .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
+  opacity: .999;
+  stroke-dasharray: var(--metric-array);
+  transition: 0.3s; /*  calc(.005s + var(--i)*.05s); entrace animation */
+}
+.lh-exp-gauge-component .state--expanded .lh-exp-gauge__inner .lh-exp-gauge__arc {
+  opacity: 0;
+}
+
+
+.lh-exp-gauge-component .lh-exp-gauge__percentage {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  opacity: .999;
+  font-size: calc(var(--radius) * 0.625);
+  transition: opacity .3s ease-in;
+}
+.lh-exp-gauge-component .state--highlight .lh-exp-gauge__percentage {
+  opacity: 0;
+}
+
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--fail .lh-exp-gauge__percentage {
+  fill: var(--color-fail);
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--average .lh-exp-gauge__percentage {
+  fill: var(--color-average);
+}
+.lh-exp-gauge-component .lh-exp-gauge__wrapper--pass .lh-exp-gauge__percentage {
+  fill: var(--color-pass);
+}
+
+.lh-exp-gauge-component .lh-cover {
+  fill: none;
+  opacity: .001;
+  pointer-events: none;
+}
+.lh-exp-gauge-component .state--expanded .lh-cover {
+  pointer-events: auto;
+}
+
+.lh-exp-gauge-component .metric {
+  transform: scale(var(--scale-initial));
+  opacity: 0;
+  transition: transform .1s .2s ease-out,  opacity .3s ease-out;
+  pointer-events: none;
+}
+.lh-exp-gauge-component .metric text {
+  pointer-events: none;
+}
+.lh-exp-gauge-component .metric__value {
+  fill: currentcolor;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.lh-exp-gauge-component .state--expanded .metric {
+  transform: scale(1);
+  opacity: .999;
+  transition: transform .3s ease-out,  opacity .3s ease-in,  stroke-width .1s ease-out;
+  transition-delay: calc(var(--i)*.05s);
+  pointer-events: auto;
+}
+.lh-exp-gauge-component .state--highlight .metric {
+  opacity: .3;
+}
+.lh-exp-gauge-component .state--highlight .metric--highlight {
+  opacity: .999;
+  stroke-width: calc(1.5*var(--stroke-width));
+}
+.lh-exp-gauge-component .state--highlight .metric--highlight .metric__value {
+  opacity: 0.999;
+}
+
+
+/*
+ the initial first load peek
+*/
+.lh-exp-gauge-component .lh-exp-gauge__bg {  /* needed for the use zindex stacking w/ transparency */
+  fill: var(--report-background-color);
+  stroke: var(--report-background-color);
+}
+.lh-exp-gauge-component .state--peek .metric {
+  transition-delay: 0ms;
+  animation: peek var(--peek-dur) cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  animation-fill-mode: forwards;
+}
+.lh-exp-gauge-component .state--peek .lh-exp-gauge__inner .lh-exp-gauge__arc {
+  opacity: 1;
+}
+.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc.lh-exp-gauge--faded {
+  opacity: 0.3; /* just a tad stronger cuz its fighting with a big solid arg */
+}
+/* do i need to set expanded and override this? */
+.lh-exp-gauge-component .state--peek .lh-exp-gauge__arc--metric.lh-exp-gauge--miniarc {
+  transition: opacity 0.3s;
+}
+.lh-exp-gauge-component .state--peek {
+  color: unset;
+}
+.lh-exp-gauge-component .state--peek .metric__label {
+  display: none;
+}
+
+.lh-exp-gauge-component .metric__label {
+  fill: var(--report-text-color);
+}
+
+@keyframes peek {
+  /* biggest it should go is 0.92. smallest is 0.8 */
+  0% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+
+  50% {
+    transform: scale(0.92);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.8);
+    opacity: 0.8;
+  }
+}
+
+.lh-exp-gauge-component .wrapper {
+  width: 620px;
+}
 
 /*# sourceURL=report-styles.css */

package/report/assets/templates.html

@@ -94,41 +94,6 @@ SPDX-License-Identifier: Apache-2.0
   </div>
 </template>
 
-<!-- Lighthouse perf opportunity -->
-<template id="opportunity">
-  <div class="lh-audit lh-audit--load-opportunity">
-    <details class="lh-expandable-details">
-        <summary>
-          <div class="lh-audit__header">
-            <div class="lh-load-opportunity__cols">
-              <div class="lh-load-opportunity__col lh-load-opportunity__col--one">
-                <span class="lh-audit__score-icon"></span>
-                <div class="lh-audit__title"></div>
-              </div>
-              <div class="lh-load-opportunity__col lh-load-opportunity__col--two">
-                <div class="lh-load-opportunity__sparkline">
-                  <div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div>
-                </div>
-                <div class="lh-audit__display-text"></div>
-                <div class="lh-chevron-container"></div>
-              </div>
-            </div>
-          </div>
-        </summary>
-      <div class="lh-audit__description"></div>
-      <div class="lh-audit__stackpacks"></div>
-    </details>
-  </div>
-</template>
-
-<!-- Lighthouse perf opportunity header -->
-<template id="opportunityHeader">
-  <div class="lh-load-opportunity__header lh-load-opportunity__cols">
-    <div class="lh-load-opportunity__col lh-load-opportunity__col--one"></div>
-    <div class="lh-load-opportunity__col lh-load-opportunity__col--two"></div>
-  </div>
-</template>
-
 <!-- Lighthouse score container -->
 <template id="scoresWrapper">
   <style>
@@ -515,6 +480,28 @@ SPDX-License-Identifier: Apache-2.0
   </a>
 </template>
 
+<!-- Lighthouse score gauge - explodey version -->
+<template id="explodeyGauge">
+  <div class="lh-exp-gauge-component">
+    <div class="lh-exp-gauge__wrapper" target="_blank">
+      <div class="lh-exp-gauge__svg-wrapper">
+        <svg class="lh-exp-gauge">
+          <g class="lh-exp-gauge__inner">
+            <circle class="lh-exp-gauge__bg" />
+            <circle class="lh-exp-gauge__base lh-exp-gauge--faded" />
+            <circle class="lh-exp-gauge__arc" />
+            <text class="lh-exp-gauge__percentage"></text>
+          </g>
+          <g class="lh-exp-gauge__outer">
+            <circle class="lh-cover" />
+          </g>
+          <text class="lh-exp-gauge__label" text-anchor="middle" x="0" y="60"></text>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
 <!-- Lighthouse category fraction -->
 <template id="fraction">
   <a class="lh-fraction__wrapper">

package/report/renderer/components.d.ts

@@ -1,4 +1,4 @@
-/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'styles'|'topbar'|'warningsToplevel'} ComponentName */
+/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'explodeyGauge'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'styles'|'topbar'|'warningsToplevel'} ComponentName */
 /**
  * @param {DOM} dom
  * @param {ComponentName} componentName
@@ -6,5 +6,5 @@
  */
 export function createComponent(dom: DOM, componentName: ComponentName): DocumentFragment;
 export type DOM = import('./dom.js').DOM;
-export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'footer' | 'fraction' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'opportunity' | 'opportunityHeader' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'styles' | 'topbar' | 'warningsToplevel';
+export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'explodeyGauge' | 'footer' | 'fraction' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'styles' | 'topbar' | 'warningsToplevel';
 //# sourceMappingURL=components.d.ts.map