From 37f72613d8990ec95d1349cf07304f070a6ab600 Mon Sep 17 00:00:00 2001 From: Connor Clark Date: Tue, 18 Jun 2019 21:52:14 -0700 Subject: [PATCH] report: naming convention (#9149) followup fixes --- lighthouse-core/report/html/report-styles.css | 46 +++++++++---------- lighthouse-core/report/html/templates.html | 6 +-- 2 files changed, 26 insertions(+), 26 deletions(-) diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 4377ad093573..add4b6f5d725 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -33,8 +33,8 @@ color of that hue. */ .lh-vars { - --text-font-family: Roboto, Helvetica, Arial, sans-serif; - --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; + --report-font-family: Roboto, Helvetica, Arial, sans-serif; + --report-font-family-monospace: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; --report-background-color: #fff; --report-text-color: var(--color-gray-900); --report-font-size: 16px; @@ -47,10 +47,10 @@ --footer-padding-vertical: 16px; --audit-margin-horizontal: 5px; --stackpack-padding-horizontal: 10px; - --secondary-text-color: var(--color-gray-800); - --informative-color: var(--color-blue-900); + --report-text-color-secondary: var(--color-gray-800); + --color-informative: var(--color-blue-900); --snippet-background-color: var(--color-gray-50); - --report-secondary-border-color: #ebebeb; + --report-border-color-secondary: #ebebeb; --chevron-line-stroke: var(--color-gray-600); --report-width: calc(60 * var(--report-font-size)); --report-min-width: 400px; @@ -173,15 +173,15 @@ --topbar-background-color: var(--color-gray); --plugin-badge-background-color: var(--color-gray-800); --env-item-background-color: var(--color-gray); - --report-secondary-border-color: var(--color-gray-200); + --report-border-color-secondary: var(--color-gray-200); --report-background-color: var(--color-gray-900); --report-text-color: var(--color-gray-100); - --secondary-text-color: var(--color-gray-400); + --report-text-color-secondary: var(--color-gray-400); --plugin-icon-url: var(--plugin-icon-url-dark); - --informative-color: var(--color-blue-200); + --color-informative: var(--color-blue-200); --color-gray-50: #757575; @@ -225,8 +225,8 @@ } .lh-vars.lh-devtools { - --text-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif; - --monospace-font-family: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; + --report-font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif; + --report-font-family-monospace: 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; --report-font-size: 12px; --report-line-height: 20px; --category-header-font-size: 16px; @@ -282,7 +282,7 @@ } .lh-root { - font-family: var(--text-font-family); + font-family: var(--report-font-family); font-size: var(--report-font-size); margin: 0; line-height: var(--report-line-height); @@ -332,7 +332,7 @@ .lh-category-header__description a, .lh-audit__description a, .lh-footer a { - color: var(--informative-color); + color: var(--color-informative); } .lh-audit__description, .lh-audit__stackpack { @@ -397,7 +397,7 @@ /* Node */ .lh-node__snippet { - font-family: var(--monospace-font-family); + font-family: var(--report-font-family-monospace); color: var(--color-teal-600); font-size: 12px; line-height: 1.5em; @@ -463,7 +463,7 @@ .lh-audit__description, .lh-audit__stackpack { - color: var(--secondary-text-color); + color: var(--report-text-color-secondary); } .lh-category-header__description { font-size: var(--report-font-size); @@ -566,10 +566,10 @@ .lh-metric { - border-bottom: 1px solid var(--report-secondary-border-color); + border-bottom: 1px solid var(--report-border-color-secondary); } .lh-metric:first-of-type { - border-top: 1px solid var(--report-secondary-border-color); + border-top: 1px solid var(--report-border-color-secondary); } .lh-metric__innerwrap { @@ -596,7 +596,7 @@ .lh-metric__description { display: none; - color: var(--secondary-text-color); + color: var(--report-text-color-secondary); padding: var(--metric-description-padding); } @@ -797,7 +797,7 @@ } .lh-filmstrip__thumbnail { - border: 1px solid var(--report-secondary-border-color); + border: 1px solid var(--report-border-color-secondary); max-height: 100px; max-width: 60px; } @@ -819,12 +819,12 @@ /* Audit */ .lh-audit { - border-bottom: 1px solid var(--report-secondary-border-color); + border-bottom: 1px solid var(--report-border-color-secondary); } /* Apply border-top to just the first audit. */ .lh-audit { - border-top: 1px solid var(--report-secondary-border-color); + border-top: 1px solid var(--report-border-color-secondary); } .lh-audit ~ .lh-audit { border-top: none; @@ -995,7 +995,7 @@ .lh-warnings--toplevel { --item-margin: calc(var(--header-line-height) / 4); - color: var(--secondary-text-color); + color: var(--report-text-color-secondary); margin: var(--category-padding); padding: var(--category-padding); } @@ -1103,7 +1103,7 @@ width: 100%; height: var(--gauge-circle-size); position: absolute; - font-family: var(--monospace-font-family); + font-family: var(--report-font-family-monospace); font-size: calc(var(--gauge-circle-size) * 0.34 + 1.3px); line-height: 0; text-align: center; @@ -1171,7 +1171,7 @@ display: flex; align-items: center; margin: 0 12px; - font-family: var(--monospace-font-family); + font-family: var(--report-font-family-monospace); white-space: nowrap; } diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index b4097829d9cc..92f633d0aaf5 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -817,7 +817,7 @@ border-bottom: none; color: var(--snippet-color); background-color: var(--snippet-background-color); - border: 1px solid var(--report-secondary-border-color); + border: 1px solid var(--report-border-color-secondary); } .lh-snippet__title { font-weight: bold; @@ -841,7 +841,7 @@ .lh-snippet__snippet { overflow: auto; - border: 1px solid var(--report-secondary-border-color); + border: 1px solid var(--report-border-color-secondary); } /* Container needed so that all children grow to the width of the scroll container */ .lh-snippet__snippet-inner { @@ -881,7 +881,7 @@ padding: 10px; padding-left: 5px; color: var(--color-fail); - font-family: var(--text-font-family); + font-family: var(--report-font-family); } .lh-snippet__line--message code { white-space: normal;