lighthouse 9.1.0-dev.20211212 → 9.1.0-dev.20211213
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/report/bundle.esm.js +3 -3
- package/dist/report/flow.js +1 -1
- package/dist/report/standalone.js +1 -1
- package/flow-report/assets/styles.css +1 -1
- package/lighthouse-core/computed/page-dependency-graph.js +25 -15
- package/lighthouse-core/fraggle-rock/gather/navigation-runner.js +19 -8
- package/lighthouse-core/fraggle-rock/user-flow.js +9 -5
- package/lighthouse-core/lib/dependency-graph/base-node.js +8 -0
- package/package.json +1 -1
- package/report/assets/styles.css +15 -12
- package/report/assets/templates.html +1 -1
- package/report/renderer/components.js +2 -2
- package/report/renderer/report-renderer.js +1 -1
- package/report/test-assets/faux-psi-template.html +85 -26
- package/report/test-assets/faux-psi.js +44 -8
- package/types/config.d.ts +1 -0
|
@@ -311,7 +311,7 @@ export class ReportRenderer {
|
|
|
311
311
|
for (const category of Object.values(report.categories)) {
|
|
312
312
|
const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
|
|
313
313
|
// .lh-category-wrapper is full-width and provides horizontal rules between categories.
|
|
314
|
-
// .lh-category within has the max-width: var(--report-content-width);
|
|
314
|
+
// .lh-category within has the max-width: var(--report-content-max-width);
|
|
315
315
|
const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
|
|
316
316
|
wrapper.appendChild(renderer.render(
|
|
317
317
|
category,
|
|
@@ -43,10 +43,9 @@
|
|
|
43
43
|
position: relative;
|
|
44
44
|
display: inline-block;
|
|
45
45
|
padding: 15px 55px 15px;
|
|
46
|
-
border: 1px solid transparent;
|
|
47
|
-
border-bottom: 0;
|
|
48
46
|
cursor: pointer;
|
|
49
47
|
font-weight: 600;
|
|
48
|
+
border-bottom: 3px solid transparent;
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
.tabset > label:hover {
|
|
@@ -59,51 +58,111 @@
|
|
|
59
58
|
}
|
|
60
59
|
|
|
61
60
|
.tabset > input:checked + label {
|
|
62
|
-
border-color: #ccc;
|
|
63
|
-
border-bottom: 1px solid #fff;
|
|
64
61
|
margin-bottom: -1px;
|
|
65
62
|
background: white;
|
|
63
|
+
border-bottom: 3px solid blue;
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
.tab-panel {
|
|
69
|
-
border
|
|
67
|
+
border: 1px solid #ccc;
|
|
68
|
+
padding: 24px;
|
|
69
|
+
row-gap: calc(8px*2);
|
|
70
|
+
border-radius: calc(8px/2);
|
|
70
71
|
}
|
|
71
72
|
|
|
72
|
-
body {
|
|
73
|
-
padding: 30px;
|
|
74
|
-
}
|
|
75
73
|
|
|
76
74
|
.tabset {
|
|
77
|
-
|
|
78
|
-
background: #eee;
|
|
75
|
+
|
|
79
76
|
}
|
|
80
77
|
|
|
81
78
|
.tab-panels {
|
|
82
79
|
background: white;
|
|
83
80
|
}
|
|
84
81
|
|
|
85
|
-
/* extra styles */
|
|
86
82
|
body {
|
|
87
|
-
|
|
83
|
+
height: 100%;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
-webkit-font-smoothing: antialiased;
|
|
86
|
+
color: rgba(0,0,0,0.87);
|
|
87
|
+
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
|
|
88
|
+
margin: 0;
|
|
89
|
+
text-size-adjust: 100%;
|
|
90
|
+
bottom: auto;
|
|
91
|
+
right: auto;
|
|
92
|
+
width: auto;
|
|
93
|
+
overflow: visible;
|
|
94
|
+
overflow-y: scroll;
|
|
95
|
+
overscroll-behavior: contain;
|
|
96
|
+
}
|
|
97
|
+
.page {
|
|
98
|
+
max-width: 960px;
|
|
99
|
+
width: calc(100% - 24px*2);
|
|
100
|
+
margin: auto;
|
|
101
|
+
padding: 24px;
|
|
102
|
+
padding-top: calc(24px*2);
|
|
103
|
+
min-width: calc(360px - 8px *2);
|
|
104
|
+
}
|
|
105
|
+
@media screen and (max-width: 768px) {
|
|
106
|
+
.page {
|
|
107
|
+
padding:8px;
|
|
108
|
+
width: calc(100% - 8px*2);
|
|
109
|
+
padding-top: calc(24px/2)
|
|
110
|
+
}
|
|
111
|
+
.tab-panel {
|
|
112
|
+
padding:unset;
|
|
113
|
+
border-width: 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
.hrefbar {
|
|
117
|
+
background: hsl(210deg 17% 98%);
|
|
118
|
+
border: 1px solid hsl(0deg 0% 85%);
|
|
119
|
+
border-width: 1px 0;
|
|
120
|
+
padding: 4px;
|
|
121
|
+
}
|
|
122
|
+
button {
|
|
123
|
+
background-color: hsl(216deg 100% 50%);
|
|
124
|
+
border-radius: 4px;
|
|
125
|
+
color: white;
|
|
126
|
+
padding: 13px;
|
|
127
|
+
border: 0;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
float: right;
|
|
88
130
|
}
|
|
131
|
+
|
|
89
132
|
</style>
|
|
90
133
|
</head>
|
|
91
134
|
<body >
|
|
92
135
|
<noscript>PSI requires JavaScript. Please enable.</noscript>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
136
|
+
<div class="page">
|
|
137
|
+
<button type=button>Reanalyze</button>
|
|
138
|
+
<div class="tabset">
|
|
139
|
+
<input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked />
|
|
140
|
+
<label for="tab1">Mobile</label>
|
|
141
|
+
|
|
142
|
+
<input type="radio" name="tabset" id="tab2" aria-controls="desktop" />
|
|
143
|
+
<label for="tab2">Desktop</label>
|
|
144
|
+
|
|
145
|
+
<div class="tab-panels">
|
|
146
|
+
<section id="mobile" class="tab-panel">
|
|
147
|
+
<h2>Diagnose performance issues</h2>
|
|
148
|
+
<h4>
|
|
149
|
+
See detailed analysis and recommendations from loading your site in a simulated
|
|
150
|
+
environment.
|
|
151
|
+
</h4>
|
|
152
|
+
<div class="hrefbar">🔗 http://thisurl.com</div>
|
|
153
|
+
<div class="reportContainer"></div>
|
|
154
|
+
</section>
|
|
155
|
+
|
|
156
|
+
<section id="desktop" class="tab-panel">
|
|
157
|
+
<h2>Diagnose performance issues</h2>
|
|
158
|
+
<h4>
|
|
159
|
+
See detailed analysis and recommendations from loading your site in a simulated
|
|
160
|
+
environment.
|
|
161
|
+
</h4>
|
|
162
|
+
<div class="hrefbar">🔗 http://thisurl.com</div>
|
|
163
|
+
<div class="reportContainer"></div>
|
|
164
|
+
</section>
|
|
165
|
+
</div>
|
|
107
166
|
</div>
|
|
108
167
|
</div>
|
|
109
168
|
|
|
@@ -8,12 +8,22 @@
|
|
|
8
8
|
/** @fileoverview This file exercises two LH reports within the same DOM. */
|
|
9
9
|
|
|
10
10
|
/** @typedef {import('../clients/bundle.js')} lighthouseRenderer */
|
|
11
|
-
|
|
12
11
|
/** @type {lighthouseRenderer} */
|
|
13
12
|
// @ts-expect-error
|
|
14
13
|
const lighthouseRenderer = window['report'];
|
|
15
14
|
|
|
15
|
+
const wait = (ms = 100) => new Promise(resolve => setTimeout(resolve, ms));
|
|
16
|
+
|
|
17
|
+
|
|
16
18
|
(async function __initPsiReports__() {
|
|
19
|
+
renderLHReport();
|
|
20
|
+
|
|
21
|
+
document.querySelector('button')?.addEventListener('click', () => {
|
|
22
|
+
renderLHReport();
|
|
23
|
+
});
|
|
24
|
+
})();
|
|
25
|
+
|
|
26
|
+
async function renderLHReport() {
|
|
17
27
|
// @ts-expect-error
|
|
18
28
|
const mobileLHR = window.__LIGHTHOUSE_JSON__;
|
|
19
29
|
const desktopLHR = JSON.parse(JSON.stringify(mobileLHR));
|
|
@@ -26,25 +36,49 @@ const lighthouseRenderer = window['report'];
|
|
|
26
36
|
for (const [tabId, lhr] of Object.entries(lhrs)) {
|
|
27
37
|
await distinguishLHR(lhr, tabId);
|
|
28
38
|
|
|
29
|
-
const container = document.querySelector(`section#${tabId}`);
|
|
39
|
+
const container = document.querySelector(`section#${tabId} .reportContainer`);
|
|
30
40
|
if (!container) throw new Error('Unexpected DOM. Bailing.');
|
|
31
41
|
|
|
32
42
|
try {
|
|
43
|
+
container.textContent = 'Analyzing…';
|
|
44
|
+
await wait(500);
|
|
45
|
+
for (const el of container.childNodes) el.remove();
|
|
46
|
+
|
|
33
47
|
const reportRootEl = lighthouseRenderer.renderReport(lhr, {
|
|
34
48
|
omitTopbar: true,
|
|
35
49
|
disableAutoDarkModeAndFireworks: true,
|
|
36
50
|
});
|
|
37
51
|
// TODO: display warnings if appropriate.
|
|
38
|
-
for (const el of reportRootEl.querySelectorAll('.lh-warnings')) {
|
|
52
|
+
for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {
|
|
39
53
|
el.setAttribute('hidden', 'true');
|
|
40
54
|
}
|
|
55
|
+
|
|
56
|
+
// Move env block
|
|
57
|
+
const metaItemsEl = reportRootEl.querySelector('.lh-meta__items');
|
|
58
|
+
if (metaItemsEl) {
|
|
59
|
+
reportRootEl.querySelector('.lh-metrics-container')?.parentNode?.insertBefore(
|
|
60
|
+
metaItemsEl,
|
|
61
|
+
reportRootEl.querySelector('.lh-buttons')
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
41
65
|
container.append(reportRootEl);
|
|
66
|
+
|
|
67
|
+
// Override some LH styles. (To find .lh-vars we must descend from reportRootEl's parent)
|
|
68
|
+
for (const el of container.querySelectorAll('article.lh-vars')) {
|
|
69
|
+
// Ensure these css var names are not stale.
|
|
70
|
+
el.style.setProperty('--report-content-max-width', '100%');
|
|
71
|
+
el.style.setProperty('--edge-gap-padding', '0');
|
|
72
|
+
}
|
|
73
|
+
for (const el of reportRootEl.querySelectorAll('footer.lh-footer')) {
|
|
74
|
+
el.style.display = 'none';
|
|
75
|
+
}
|
|
42
76
|
} catch (e) {
|
|
43
77
|
console.error(e);
|
|
44
78
|
container.textContent = 'Error: LHR failed to render.';
|
|
45
79
|
}
|
|
46
80
|
}
|
|
47
|
-
}
|
|
81
|
+
}
|
|
48
82
|
|
|
49
83
|
|
|
50
84
|
/**
|
|
@@ -59,13 +93,15 @@ async function distinguishLHR(lhr, tabId) {
|
|
|
59
93
|
}
|
|
60
94
|
|
|
61
95
|
const finalSSDetails = lhr.audits['final-screenshot'] && lhr.audits['final-screenshot'].details;
|
|
62
|
-
if (
|
|
63
|
-
|
|
96
|
+
if (finalSSDetails && finalSSDetails.type === 'screenshot') {
|
|
97
|
+
finalSSDetails.data = await decorateScreenshot(finalSSDetails.data, tabId);
|
|
98
|
+
}
|
|
64
99
|
|
|
65
100
|
const fpSSDetails = lhr.audits['full-page-screenshot'] &&
|
|
66
101
|
lhr.audits['full-page-screenshot'].details;
|
|
67
|
-
if (
|
|
68
|
-
|
|
102
|
+
if (fpSSDetails && fpSSDetails.type === 'full-page-screenshot') {
|
|
103
|
+
fpSSDetails.screenshot.data = await decorateScreenshot(fpSSDetails.screenshot.data, tabId);
|
|
104
|
+
}
|
|
69
105
|
}
|
|
70
106
|
|
|
71
107
|
/**
|
package/types/config.d.ts
CHANGED