report(redesign): add sticky scores header

lighthouse-core/report/html/renderer/report-renderer.js

@@ -247,10 +247,24 @@ class ReportRenderer {
     reportSection.appendChild(this._renderReportFooter(report));
 
     const reportFragment = this._dom.createFragment();
+
     if (!this._dom.isDevTools()) {
       const topbarDocumentFragment = this._renderReportTopbar(report);
       reportFragment.appendChild(topbarDocumentFragment);
     }
+
+    if (scoreHeader && !this._dom.isDevTools()) {
+      const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
+      this._dom.createChildOf(stickyHeader, 'div', 'lh-highlighter');
+
+      for (const gaugeWrapperEl of this._dom.findAll('.lh-gauge__wrapper', scoreHeader)) {
+        const gaugeWrapperElClone = gaugeWrapperEl.cloneNode(true);
+        stickyHeader.appendChild(gaugeWrapperElClone.cloneNode(true));
+      }
+
+      reportFragment.appendChild(stickyHeader);
+    }
+
     reportFragment.appendChild(headerContainer);
     reportFragment.appendChild(container);
 

lighthouse-core/report/html/report-styles.css

@@ -128,6 +128,8 @@
   --color-fail: var(--color-red);
   --color-pass-secondary: var(--color-green-700);
   --color-pass: var(--color-green);
+  --color-sticky-header-bg: var(--color-white);
+  --color-highlighter-bg: var(--color-black);
 
   --plugin-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="%23757575"><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>');
   --logo-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192"><g fill="none" fill-rule="evenodd"><path d="M0 0h192v192H0z"/><path d="M67.705 179.352l2.603-20.82 49.335-16.39 4.652 37.21A87.893 87.893 0 0 1 96 184a87.893 87.893 0 0 1-28.295-4.648zM52.44 172.48C25.894 157.328 8 128.754 8 96 8 47.399 47.399 8 96 8s88 39.399 88 88c0 32.754-17.894 61.328-44.44 76.48L130 96h6V80h-8V48L96 28 64 48v32h-8v16h6l-9.56 76.48zM113.875 96l2.882 23.05-43.318 14.433L78.125 96h35.75zM80 80V56.868l16-10 16 10V80H80z" fill="%23000000"/></g></svg>');
@@ -838,7 +840,9 @@
 }
 
 .lh-scores-header .lh-gauge__wrapper,
-.lh-scores-header .lh-gauge--pwa__wrapper {
+.lh-scores-header .lh-gauge--pwa__wrapper,
+.lh-sticky-header .lh-gauge__wrapper,
+.lh-sticky-header .lh-gauge--pwa__wrapper {
   width: var(--score-container-width);
 }
 

lighthouse-core/report/html/templates.html

@@ -144,10 +144,85 @@
       position: relative;
       width: 100%;
     }
+
+    .lh-sticky-header {
+      --gauge-circle-size: 36px;
+      --plugin-badge-size: 18px;
+      --plugin-icon-size: 75%;
+      --score-container-width: 60px;
+      --score-number-font-size: 13px;
+      position: fixed;
+      left: 0;
+      right: 0;
+      top: var(--topbar-height);
+      font-weight: 700;
+      display: flex;
+      justify-content: center;
+      background-color: var(--color-sticky-header-bg);
+      border-bottom: 1px solid var(--color-black-200);
+      padding-top: var(--score-container-padding);
+      padding-bottom: 8px;
+      z-index: 1000;
+      pointer-events: none;
+      opacity: 0;
+    }
+
+    .lh-sticky-header.stuck {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    .lh-sticky-header .lh-gauge__label {
+      display: none;
+    }
+
+    .lh-highlighter {
+      width: var(--score-container-width);
+      height: 1px;
+      background: var(--color-highlighter-bg);
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+    }
   </style>
+  <script>
+    function handleStickyHeader() {
+      const topbarEl = document.querySelector('.lh-topbar');
+      const scoreScaleEl = document.querySelector('.lh-scorescale');
+      const stickyHeaderEl = document.querySelector('.lh-sticky-header');
+      const highlightEl = document.querySelector('.lh-highlighter');
+
+      // Show sticky header when the score scale begins to go underneath the topbar.
+      const showStickyHeader =
+        topbarEl.getBoundingClientRect().bottom - scoreScaleEl.getBoundingClientRect().top >= 0;
+      stickyHeaderEl.classList.toggle('stuck', showStickyHeader);
+
+      // Highlight mini gauge when section is in view.
+      // Use the middle of the viewport as an anchor - the closest category to the middle
+      // is the one "in view".
+      let highlightIndex = 0;
+      let highlightIndexDistance = Number.POSITIVE_INFINITY;
+      for (const [index, categoryEl] of Object.entries(document.querySelectorAll('.lh-category'))) {
+        // Normalize to middle of viewport.
+        const distanceToMiddle = categoryEl.getBoundingClientRect().top - window.innerHeight / 2;
+        // Closest negative distance to zero wins.
+        if (distanceToMiddle < 0 && highlightIndexDistance > distanceToMiddle) {
+          highlightIndex = index;
+          highlightIndexDistance = -distanceToMiddle;
+        }
+      }
+
+      // Category order matches gauge order in sticky header.
+      // TODO(hoten): not 100% true yet, need to order gauges like: core, pwa, plugins. Remove
+      // this comment when that is done.
+      const gaugeToHighlight = stickyHeaderEl.querySelectorAll('.lh-gauge__wrapper')[highlightIndex];
+      highlightEl.style.left = gaugeToHighlight.getBoundingClientRect().left + 'px';
+    }
+    document.addEventListener('scroll', handleStickyHeader);
+    window.addEventListener('resize', handleStickyHeader);
+  </script>
   <div class="lh-scores-wrapper">
-    <div class="lh-scores-container">
-    </div>
+    <div class="lh-scores-container"></div>
   </div>
 </template>