Repository: GoogleChrome/lighthouse
Pull request #8378 (2019-04-17 21:24:47)

i18n: update seo group titles and descriptions
<!-- Thank you for submitting a pull request! -->

**Summary**
SEO group titles and descriptions weren't translated!
![giphy (1)](https://user-images.githubusercontent.com/6392995/56321890-7c115500-611c-11e9-8b38-3c2dffdface6.gif)



Patch:
diff --git a/lighthouse-core/config/default-config.js b/lighthouse-core/config/default-config.js
index 82b346a19..86dc25925 100644
--- a/lighthouse-core/config/default-config.js
+++ b/lighthouse-core/config/default-config.js
@@ -77,6 +77,19 @@ const UIStrings = {
   '[Learn more](https://support.google.com/webmasters/answer/35769).',
   /** Description of the Search Engine Optimization (SEO) manual checks category, the additional validators must be run by hand in order to check all SEO best practices. This is displayed at the top of a list of manually run audits focused on optimizing a website for indexing by search engines. No character length limits. */
   seoCategoryManualDescription: 'Run these additional validators on your site to check additional SEO best practices.',
+  /* Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight opportunities to make a page more usable on mobile devices. */
+  seoMobileGroupTitle: 'Mobile Friendly',
+  /* Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight opportunities to make a page more usable on mobile devices. */
+  seoMobileGroupDescription: 'Make sure your pages are mobile friendly so users don’t have to pinch or zoom ' +
+  'in order to read the content pages. [Learn more](https://developers.google.com/search/mobile-sites/).',
+  /* Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website content more easily understood by search engine crawler bots. */
+  seoContentGroupTitle: 'Content Best Practices',
+  /* Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website content more easily understood by search engine crawler bots. */
+  seoContentGroupDescription: 'Format your HTML in a way that enables crawlers to better understand your app’s content.',
+  /* Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers. */
+  seoCrawlingGroupTitle: 'Crawling and Indexing',
+  /* Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers. */
+  seoCrawlingGroupDescription: 'To appear in search results, crawlers need access to your app.',
   /** Title of the Fast and Reliable section of the web app category. Within this section are audits that check if the web site loaded quickly and can reliably load even if the internet connection is very slow or goes offline. */
   pwaFastReliableGroupTitle: 'Fast and reliable',
   /** Title of the Installable section of the web app category. Within this section are audits that check if Chrome supports installing the web site as an app on their device. */
@@ -319,17 +332,16 @@ const defaultConfig = {
       description: str_(UIStrings.a11yTablesListsVideoGroupDescription),
     },
     'seo-mobile': {
-      title: 'Mobile Friendly',
-      description: 'Make sure your pages are mobile friendly so users don’t have to pinch or zoom ' +
-          'in order to read the content pages. [Learn more](https://developers.google.com/search/mobile-sites/).',
+      title: str_(UIStrings.seoMobileGroupTitle),
+      description: str_(UIStrings.seoMobileGroupDescription),
     },
     'seo-content': {
-      title: 'Content Best Practices',
-      description: 'Format your HTML in a way that enables crawlers to better understand your app’s content.',
+      title: str_(UIStrings.seoContentGroupTitle),
+      description: str_(UIStrings.seoContentGroupDescription),
     },
     'seo-crawl': {
-      title: 'Crawling and Indexing',
-      description: 'To appear in search results, crawlers need access to your app.',
+      title: str_(UIStrings.seoCrawlingGroupTitle),
+      description: str_(UIStrings.seoCrawlingGroupDescription),
     },
   },
   categories: {
diff --git a/lighthouse-core/lib/i18n/en-US.json b/lighthouse-core/lib/i18n/en-US.json
index a977287f0..edda6fb8d 100644
--- a/lighthouse-core/lib/i18n/en-US.json
+++ b/lighthouse-core/lib/i18n/en-US.json
@@ -1167,6 +1167,30 @@
     "message": "SEO",
     "description": "Title of the Search Engine Optimization (SEO) category of audits. This is displayed at the top of a list of audits focused on topics related to optimizing a website for indexing by search engines. Also used as a label of a score gauge; try to limit to 20 characters."
   },
+  "lighthouse-core/config/default-config.js | seoContentGroupDescription": {
+    "message": "Format your HTML in a way that enables crawlers to better understand your app’s content.",
+    "description": "Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website content more easily understood by search engine crawler bots."
+  },
+  "lighthouse-core/config/default-config.js | seoContentGroupTitle": {
+    "message": "Content Best Practices",
+    "description": "Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website content more easily understood by search engine crawler bots."
+  },
+  "lighthouse-core/config/default-config.js | seoCrawlingGroupDescription": {
+    "message": "To appear in search results, crawlers need access to your app.",
+    "description": "Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers."
+  },
+  "lighthouse-core/config/default-config.js | seoCrawlingGroupTitle": {
+    "message": "Crawling and Indexing",
+    "description": "Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight ways to make a website accessible to search engine crawlers."
+  },
+  "lighthouse-core/config/default-config.js | seoMobileGroupDescription": {
+    "message": "Make sure your pages are mobile friendly so users don’t have to pinch or zoom in order to read the content pages. [Learn more](https://developers.google.com/search/mobile-sites/).",
+    "description": "Description of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight opportunities to make a page more usable on mobile devices."
+  },
+  "lighthouse-core/config/default-config.js | seoMobileGroupTitle": {
+    "message": "Mobile Friendly",
+    "description": "Title of the navigation section within the Search Engine Optimization (SEO) category. Within this section are audits with descriptive titles that highlight opportunities to make a page more usable on mobile devices."
+  },
   "lighthouse-core/lib/i18n/i18n.js | columnCacheTTL": {
     "message": "Cache TTL",
     "description": "Label for the TTL column in data tables, entries will be the time to live value of the cache header on a web resource"
diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js
index 313ada384..aaf2e54b2 100644
--- a/lighthouse-core/report/html/renderer/report-renderer.js
+++ b/lighthouse-core/report/html/renderer/report-renderer.js
@@ -73,22 +73,21 @@ class ReportRenderer {
    * @param {LH.ReportResult} report
    * @return {DocumentFragment}
    */
-  _renderReportHeader(report) {
+  _renderReportTopbar(report) {
+    const el = this._dom.cloneTemplate('#tmpl-lh-topbar', this._templateContext);
+    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-topbar__url', el));
+    metadataUrl.href = metadataUrl.textContent = report.finalUrl;
+    return el;
+  }
+
+  /**
+   * @return {DocumentFragment}
+   */
+  _renderReportHeader() {
     const el = this._dom.cloneTemplate('#tmpl-lh-heading', this._templateContext);
     const domFragment = this._dom.cloneTemplate('#tmpl-lh-scores-wrapper', this._templateContext);
     const placeholder = this._dom.find('.lh-scores-wrapper-placeholder', el);
     /** @type {HTMLDivElement} */ (placeholder.parentNode).replaceChild(domFragment, placeholder);
-
-    this._dom.find('.lh-config__timestamp', el).textContent =
-        Util.formatDateTime(report.fetchTime);
-    this._dom.find('.lh-product-info__version', el).textContent = report.lighthouseVersion;
-    const metadataUrl = /** @type {HTMLAnchorElement} */ (this._dom.find('.lh-metadata__url', el));
-    const toolbarUrl = /** @type {HTMLAnchorElement}*/ (this._dom.find('.lh-toolbar__url', el));
-    metadataUrl.href = metadataUrl.textContent = report.finalUrl;
-    toolbarUrl.href = toolbarUrl.textContent = report.finalUrl;
-
-    const emulationDescriptions = Util.getEmulationDescriptions(report.configSettings || {});
-    this._dom.find('.lh-config__emulation', el).textContent = emulationDescriptions.summary;
     return el;
   }
 
@@ -170,7 +169,7 @@ class ReportRenderer {
       header = this._renderReportShortHeader();
     } else {
       headerContainer.classList.add('lh-header-sticky');
-      header = this._renderReportHeader(report);
+      header = this._renderReportHeader();
     }
     headerContainer.appendChild(header);
 
@@ -210,14 +209,18 @@ class ReportRenderer {
       wrapper.appendChild(renderer.render(category, report.categoryGroups));
     }
 
+    // TODO(hoten) - fireworks show will commence later.
     // Fireworks
-    const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
-    if (!this._dom.isDevTools() && scoresAll100) {
-      headerContainer.classList.add('score100');
-      this._dom.find('.lh-header', headerContainer).addEventListener('click', _ => {
-        headerContainer.classList.toggle('fireworks-paused');
-      });
-    }
+    // const scoresAll100 = report.reportCategories.every(cat => cat.score === 1);
+    // if (!this._dom.isDevTools() && scoresAll100) {
+    //   if (scoresAll100) {
+    //     const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
+    //     scoresContainer.classList.add('score100');
+    //     scoresContainer.addEventListener('click', _ => {
+    //       scoresContainer.classList.toggle('fireworks-paused');
+    //     });
+    //   }
+    // }
 
     if (scoreHeader) {
       const defaultGauges = [];
@@ -244,6 +247,10 @@ class ReportRenderer {
     reportSection.appendChild(this._renderReportFooter(report));
 
     const reportFragment = this._dom.createFragment();
+    if (!this._dom.isDevTools()) {
+      const topbarDocumentFragment = this._renderReportTopbar(report);
+      reportFragment.appendChild(topbarDocumentFragment);
+    }
     reportFragment.appendChild(headerContainer);
     reportFragment.appendChild(container);
 
diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js
index 254c4d8c4..4d8bdd6a4 100644
--- a/lighthouse-core/report/html/renderer/report-ui-features.js
+++ b/lighthouse-core/report/html/renderer/report-ui-features.js
@@ -40,30 +40,6 @@ class ReportUIFeatures {
     this._copyAttempt = false;
     /** @type {HTMLElement} */
     this.exportButton; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.headerSticky; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.headerBackground; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.headerContent; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.lighthouseIcon; // eslint-disable-line no-unused-expressions
-    /** @type {!HTMLElement} */
-    this.productInfo; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.toolbar; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.toolbarMetadata; // eslint-disable-line no-unused-expressions
-    /** @type {HTMLElement} */
-    this.env; // eslint-disable-line no-unused-expressions
-    /** @type {number} */
-    this.headerOverlap = 0;
-    /** @type {number} */
-    this.headerHeight = 0;
-    /** @type {number} */
-    this.latestKnownScrollY = 0;
-    /** @type {boolean} */
-    this.isAnimatingHeader = false;
 
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
     this.onCopy = this.onCopy.bind(this);
@@ -71,7 +47,6 @@ class ReportUIFeatures {
     this.onExport = this.onExport.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
     this.printShortCutDetect = this.printShortCutDetect.bind(this);
-    this.onScroll = this.onScroll.bind(this);
     this.onChevronClick = this.onChevronClick.bind(this);
   }
 
@@ -87,7 +62,6 @@ class ReportUIFeatures {
     this._setupMediaQueryListeners();
     this._setupExportButton();
     this._setUpCollapseDetailsAfterPrinting();
-    this._setupHeaderAnimation();
     this._resetUIState();
     this._document.addEventListener('keydown', this.printShortCutDetect);
     this._document.addEventListener('copy', this.onCopy);
@@ -128,26 +102,6 @@ class ReportUIFeatures {
     dropdown.addEventListener('click', this.onExport);
   }
 
-  _setupHeaderAnimation() {
-    const scoresWrapper = this._dom.find('.lh-scores-wrapper', this._document);
-    const computedMarginTop = window.getComputedStyle(scoresWrapper).marginTop;
-    this.headerOverlap = parseFloat(computedMarginTop || '0');
-    this.headerSticky = this._dom.find('.lh-header-sticky', this._document);
-    this.headerBackground = this._dom.find('.lh-header-bg', this._document);
-    this.headerContent = this._dom.find('.lh-header', this._document);
-    this.lighthouseIcon = this._dom.find('.lh-lighthouse', this._document);
-    this.productInfo = this._dom.find('.lh-product-info', this._document);
-    this.toolbar = this._dom.find('.lh-toolbar', this._document);
-    this.toolbarMetadata = this._dom.find('.lh-toolbar__metadata', this._document);
-    const computedHeight = window.getComputedStyle(this.headerBackground).height;
-    this.headerHeight = parseFloat(computedHeight || '0');
-
-    this._document.addEventListener('scroll', this.onScroll, {passive: true});
-
-    const toolbarChevron = this._dom.find('.lh-toggle-arrow', this.toolbar);
-    toolbarChevron.addEventListener('click', this.onChevronClick);
-  }
-
   /**
    * Handle copy events.
    * @param {ClipboardEvent} e
@@ -196,15 +150,6 @@ class ReportUIFeatures {
     }
   }
 
-  onScroll() {
-    this.latestKnownScrollY = window.scrollY;
-
-    if (!this.isAnimatingHeader) {
-      window.requestAnimationFrame(this.animateHeader.bind(this));
-    }
-    this.isAnimatingHeader = true;
-  }
-
   onChevronClick() {
     const toggle = this._dom.find('.lh-config__settings-toggle', this._document);
 
@@ -215,33 +160,6 @@ class ReportUIFeatures {
     }
   }
 
-  animateHeader() {
-    const collapsedHeaderHeight = 50;
-    const heightDiff = this.headerHeight - collapsedHeaderHeight + this.headerOverlap;
-    const scrollPct = Math.max(0, Math.min(1,
-      this.latestKnownScrollY / (this.headerHeight - collapsedHeaderHeight)));
-
-    this.headerSticky.style.transform = `translateY(${heightDiff * scrollPct * -1}px)`;
-    this.headerBackground.style.transform = `translateY(${scrollPct * this.headerOverlap}px)`;
-    this.lighthouseIcon.style.transform =
-      `translate3d(0,` +
-      `-${scrollPct * this.headerOverlap * -1}px, 0) scale(${1 - scrollPct})`;
-    this.headerContent.style.opacity = (1 - scrollPct).toString();
-
-    // Move the toolbar & export
-    this.toolbar.style.transform = `translateY(${heightDiff * scrollPct}px)`;
-    const exportParent = this.exportButton.parentElement;
-    if (exportParent) {
-      exportParent.style.transform = `translateY(${heightDiff * scrollPct}px)`;
-    }
-    this.exportButton.style.transform = `scale(${1 - 0.2 * scrollPct})`;
-    // Start showing the productinfo when we are at the 50% mark of our animation
-    const opacity = scrollPct < 0.5 ? 0 : (scrollPct - 0.5) * 2;
-    this.productInfo.style.opacity = this.toolbarMetadata.style.opacity = opacity.toString();
-
-    this.isAnimatingHeader = false;
-  }
-
   closeExportDropdown() {
     this.exportButton.classList.remove('active');
   }
diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index 673db20c0..25ca50cd4 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -113,8 +113,14 @@
   --score-title-line-height-big: 36px;
   --score-title-line-height: 26px;
   --section-padding: 40px;
+  --topbar-bg: var(--color-black-100);
+  --topbar-height: 36px;
+  --topbar-icon-size: 24px;
   --topbar-padding: 0 8px;
 
+  --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>');
+
+
   --pass-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>check</title><path fill="%23178239" d="M24 4C12.95 4 4 12.95 4 24c0 11.04 8.95 20 20 20 11.04 0 20-8.96 20-20 0-11.05-8.96-20-20-20zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z"/></svg>');
   --average-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>info</title><path fill="%23E67700" d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4V22h4v12zm0-16h-4v-4h4v4z"/></svg>');
   --fail-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>warn</title><path fill="%23C7221F" d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>');
@@ -158,6 +164,7 @@
     --score-title-line-height: 20px;
     --section-padding: 24px;
     --topbar-height: 32px;
+    --topbar-icon-size: 20px;
   }
 }
 
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index a5f39c437..e4eee66cf 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -149,97 +149,38 @@ limitations under the License.
   </div>
 </template>
 
-
-<!-- Lighthouse header -->
-<template id="tmpl-lh-heading">
+<!-- Lighthouse topbar -->
+<template id="tmpl-lh-topbar">
   <style>
-    :root {
-      --report-header-overlap-top: 30px;
-    }
-    .lh-header-bg {
-      background-color: var(--header-bg-color);
-      height: var(--report-header-height);
-      left: 0;
-      position: absolute;
+    .lh-topbar {
+      position: fixed;
       top: 0;
-      width: 100%;
-      will-change: transform;
-      contain: strict;
-    }
-    .lh-lighthouse {
-      position: absolute;
-      bottom: -4px;
+      left: 0;
       right: 0;
-      opacity: 1;
-      transform-origin: bottom right;
-      will-change: transform, opacity;
-    }
-    .lh-header {
-      max-width: var(--report-width);
-      margin: 0 auto;
-      height: var(--report-header-height);
-      position: relative;
-    }
-    .lh-metadata {
-      flex: 1 1 0;
-      padding: calc(var(--section-padding) / 2);
-      padding-left: var(--section-indent);
-      line-height: 20px;
-      color: var(--report-header-color);
-      z-index: 1;
-      position: relative;
-      max-width: 60%;
-    }
-    .lh-metadata__results {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    .lh-metadata__url {
-      color: currentColor;
-    }
-
-    .lh-product-info, .lh-toolbar__metadata {
-      align-items: center;
-      white-space: nowrap;
-      color: #5F6369;
-      display: flex;
-      font-size: calc(var(--body-font-size) * 0.9);
-      margin-left: var(--section-indent);
-      opacity: 0;
-      transform: translateY(-50%);
-      will-change: opacity;
-    }
-    .lh-product-info__icon {
-      height: 20px;
-      margin-right: var(--default-padding);
-    }
-    .lh-toolbar {
-      height: 50px;
-      position: absolute;
-      top: 25px;
-      will-change: transform;
+      z-index: 1000;
       display: flex;
-      width: calc(100% - 70px);  /* give room for export */
+      align-items: center;
+      height: var(--topbar-height);
+      background-color: var(--topbar-bg);
+      padding: var(--topbar-padding);
     }
-    .lh-toolbar__metadata {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
+
+    .lh-topbar__logo {
+      width: var(--topbar-icon-size);
+      height: var(--topbar-icon-size);
+      background-image: var(--logo-url);
+      background-size: cover;
     }
-    .lh-toolbar__url {
-      color: currentColor;
-      display: block;
-      white-space: nowrap;
-      margin-right: 2px;
+
+    .lh-topbar__url {
+      margin: var(--topbar-padding);
+      text-decoration: none;
+      color: var(--color-black);
     }
+
     .lh-export {
-      position: absolute;
-      right: var(--section-indent);
-      transform: translateY(0);
-      top: calc(var(--section-padding) / 2);
+      margin-left: auto;
       will-change: transform;
-      z-index: 2;
     }
     .lh-export__button {
       background-color: #fff;
@@ -247,10 +188,10 @@ limitations under the License.
       border-radius: 2px;
       cursor: pointer;
       outline: none;
-      height: 32px;
-      width: 48px;
+      height: 23px;
+      width: 30px;
       background-repeat: no-repeat;
-      background-size: 20px;
+      background-size: 18px;
       background-position: 50% 50%;
       will-change: transform;
     }
@@ -260,7 +201,7 @@ limitations under the License.
     }
     .lh-export__button.active + .lh-export__dropdown {
       opacity: 1;
-      clip: rect(0, 164px, 200px, 0);
+      clip: rect(0, 164px, 210px, 0);
     }
     .lh-export__dropdown {
       position: absolute;
@@ -307,17 +248,7 @@ limitations under the License.
     .lh-export__dropdown .lh-export--gist {
       display: none;
     }
-    .lh-config {
-      color: var(--secondary-text-color);
-    }
-    .lh-config__timestamp {
-      font-size: var(--caption-font-size);
-      display: block;
-    }
-    a.lh-config__emulation {
-      color: inherit;
-      text-decoration: none;
-    }
+
     @media screen and (max-width: 964px) {
       .lh-export__dropdown {
         right: 0;
@@ -325,11 +256,37 @@ limitations under the License.
       }
     }
     @media print {
-      .lh-header {
+      .lh-topbar {
         position: static;
         margin-left: 0;
       }
     }
+  </style>
+
+  <div class="lh-topbar">
+    <div class="lh-topbar__logo"></div>
+
+    <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
+    
+    <div class="lh-export">
+      <button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
+      <div class="lh-export__dropdown">
+        <!-- TODO(i18n): localize export dropdown -->
+        <a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>
+        <a href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a>
+        <a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a>
+        <a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a>
+        <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
+        <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
+        <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!-- Lighthouse header -->
+<template id="tmpl-lh-heading">
+  <style>
 /*
     TODO: Enable animating the clouds
     .lh-lighthouse__clouds {
@@ -421,82 +378,10 @@ limitations under the License.
       }
     }
   </style>
-  <div class="lh-header-bg">
-    <div class="pyro">
-      <div class="before"></div>
-      <div class="after"></div>
-    </div>
-  </div>
 
 
   <div class="lh-header-container">
-    <div class="lh-header">
-      <div class="lh-lighthouse">
-        <svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-          <defs>
-            <mask id="a" x="-56" y="-54" width="284" height="202" maskUnits="userSpaceOnUse">
-              <path d="M-56-54h284v202H-56z" fill="#fff"></path>
-            </mask>
-            <linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse">
-              <stop offset="0" stop-color="#FFFFFF00"/>
-              <stop offset="1" stop-color="#FFFFFF"/>
-            </linearGradient>
-          </defs>
-          <g mask="url(#a)">
-            <!-- lighthouse building elements -->
-            <path d="M95 47h24v2H95z" fill="#ec5548"/>
-            <path d="M95 59h24v7H95z" fill="#ec5548"/>
-            <path d="M97.63 66h19.74l2.63 47H95z" fill="#fff"/>
-            <path d="M107 38a10 10 0 0 1 10 10v1H97v-1a10 10 0 0 1 10-10zM96.77 82.23l21-10.7.63 11.87-22.31 11.87zM95 110.8L119.1 98l.9 14H95z" fill="#ec5548"/>
-            <path d="M0 148a177.58 177.58 0 0 1 217 0z" fill="#e8eaed"/>
-            <!-- lighthouse beam elements -->
-            <path d="M98 49h18v11H98z" fill="#fbc21b"/>
-            <path d="M103 49a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5z" fill="#fef0c8"/>
-            <path d="M7 16l91 33.18v10L7 93z" fill="url(#b)"/>
-          </g>
-          <g mask="url(#a)" class="lh-lighthouse__clouds">
-            <path d="M60 .19A9.77 9.77 0 0 1 61.93 0a9.44 9.44 0 0 1 9.24 7.83A7.24 7.24 0 0 1 79 14.45v.73A7.37 7.37 0 0 1 76.2 21h-31a7.44 7.44 0 0 1-1.2-4.09 7.31 7.31 0 0 1 7.26-7.36 6.84 6.84 0 0 1 1.28.1v-.11A9.51 9.51 0 0 1 60 .19m79.78 22.31h-17.9a4.37 4.37 0 0 1-.63-2.25 4.2 4.2 0 0 1 4.16-4.25 4.37 4.37 0 0 1 .72.06V16a5.35 5.35 0 0 1 10.64-1h.33a4.2 4.2 0 0 1 4.15 4.25 4.29 4.29 0 0 1-1.47 3.25zM163 62h-24.15a5.1 5.1 0 0 1-.85-2.81 5.65 5.65 0 0 1 6.59-5.19v-.08a7.07 7.07 0 0 1 7.24-6.92 7.15 7.15 0 0 1 7.17 5.64h.44a5.46 5.46 0 0 1 5.6 5.32A5.19 5.19 0 0 1 163 62z" fill="#fff"/>
-          </g>
-        </svg>
-      </div>
-
-      <div class="lh-metadata">
-        <div class="lh-metadata__results"><a href="" class="lh-metadata__url" target="_blank" rel="noopener"></a></div>
-        <div class="lh-config">
-          <span class="lh-config__timestamp"></span>
-          <a href="#runtime-settings" class="lh-config__emulation"></a>
-        </div>
-      </div>
-    </div>
-
     <div class="lh-scores-wrapper-placeholder"></div>
-
-    <div class="lh-toolbar">
-      <div class="lh-product-info">
-        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAADjklEQVR4AWI08P/HQEvAQrxSQKvlECfLFYXx75xCY2qmh89GbNvOMjb3v9jOOlxnFWxj206ebQ3b7q6q+z1rNagu8/zvPSZACAABpeUAA0miMgU7SA7JjCraFGwZwECOwvL75dWjsKgWBKtx0jvWo+vkBAFbACCkByMP6nMn48+AVgXB2fzSCwsv22/lMGlUhmJ0AE7BH8dyUUDbUEgN6RzJRSeaPxhdRYR0Inel+7Hd5lBiFpkMAxACc0394//9C4voFHDiAAGLpuOXebdfdHfctgwJKaZRLRKy6ItrSis6RBnVBgGtbHyKTEmJHQoEXoBCE5BCrDeA2ogMUIGDAKEBDEhUqwgMqBYDjW4DQzmuffVdqff42/ZQYYqVcMXGZsMPyCsH3lyJSetxvEaxAQXdjR1HjfwCdIS7lo2DZke26Qe+MXO12OWkGT0O6oE7vMGkMnkYw4aN1KQgMKExhXqswfiov4+a7MQ11XPnbr/5qpKlgACAAQj94Lu271bN9DUecQasIZlNzG72llRAAKJiAi+/BSHrSFjRvQhg3DEKEqJh08tsmLTx597+f6enr4cc2Zpk57pihfX24dW7RHcOLLUbJYhJSl0ErQCI9BVXH/XrO97QasuvQQSiECa0BrQCIIJp6X9T/r8QG6L71WYSqCoIIGo2BZDUBnS/D9EA9Nun1iYvbM0MFExIDQRoKFatc1Z6zrm5uWeObJotq0BGV9FuQBWq5a4Fw3PPz848rZHstZSuA5FWAFSMP2nOppOOGpl6qh9PCSg0IFyHKjSQyDNQHTru2t75NOEe0fsf246oAmFkI6vCdnWvbQFQFCKx8vCswV8TrDLiDLgH4Nr7RAtNsrC9d8sfk7b8ls4igdNy8CQKAISlsB0FjZfd3Lfp155tf8fKI4BxZZIj/oTdVEAIAcJFOCmzauHG71I7/rdreUAgAqpDP05fDARCAQQARwEIBQSVxq0FyaLvZZtevpHa8WHw8cft6cpxlq8eAJtIhnSbWDf951yx3y13OqUuu5qyGgkxCgGFh9cDihDGbTa6BqvT1lWmrav3bmt2ZMJ4mU6TGgIC4DBzcv/JqAau1WhzSt3x9Ixk/4Jk/8J4ZrrViFMA4W6A7+WK8xcVjvyrOmVD0FbAXokcT48r+xVqLKvuJYbmpNadnlp3mpufJHOe/GXktM+r09bT8kEdq9BRYAbGSgzP7ll82U71Mc+ZFooXgwAAAABJRU5ErkJggg==" alt="" class="lh-product-info__icon" />
-        <span class="lh-product-info__name">Lighthouse</span>&nbsp;
-        <span class="lh-product-info__version"></span>
-      </div>
-
-      <div class="lh-toolbar__metadata">
-        <a href="" class="lh-toolbar__url" target="_blank" rel="noopener"></a>
-        <span class="lh-toggle-arrow" title="See report's runtime settings"></span>
-      </div>
-    </div>
-
-    <div class="lh-export">
-      <button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
-      <div class="lh-export__dropdown">
-        <!-- TODO(i18n): localize export dropdown -->
-        <a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>
-        <a href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a>
-        <a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a>
-        <a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a>
-        <a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
-        <a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
-        <a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
-      </div>
-    </div>
   </div>
 </template>
 


Test patch:
diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
index 7464e8df1..840a37c94 100644
--- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js
+++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js
@@ -94,16 +94,14 @@ describe('ReportRenderer', () => {
         'new report appended to container');
     });
 
+    it('renders a topbar', () => {
+      const topbar = renderer._renderReportTopbar(sampleResults);
+      assert.equal(topbar.querySelector('.lh-topbar__url').textContent, sampleResults.finalUrl);
+    });
+
     it('renders a header', () => {
-      const header = renderer._renderReportHeader(sampleResults);
-      assert.ok(header.querySelector('.lh-export'), 'contains export button');
-
-      assert.ok(header.querySelector('.lh-config__timestamp').textContent.match(TIMESTAMP_REGEX),
-          'formats the generated datetime');
-      assert.equal(header.querySelector('.lh-metadata__url').textContent, sampleResults.finalUrl);
-      const url = header.querySelector('.lh-metadata__url');
-      assert.equal(url.textContent, sampleResults.finalUrl);
-      assert.equal(url.href, sampleResults.finalUrl);
+      const header = renderer._renderReportHeader();
+      assert.ok(header.querySelector('.lh-scores-container'), 'contains score container');
     });
 
     it('renders special score gauges after the mainstream ones', () => {
@@ -177,7 +175,8 @@ describe('ReportRenderer', () => {
     assert.equal(renderer._templateContext, otherDocument);
   });
 
-  it('should render an all 100 report with fireworks', () => {
+  // Fireworks temporarily canceled. See #8185
+  test.skip('should render an all 100 report with fireworks', () => {
     const container = renderer._dom._document.body;
 
     sampleResults.reportCategories.forEach(element => {
diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json
index c702fd793..dc9fdb9d2 100644
--- a/lighthouse-core/test/results/sample_v2.json
+++ b/lighthouse-core/test/results/sample_v2.json
@@ -5417,6 +5417,24 @@
       ],
       "lighthouse-core/config/default-config.js | a11yTablesListsVideoGroupDescription": [
         "categoryGroups[a11y-tables-lists].description"
+      ],
+      "lighthouse-core/config/default-config.js | seoMobileGroupTitle": [
+        "categoryGroups[seo-mobile].title"
+      ],
+      "lighthouse-core/config/default-config.js | seoMobileGroupDescription": [
+        "categoryGroups[seo-mobile].description"
+      ],
+      "lighthouse-core/config/default-config.js | seoContentGroupTitle": [
+        "categoryGroups[seo-content].title"
+      ],
+      "lighthouse-core/config/default-config.js | seoContentGroupDescription": [
+        "categoryGroups[seo-content].description"
+      ],
+      "lighthouse-core/config/default-config.js | seoCrawlingGroupTitle": [
+        "categoryGroups[seo-crawl].title"
+      ],
+      "lighthouse-core/config/default-config.js | seoCrawlingGroupDescription": [
+        "categoryGroups[seo-crawl].description"
       ]
     }
   },