diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 62e5e2e8d131..883bb54adf30 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -54,8 +54,11 @@ class ReportUIFeatures { this.onExportButtonClick = this.onExportButtonClick.bind(this); this.onExport = this.onExport.bind(this); this.onKeyDown = this.onKeyDown.bind(this); - this.printShortCutDetect = this.printShortCutDetect.bind(this); + this.onKeyUp = this.onKeyUp.bind(this); this.onChevronClick = this.onChevronClick.bind(this); + this.collapseAllDetails = this.collapseAllDetails.bind(this); + this.expandAllDetails = this.expandAllDetails.bind(this); + this._toggleDarkTheme = this._toggleDarkTheme.bind(this); this._updateStickyHeaderOnScroll = this._updateStickyHeaderOnScroll.bind(this); } @@ -73,10 +76,12 @@ class ReportUIFeatures { this._setupStickyHeaderElements(); this._setUpCollapseDetailsAfterPrinting(); this._resetUIState(); - this._document.addEventListener('keydown', this.printShortCutDetect); + this._document.addEventListener('keyup', this.onKeyUp); this._document.addEventListener('copy', this.onCopy); this._document.addEventListener('scroll', this._updateStickyHeaderOnScroll); window.addEventListener('resize', this._updateStickyHeaderOnScroll); + const topbarLogo = this._dom.find('.lh-topbar__logo', this._document); + topbarLogo.addEventListener('click', this._toggleDarkTheme); } /** @@ -272,6 +277,17 @@ class ReportUIFeatures { } } + /** + * Keyup handler for the document. + * @param {KeyboardEvent} e + */ + onKeyUp(e) { + // Ctrl+P - Expands audit details when user prints via keyboard shortcut. + if ((e.ctrlKey || e.metaKey) && e.keyCode === 80) { + this.closeExportDropdown(); + } + } + /** * Opens a new tab to the online viewer and sends the local page's JSON results * to the online viewer using postMessage. @@ -304,16 +320,6 @@ class ReportUIFeatures { const popup = window.open(`${VIEWER_ORIGIN}${viewerPath}`, windowName); } - /** - * Expands audit details when user prints via keyboard shortcut. - * @param {KeyboardEvent} e - */ - printShortCutDetect(e) { - if ((e.ctrlKey || e.metaKey) && e.keyCode === 80) { // Ctrl+P - this.closeExportDropdown(); - } - } - /** * Expands all audit `
`. * Ideally, a print stylesheet could take care of this, but CSS has no way to @@ -400,6 +406,13 @@ class ReportUIFeatures { setTimeout(_ => URL.revokeObjectURL(href), 500); } + /** + * @private + */ + _toggleDarkTheme() { + this._document.body.classList.toggle('dark'); + } + _updateStickyHeaderOnScroll() { // Show sticky header when the score scale begins to go underneath the topbar. const topbarBottom = this.topbarEl.getBoundingClientRect().bottom; diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 0a5a5d34541d..0e7c6ab0b654 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -19,6 +19,7 @@ --text-font-family: Roboto, Helvetica, Arial, sans-serif; --monospace-font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace; --body-background-color: #fff; + --body-text-color: var(--color-black-900); --body-font-size: 16px; --body-line-height: 24px; --subheader-font-size: 14px; @@ -39,9 +40,9 @@ --audit-indent: 16px; --text-indent: 8px; --expandable-indent: 20px; - --secondary-text-color: #565656; + --secondary-text-color: var(--color-black-800); /*--accent-color: #3879d9;*/ - --informative-color: #0c50c7; + --informative-color: var(--color-blue-900); --medium-75-gray: #757575; --medium-50-gray: hsl(210, 17%, 98%); --medium-100-gray: hsl(200, 12%, 95%); @@ -92,6 +93,9 @@ --color-red-700: #EB0F00; --color-red: #FF4E42; --color-white: #FFFFFF; + --color-blue-200: #90CAF9; + --color-blue-900: #0D47A1; + /* TODO(cjamcl) clean up unused variables. */ --audits-margin-bottom: 40px; @@ -101,6 +105,7 @@ --gauge-circle-size-big: 120px; --gauge-circle-size: 96px; --header-padding: 20px 0 20px 0; + --highlighter-bg: var(--color-black-400); --icon-square-size: calc(var(--score-shape-size) * 0.88); --plugin-badge-bg: var(--color-white); --plugin-badge-size-big: calc(var(--gauge-circle-size-big) / 2.7); @@ -132,11 +137,13 @@ --color-fail: var(--color-red); --color-pass-secondary: var(--color-green-700); --color-pass: var(--color-green); - --color-sticky-header-bg: var(--color-white); - --color-highlighter-bg: var(--color-black); + --color-sticky-header-bg: var(--body-background-color); + --color-highlighter-bg: var(--body-text-color); + + --color-hover: #FAFAFA; --plugin-icon-url: url('data:image/svg+xml;utf8,'); - --logo-url: url('data:image/svg+xml;utf8,'); + --plugin-icon-url-dark: url('data:image/svg+xml;utf8,'); --pass-icon-url: url('data:image/svg+xml;utf8,check'); --average-icon-url: url('data:image/svg+xml;utf8,info'); @@ -146,11 +153,48 @@ --pwa-installable-gray-url: url('data:image/svg+xml;utf8,'); --pwa-optimized-gray-url: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-gray-url-dark: url('data:image/svg+xml;utf8,'); + --pwa-installable-gray-url-dark: url('data:image/svg+xml;utf8,'); + --pwa-optimized-gray-url-dark: url('data:image/svg+xml;utf8,'); + --pwa-fast-reliable-color-url: url('data:image/svg+xml;utf8,'); --pwa-installable-color-url: url('data:image/svg+xml;utf8,'); --pwa-optimized-color-url: url('data:image/svg+xml;utf8,'); } +.lh-vars.dark { + --color-red-700: var(--color-red); + --color-green-700: var(--color-green); + --color-orange-700: var(--color-orange); + + --color-black-200: var(--color-black-800); + --color-black-400: var(--color-black-600); + --color-black-600: var(--color-black-500); + + --topbar-bg: var(--color-black); + --plugin-badge-bg: var(--color-black-800); + --header-bg-color: var(--color-black-900); + --env-item-bg: rgba(0, 0, 0, 0.5); + + --body-background-color: var(--color-black-900); + --body-text-color: var(--color-black-100); + --secondary-text-color: var(--color-black-400); + + --highlighter-bg: var(--color-black-200); + --plugin-icon-url: var(--plugin-icon-url-dark); + + --informative-color: var(--color-blue-200); + + --medium-50-gray: #757575; + --medium-75-gray: var(--color-white); + + --color-hover: rgba(0, 0, 0, 0.2); + + --pwa-fast-reliable-gray-url: var(--pwa-fast-reliable-gray-url-dark); + --pwa-installable-gray-url: var(--pwa-installable-gray-url-dark); + --pwa-optimized-gray-url: var(--pwa-optimized-gray-url-dark); +} + @media only screen and (max-width: 480px) { .lh-vars { --audits-margin-bottom: 20px; @@ -221,7 +265,7 @@ line-height: var(--body-line-height); background: var(--body-background-color); scroll-behavior: smooth; - color: var(--color-black-900); + color: var(--body-text-color); } .lh-root :focus { @@ -245,8 +289,10 @@ } .lh-audit-group a, -.lh-category-header__description a { - color: #0c50c7; +.lh-category-header__description a, +.lh-audit__description a, +.lh-footer a { + color: var(--informative-color); } .lh-audit__description, .lh-audit__stackpack { @@ -309,6 +355,22 @@ background-image: url('data:image/svg+xml;utf8,'); } +.dark .report-icon--share { + background-image: url('data:image/svg+xml;utf8,'); +} +.dark .report-icon--print { + background-image: url('data:image/svg+xml;utf8,'); +} +.dark .report-icon--copy { + background-image: url('data:image/svg+xml;utf8,'); +} +.dark .report-icon--open { + background-image: url('data:image/svg+xml;utf8,'); +} +.dark .report-icon--download { + background-image: url('data:image/svg+xml;utf8,'); +} + /* Node */ .lh-node { display: block; @@ -316,10 +378,6 @@ word-break: break-word; color: hsl(174, 100%, 27%); } -.lh-node:hover { - background: hsl(0, 0%, 98%); - border-radius: 2px; -} /* Score */ @@ -369,7 +427,6 @@ display: none; } -.lh-category-header__description, .lh-audit__description, .lh-audit__stackpack { color: var(--secondary-text-color); @@ -406,7 +463,7 @@ } .lh-audit__header:hover { - background-color: #F8F9FA; + background-color: var(--color-hover); } /* Hide the expandable arrow icon, three ways: via the CSS Counter Styles spec, for webkit/blink browsers, hiding the polyfilled icon */ @@ -788,7 +845,6 @@ } .lh-report { - background-color: #fff; min-width: var(--report-min-width); } @@ -994,10 +1050,9 @@ } .lh-table thead { - background: var(--lh-table-header-bg); + background-color: var(--lh-table-higlight-bg); } .lh-table thead th { - color: var(--medium-75-gray); font-weight: normal; word-wrap: normal; } @@ -1145,7 +1200,7 @@ } .tooltip-boundary:hover { - background-color: #F8F9FA; + background-color: var(--color-hover); } .tooltip-boundary:hover .tooltip { diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index dbe7fb8fc4b2..b95b9d9b3c3b 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -209,14 +209,15 @@ .lh-topbar__logo { width: var(--topbar-icon-size); height: var(--topbar-icon-size); - background-image: var(--logo-url); - background-size: cover; + } + .lh-topbar__logo .shape { + fill: var(--body-text-color); } .lh-topbar__url { margin: var(--topbar-padding); text-decoration: none; - color: var(--color-black); + color: var(--body-text-color); } .lh-export { @@ -224,7 +225,6 @@ will-change: transform; } .lh-export__button { - background-color: #fff; border: 1px solid #dadada; border-radius: 2px; cursor: pointer; @@ -246,7 +246,7 @@ } .lh-export__dropdown { position: absolute; - background-color: #fff; + background-color: var(--body-background-color); border: 1px solid var(--report-border-color); border-radius: 3px; padding: calc(var(--default-padding) / 2) 0; @@ -269,7 +269,7 @@ } .lh-export__dropdown a:hover, .lh-export__dropdown a:focus { - background-color: #efefef; + background-color: var(--color-black-200); outline: none; } .lh-export__dropdown .report-icon { @@ -305,7 +305,13 @@
- + + @@ -603,7 +609,7 @@ line-height: var(--score-title-line-height); margin-bottom: calc(0.5 * var(--score-title-line-height)); text-align: center; - color: black; + color: var(--body-text-color); } /* TODO(#8185) use more BEM (.lh-gauge__label--big) instead of relying on descendent selector */ @@ -640,6 +646,21 @@ fill: #B0B0B0; } + .lh-gauge--pwa__disc { + fill: var(--color-black-200); + } + + .lh-gauge--pwa__logo--primary-color { + fill: #304FFE; + } + + .lh-gauge--pwa__logo--secondary-color { + fill: #3D3D3D; + } + .dark .lh-gauge--pwa__logo--secondary-color { + fill: #D8B6B6; + } + /* No passing groups. */ .lh-gauge--pwa__wrapper:not([class*='lh-badged--']) .lh-gauge--pwa__na-line { display: inline; @@ -673,10 +694,6 @@ - - - - @@ -702,11 +719,11 @@ - +