Revert of DevTools: Roll Lighthouse binary to 2.0.0-alpha.7

third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css

Index: third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
diff --git a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
index 8a2f5f4910a8b42ff85276eb5e27a339fca34067..c8fdc62fcc83bc280a5532dd411e5866da0aefec 100644
--- a/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
+++ b/third_party/WebKit/Source/devtools/front_end/audits2/lighthouse/report-styles.css
@@ -17,18 +17,16 @@
 .lh-vars {
   --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
   --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace;
-  --body-font-size: 12px;
-  --header-font-size: 14px;
+  --body-font-size: 13px;
+  --header-font-size: 16px;
   --body-line-height: 1.5;
-  --default-padding: 12px;
-  --section-padding: 16px;
+  --default-padding: 16px;
 
   --secondary-text-color: #565656;
   /*--accent-color: #3879d9;*/
   --fail-color: #df332f;
   --pass-color: #2b882f;
   --informative-color: #0c50c7;
-  --manual-color: #757575;
   --average-color: #ef6c00; /* md orange 800 */
   --warning-color: #ffab00; /* md amber a700 */
 
@@ -45,9 +43,7 @@
   --lh-table-header-bg: #ccc;
   --lh-table-higlight-bg: #fafafa;
 
-  --lh-sparkline-height: 8px;
-  --lh-sparkline-thin-height: 3px;
-  --lh-filmstrip-thumbnail-width: 60px;
+  --lh-sparkline-height: 10px;
   --lh-audit-score-width: 35px;
   --lh-category-score-width: 60px;
 }
@@ -199,7 +195,6 @@
   border-radius: 2px;
   position: relative;
   font-weight: bold;
-  top: 1px;
 }
 
 .lh-score__value::after {
@@ -215,21 +210,11 @@
 .lh-score--informative .lh-score__value {
   color: var(--informative-color);
   border-radius: 50%;
-  top: 3px;
 }
 
 .lh-score--informative .lh-score__value::after {
   background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>info</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="#0c50c7"/></svg>') no-repeat 50% 50%;
   background-size: var(--lh-score-icon-background-size);
-}
-
-.lh-score--manual .lh-score__value::after {
-  background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>manual</title><path d="M2 5h8v2H2z" fill="#fff" fill-rule="evenodd"/></svg>') no-repeat 50% 50%;
-  background-size: 18px;
-  background-color: var(--manual-color);
-  width: 20px;
-  height:  20px;
-  position: relative;
 }
 
 .lh-score__value--binary {
@@ -291,7 +276,7 @@
 }
 
 .lh-toggle-arrow {
-  background: url('data:image/svg+xml;utf8,<svg fill="#9e9e9e" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>') no-repeat 50% 50%;
+  background: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>') no-repeat 50% 50%;
   background-size: contain;
   background-color: transparent;
   width: 24px;
@@ -301,7 +286,6 @@
   transition: transform 150ms ease-in-out;
   cursor: pointer;
   border: none;
-  transform: rotateZ(90deg);
 }
 
 /* Expandable Details (Audit Groups, Audits) */
@@ -320,7 +304,7 @@
 }
 
 .lh-expandable-details[open] > .lh-expandable-details__summary > .lh-toggle-arrow {
-  transform: rotateZ(-90deg);
+  transform: rotateZ(90deg);
 }
 
 .lh-expandable-details__summary::-webkit-details-marker {
@@ -330,84 +314,6 @@
 /*.lh-score__snippet:focus .lh-score__title {
   outline: rgb(59, 153, 252) auto 5px;
 }*/
-
-/* Perf Timeline */
-
-.lh-timeline {
-  padding: var(--default-padding);
-  padding-bottom: 0;
-  min-width: calc(var(--lh-filmstrip-thumbnail-width) * 10 + var(--default-padding) * 2);
-}
-
-.lh-narrow .lh-timeline-container {
-  width: calc(100vw - var(--section-padding) * 2);
-  overflow-x: scroll;
-}
-
-.lh-devtools .lh-timeline-container {
-  width: 100%;
-  overflow-x: scroll;
-}
-
-/* Perf Timeline Metric */
-
-.lh-timeline-metric {
-  padding: 5px 0;
-  margin-bottom: calc(var(--body-font-size) / 2);
-}
-
-.lh-timeline-metric__title {
-  font-size: var(--header-font-size);
-}
-
-.lh-timeline-metric__description {
-  color: var(--secondary-text-color);
-}
-
-.lh-timeline-metric__name::after {
-  margin-right: 10px;
-  content: ':';
-}
-
-.lh-timeline-metric--pass .lh-timeline-metric__value {
-  color: var(--pass-color);
-}
-
-.lh-timeline-metric--average .lh-timeline-metric__value {
-  color: var(--average-color);
-}
-
-.lh-timeline-metric--fail .lh-timeline-metric__value {
-  color: var(--fail-color);
-}
-
-.lh-timeline-metric__sparkline {
-  width: 100%;
-}
-
-.lh-timeline-metric__sparkline .lh-sparkline {
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: 1px solid var(--report-border-color);
-}
-
-.lh-timeline-metric__sparkline .lh-sparkline__bar {
-  float: none;
-}
-
-.lh-timeline-metric--pass .lh-sparkline__bar {
-  background: var(--pass-color);
-}
-
-.lh-timeline-metric--average .lh-sparkline__bar {
-  background: var(--average-color);
-}
-
-.lh-timeline-metric--fail .lh-sparkline__bar {
-  background: var(--fail-color);
-}
-
-/* Perf Hint */
 
 .lh-perf-hint {
   margin-top: var(--default-padding);
@@ -427,7 +333,7 @@
 
 .lh-perf-hint__title {
   font-size: var(--header-font-size);
-  flex: 10;
+  flex: 0 0 30%;
 }
 
 .lh-perf-hint__sparkline {
@@ -440,8 +346,9 @@
 }
 
 .lh-perf-hint__stats {
+  width: 60px;
   text-align: right;
-  flex: 0 0 70px;
+  flex: 10;
 }
 
 .lh-perf-hint__primary-stat {
@@ -483,7 +390,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding-bottom: var(--default-padding);
+  padding: var(--default-padding);
 }
 
 .lh-filmstrip__frame {
@@ -507,13 +414,9 @@
   width: 100%;
 }
 
-.lh-sparkline--thin {
-  height: calc(var(--lh-sparkline-height) / 2);
-}
-
 .lh-sparkline__bar {
   background: var(--warning-color);
-  height: 100%;
+  height: var(--lh-sparkline-height);
   float: right;
 }
 
@@ -530,47 +433,28 @@
 }
 
 .lh-audit > .lh-score {
+  font-size: 16px;
   font-size: var(--header-font-size);
 }
 
 /* Audit Group */
 
 .lh-audit-group {
-  padding-top: var(--default-padding);
+  margin-top: var(--default-padding);
   padding-bottom: var(--default-padding);
-  border-top: 1px solid var(--report-secondary-border-color);
-}
-
-.lh-category > .lh-audit-group.lh-audit-group--manual {
-  border-top: none;
-  margin-left: var(--default-padding);
+  border-bottom: 1px solid var(--report-secondary-border-color);
+}
+
+.lh-audit-group:last-of-type {
+  border-bottom: none;
 }
 
 .lh-audit-group__header {
   font-size: 18px;
 }
 
-.lh-audit-group--manual .lh-audit-group__summary {
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-}
-
-.lh-audit-group--manual .lh-audit-group__summary .lh-audit-group__header  {
-  font-size: inherit;
-}
-
-.lh-audit-group--manual .lh-audit-group__summary .lh-toggle-arrow {
-  display: none;
-}
-
-.lh-audit-group--manual .lh-audit-group__summary::-webkit-details-marker {
-  display: initial;
-  background: var(--manual-color) !important;
-}
-
 .lh-audit-group__description {
-  font-size: var(--header-font-size);
+  font-size: 16px;
   color: var(--secondary-text-color);
   margin-top: calc(var(--default-padding) / 2);
 }
@@ -618,6 +502,7 @@
 
 .lh-code {
   text-overflow: ellipsis;
+  overflow: hidden;
   white-space: pre-line;
   margin-top: 0;
 }
@@ -630,7 +515,7 @@
 }
 
 .lh-category {
-  padding: var(--section-padding);
+  padding: 24px calc(var(--default-padding) * 2);
   border-top: 1px solid var(--report-border-color);
 }
 
