From d031bc4bf9c0966983a057f4cc7fb622458af528 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Mon, 6 May 2019 21:52:38 -0700
Subject: [PATCH 1/3] report(redesign): move gauge styles to main stylesheet

---
 lighthouse-core/report/html/report-styles.css | 124 +++++++++++++++++
 lighthouse-core/report/html/templates.html    | 126 ------------------
 2 files changed, 124 insertions(+), 126 deletions(-)

diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css
index e66126a4b761..f485345f5b3e 100644
--- a/lighthouse-core/report/html/report-styles.css
+++ b/lighthouse-core/report/html/report-styles.css
@@ -1024,10 +1024,134 @@
   border: 0;
 }
 
+/* Gauge */
+
+.lh-gauge__wrapper--pass {
+  color: var(--color-pass);
+  fill: var(--color-pass);
+  stroke: var(--color-pass);
+}
+
+.lh-gauge__wrapper--average {
+  color: var(--color-average);
+  fill: var(--color-average);
+  stroke: var(--color-average);
+}
+
+.lh-gauge__wrapper--fail {
+  color: var(--color-fail);
+  fill: var(--color-fail);
+  stroke: var(--color-fail);
+}
+
+.lh-gauge {
+  stroke-linecap: round;
+  width: var(--gauge-circle-size);
+  height: var(--gauge-circle-size);
+}
+
+.lh-category .lh-gauge {
+  --gauge-circle-size: var(--gauge-circle-size-big);
+}
+
+.lh-gauge-base {
+    opacity: 0.1;
+    stroke: var(--circle-background);
+    stroke-width: var(--circle-border-width);
+}
+
+.lh-gauge-arc {
+    fill: none;
+    stroke: var(--circle-color);
+    stroke-width: var(--circle-border-width);
+    animation: load-gauge var(--transition-length) ease forwards;
+    animation-delay: 250ms;
+}
+
+.lh-gauge__svg-wrapper {
+  position: relative;
+  height: var(--gauge-circle-size);
+}
+.lh-category .lh-gauge__svg-wrapper {
+  --gauge-circle-size: var(--gauge-circle-size-big);
+}
+
+/* The plugin badge overlay */
+.lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
+  width: var(--plugin-badge-size);
+  height: var(--plugin-badge-size);
+  background-color: var(--plugin-badge-bg);
+  background-image: var(--plugin-icon-url);
+  background-repeat: no-repeat;
+  background-size: var(--plugin-icon-size);
+  background-position: 58% 50%;
+  content: "";
+  position: absolute;
+  right: -6px;
+  bottom: 0px;
+  display: block;
+  z-index: 100;
+  box-shadow: 0 0 4px rgba(0,0,0,.2);
+  border-radius: 25%;
+}
+.lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
+  width: var(--plugin-badge-size-big);
+  height: var(--plugin-badge-size-big);
+}
+
+@keyframes load-gauge {
+  from { stroke-dasharray: 0 352; }
+}
+
+.lh-gauge__percentage {
+  width: 100%;
+  height: var(--inset-size);
+  position: absolute;
+  border-radius: inherit;
+  font-family: var(--monospace-font-family);
+  font-size: var(--score-number-font-size);
+  line-height: var(--score-number-font-size);
+  text-align: center;
+  top: calc(var(--score-container-padding) + var(--gauge-circle-size) / 3);
+}
+
+.lh-category .lh-gauge__percentage {
+  --gauge-circle-size: var(--gauge-circle-size-big);
+  --score-number-font-size: var(--score-number-font-size-big);
+}
+
 .lh-gauge__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-decoration: none;
   padding: var(--score-container-padding);
+
+  --circle-border-width: 8;
+  --transition-length: 1s;
+
+  /* Contain the layout style paint & layers during animation*/
+  contain: content;
+  will-change: opacity; /* Only using for layer promotion */
+}
+
+.lh-gauge__label {
+  font-size: var(--score-title-font-size);
+  line-height: var(--score-title-line-height);
+  margin-top: 10px;
+  text-align: center;
+  color: var(--body-text-color);
 }
 
