lighthouse 8.3.0-dev.20210907 → 8.3.0

package/report/renderer/components.js

@@ -2,13 +2,15 @@
 
 // auto-generated by build/build-report-components.js
 
-/** @typedef {import('./dom.js').DOM} DOM */
+// must import as DOM_ to avoid redeclaring 'DOM' export in bundle.d.ts, otherwise
+// yarn test-devtools will fail.
+/** @typedef {import('./dom.js').DOM} DOM_ */
 
 /* eslint-disable max-len */
 
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function create3pFilterComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -30,7 +32,7 @@ function create3pFilterComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createAuditComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -55,7 +57,7 @@ function createAuditComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createCategoryHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -70,7 +72,7 @@ function createCategoryHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createChevronComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -88,7 +90,7 @@ function createChevronComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createClumpComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -107,13 +109,13 @@ function createClumpComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createCrcComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('div', 'lh-crc-container');
   const el2 = dom.createElement('style');
-  el2.append('\n      .lh-crc .lh-tree-marker {\n        width: 12px;\n        height: 26px;\n        display: block;\n        float: left;\n        background-position: top left;\n      }\n      .lh-crc .lh-horiz-down {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><g fill="%23D8D8D8" fill-rule="evenodd"><path d="M16 12v2H-2v-2z"/><path d="M9 12v14H7V12z"/></g></svg>\');\n      }\n      .lh-crc .lh-right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M16 12v2H0v-2z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .lh-up-right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v14H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .lh-vert-right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v27H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .lh-vert {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v26H7z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .lh-crc-tree {\n        font-size: 14px;\n        width: 100%;\n        overflow-x: auto;\n      }\n      .lh-crc .lh-crc-node {\n        height: 26px;\n        line-height: 26px;\n        white-space: nowrap;\n      }\n      .lh-crc .lh-crc-node__tree-value {\n        margin-left: 10px;\n      }\n      .lh-crc .lh-crc-node__tree-value div {\n        display: inline;\n      }\n      .lh-crc .lh-crc-node__chain-duration {\n        font-weight: 700;\n      }\n      .lh-crc .lh-crc-initial-nav {\n        color: #595959;\n        font-style: italic;\n      }\n      .lh-crc__summary-value {\n        margin-bottom: 10px;\n      }\n    ');
+  el2.append('\n      .lh-crc .tree-marker {\n        width: 12px;\n        height: 26px;\n        display: block;\n        float: left;\n        background-position: top left;\n      }\n      .lh-crc .horiz-down {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><g fill="%23D8D8D8" fill-rule="evenodd"><path d="M16 12v2H-2v-2z"/><path d="M9 12v14H7V12z"/></g></svg>\');\n      }\n      .lh-crc .right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M16 12v2H0v-2z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .up-right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v14H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .vert-right {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v27H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .vert {\n        background: url(\'data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v26H7z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>\');\n      }\n      .lh-crc .crc-tree {\n        font-size: 14px;\n        width: 100%;\n        overflow-x: auto;\n      }\n      .lh-crc .crc-node {\n        height: 26px;\n        line-height: 26px;\n        white-space: nowrap;\n      }\n      .lh-crc .crc-node__tree-value {\n        margin-left: 10px;\n      }\n      .lh-crc .crc-node__tree-value div {\n        display: inline;\n      }\n      .lh-crc .crc-node__chain-duration {\n        font-weight: 700;\n      }\n      .lh-crc .crc-initial-nav {\n        color: #595959;\n        font-style: italic;\n      }\n      .lh-crc__summary-value {\n        margin-bottom: 10px;\n      }\n    ');
   const el3 = dom.createElement('div');
   const el4 = dom.createElement('div', 'lh-crc__summary-value');
   const el5 = dom.createElement('span', 'lh-crc__longest_duration_label');