@@ -639,24 +524,20 @@
 }
 
 .lh-category .lh-audit {
-  margin-left: calc(var(--default-padding) * 2);
+  margin-left: calc(var(--lh-category-score-width) + var(--lh-score-margin));
 }
 
 .lh-category .lh-audit-group {
   margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
 }
 
-.lh-category > .lh-audit-group {
-  margin-left: 0;
-}
-
 .lh-category .lh-audit-group .lh-audit {
   margin-left: var(--default-padding);
 }
 
 .lh-category > .lh-score {
   font-size: 20px;
-  padding-bottom: var(--default-padding);
+  padding-bottom: 24px;
 }
 
 .lh-category > .lh-score .lh-score__value,
@@ -690,23 +571,23 @@
 
 summary.lh-passed-audits-summary {
   margin: calc(var(--default-padding) * 2) var(--default-padding);
-  margin-left: var(--default-padding);
+  margin-left: calc(var(--lh-category-score-width) + var(--default-padding));
   margin-bottom: 0;
   font-size: 15px;
   display: flex;
   align-items: center;
 }
 
-summary.lh-passed-audits-summary::-webkit-details-marker,
-.lh-audit-group--manual > summary::-webkit-details-marker {
+summary.lh-passed-audits-summary::-webkit-details-marker {
   background: var(--pass-color);
   color: white;
+  position: relative;
+  content: '';
   padding: 3px 3px 3px 6px;
   border-radius: 2px;
 }
 
-.lh-passed-audits[open] summary.lh-passed-audits-summary::-webkit-details-marker,
-.lh-audit-group--manual[open] > summary::-webkit-details-marker {
+.lh-passed-audits[open] summary.lh-passed-audits-summary::-webkit-details-marker {
   padding: 3px 5px 3px 4px;
 }