+/* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
+.lh-category .lh-gauge__label {
+  --score-title-font-size: var(--score-title-font-size-big);
+  --score-title-line-height: var(--score-title-line-height-big);
+  margin-top: 14px;
+}
+
+
 .lh-scores-header .lh-gauge__wrapper,
 .lh-scores-header .lh-gauge--pwa__wrapper,
 .lh-sticky-header .lh-gauge__wrapper,
diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html
index 6df3186d4be6..c3f563b95634 100644
--- a/lighthouse-core/report/html/templates.html
+++ b/lighthouse-core/report/html/templates.html
@@ -532,132 +532,6 @@
 
 <!-- Lighthouse score gauge -->
 <template id="tmpl-lh-gauge">
-  <style>
-    .lh-gauge__wrapper--pass {
-      color: var(--color-pass);
-      fill: var(--color-pass);
-      stroke: var(--color-pass);
-    }
-
-    .lh-gauge__wrapper--average {
-      color: var(--color-average);
-      fill: var(--color-average);
-      stroke: var(--color-average);
-    }
-
-    .lh-gauge__wrapper--fail {
-      color: var(--color-fail);
-      fill: var(--color-fail);
-      stroke: var(--color-fail);
-    }
-
-    .lh-gauge {
-      stroke-linecap: round;
-      width: var(--gauge-circle-size);
-      height: var(--gauge-circle-size);
-    }
-
-    .lh-category .lh-gauge {
-      --gauge-circle-size: var(--gauge-circle-size-big);
-    }
-
-    .lh-gauge-base {
-        opacity: 0.1;
-        stroke: var(--circle-background);
-        stroke-width: var(--circle-border-width);
-    }
-
-    .lh-gauge-arc {
-        fill: none;
-        stroke: var(--circle-color);
-        stroke-width: var(--circle-border-width);
-        animation: load-gauge var(--transition-length) ease forwards;
-        animation-delay: 250ms;
-    }
-
-    .lh-gauge__svg-wrapper {
-      position: relative;
-      height: var(--gauge-circle-size);
-    }
-    .lh-category .lh-gauge__svg-wrapper {
-      --gauge-circle-size: var(--gauge-circle-size-big);
-    }
-
-    /* The plugin badge overlay */
-    .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
-      width: var(--plugin-badge-size);
-      height: var(--plugin-badge-size);
-      background-color: var(--plugin-badge-bg);
-      background-image: var(--plugin-icon-url);
-      background-repeat: no-repeat;
-      background-size: var(--plugin-icon-size);
-      background-position: 58% 50%;
-      content: "";
-      position: absolute;
-      right: -6px;
-      bottom: 0px;
-      display: block;
-      z-index: 100;
-      box-shadow: 0 0 4px rgba(0,0,0,.2);
-      border-radius: 25%;
-    }
-    .lh-category .lh-gauge__wrapper--plugin .lh-gauge__svg-wrapper::before {
-      width: var(--plugin-badge-size-big);
-      height: var(--plugin-badge-size-big);
-    }
-
-    @keyframes load-gauge {
-      from { stroke-dasharray: 0 352; }
-    }
-
-    .lh-gauge__percentage {
-      width: 100%;
-      height: var(--inset-size);
-      position: absolute;
-      border-radius: inherit;
-      font-family: var(--monospace-font-family);
-      font-size: var(--score-number-font-size);
-      line-height: var(--score-number-font-size);
-      text-align: center;
-      top: calc(var(--score-container-padding) + var(--gauge-circle-size) / 3);
-    }
-
-    .lh-category .lh-gauge__percentage {
-      --gauge-circle-size: var(--gauge-circle-size-big);
-      --score-number-font-size: var(--score-number-font-size-big);
-    }
-
-    .lh-gauge__wrapper {
-      position: relative;
-      display: flex;
-      align-items: center;
-      flex-direction: column;
-      text-decoration: none;
-
-      --circle-border-width: 8;
-      --transition-length: 1s;
-
-      /* Contain the layout style paint & layers during animation*/
-      contain: content;
-      will-change: opacity; /* Only using for layer promotion */
-    }
-
-    .lh-gauge__label {
-      font-size: var(--score-title-font-size);
-      line-height: var(--score-title-line-height);
-      margin-top: 10px;
-      text-align: center;
-      color: var(--body-text-color);
-    }
-
-    /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendant selector */
-    .lh-category .lh-gauge__label {
-      --score-title-font-size: var(--score-title-font-size-big);
-      --score-title-line-height: var(--score-title-line-height-big);
-      margin-top: 14px;
-    }
-
-  </style>
   <a href="#" class="lh-gauge__wrapper">
     <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->
     <div class="lh-gauge__svg-wrapper">

From 75d6890b5dd1e683cbd38ee22712d78c2fde794d Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 7 May 2019 10:47:14 -0700
Subject: [PATCH 2/3] fix test

---
 lighthouse-core/test/report/html/renderer/dom-test.js | 4 ++--
 lighthouse-core/test/report/html/renderer/psi-test.js | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/lighthouse-core/test/report/html/renderer/dom-test.js b/lighthouse-core/test/report/html/renderer/dom-test.js
index ea91f810fdaa..54c623dad80f 100644
--- a/lighthouse-core/test/report/html/renderer/dom-test.js
+++ b/lighthouse-core/test/report/html/renderer/dom-test.js
@@ -69,8 +69,8 @@ describe('DOM', () => {
     });
 
     it('does not inject duplicate styles', () => {
-      const clone = dom.cloneTemplate('#tmpl-lh-gauge', dom.document());
-      const clone2 = dom.cloneTemplate('#tmpl-lh-gauge', dom.document());
+      const clone = dom.cloneTemplate('#tmpl-lh-snippet', dom.document());
+      const clone2 = dom.cloneTemplate('#tmpl-lh-snippet', dom.document());
       assert.ok(clone.querySelector('style'));
       assert.ok(!clone2.querySelector('style'));
     });
diff --git a/lighthouse-core/test/report/html/renderer/psi-test.js b/lighthouse-core/test/report/html/renderer/psi-test.js
index 57823bcadf05..c9b0b346d3a7 100644
--- a/lighthouse-core/test/report/html/renderer/psi-test.js
+++ b/lighthouse-core/test/report/html/renderer/psi-test.js
@@ -82,7 +82,6 @@ describe('DOM', () => {
         const result = prepareLabData(sampleResultsStr, document);
         assert.ok(result.scoreGaugeEl instanceof document.defaultView.Element);
         assert.equal(result.scoreGaugeEl.querySelector('.lh-gauge__wrapper').href, '');
-        assert.ok(result.scoreGaugeEl.outerHTML.includes('<style>'), 'score gauge comes with CSS');
         assert.ok(result.scoreGaugeEl.outerHTML.includes('<svg'), 'score gauge comes with SVG');
 
         assert.ok(result.perfCategoryEl instanceof document.defaultView.Element);

From ce1516b652e1e7e6a459f96b05f6eee7db3623f5 Mon Sep 17 00:00:00 2001
From: Connor Clark <cjamcl@google.com>
Date: Tue, 7 May 2019 13:31:04 -0700
Subject: [PATCH 3/3] empty commit to trigger CI