lighthouse
Version:
Automated auditing, performance metrics, and best practices for the web.
788 lines (736 loc) • 27.2 kB
HTML
<!--
@license
Copyright 2018 Google LLC
SPDX-License-Identifier: Apache-2.0
-->
<!-- Lighthouse run warnings -->
<template id="warningsToplevel">
<div class="lh-warnings lh-warnings--toplevel">
<p class="lh-warnings__msg"></p>
<ul></ul>
</div>
</template>
<!-- Lighthouse score scale -->
<template id="scorescale">
<div class="lh-scorescale">
<span class="lh-scorescale-range lh-scorescale-range--fail">0–49</span>
<span class="lh-scorescale-range lh-scorescale-range--average">50–89</span>
<span class="lh-scorescale-range lh-scorescale-range--pass">90–100</span>
</div>
</template>
<!-- Toggle arrow chevron -->
<template id="chevron">
<svg class="lh-chevron" viewbox="0 0 100 100">
<g class="lh-chevron__lines">
<path class="lh-chevron__line lh-chevron__line-left" d="M10 50h40"></path>
<path class="lh-chevron__line lh-chevron__line-right" d="M90 50H50"></path>
</g>
</svg>
</template>
<!-- Lighthouse category header -->
<template id="categoryHeader">
<div class="lh-category-header">
<div class="lh-score__gauge" role="heading" aria-level="2"></div>
<div class="lh-category-header__description"></div>
</div>
</template>
<!-- Lighthouse clump -->
<template id="clump">
<div class="lh-audit-group">
<!-- TODO: group classes shouldn't be reused for clumps. -->
<details class="lh-clump">
<summary>
<div class="lh-audit-group__summary">
<div class="lh-audit-group__header">
<span class="lh-audit-group__title"></span>
<span class="lh-audit-group__itemcount"></span>
<!-- .lh-audit-group__description will be added here -->
<!-- .lh-metrics-toggle will be added here -->
</div>
<div class="lh-clump-toggle">
<span class="lh-clump-toggletext--show"></span>
<span class="lh-clump-toggletext--hide"></span>
</div>
</div>
</summary>
</details>
</div>
</template>
<!-- Lighthouse audit -->
<template id="audit">
<div class="lh-audit">
<details class="lh-expandable-details">
<summary>
<div class="lh-audit__header lh-expandable-details__summary">
<span class="lh-audit__score-icon"></span>
<span class="lh-audit__title-and-text">
<span class="lh-audit__title"></span>
<span class="lh-audit__display-text"></span>
</span>
<div class="lh-chevron-container"></div>
</div>
</summary>
<div class="lh-audit__description"></div>
<div class="lh-audit__stackpacks"></div>
</details>
</div>
</template>
<!-- Lighthouse perf metric -->
<template id="metric">
<div class="lh-metric">
<div class="lh-metric__innerwrap">
<div class="lh-metric__icon"></div>
<span class="lh-metric__title"></span>
<div class="lh-metric__value"></div>
<div class="lh-metric__description"></div>
</div>
</div>
</template>
<!-- Lighthouse score container -->
<template id="scoresWrapper">
<style>
.lh-scores-container {
display: flex;
flex-direction: column;
padding: var(--default-padding) 0;
position: relative;
width: 100%;
}
.lh-sticky-header {
--gauge-circle-size: var(--gauge-circle-size-sm);
--plugin-badge-size: 16px;
--plugin-icon-size: 75%;
--gauge-wrapper-width: 60px;
--gauge-percentage-font-size: 13px;
position: fixed;
left: 0;
right: 0;
top: var(--topbar-height);
font-weight: 500;
display: none;
justify-content: center;
background-color: var(--sticky-header-background-color);
border-bottom: 1px solid var(--color-gray-200);
padding-top: var(--score-container-padding);
padding-bottom: 4px;
z-index: 2;
pointer-events: none;
}
.lh-devtools .lh-sticky-header {
/* The report within DevTools is placed in a container with overflow, which changes the placement of this header unless we change `position` to `sticky.` */
position: sticky;
}
.lh-sticky-header--visible {
display: grid;
grid-auto-flow: column;
pointer-events: auto;
}
/* Disable the gauge arc animation for the sticky header, so toggling display: none
does not play the animation. */
.lh-sticky-header .lh-gauge-arc {
animation: none;
}
.lh-sticky-header .lh-gauge__label,
.lh-sticky-header .lh-fraction__label {
display: none;
}
.lh-highlighter {
width: var(--gauge-wrapper-width);
height: 1px;
background-color: var(--highlighter-background-color);
/* Position at bottom of first gauge in sticky header. */
position: absolute;
grid-column: 1;
bottom: -1px;
left: 0px;
right: 0px;
}
</style>
<div class="lh-scores-wrapper">
<div class="lh-scores-container">
<div class="lh-pyro">
<div class="lh-pyro-before"></div>
<div class="lh-pyro-after"></div>
</div>
</div>
</div>
</template>
<!-- Lighthouse topbar -->
<template id="topbar">
<style>
.lh-topbar {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
height: var(--topbar-height);
padding: var(--topbar-padding);
font-size: var(--report-font-size-secondary);
background-color: var(--topbar-background-color);
border-bottom: 1px solid var(--color-gray-200);
}
.lh-topbar__logo {
width: var(--topbar-logo-size);
height: var(--topbar-logo-size);
user-select: none;
flex: none;
}
.lh-topbar__url {
margin: var(--topbar-padding);
text-decoration: none;
color: var(--report-text-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.lh-tools {
display: flex;
align-items: center;
margin-left: auto;
will-change: transform;
min-width: var(--report-icon-size);
}
.lh-tools__button {
width: var(--report-icon-size);
min-width: 24px;
height: var(--report-icon-size);
cursor: pointer;
margin-right: 5px;
/* This is actually a button element, but we want to style it like a transparent div. */
display: flex;
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
outline: inherit;
}
.lh-tools__button svg {
fill: var(--tools-icon-color);
}
.lh-dark .lh-tools__button svg {
filter: invert(1);
}
.lh-tools__button.lh-active + .lh-tools__dropdown {
opacity: 1;
clip: rect(-1px, 194px, 270px, -3px);
visibility: visible;
}
.lh-tools__dropdown {
position: absolute;
background-color: var(--report-background-color);
border: 1px solid var(--report-border-color);
border-radius: 3px;
padding: calc(var(--default-padding) / 2) 0;
cursor: pointer;
top: 36px;
right: 0;
box-shadow: 1px 1px 3px #ccc;
min-width: 125px;
clip: rect(0, 164px, 0, 0);
visibility: hidden;
opacity: 0;
transition: all 200ms cubic-bezier(0,0,0.2,1);
}
.lh-tools__dropdown a {
color: currentColor;
text-decoration: none;
white-space: nowrap;
padding: 0 6px;
line-height: 2;
}
.lh-tools__dropdown a:hover,
.lh-tools__dropdown a:focus {
background-color: var(--color-gray-200);
outline: none;
}
/* save-gist option hidden in report. */
.lh-tools__dropdown a[data-action='save-gist'] {
display: none;
}
.lh-locale-selector {
width: 100%;
color: var(--report-text-color);
background-color: var(--locale-selector-background-color);
padding: 2px;
}
.lh-tools-locale {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.lh-tools-locale__selector-wrapper {
transition: opacity 0.15s;
opacity: 0;
max-width: 200px;
}
.lh-button.lh-tool-locale__button {
height: var(--topbar-height);
color: var(--tools-icon-color);
padding: calc(var(--default-padding) / 2);
}
.lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {
opacity: 1;
clip: rect(-1px, 255px, 242px, -3px);
visibility: visible;
margin: 0 4px;
}
/**
* This media query is a temporary fallback for browsers that do not support `@container query`.
* TODO: remove this media query when `@container query` is fully supported by browsers
* See https://github.com/GoogleChrome/lighthouse/pull/16332
*/
@media screen and (max-width: 964px) {
.lh-tools__dropdown {
right: 0;
left: initial;
}
}
@container lh-container (max-width: 964px) {
.lh-tools__dropdown {
right: 0;
left: initial;
}
}
@media print {
.lh-topbar {
position: static;
margin-left: 0;
}
.lh-tools__dropdown {
display: none;
}
}
</style>
<div class="lh-topbar">
<!-- Lighthouse logo. -->
<svg role="img" class="lh-topbar__logo" title="Lighthouse logo" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="#F63"/>
<path d="M31.561 24H14l-1.689 8.105L31.561 24ZM18.983 48H9l1.022-4.907L35.723 32.27l1.663 7.98L18.983 48Z" fill="#FFA385"/>
<path fill="#FF3" d="M20.5 10h7v7h-7z"/>
</svg>
<a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
<div class="lh-tools">
<div class="lh-tools-locale lh-hidden">
<button id="lh-button__swap-locales" class="lh-button lh-tool-locale__button" title="Show Language Picker" aria-label="Toggle language picker" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-locale__selector-wrapper">
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>
</button>
<div id="lh-tools-locale__selector-wrapper" class="lh-tools-locale__selector-wrapper" role="menu" aria-labelledby="lh-button__swap-locales" aria-hidden="true">
<!-- Select element created by ReportUIFeatures._enableSwapLocale: .lh-locale-selector -->
</div>
</div>
<button id="lh-tools-button" class="lh-tools__button" title="Tools menu" aria-label="Toggle report tools menu" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-dropdown">
<svg width="100%" height="100%" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</button>
<div id="lh-tools-dropdown" role="menu" class="lh-tools__dropdown" aria-labelledby="lh-tools-button">
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintSummary" data-action="print-summary"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintExpanded" data-action="print-expanded"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
<!-- Only enabled if Options.getStandaloneReportHTML is set. -->
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download lh-hidden" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
<!-- Only enabled if Options.onViewTrace is set and we are on simulated throttling. -->
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open lh-hidden" data-i18n="dropdownViewUnthrottledTrace" data-action="view-unthrottled-trace"></a>
<a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
</div>
</div>
</div>
</template>
<!-- Lighthouse header -->
<template id="heading">
<style>
/* CSS Fireworks. Originally by Eddie Lin
https://codepen.io/paulirish/pen/yEVMbP
*/
.lh-pyro {
display: none;
z-index: 1;
pointer-events: none;
}
.lh-score100 .lh-pyro {
display: block;
}
.lh-score100 .lh-lighthouse stop:first-child {
stop-color: hsla(200, 12%, 95%, 0);
}
.lh-score100 .lh-lighthouse stop:last-child {
stop-color: hsla(65, 81%, 76%, 1);
}
.lh-pyro > .lh-pyro-before, .lh-pyro > .lh-pyro-after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 2.5px;
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;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
animation-delay: 1s, 1s, 1s;
}
.lh-pyro > .lh-pyro-after {
animation-delay: 2.25s, 2.25s, 2.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@keyframes bang {
to {
opacity: 1;
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;
}
}
@keyframes gravity {
from {
opacity: 1;
}
to {
transform: translateY(80px);
opacity: 0;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 4%;
margin-left: 47%;
}
20%, 39.9% {
margin-top: 7%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 6%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 3%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 3%;
margin-left: 80%;
}
}
</style>
<div class="lh-header-container">
<div class="lh-scores-wrapper-placeholder"></div>
</div>
</template>
<!-- Lighthouse footer -->
<template id="footer">
<style>
.lh-footer {
padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
max-width: var(--report-content-max-width);
margin: 0 auto;
}
.lh-footer .lh-generated {
text-align: center;
}
</style>
<footer class="lh-footer">
<ul class="lh-meta__items">
</ul>
<div class="lh-generated">
<!-- TODO(i18n): use ICU replacement to replace version w/o concatenation. -->
Generated by <b>Lighthouse</b> <span class="lh-footer__version"></span> |
<a href="https://github.com/GoogleChrome/Lighthouse/issues" target="_blank" rel="noopener" class="lh-footer__version_issue">File an issue</a>
</div>
</footer>
</template>
<!-- Lighthouse score gauge -->
<template id="gauge">
<a class="lh-gauge__wrapper">
<!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->
<div class="lh-gauge__svg-wrapper">
<svg viewBox="0 0 120 120" class="lh-gauge">
<circle class="lh-gauge-base" r="56" cx="60" cy="60" stroke-width="8"></circle>
<circle class="lh-gauge-arc" r="56" cx="60" cy="60" stroke-width="8"></circle>
</svg>
</div>
<div class="lh-gauge__percentage"></div>
<!-- TODO: should likely be an h2 -->
<div class="lh-gauge__label"></div>
</a>
</template>
<!-- Lighthouse score gauge - explodey version -->
<template id="explodeyGauge">
<div class="lh-exp-gauge-component">
<div class="lh-exp-gauge__wrapper" target="_blank">
<div class="lh-exp-gauge__svg-wrapper">
<svg class="lh-exp-gauge">
<g class="lh-exp-gauge__inner">
<circle class="lh-exp-gauge__bg" />
<circle class="lh-exp-gauge__base lh-exp-gauge--faded" />
<circle class="lh-exp-gauge__arc" />
<text class="lh-exp-gauge__percentage"></text>
</g>
<g class="lh-exp-gauge__outer">
<circle class="lh-cover" />
</g>
<text class="lh-exp-gauge__label" text-anchor="middle" x="0" y="60"></text>
</svg>
</div>
</div>
</div>
</template>
<!-- Lighthouse category fraction -->
<template id="fraction">
<a class="lh-fraction__wrapper">
<div class="lh-fraction__content-wrapper">
<div class="lh-fraction__content">
<div class="lh-fraction__background"></div>
</div>
</div>
<div class="lh-fraction__label"></div>
</a>
</template>
<!-- Lighthouse crtiical request chains component -->
<template id="crc">
<div class="lh-crc-container">
<style>
.lh-crc .lh-tree-marker {
width: 12px;
height: 26px;
display: block;
float: left;
background-position: top left;
}
.lh-crc .lh-horiz-down {
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>');
}
.lh-crc .lh-right {
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>');
}
.lh-crc .lh-up-right {
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>');
}
.lh-crc .lh-vert-right {
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>');
}
.lh-crc .lh-vert {
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>');
}
.lh-crc .lh-crc-tree {
font-size: 14px;
width: 100%;
overflow-x: auto;
}
.lh-crc .lh-crc-node {
height: 26px;
line-height: 26px;
white-space: nowrap;
}
.lh-crc .lh-crc-node__longest {
color: var(--color-average-secondary);
}
.lh-crc .lh-crc-node__tree-value {
margin-left: 10px;
}
.lh-crc .lh-crc-node__tree-value div {
display: inline;
}
.lh-crc .lh-crc-node__chain-duration {
font-weight: 700;
}
.lh-crc .lh-crc-initial-nav {
color: #595959;
font-style: italic;
}
.lh-crc__summary-value {
margin-bottom: 10px;
}
</style>
<div>
<div class="lh-crc__summary-value">
<span class="lh-crc__longest_duration_label"></span> <b class="lh-crc__longest_duration"></b>
</div>
</div>
<div class="lh-crc">
<div class="lh-crc-initial-nav"></div>
<!-- crcChain -->
</div>
</div>
</template>
<!-- Lighthouse crtiical request chains component, single chain -->
<template id="crcChain">
<div class="lh-crc-node">
<span class="lh-crc-node__tree-marker"></span>
<span class="lh-crc-node__tree-value"></span>
</div>
</template>
<template id="3pFilter">
<style>
.lh-3p-filter {
color: var(--color-gray-600);
float: right;
padding: 6px var(--stackpack-padding-horizontal);
}
.lh-3p-filter-label, .lh-3p-filter-input {
vertical-align: middle;
user-select: none;
}
.lh-3p-filter-input:disabled + .lh-3p-ui-string {
text-decoration: line-through;
}
</style>
<div class="lh-3p-filter">
<label class="lh-3p-filter-label">
<input type="checkbox" class="lh-3p-filter-input" checked />
<span class="lh-3p-ui-string">Show 3rd party resources</span> (<span class="lh-3p-filter-count"></span>)
</label>
</div>
</template>
<!-- Lighthouse snippet component -->
<template id="snippet">
<div class="lh-snippet">
<style>
:root {
--snippet-highlight-light: #fbf1f2;
--snippet-highlight-dark: #ffd6d8;
}
.lh-snippet__header {
position: relative;
overflow: hidden;
padding: 10px;
border-bottom: none;
color: var(--snippet-color);
background-color: var(--snippet-background-color);
border: 1px solid var(--report-border-color-secondary);
}
.lh-snippet__title {
font-weight: bold;
float: left;
}
.lh-snippet__node {
float: left;
margin-left: 4px;
}
.lh-snippet__toggle-expand {
padding: 1px 7px;
margin-top: -1px;
margin-right: -7px;
float: right;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
color: #0c50c7;
}
.lh-snippet__snippet {
overflow: auto;
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 {
display: inline-block;
min-width: 100%;
}
.lh-snippet:not(.lh-snippet--expanded) .lh-snippet__show-if-expanded {
display: none;
}
.lh-snippet.lh-snippet--expanded .lh-snippet__show-if-collapsed {
display: none;
}
.lh-snippet__line {
background: white;
white-space: pre;
display: flex;
}
.lh-snippet__line:not(.lh-snippet__line--message):first-child {
padding-top: 4px;
}
.lh-snippet__line:not(.lh-snippet__line--message):last-child {
padding-bottom: 4px;
}
.lh-snippet__line--content-highlighted {
background: var(--snippet-highlight-dark);
}
.lh-snippet__line--message {
background: var(--snippet-highlight-light);
}
.lh-snippet__line--message .lh-snippet__line-number {
padding-top: 10px;
padding-bottom: 10px;
}
.lh-snippet__line--message code {
padding: 10px;
padding-left: 5px;
color: var(--color-fail);
font-family: var(--report-font-family);
}
.lh-snippet__line--message code {
white-space: normal;
}
.lh-snippet__line-icon {
padding-top: 10px;
display: none;
}
.lh-snippet__line--message .lh-snippet__line-icon {
display: block;
}
.lh-snippet__line-icon:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 4px;
width: var(--score-icon-size);
height: var(--score-icon-size);
background-image: var(--fail-icon-url);
}
.lh-snippet__line-number {
flex-shrink: 0;
width: 40px;
text-align: right;
font-family: monospace;
padding-right: 5px;
margin-right: 5px;
color: var(--color-gray-600);
user-select: none;
}
</style>
</div>
</template>
<template id="snippetHeader">
<div class="lh-snippet__header">
<div class="lh-snippet__title"></div>
<div class="lh-snippet__node"></div>
<button class="lh-snippet__toggle-expand">
<span class="lh-snippet__btn-label-collapse lh-snippet__show-if-expanded"></span>
<span class="lh-snippet__btn-label-expand lh-snippet__show-if-collapsed"></span>
</button>
</div>
</template>
<template id="snippetContent">
<div class="lh-snippet__snippet">
<div class="lh-snippet__snippet-inner"></div>
</div>
</template>
<template id="snippetLine">
<div class="lh-snippet__line">
<div class="lh-snippet__line-number"></div>
<div class="lh-snippet__line-icon"></div>
<code></code>
</div>
</template>
<!-- Lighthouse element screenshot -->
<template id="elementScreenshot">
<div class="lh-element-screenshot">
<div class="lh-element-screenshot__content">
<div class="lh-element-screenshot__image">
<div class="lh-element-screenshot__mask">
<svg height="0" width="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox"></clipPath>
<!-- clipPath filled by ElementScreenshotRenderer.renderClipPath -->
</defs>
</svg>
</div>
<div class="lh-element-screenshot__element-marker"></div>
</div>
</div>
</div>
</template>