Google Git
Sign in
cobalt / cobalt / 9c08e8415ad2e80fcaf050eea4a44bde61922ab4 / . / src / cobalt / debug / remote / devtools / front_end / audits2 / lighthouse / templates.html
blob: 770432f863436e372c4efb68440a162cd3722dd4 [file] [log] [blame]
<!-- Lighthouse run warnings -->
<template id="tmpl-lh-warnings--toplevel">
<div class="lh-warnings lh-warnings--toplevel">
<strong>There were issues affecting this run of Lighthouse:</strong>
<ul></ul>
</div>
</template>
<!-- Lighthouse score scale -->
<template id="tmpl-lh-scorescale">
<div class="lh-scorescale">
<span class="lh-scorescale-label">Score scale:</span>
<span class="lh-scorescale-range lh-scorescale-range--fail">0-44</span>
<span class="lh-scorescale-range lh-scorescale-range--average">45-74</span>
<span class="lh-scorescale-range lh-scorescale-range--pass">75-100</span>
</div>
</template>
<!-- Toggle arrow chevron -->
<template id="tmpl-lh-chevron">
<svg class="lh-chevron" title="See audits" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100">
<g class="lh-chevron__lines">
<path class="lh-chevron__line lh-chevron__line-left" d="M10 50h40" stroke="#707173"/>
<path class="lh-chevron__line lh-chevron__line-right" d="M90 50H50" stroke="#707173"/>
</g>
</svg>
</template>
<!-- Lighthouse category header -->
<template id="tmpl-lh-category-header">
<div class="lh-category-header">
<div class="lh-score__gauge"></div>
<span class="lh-category-header__title"></span>
<div class="lh-category-header__description"></div>
</div>
</template>
<!-- Lighthouse audit -->
<template id="tmpl-lh-audit">
<div class="lh-audit">
<details class="lh-expandable-details">
<summary class="lh-audit__header lh-expandable-details__summary">
<span class="lh-audit__index"></span>
<span class="lh-audit__title"></span>
<span class="lh-audit__display-text"></span>
<div class="lh-audit__score-icon"></div>
<div class="lh-chevron-container"></div>
</summary>
<div class="lh-audit__description"></div>
</details>
</div>
</template>
<!-- Lighthouse perf metric -->
<template id="tmpl-lh-metric">
<div class="lh-metric">
<div class="lh-metric__innerwrap tooltip-boundary">
<span class="lh-metric__title"></span>
<div class="lh-metric__value"></div>
<div class="lh-metric__description tooltip"></div>
</div>
</div>
</template>
<!-- Lighthouse perf opportunity -->
<template id="tmpl-lh-opportunity">
<div class="lh-audit lh-audit--load-opportunity">
<details class="lh-expandable-details">
<summary class="lh-audit__header lh-expandable-details__summary">
<div class="lh-load-opportunity__cols">
<div class="lh-load-opportunity__col lh-load-opportunity__col--one">
<span class="lh-audit__index"></span>
<div class="lh-audit__title"></div>
</div>
<div class="lh-load-opportunity__col lh-load-opportunity__col--two">
<div class="lh-load-opportunity__sparkline">
<div class="lh-sparkline"><div class="lh-sparkline__bar"></div></div>
</div>
<div class="lh-audit__display-text"></div>
<div class="lh-chevron-container" title="See resources"></div>
</div>
</div>
</summary>
<div class="lh-audit__description"></div>
</details>
</div>
</template>
<!-- Lighthouse perf opportunity header -->
<template id="tmpl-lh-opportunity-header">
<div class="lh-load-opportunity__header lh-load-opportunity__cols">
<div class="lh-load-opportunity__col lh-load-opportunity__col--one">
Resource to optimize
</div>
<div class="lh-load-opportunity__col lh-load-opportunity__col--two">
Estimated Savings
</div>
</div>
</template>
<!-- Lighthouse score container -->
<template id="tmpl-lh-scores-wrapper">
<style>
.lh-scores-wrapper__background,
.lh-scores-wrapper__shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 8px;
}
.lh-scores-wrapper__shadow {
border-radius: 0;
box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 0px -2px
}
.lh-scores-container {
padding-bottom: calc(var(--section-indent) / 2);
position: relative;
width: 100%;
}
</style>
<div class="lh-scores-wrapper">
<div class="lh-scores-container">
<div class="lh-scores-wrapper__background"></div>
<div class="lh-scores-wrapper__shadow"></div>
</div>
</div>
</template>
<!-- Lighthouse header -->
<template id="tmpl-lh-heading">
<style>
:root {
--report-header-overlap-top: 30px;
}
.lh-header-bg {
background-color: var(--header-bg-color);
height: var(--report-header-height);
left: 0;
position: absolute;
top: 0;
width: 100%;
will-change: transform;
}
.lh-lighthouse {
position: absolute;
top: var(--report-header-height);
right: 50%;
transform: translate3d(calc(var(--report-content-width) / 2), -100%, 0);
opacity: 1;
transform-origin: bottom right;
will-change: transform, opacity;
}
.lh-header {
width: 100%;
height: var(--report-header-height);
max-width: 100%; /* support text-overflow on url */
position: relative;
}
.lh-metadata {
flex: 1 1 0;
padding: calc(var(--section-padding) / 2);
padding-left: var(--section-indent);
line-height: 20px;
color: var(--report-header-color);
z-index: 1;
position: relative;
}
.lh-metadata__results {
text-overflow: ellipsis;
white-space: nowrap;
}
.lh-metadata__url {
color: currentColor;
}
.lh-scores-wrapper {
margin-top: -30px;
transform: translateZ(1px);
}
.lh-scores-wrapper__shadow {
opacity: 0;
}
.lh-scores-wrapper__background,
.lh-scores-wrapper__shadow {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
border-radius: 8px;
will-change: opacity, transform;
transform-origin: top;
}
.lh-product-info, .lh-toolbar__metadata {
align-items: center;
white-space: nowrap;
color: #5F6369;
display: flex;
font-size: calc(var(--body-font-size) * 0.9);
margin-left: var(--section-indent);
opacity: 0;
transform: translateY(-50%);
will-change: opacity;
}
.lh-product-info__icon {
height: 20px;
margin-right: var(--default-padding);
}
.lh-toolbar {
height: 50px;
position: absolute;
top: 25px;
will-change: transform;
display: flex;
width: calc(100% - 70px); /* give room for export */
}
.lh-toolbar__metadata {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.lh-toolbar__url {
color: currentColor;
display: block;
white-space: nowrap;
margin-right: 2px;
}
.lh-export {
position: absolute;
right: var(--section-indent);
transform: translateY(0);
top: calc(var(--section-padding) / 2);
will-change: transform;
z-index: 2;
}
.lh-export__button {
background-color: #fff;
border: 1px solid #dadada;
border-radius: 2px;
cursor: pointer;
outline: none;
height: 32px;
width: 48px;
background-repeat: no-repeat;
background-size: 20px;
background-position: 50% 50%;
will-change: transform;
}
.lh-export__button:focus,
.lh-export__button.active {
box-shadow: 1px 1px 3px #ccc;
}
.lh-export__button.active + .lh-export__dropdown {
opacity: 1;
clip: rect(0, 164px, 200px, 0);
}
.lh-export__dropdown {
position: absolute;
background-color: #fff;
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);
opacity: 0;
transition: all 200ms cubic-bezier(0,0,0.2,1);
}
.lh-export__dropdown a {
display: block;
color: currentColor;
text-decoration: none;
white-space: nowrap;
padding: 0 12px;
line-height: 2;
}
.lh-export__dropdown a:hover,
.lh-export__dropdown a:focus {
background-color: #efefef;
outline: none;
}
.lh-export__dropdown .report-icon {
cursor: pointer;
background-repeat: no-repeat;
background-position: 8px 50%;
background-size: 18px;
background-color: transparent;
text-indent: 18px;
}
/* copy icon needs slight adjustments to look great */
.lh-export__dropdown .report-icon--copy {
background-size: 16px;
background-position: 9px 50%;
}
/* save-as-gist option hidden in report */
.lh-export__dropdown .lh-export--gist {
display: none;
}
.lh-config {
color: var(--secondary-text-color);
}
.lh-config__timestamp {
font-size: var(--caption-font-size);
display: block;
}
a.lh-config__emulation {
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 964px) {
.lh-export__dropdown {
right: 0;
left: initial;
}
}
@media print {
.lh-header {
position: static;
margin-left: 0;
}
}
/*
TODO: Enable animating the clouds
.lh-lighthouse__clouds {
animation: panacross 30s linear infinite;
animation-play-state: paused;
}
@keyframes panacross {
0% { transform: translateX(0px); }
77% { transform: translateX(-680px); }
77.0001% { transform: translateX(195px); }
100% { transform: translateX(0px); }
} */
</style>
<div class="lh-header-bg"></div>
<div class="lh-lighthouse">
<svg width="217" height="148" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="a" x="-56" y="-54" width="284" height="202" maskUnits="userSpaceOnUse">
<path d="M-56-54h284v202H-56z" fill="#fff"/>
</mask>
<linearGradient id="b" x1="-525.16" y1="560.08" x2="-524.23" y2="560.08" gradientTransform="matrix(91 0 0 -77 47797 43181)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f1f3f4"/>
<stop offset="1" stop-color="#fff"/>
</linearGradient>
</defs>
<g mask="url(#a)">
<path d="M95 47h24v2H95z" fill="#ec5548"/>
<path d="M98 49h18v11H98z" fill="#fbc21b"/>
<path d="M95 59h24v7H95z" fill="#ec5548"/>
<path d="M97.63 66h19.74l2.63 47H95z" fill="#fff"/>
<path d="M107 38a10 10 0 0 1 10 10v1H97v-1a10 10 0 0 1 10-10zM96.77 82.23l21-10.7.63 11.87-22.31 11.87zM95 110.8L119.1 98l.9 14H95z" fill="#ec5548"/>
<path d="M0 148a177.58 177.58 0 0 1 217 0z" fill="#e8eaed"/>
<path d="M103 49a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5z" fill="#fef0c8"/>
<path d="M7 16l91 33.18v10L7 93z" fill="url(#b)"/>
</g>
<g mask="url(#a)" class="lh-lighthouse__clouds">
<path d="M60 .19A9.77 9.77 0 0 1 61.93 0a9.44 9.44 0 0 1 9.24 7.83A7.24 7.24 0 0 1 79 14.45v.73A7.37 7.37 0 0 1 76.2 21h-31a7.44 7.44 0 0 1-1.2-4.09 7.31 7.31 0 0 1 7.26-7.36 6.84 6.84 0 0 1 1.28.1v-.11A9.51 9.51 0 0 1 60 .19m79.78 22.31h-17.9a4.37 4.37 0 0 1-.63-2.25 4.2 4.2 0 0 1 4.16-4.25 4.37 4.37 0 0 1 .72.06V16a5.35 5.35 0 0 1 10.64-1h.33a4.2 4.2 0 0 1 4.15 4.25 4.29 4.29 0 0 1-1.47 3.25zM163 62h-24.15a5.1 5.1 0 0 1-.85-2.81 5.65 5.65 0 0 1 6.59-5.19v-.08a7.07 7.07 0 0 1 7.24-6.92 7.15 7.15 0 0 1 7.17 5.64h.44a5.46 5.46 0 0 1 5.6 5.32A5.19 5.19 0 0 1 163 62z" fill="#fff"/>
</g>
</svg>
</div>
<div class="lh-header-container">
<div class="lh-header">
<div class="lh-metadata">
<div class="lh-metadata__results"><a href="" class="lh-metadata__url" target="_blank" rel="noopener"></a></div>
<div class="lh-config">
<span class="lh-config__timestamp"></span>
<a href="#runtime-settings" class="lh-config__emulation"></a>
</div>
</div>
</div>
<div class="lh-scores-wrapper-placeholder"></div>
<div class="lh-toolbar">
<div class="lh-product-info">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAADjklEQVR4AWI08P/HQEvAQrxSQKvlECfLFYXx75xCY2qmh89GbNvOMjb3v9jOOlxnFWxj206ebQ3b7q6q+z1rNagu8/zvPSZACAABpeUAA0miMgU7SA7JjCraFGwZwECOwvL75dWjsKgWBKtx0jvWo+vkBAFbACCkByMP6nMn48+AVgXB2fzSCwsv22/lMGlUhmJ0AE7BH8dyUUDbUEgN6RzJRSeaPxhdRYR0Inel+7Hd5lBiFpkMAxACc0394//9C4voFHDiAAGLpuOXebdfdHfctgwJKaZRLRKy6ItrSis6RBnVBgGtbHyKTEmJHQoEXoBCE5BCrDeA2ogMUIGDAKEBDEhUqwgMqBYDjW4DQzmuffVdqff42/ZQYYqVcMXGZsMPyCsH3lyJSetxvEaxAQXdjR1HjfwCdIS7lo2DZke26Qe+MXO12OWkGT0O6oE7vMGkMnkYw4aN1KQgMKExhXqswfiov4+a7MQ11XPnbr/5qpKlgACAAQj94Lu271bN9DUecQasIZlNzG72llRAAKJiAi+/BSHrSFjRvQhg3DEKEqJh08tsmLTx597+f6enr4cc2Zpk57pihfX24dW7RHcOLLUbJYhJSl0ErQCI9BVXH/XrO97QasuvQQSiECa0BrQCIIJp6X9T/r8QG6L71WYSqCoIIGo2BZDUBnS/D9EA9Nun1iYvbM0MFExIDQRoKFatc1Z6zrm5uWeObJotq0BGV9FuQBWq5a4Fw3PPz848rZHstZSuA5FWAFSMP2nOppOOGpl6qh9PCSg0IFyHKjSQyDNQHTru2t75NOEe0fsf246oAmFkI6vCdnWvbQFQFCKx8vCswV8TrDLiDLgH4Nr7RAtNsrC9d8sfk7b8ls4igdNy8CQKAISlsB0FjZfd3Lfp155tf8fKI4BxZZIj/oTdVEAIAcJFOCmzauHG71I7/rdreUAgAqpDP05fDARCAQQARwEIBQSVxq0FyaLvZZtevpHa8WHw8cft6cpxlq8eAJtIhnSbWDf951yx3y13OqUuu5qyGgkxCgGFh9cDihDGbTa6BqvT1lWmrav3bmt2ZMJ4mU6TGgIC4DBzcv/JqAau1WhzSt3x9Ixk/4Jk/8J4ZrrViFMA4W6A7+WK8xcVjvyrOmVD0FbAXokcT48r+xVqLKvuJYbmpNadnlp3mpufJHOe/GXktM+r09bT8kEdq9BRYAbGSgzP7ll82U71Mc+ZFooXgwAAAABJRU5ErkJggg==" alt="" class="lh-product-info__icon" />
<span class="lh-product-info__name">Lighthouse</span>&nbsp;
<span class="lh-product-info__version"></span>
</div>
<div class="lh-toolbar__metadata">
<a href="" class="lh-toolbar__url" target="_blank" rel="noopener"></a>
<span class="lh-toggle-arrow" title="See report's runtime settings"></span>
</div>
</div>
<div class="lh-export">
<button class="report-icon report-icon--share lh-export__button" title="Export report"></button>
<div class="lh-export__dropdown">
<a href="#" class="report-icon report-icon--print" data-action="print-summary">Print Summary</a>
<a href="#" class="report-icon report-icon--print" data-action="print-expanded">Print Expanded</a>
<a href="#" class="report-icon report-icon--copy" data-action="copy">Copy JSON</a>
<a href="#" class="report-icon report-icon--download" data-action="save-html">Save as HTML</a>
<a href="#" class="report-icon report-icon--download" data-action="save-json">Save as JSON</a>
<a href="#" class="report-icon report-icon--open lh-export--viewer" data-action="open-viewer">Open in Viewer</a>
<a href="#" class="report-icon report-icon--open lh-export--gist" data-action="save-gist">Save as Gist</a>
</div>
</div>
</template>
<!-- Lighthouse footer -->
<template id="tmpl-lh-footer">
<style>
.lh-footer {
background-color: var(--header-bg-color);
border-top: 1px solid var(--report-secondary-border-color);
padding: var(--section-indent) calc(var(--default-padding) * 2);
}
.lh-footer .lh-generated {
text-align: center;
border-top: 1px solid var(--report-border-color);
padding-top: var(--default-padding);
}
.lh-env {
padding: var(--default-padding) 0;
}
.lh-env__items {
padding-left: 16px;
}
span.lh-env__name {
font-weight: bold;
color: var(--secondary-text-color);
}
span.lh-env__description {
font-family: var(--monospace-font-family);
font-size: var(--caption-font-size);
padding-left: 5px;
}
</style>
<footer class="lh-footer">
<div class="lh-env">
<div class="lh-env__title">Runtime settings</div>
<ul class="lh-env__items">
<template id="tmpl-lh-env__items">
<li class="lh-env__item">
<span class="lh-env__name"></span>
<span class="lh-env__description"></span>
</li>
</template>
</ul>
</div>
<div class="lh-generated">
Generated by <b>Lighthouse</b> <span class="lh-footer__version"></span> |
<a href="https://github.com/GoogleChrome/Lighthouse/issues" target="_blank" rel="noopener">File an issue</a>
</div>
</footer>
</template>
<!-- Lighthouse score gauge -->
<template id="tmpl-lh-gauge">
<style>
.lh-gauge__wrapper {
--circle-size: calc(3 * var(--header-font-size));
--circle-size-half: calc(var(--circle-size) / 2);
--circle-background: hsl(216, 12%, 92%);
--circle-border-width: 9;
--inset-size: calc(var(--circle-size) - 2 * var(--circle-border-width));
--transition-length: 1s;
}
.lh-gauge__wrapper--pass,
.lh-gauge__wrapper--pass .lh-gauge {
--circle-color: var(--pass-color);
color: var(--circle-color);
}
.lh-gauge__wrapper--average,
.lh-gauge__wrapper--average .lh-gauge {
--circle-color: var(--average-color);
color: var(--circle-color);
}
.lh-gauge__wrapper--fail,
.lh-gauge__wrapper--fail .lh-gauge {
--circle-color: var(--fail-color);
color: var(--circle-color);
}
.lh-gauge {
max-width: 360px;
max-height: 360px;
stroke-linecap: round;
width: var(--circle-size);
height: var(--circle-size);
}
.lh-gauge-base {
fill: none;
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;
}
@keyframes load-gauge {
from { stroke-dasharray: 0 329; }
}
.lh-gauge__percentage {
--spacer: calc((var(--circle-size) - var(--inset-size)) / 2);
width: var(--inset-size);
height: var(--inset-size);
position: absolute;
border-radius: inherit;
font-size: var(--header-font-size);
text-align: center;
top: calc(var(--circle-size) / 3);
}
.lh-gauge__wrapper {
display: inline-flex;
align-items: center;
flex-direction: column;
text-decoration: none;
flex: 1;
min-width: auto;
position: relative;
/* Contain the layout style paint & layers during animation*/
contain: content;
will-change: opacity; /* Only using for layer promotion */
}
.lh-gauge__label {
font-size: var(--body-font-size);
line-height: var(--body-line-height);
margin-top: calc(0.5 * var(--body-line-height));
text-align: center;
color: black;
}
</style>
<a href="#" class="lh-gauge__wrapper">
<svg viewBox="0 0 120 120" class="lh-gauge" fill="none" stroke-width="2">
<circle class="lh-gauge-base" r="53" cx="60" cy="60"></circle>
<circle class="lh-gauge-arc" transform="rotate(-90 60 60)" stroke-dasharray="0 329" stroke-dashoffset="0" r="53" cx="60" cy="60"></circle>
</svg>
<div class="lh-gauge__percentage"></div>
<div class="lh-gauge__label"></div>
</a>
</template>
<!-- Lighthouse crtiical request chains component -->
<template id="tmpl-lh-crc">
<div class="lh-crc-container">
<style>
.lh-crc .tree-marker {
width: 12px;
height: 26px;
display: block;
float: left;
background-position: top left;
}
.lh-crc .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 .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 .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 .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 .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 .crc-tree {
font-size: 14px;
width: 100%;
overflow-x: auto;
}
.lh-crc .crc-node {
height: 26px;
line-height: 26px;
white-space: nowrap;
}
.lh-crc .crc-node__tree-value {
margin-left: 10px;
}
.lh-crc .crc-node__chain-duration {
font-weight: 700;
}
.lh-crc .crc-node__tree-hostname {
color: #595959;
}
.lh-crc .crc-initial-nav {
color: #595959;
font-style: italic;
}
</style>
<div>
Longest chain: <b class="lh-crc__longest_duration"><!-- fill me: longestChain.duration --></b>
over <b class="lh-crc__longest_length"><!-- fill me: longestChain.length --></b> requests, totalling
<b class="lh-crc__longest_transfersize"><!-- fill me: longestChain.length --></b>
</div>
<div class="lh-crc">
<div class="crc-initial-nav">Initial Navigation</div>
<!-- stamp for each chain -->
<template id="tmpl-lh-crc__chains">
<div class="crc-node">
<span class="crc-node__tree-marker">
</span>
<span class="crc-node__tree-value">
<span class="crc-node__tree-file"><!-- fill me: node.request.url.file --></span>
<span class="crc-node__tree-hostname">(<!-- fill me: node.request.url.host -->)</span>
</span>
</div>
</template>
</div>
</div>
</template>