@@ -121,7 +123,7 @@ function createCrcComponent(dom) {
   el4.append(' ', el5, ' ', el6, ' ');
   el3.append(' ', el4, ' ');
   const el7 = dom.createElement('div', 'lh-crc');
-  const el8 = dom.createElement('div', 'lh-crc-initial-nav');
+  const el8 = dom.createElement('div', 'crc-initial-nav');
   el7.append(' ', el8, ' ', ' ');
   el1.append(' ', el2, ' ', el3, ' ', el7, ' ');
   el0.append(el1);
@@ -129,20 +131,20 @@ function createCrcComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createCrcChainComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
-  const el1 = dom.createElement('div', 'lh-crc-node');
-  const el2 = dom.createElement('span', 'lh-crc-node__tree-marker');
-  const el3 = dom.createElement('span', 'lh-crc-node__tree-value');
+  const el1 = dom.createElement('div', 'crc-node');
+  const el2 = dom.createElement('span', 'crc-node__tree-marker');
+  const el3 = dom.createElement('span', 'crc-node__tree-value');
   el1.append(' ', el2, ' ', el3, ' ');
   el0.append(el1);
   return el0;
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createElementScreenshotComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -167,7 +169,7 @@ function createElementScreenshotComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createEnvItemComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -180,7 +182,7 @@ function createEnvItemComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createFooterComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -210,7 +212,7 @@ function createFooterComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createGaugeComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -239,12 +241,12 @@ function createGaugeComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createGaugePwaComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    .lh-gauge--pwa .lh-gauge--pwa__component {\n      display: none;\n    }\n    .lh-gauge--pwa__wrapper:not(.lh-badged--all) .lh-gauge--pwa__logo > path {\n      /* Gray logo unless everything is passing. */\n      fill: #B0B0B0;\n    }\n\n    .lh-gauge--pwa__disc {\n      fill: var(--color-gray-200);\n    }\n\n    .lh-gauge--pwa__logo--primary-color {\n      fill: #304FFE;\n    }\n\n    .lh-gauge--pwa__logo--secondary-color {\n      fill: #3D3D3D;\n    }\n    .lh-dark .lh-gauge--pwa__logo--secondary-color {\n      fill: #D8B6B6;\n    }\n\n    /* No passing groups. */\n    .lh-gauge--pwa__wrapper:not([class*=\'lh-badged--\']) .lh-gauge--pwa__na-line {\n      display: inline;\n    }\n    /* Just optimized. Same n/a line as no passing groups. */\n    .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable) .lh-gauge--pwa__na-line {\n      display: inline;\n    }\n\n    /* Just installable. */\n    .lh-gauge--pwa__wrapper.lh-badged--pwa-installable .lh-gauge--pwa__installable-badge {\n      display: inline;\n    }\n\n    /* All passing groups. */\n    .lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle {\n      display: inline;\n    }\n  ');
+  el1.append('\n    .lh-gauge--pwa .lh-gauge--pwa__component {\n      display: none;\n    }\n    .lh-gauge--pwa__wrapper:not(.lh-badged--all) .lh-gauge--pwa__logo > path {\n      /* Gray logo unless everything is passing. */\n      fill: #B0B0B0;\n    }\n\n    .lh-gauge--pwa__disc {\n      fill: var(--color-gray-200);\n    }\n\n    .lh-gauge--pwa__logo--primary-color {\n      fill: #304FFE;\n    }\n\n    .lh-gauge--pwa__logo--secondary-color {\n      fill: #3D3D3D;\n    }\n    .dark .lh-gauge--pwa__logo--secondary-color {\n      fill: #D8B6B6;\n    }\n\n    /* No passing groups. */\n    .lh-gauge--pwa__wrapper:not([class*=\'lh-badged--\']) .lh-gauge--pwa__na-line {\n      display: inline;\n    }\n    /* Just optimized. Same n/a line as no passing groups. */\n    .lh-gauge--pwa__wrapper.lh-badged--pwa-optimized:not(.lh-badged--pwa-installable) .lh-gauge--pwa__na-line {\n      display: inline;\n    }\n\n    /* Just installable. */\n    .lh-gauge--pwa__wrapper.lh-badged--pwa-installable .lh-gauge--pwa__installable-badge {\n      display: inline;\n    }\n\n    /* All passing groups. */\n    .lh-gauge--pwa__wrapper.lh-badged--all .lh-gauge--pwa__check-circle {\n      display: inline;\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('a', 'lh-gauge__wrapper lh-gauge--pwa__wrapper');
   el2.setAttribute('href', '#');
@@ -340,12 +342,12 @@ function createGaugePwaComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createHeadingComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    /* CSS Fireworks. Originally by Eddie Lin\n       https://codepen.io/paulirish/pen/yEVMbP\n    */\n    .lh-pyro {\n      display: none;\n      z-index: 1;\n      pointer-events: none;\n    }\n    .lh-score100 .lh-pyro {\n      display: block;\n    }\n    .lh-score100 .lh-lighthouse stop:first-child {\n      stop-color: hsla(200, 12%, 95%, 0);\n    }\n    .lh-score100 .lh-lighthouse stop:last-child {\n      stop-color: hsla(65, 81%, 76%, 1);\n    }\n\n    .lh-pyro > .lh-pyro-before, .lh-pyro > .lh-pyro-after {\n      position: absolute;\n      width: 5px;\n      height: 5px;\n      border-radius: 2.5px;\n      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n      animation: 1s bang ease-out infinite backwards,  1s gravity ease-in infinite backwards,  5s position linear infinite backwards;\n      animation-delay: 1s, 1s, 1s;\n    }\n\n    .lh-pyro > .lh-pyro-after {\n      animation-delay: 2.25s, 2.25s, 2.25s;\n      animation-duration: 1.25s, 1.25s, 6.25s;\n    }\n    .lh-fireworks-paused .lh-pyro > div {\n      animation-play-state: paused;\n    }\n\n    @keyframes bang {\n      to {\n        box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;\n      }\n    }\n    @keyframes gravity {\n      to {\n        transform: translateY(80px);\n        opacity: 0;\n      }\n    }\n    @keyframes position {\n      0%, 19.9% {\n        margin-top: 4%;\n        margin-left: 47%;\n      }\n      20%, 39.9% {\n        margin-top: 7%;\n        margin-left: 30%;\n      }\n      40%, 59.9% {\n        margin-top: 6%;\n        margin-left: 70%;\n      }\n      60%, 79.9% {\n        margin-top: 3%;\n        margin-left: 20%;\n      }\n      80%, 99.9% {\n        margin-top: 3%;\n        margin-left: 80%;\n      }\n    }\n  ');
+  el1.append('\n    /* CSS Fireworks. Originally by Eddie Lin\n       https://codepen.io/paulirish/pen/yEVMbP\n    */\n    .pyro {\n      display: none;\n      z-index: 1;\n      pointer-events: none;\n    }\n    .score100 .pyro {\n      display: block;\n    }\n    .score100 .lh-lighthouse stop:first-child {\n      stop-color: hsla(200, 12%, 95%, 0);\n    }\n    .score100 .lh-lighthouse stop:last-child {\n      stop-color: hsla(65, 81%, 76%, 1);\n    }\n\n    .pyro > .before, .pyro > .after {\n      position: absolute;\n      width: 5px;\n      height: 5px;\n      border-radius: 2.5px;\n      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n      animation: 1s bang ease-out infinite backwards,  1s gravity ease-in infinite backwards,  5s position linear infinite backwards;\n      animation-delay: 1s, 1s, 1s;\n    }\n\n    .pyro > .after {\n      animation-delay: 2.25s, 2.25s, 2.25s;\n      animation-duration: 1.25s, 1.25s, 6.25s;\n    }\n    .fireworks-paused .pyro > div {\n      animation-play-state: paused;\n    }\n\n    @keyframes bang {\n      to {\n        box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;\n      }\n    }\n    @keyframes gravity {\n      to {\n        transform: translateY(80px);\n        opacity: 0;\n      }\n    }\n    @keyframes position {\n      0%, 19.9% {\n        margin-top: 4%;\n        margin-left: 47%;\n      }\n      20%, 39.9% {\n        margin-top: 7%;\n        margin-left: 30%;\n      }\n      40%, 59.9% {\n        margin-top: 6%;\n        margin-left: 70%;\n      }\n      60%, 79.9% {\n        margin-top: 3%;\n        margin-left: 20%;\n      }\n      80%, 99.9% {\n        margin-top: 3%;\n        margin-left: 80%;\n      }\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-header-container');
   const el3 = dom.createElement('div', 'lh-scores-wrapper-placeholder');
@@ -355,7 +357,7 @@ function createHeadingComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createMetricComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -371,7 +373,7 @@ function createMetricComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createMetricsToggleComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -409,7 +411,7 @@ function createMetricsToggleComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createOpportunityComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -443,7 +445,7 @@ function createOpportunityComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createOpportunityHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -456,7 +458,7 @@ function createOpportunityHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createScorescaleComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -473,7 +475,7 @@ function createScorescaleComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createScoresWrapperComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -482,9 +484,9 @@ function createScoresWrapperComponent(dom) {
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-scores-wrapper');
   const el3 = dom.createElement('div', 'lh-scores-container');
-  const el4 = dom.createElement('div', 'lh-pyro');
-  const el5 = dom.createElement('div', 'lh-before');
-  const el6 = dom.createElement('div', 'lh-after');
+  const el4 = dom.createElement('div', 'pyro');
+  const el5 = dom.createElement('div', 'before');
+  const el6 = dom.createElement('div', 'after');
   el4.append(' ', el5, ' ', el6, ' ');
   el3.append(' ', el4, ' ');
   el2.append(' ', el3, ' ');
@@ -493,7 +495,7 @@ function createScoresWrapperComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createSnippetComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -506,7 +508,7 @@ function createSnippetComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createSnippetContentComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -518,7 +520,7 @@ function createSnippetContentComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createSnippetHeaderComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -535,7 +537,7 @@ function createSnippetHeaderComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createSnippetLineComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -549,12 +551,12 @@ function createSnippetLineComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createTopbarComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    .lh-topbar {\n      position: sticky;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 1000;\n      display: flex;\n      align-items: center;\n      height: var(--topbar-height);\n      background-color: var(--topbar-background-color);\n      padding: var(--topbar-padding);\n    }\n\n    .lh-topbar__logo {\n      width: var(--topbar-logo-size);\n      height: var(--topbar-logo-size);\n      user-select: none;\n      flex: none;\n    }\n\n    .lh-topbar__url {\n      margin: var(--topbar-padding);\n      text-decoration: none;\n      color: var(--report-text-color);\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n\n    .lh-tools {\n      margin-left: auto;\n      will-change: transform;\n      min-width: var(--report-icon-size);\n    }\n    .lh-tools__button {\n      width: var(--report-icon-size);\n      height: var(--report-icon-size);\n      cursor: pointer;\n      margin-right: 5px;\n      /* This is actually a button element, but we want to style it like a transparent div. */\n      display: flex;\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      font: inherit;\n      outline: inherit;\n    }\n    .lh-tools__button svg {\n      fill: var(--tools-icon-color);\n    }\n    .lh-dark .lh-tools__button svg {\n      filter: invert(1);\n    }\n    .lh-tools__button.lh-active + .lh-tools__dropdown {\n      opacity: 1;\n      clip: rect(-1px, 194px, 242px, -3px);\n      visibility: visible;\n    }\n    .lh-tools__dropdown {\n      position: absolute;\n      background-color: var(--report-background-color);\n      border: 1px solid var(--report-border-color);\n      border-radius: 3px;\n      padding: calc(var(--default-padding) / 2) 0;\n      cursor: pointer;\n      top: 36px;\n      right: 0;\n      box-shadow: 1px 1px 3px #ccc;\n      min-width: 125px;\n      clip: rect(0, 164px, 0, 0);\n      visibility: hidden;\n      opacity: 0;\n      transition: all 200ms cubic-bezier(0,0,0.2,1);\n    }\n    .lh-tools__dropdown a {\n      color: currentColor;\n      text-decoration: none;\n      white-space: nowrap;\n      padding: 0 12px;\n      line-height: 2;\n    }\n    .lh-tools__dropdown a:hover,\n    .lh-tools__dropdown a:focus {\n      background-color: var(--color-gray-200);\n      outline: none;\n    }\n    /* save-gist option hidden in report. */\n    .lh-tools__dropdown a[data-action=\'save-gist\'] {\n      display: none;\n    }\n\n    @media screen and (max-width: 964px) {\n      .lh-tools__dropdown {\n        right: 0;\n        left: initial;\n      }\n    }\n    @media print {\n      .lh-topbar {\n        position: static;\n        margin-left: 0;\n      }\n\n      .lh-tools__dropdown {\n        display: none;\n      }\n    }\n  ');
+  el1.append('\n    .lh-topbar {\n      position: sticky;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 1000;\n      display: flex;\n      align-items: center;\n      height: var(--topbar-height);\n      background-color: var(--topbar-background-color);\n      padding: var(--topbar-padding);\n    }\n\n    .lh-topbar__logo {\n      width: var(--topbar-logo-size);\n      height: var(--topbar-logo-size);\n      user-select: none;\n      flex: none;\n    }\n    .lh-topbar__logo .shape {\n      fill: var(--report-text-color);\n    }\n\n    .lh-topbar__url {\n      margin: var(--topbar-padding);\n      text-decoration: none;\n      color: var(--report-text-color);\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n\n    .lh-tools {\n      margin-left: auto;\n      will-change: transform;\n      min-width: var(--report-icon-size);\n    }\n    .lh-tools__button {\n      width: var(--report-icon-size);\n      height: var(--report-icon-size);\n      cursor: pointer;\n      margin-right: 5px;\n      /* This is actually a button element, but we want to style it like a transparent div. */\n      display: flex;\n      background: none;\n      color: inherit;\n      border: none;\n      padding: 0;\n      font: inherit;\n      outline: inherit;\n    }\n    .lh-tools__button svg {\n      fill: var(--tools-icon-color);\n    }\n    .dark .lh-tools__button svg {\n      filter: invert(1);\n    }\n    .lh-tools__button.active + .lh-tools__dropdown {\n      opacity: 1;\n      clip: rect(-1px, 194px, 242px, -3px);\n      visibility: visible;\n    }\n    .lh-tools__dropdown {\n      position: absolute;\n      background-color: var(--report-background-color);\n      border: 1px solid var(--report-border-color);\n      border-radius: 3px;\n      padding: calc(var(--default-padding) / 2) 0;\n      cursor: pointer;\n      top: 36px;\n      right: 0;\n      box-shadow: 1px 1px 3px #ccc;\n      min-width: 125px;\n      clip: rect(0, 164px, 0, 0);\n      visibility: hidden;\n      opacity: 0;\n      transition: all 200ms cubic-bezier(0,0,0.2,1);\n    }\n    .lh-tools__dropdown a {\n      color: currentColor;\n      text-decoration: none;\n      white-space: nowrap;\n      padding: 0 12px;\n      line-height: 2;\n    }\n    .lh-tools__dropdown a:hover,\n    .lh-tools__dropdown a:focus {\n      background-color: var(--color-gray-200);\n      outline: none;\n    }\n    /* save-gist option hidden in report. */\n    .lh-tools__dropdown a[data-action=\'save-gist\'] {\n      display: none;\n    }\n\n    @media screen and (max-width: 964px) {\n      .lh-tools__dropdown {\n        right: 0;\n        left: initial;\n      }\n    }\n    @media print {\n      .lh-topbar {\n        position: static;\n        margin-left: 0;\n      }\n\n      .lh-tools__dropdown {\n        display: none;\n      }\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-topbar');
   const el3 = dom.createElementNS('http://www.w3.org/2000/svg', 'svg', 'lh-topbar__logo');
@@ -683,49 +685,49 @@ function createTopbarComponent(dom) {
   el31.setAttribute('id', 'lh-tools-dropdown');
   el31.setAttribute('role', 'menu');
   el31.setAttribute('aria-labelledby', 'lh-tools-button');
-  const el32 = dom.createElement('a', 'lh-report-icon lh-report-icon--print');
+  const el32 = dom.createElement('a', 'report-icon report-icon--print');
   el32.setAttribute('role', 'menuitem');
   el32.setAttribute('tabindex', '-1');
   el32.setAttribute('href', '#');
   el32.setAttribute('data-i18n', 'dropdownPrintSummary');
   el32.setAttribute('data-action', 'print-summary');
-  const el33 = dom.createElement('a', 'lh-report-icon lh-report-icon--print');
+  const el33 = dom.createElement('a', 'report-icon report-icon--print');
   el33.setAttribute('role', 'menuitem');
   el33.setAttribute('tabindex', '-1');
   el33.setAttribute('href', '#');
   el33.setAttribute('data-i18n', 'dropdownPrintExpanded');
   el33.setAttribute('data-action', 'print-expanded');
-  const el34 = dom.createElement('a', 'lh-report-icon lh-report-icon--copy');
+  const el34 = dom.createElement('a', 'report-icon report-icon--copy');
   el34.setAttribute('role', 'menuitem');
   el34.setAttribute('tabindex', '-1');
   el34.setAttribute('href', '#');
   el34.setAttribute('data-i18n', 'dropdownCopyJSON');
   el34.setAttribute('data-action', 'copy');
-  const el35 = dom.createElement('a', 'lh-report-icon lh-report-icon--download');
+  const el35 = dom.createElement('a', 'report-icon report-icon--download');
   el35.setAttribute('role', 'menuitem');
   el35.setAttribute('tabindex', '-1');
   el35.setAttribute('href', '#');
   el35.setAttribute('data-i18n', 'dropdownSaveHTML');
   el35.setAttribute('data-action', 'save-html');
-  const el36 = dom.createElement('a', 'lh-report-icon lh-report-icon--download');
+  const el36 = dom.createElement('a', 'report-icon report-icon--download');
   el36.setAttribute('role', 'menuitem');
   el36.setAttribute('tabindex', '-1');
   el36.setAttribute('href', '#');
   el36.setAttribute('data-i18n', 'dropdownSaveJSON');
   el36.setAttribute('data-action', 'save-json');
-  const el37 = dom.createElement('a', 'lh-report-icon lh-report-icon--open');
+  const el37 = dom.createElement('a', 'report-icon report-icon--open');
   el37.setAttribute('role', 'menuitem');
   el37.setAttribute('tabindex', '-1');
   el37.setAttribute('href', '#');
   el37.setAttribute('data-i18n', 'dropdownViewer');
   el37.setAttribute('data-action', 'open-viewer');
-  const el38 = dom.createElement('a', 'lh-report-icon lh-report-icon--open');
+  const el38 = dom.createElement('a', 'report-icon report-icon--open');
   el38.setAttribute('role', 'menuitem');
   el38.setAttribute('tabindex', '-1');
   el38.setAttribute('href', '#');
   el38.setAttribute('data-i18n', 'dropdownSaveGist');
   el38.setAttribute('data-action', 'save-gist');
-  const el39 = dom.createElement('a', 'lh-report-icon lh-report-icon--dark');
+  const el39 = dom.createElement('a', 'report-icon report-icon--dark');
   el39.setAttribute('role', 'menuitem');
   el39.setAttribute('tabindex', '-1');
   el39.setAttribute('href', '#');
@@ -739,7 +741,7 @@ function createTopbarComponent(dom) {
 }
 
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  */
 function createWarningsToplevelComponent(dom) {
   const el0 = dom.document().createDocumentFragment();
@@ -754,7 +756,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 */
 /**
- * @param {DOM} dom
+ * @param {DOM_} dom
  * @param {ComponentName} componentName
  * @return {DocumentFragment}
  */

package/report/renderer/crc-details-renderer.js

@@ -91,46 +91,46 @@ export class CriticalRequestChainRenderer {
     const chainEl = dom.createComponent('crcChain');
 
     // Hovering over request shows full URL.
-    dom.find('.lh-crc-node', chainEl).setAttribute('title', segment.node.request.url);
+    dom.find('.crc-node', chainEl).setAttribute('title', segment.node.request.url);
 
-    const treeMarkeEl = dom.find('.lh-crc-node__tree-marker', chainEl);
+    const treeMarkeEl = dom.find('.crc-node__tree-marker', chainEl);
 
     // Construct lines and add spacers for sub requests.
     segment.treeMarkers.forEach(separator => {
       if (separator) {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker vert'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
       } else {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker'));
       }
     });
 
     if (segment.isLastChild) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-up-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker up-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
     } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker vert-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
     }
 
     if (segment.hasChildren) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-horiz-down'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker horiz-down'));
     } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'tree-marker right'));
     }
 
     // Fill in url, host, and request size information.
     const url = segment.node.request.url;
     const linkEl = detailsRenderer.renderTextURL(url);
-    const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
+    const treevalEl = dom.find('.crc-node__tree-value', chainEl);
     treevalEl.appendChild(linkEl);
 
     if (!segment.hasChildren) {
       const {startTime, endTime, transferSize} = segment.node.request;
-      const span = dom.createElement('span', 'lh-crc-node__chain-duration');
+      const span = dom.createElement('span', 'crc-node__chain-duration');
       span.textContent = ' - ' + Util.i18n.formatMilliseconds((endTime - startTime) * 1000) + ', ';
-      const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
+      const span2 = dom.createElement('span', 'crc-node__chain-duration');
       span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
 
       treevalEl.appendChild(span);
@@ -171,7 +171,7 @@ export class CriticalRequestChainRenderer {
     const containerEl = dom.find('.lh-crc', tmpl);
 
     // Fill in top summary.
-    dom.find('.lh-crc-initial-nav', tmpl).textContent = Util.i18n.strings.crcInitialNavigation;
+    dom.find('.crc-initial-nav', tmpl).textContent = Util.i18n.strings.crcInitialNavigation;
     dom.find('.lh-crc__longest_duration_label', tmpl).textContent =
         Util.i18n.strings.crcLongestDurationLabel;
     dom.find('.lh-crc__longest_duration', tmpl).textContent =

package/report/renderer/details-renderer.js

@@ -35,7 +35,7 @@ const URL_PREFIXES = ['http://', 'https://', 'data:'];
 export class DetailsRenderer {
   /**
    * @param {DOM} dom
-   * @param {{fullPageScreenshot?: LH.Audit.Details.FullPageScreenshot}} [options]
+   * @param {{fullPageScreenshot?: LH.Artifacts.FullPageScreenshot}} [options]
    */
   constructor(dom, options = {}) {
     this._dom = dom;

package/report/renderer/dom.js

@@ -16,8 +16,6 @@
  */
 'use strict';
 
-/* eslint-env browser */
-
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
@@ -109,10 +107,6 @@ export class DOM {
     return cloned;
   }
 
-  clearComponentCache() {
-    this._componentCache.clear();
-  }
-
   /**
    * @param {string} text
    * @return {Element}
@@ -260,15 +254,4 @@ export class DOM {
     const elements = Array.from(context.querySelectorAll(query));
     return elements;
   }
-
-  /**
-   * Fires a custom DOM event on target.
-   * @param {string} name Name of the event.
-   * @param {Node=} target DOM node to fire the event on.
-   * @param {*=} detail Custom data to include.
-   */
-  fireEventOn(name, target = this._document, detail) {
-    const event = new CustomEvent(name, detail ? {detail} : undefined);
-    target.dispatchEvent(event);
-  }
 }

package/report/renderer/element-screenshot-renderer.js

@@ -12,7 +12,7 @@
  */
 
 /** @typedef {import('./dom.js').DOM} DOM */
-/** @typedef {LH.Audit.Details.Rect} Rect */
+/** @typedef {LH.Artifacts.Rect} Rect */
 /** @typedef {{width: number, height: number}} Size */
 
 /**
@@ -20,14 +20,14 @@
  * @property {DOM} dom
  * @property {Element} reportEl
  * @property {Element} overlayContainerEl
- * @property {LH.Audit.Details.FullPageScreenshot} fullPageScreenshot
+ * @property {LH.Artifacts.FullPageScreenshot} fullPageScreenshot
  */
 
 import {Util} from './util.js';
 
 /**
- * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
- * @param {LH.Audit.Details.Rect} rect
+ * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
+ * @param {LH.Artifacts.Rect} rect
  * @return {boolean}
  */
 function screenshotOverlapsRect(screenshot, rect) {
@@ -98,7 +98,7 @@ export class ElementScreenshotRenderer {
    * @param {DOM} dom
    * @param {HTMLElement} maskEl
    * @param {{left: number, top: number}} positionClip
-   * @param {Rect} elementRect
+   * @param {LH.Artifacts.Rect} elementRect
    * @param {Size} elementPreviewSize
    */
   static renderClipPathInScreenshot(dom, maskEl, positionClip, elementRect, elementPreviewSize) {
@@ -132,7 +132,7 @@ export class ElementScreenshotRenderer {
    * Allows for multiple Lighthouse reports to be rendered on the page, each with their
    * own full page screenshot.
    * @param {HTMLElement} el
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
    */
   static installFullPageScreenshot(el, screenshot) {
     el.style.setProperty('--element-screenshot-url', `url(${screenshot.data})`);
@@ -195,7 +195,7 @@ export class ElementScreenshotRenderer {
   /**
    * Given the size of the element in the screenshot and the total available size of our preview container,
    * compute the factor by which we need to zoom out to view the entire element with context.
-   * @param {Rect} elementRectSC
+   * @param {LH.Artifacts.Rect} elementRectSC
    * @param {Size} renderContainerSizeDC
    * @return {number}
    */
@@ -214,8 +214,8 @@ export class ElementScreenshotRenderer {
    * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
    * Returns null if element rect is outside screenshot bounds.
    * @param {DOM} dom
-   * @param {LH.Audit.Details.FullPageScreenshot['screenshot']} screenshot
-   * @param {Rect} elementRectSC Region of screenshot to highlight.
+   * @param {LH.Artifacts.FullPageScreenshot['screenshot']} screenshot
+   * @param {LH.Artifacts.Rect} elementRectSC Region of screenshot to highlight.
    * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
    * @return {Element|null}
    */

package/{flow-report/test/setup/global-setup.ts → report/renderer/file-namer.js}

@@ -3,9 +3,6 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
-export default async () => {
-  // Use consistent TZ across testing environments.
-  // Timezone is used to construct date strings.
-  process.env.TZ = 'UTC';
-};
+export {getFilenamePrefix} from '../../lighthouse-core/lib/file-namer.js';

package/report/renderer/logger.js

@@ -38,10 +38,10 @@ export class Logger {
     this._id && clearTimeout(this._id);
 
     this.el.textContent = msg;
-    this.el.classList.add('lh-show');
+    this.el.classList.add('show');
     if (autoHide) {
-      this._id = setTimeout(() => {
-        this.el.classList.remove('lh-show');
+      this._id = setTimeout(_ => {
+        this.el.classList.remove('show');
       }, 7000);
     }
   }
@@ -61,7 +61,7 @@ export class Logger {
 
     // Rethrow to make sure it's auditable as an error, but in a setTimeout so page
     // recovers gracefully and user can try loading a report again.
-    setTimeout(() => {
+    setTimeout(_ => {
       throw new Error(msg);
     }, 0);
   }

package/report/renderer/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "//": "Any directory that uses `import ... from` or `export ...` must be type module. Temporary file until root package.json is type: module"
+}

package/report/renderer/report-renderer.js

@@ -39,14 +39,14 @@ export class ReportRenderer {
   }
 
   /**
-   * @param {LH.Result} lhr
+   * @param {LH.Result} result
    * @param {Element} container Parent element to render the report into.
    * @return {!Element}
    */
-  renderReport(lhr, container) {
-    this._dom.setLighthouseChannel(lhr.configSettings.channel || 'unknown');
+  renderReport(result, container) {
+    this._dom.setLighthouseChannel(result.configSettings.channel || 'unknown');
 
-    const report = Util.prepareReportResult(lhr);
+    const report = Util.prepareReportResult(result);
 
     container.textContent = ''; // Remove previous report.
     container.appendChild(this._renderReport(report));
@@ -54,6 +54,13 @@ export class ReportRenderer {
     return container;
   }
 
+  /**
+   * @param {ParentNode} _
+   */
+  setTemplateContext(_) {
+    // Removed, exists until usage is removed from CDT.
+  }
+
   /**
    * @param {LH.ReportResult} report
    * @return {DocumentFragment}