lighthouse 11.7.1 → 12.0.0

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.
Files changed (272) hide show
  1. package/CONTRIBUTING.md +2 -2
  2. package/cli/bin.js +0 -7
  3. package/cli/cli-flags.d.ts +1 -5
  4. package/cli/cli-flags.js +4 -8
  5. package/cli/test/smokehouse/__snapshots__/report-assert-test.js.snap +14 -14
  6. package/cli/test/smokehouse/config/exclusions.js +3 -0
  7. package/cli/test/smokehouse/core-tests.js +6 -20
  8. package/cli/test/smokehouse/frontends/smokehouse-bin.js +2 -2
  9. package/core/audits/accessibility/aria-conditional-attr.d.ts +10 -0
  10. package/core/audits/accessibility/aria-conditional-attr.js +43 -0
  11. package/core/audits/accessibility/{duplicate-id-active.d.ts → aria-deprecated-role.d.ts} +3 -3
  12. package/core/audits/accessibility/aria-deprecated-role.js +43 -0
  13. package/core/audits/accessibility/aria-prohibited-attr.d.ts +10 -0
  14. package/core/audits/accessibility/aria-prohibited-attr.js +44 -0
  15. package/core/audits/accessibility/target-size.js +0 -1
  16. package/core/audits/byte-efficiency/byte-efficiency-audit.d.ts +0 -16
  17. package/core/audits/byte-efficiency/byte-efficiency-audit.js +1 -38
  18. package/core/audits/byte-efficiency/offscreen-images.d.ts +0 -11
  19. package/core/audits/byte-efficiency/offscreen-images.js +0 -15
  20. package/core/audits/byte-efficiency/render-blocking-resources.js +27 -26
  21. package/core/audits/byte-efficiency/unminified-css.js +2 -2
  22. package/core/audits/byte-efficiency/unused-css-rules.js +3 -1
  23. package/core/audits/dobetterweb/uses-http2.d.ts +0 -13
  24. package/core/audits/dobetterweb/uses-http2.js +4 -38
  25. package/core/audits/font-display.js +2 -2
  26. package/core/audits/layout-shifts.js +1 -1
  27. package/core/audits/preload-fonts.d.ts +1 -5
  28. package/core/audits/preload-fonts.js +1 -10
  29. package/core/audits/prioritize-lcp-image.js +2 -2
  30. package/core/audits/redirects-http.d.ts +19 -0
  31. package/core/audits/redirects-http.js +75 -0
  32. package/core/audits/resource-summary.d.ts +2 -0
  33. package/core/audits/resource-summary.js +5 -4
  34. package/core/audits/seo/is-crawlable.d.ts +2 -1
  35. package/core/audits/seo/link-text.js +12 -0
  36. package/core/audits/uses-rel-preload.d.ts +1 -5
  37. package/core/audits/uses-rel-preload.js +5 -15
  38. package/core/audits/work-during-interaction.d.ts +2 -2
  39. package/core/audits/work-during-interaction.js +2 -2
  40. package/core/computed/js-bundles.d.ts +1 -1
  41. package/core/computed/metrics/lantern-first-contentful-paint.d.ts +13 -82
  42. package/core/computed/metrics/lantern-first-contentful-paint.js +16 -178
  43. package/core/computed/metrics/lantern-first-meaningful-paint.d.ts +13 -12
  44. package/core/computed/metrics/lantern-first-meaningful-paint.js +11 -49
  45. package/core/computed/metrics/lantern-interactive.d.ts +13 -21
  46. package/core/computed/metrics/lantern-interactive.js +12 -84
  47. package/core/computed/metrics/lantern-largest-contentful-paint.d.ts +13 -25
  48. package/core/computed/metrics/lantern-largest-contentful-paint.js +13 -80
  49. package/core/computed/metrics/lantern-max-potential-fid.d.ts +13 -24
  50. package/core/computed/metrics/lantern-max-potential-fid.js +12 -64
  51. package/core/computed/metrics/lantern-metric.d.ts +14 -18
  52. package/core/computed/metrics/lantern-metric.js +34 -30
  53. package/core/computed/metrics/lantern-speed-index.d.ts +13 -32
  54. package/core/computed/metrics/lantern-speed-index.js +13 -116
  55. package/core/computed/metrics/lantern-total-blocking-time.d.ts +13 -25
  56. package/core/computed/metrics/lantern-total-blocking-time.js +10 -94
  57. package/core/computed/metrics/metric.js +1 -3
  58. package/core/computed/module-duplication.d.ts +1 -1
  59. package/core/computed/navigation-insights.d.ts +36 -0
  60. package/core/computed/navigation-insights.js +35 -0
  61. package/core/computed/page-dependency-graph.js +3 -7
  62. package/core/computed/resource-summary.d.ts +10 -12
  63. package/core/computed/resource-summary.js +12 -19
  64. package/core/computed/trace-engine-result.d.ts +16 -3
  65. package/core/computed/trace-engine-result.js +19 -14
  66. package/core/computed/unused-css.d.ts +3 -1
  67. package/core/computed/unused-css.js +6 -5
  68. package/core/config/config-helpers.js +0 -4
  69. package/core/config/constants.js +0 -1
  70. package/core/config/default-config.js +63 -142
  71. package/core/config/experimental-config.js +11 -0
  72. package/core/config/filters.js +0 -1
  73. package/core/gather/driver/navigation.js +4 -1
  74. package/core/gather/driver/prepare.js +1 -1
  75. package/core/gather/driver/target-manager.js +4 -3
  76. package/core/gather/driver/wait-for-condition.js +2 -3
  77. package/core/gather/driver.d.ts +12 -0
  78. package/core/gather/driver.js +27 -0
  79. package/core/gather/gatherers/accessibility.js +4 -6
  80. package/core/gather/gatherers/css-usage.d.ts +0 -21
  81. package/core/gather/gatherers/css-usage.js +9 -119
  82. package/core/gather/gatherers/root-causes.d.ts +2 -2
  83. package/core/gather/gatherers/root-causes.js +6 -5
  84. package/core/gather/gatherers/stylesheets.d.ts +26 -0
  85. package/core/gather/gatherers/stylesheets.js +138 -0
  86. package/core/gather/gatherers/trace-elements.d.ts +2 -12
  87. package/core/gather/gatherers/trace-elements.js +2 -21
  88. package/core/gather/navigation-runner.js +3 -1
  89. package/core/gather/session.d.ts +8 -0
  90. package/core/gather/session.js +14 -1
  91. package/core/lib/emulation.js +2 -2
  92. package/core/lib/i18n/i18n.d.ts +0 -1
  93. package/core/lib/i18n/i18n.js +0 -2
  94. package/core/lib/lantern/cpu-node.d.ts +7 -1
  95. package/core/lib/lantern/cpu-node.js +12 -2
  96. package/core/lib/lantern/lantern-error.d.ts +8 -0
  97. package/core/lib/lantern/lantern-error.js +9 -0
  98. package/core/lib/lantern/metric.js +2 -6
  99. package/core/lib/lantern/metrics/first-contentful-paint.d.ts +79 -0
  100. package/core/lib/lantern/metrics/first-contentful-paint.js +200 -0
  101. package/core/lib/lantern/metrics/first-meaningful-paint.d.ts +6 -0
  102. package/core/lib/lantern/metrics/first-meaningful-paint.js +64 -0
  103. package/core/lib/lantern/metrics/interactive.d.ts +26 -0
  104. package/core/lib/lantern/metrics/interactive.js +112 -0
  105. package/core/lib/lantern/metrics/largest-contentful-paint.d.ts +19 -0
  106. package/core/lib/lantern/metrics/largest-contentful-paint.js +108 -0
  107. package/core/lib/lantern/metrics/max-potential-fid.d.ts +30 -0
  108. package/core/lib/lantern/metrics/max-potential-fid.js +92 -0
  109. package/core/lib/lantern/metrics/speed-index.d.ts +38 -0
  110. package/core/lib/lantern/metrics/speed-index.js +144 -0
  111. package/core/lib/lantern/metrics/total-blocking-time.d.ts +31 -0
  112. package/core/lib/lantern/metrics/total-blocking-time.js +128 -0
  113. package/core/lib/lantern/network-node.js +28 -4
  114. package/core/lib/lantern/page-dependency-graph.d.ts +4 -4
  115. package/core/lib/lantern/page-dependency-graph.js +19 -7
  116. package/core/lib/lantern/simulator/connection-pool.d.ts +2 -12
  117. package/core/lib/lantern/simulator/connection-pool.js +3 -22
  118. package/core/lib/lantern/simulator/network-analyzer.js +1 -12
  119. package/core/lib/lantern/simulator/simulator.d.ts +2 -4
  120. package/core/lib/lantern/simulator/simulator.js +7 -14
  121. package/core/lib/lantern/types/lantern.d.ts +5 -3
  122. package/core/lib/lantern-trace-saver.js +0 -1
  123. package/core/lib/lh-error.d.ts +9 -0
  124. package/core/lib/lh-error.js +13 -3
  125. package/core/lib/lighthouse-compatibility.js +53 -10
  126. package/core/lib/navigation-error.js +3 -0
  127. package/core/lib/network-request.d.ts +1 -0
  128. package/core/lib/network-request.js +28 -0
  129. package/core/runner.js +18 -25
  130. package/dist/report/bundle.esm.js +11 -112
  131. package/dist/report/flow.js +16 -117
  132. package/dist/report/standalone.js +12 -113
  133. package/flow-report/src/help-dialog.tsx +0 -1
  134. package/flow-report/src/i18n/i18n.d.ts +0 -4
  135. package/flow-report/src/i18n/ui-strings.d.ts +0 -1
  136. package/flow-report/src/i18n/ui-strings.js +0 -2
  137. package/flow-report/src/summary/category.tsx +10 -12
  138. package/package.json +5 -5
  139. package/readme.md +4 -4
  140. package/report/assets/styles.css +1 -60
  141. package/report/assets/templates.html +0 -95
  142. package/report/renderer/category-renderer.js +1 -1
  143. package/report/renderer/components.d.ts +2 -2
  144. package/report/renderer/components.js +2 -103
  145. package/report/renderer/dom.d.ts +1 -1
  146. package/report/renderer/dom.js +1 -1
  147. package/report/renderer/performance-category-renderer.d.ts +0 -7
  148. package/report/renderer/performance-category-renderer.js +1 -32
  149. package/report/renderer/report-renderer.js +3 -13
  150. package/report/renderer/report-ui-features.js +1 -1
  151. package/report/renderer/report-utils.d.ts +0 -1
  152. package/report/renderer/report-utils.js +13 -13
  153. package/shared/localization/locales/ar-XB.json +62 -329
  154. package/shared/localization/locales/ar.json +62 -329
  155. package/shared/localization/locales/bg.json +62 -329
  156. package/shared/localization/locales/ca.json +62 -329
  157. package/shared/localization/locales/cs.json +62 -329
  158. package/shared/localization/locales/da.json +62 -329
  159. package/shared/localization/locales/de.json +62 -329
  160. package/shared/localization/locales/el.json +62 -329
  161. package/shared/localization/locales/en-GB.json +62 -329
  162. package/shared/localization/locales/en-US.json +41 -272
  163. package/shared/localization/locales/en-XA.json +62 -329
  164. package/shared/localization/locales/en-XL.json +41 -272
  165. package/shared/localization/locales/es-419.json +62 -329
  166. package/shared/localization/locales/es.json +62 -329
  167. package/shared/localization/locales/fi.json +62 -329
  168. package/shared/localization/locales/fil.json +61 -328
  169. package/shared/localization/locales/fr.json +62 -329
  170. package/shared/localization/locales/he.json +62 -329
  171. package/shared/localization/locales/hi.json +62 -329
  172. package/shared/localization/locales/hr.json +63 -330
  173. package/shared/localization/locales/hu.json +62 -329
  174. package/shared/localization/locales/id.json +62 -329
  175. package/shared/localization/locales/it.json +62 -329
  176. package/shared/localization/locales/ja.json +62 -329
  177. package/shared/localization/locales/ko.json +62 -329
  178. package/shared/localization/locales/lt.json +62 -329
  179. package/shared/localization/locales/lv.json +62 -329
  180. package/shared/localization/locales/nl.json +62 -329
  181. package/shared/localization/locales/no.json +62 -329
  182. package/shared/localization/locales/pl.json +61 -328
  183. package/shared/localization/locales/pt-PT.json +62 -329
  184. package/shared/localization/locales/pt.json +64 -331
  185. package/shared/localization/locales/ro.json +62 -329
  186. package/shared/localization/locales/ru.json +62 -329
  187. package/shared/localization/locales/sk.json +62 -329
  188. package/shared/localization/locales/sl.json +62 -329
  189. package/shared/localization/locales/sr-Latn.json +62 -329
  190. package/shared/localization/locales/sr.json +62 -329
  191. package/shared/localization/locales/sv.json +62 -329
  192. package/shared/localization/locales/ta.json +61 -328
  193. package/shared/localization/locales/te.json +62 -329
  194. package/shared/localization/locales/th.json +62 -329
  195. package/shared/localization/locales/tr.json +62 -329
  196. package/shared/localization/locales/uk.json +62 -329
  197. package/shared/localization/locales/vi.json +61 -328
  198. package/shared/localization/locales/zh-HK.json +62 -329
  199. package/shared/localization/locales/zh-TW.json +61 -328
  200. package/shared/localization/locales/zh.json +62 -329
  201. package/tsconfig.json +1 -3
  202. package/types/artifacts.d.ts +21 -110
  203. package/types/audit.d.ts +0 -10
  204. package/types/config.d.ts +0 -1
  205. package/types/externs.d.ts +0 -2
  206. package/types/gatherer.d.ts +3 -0
  207. package/types/internal/smokehouse.d.ts +1 -1
  208. package/types/lh.d.ts +0 -2
  209. package/types/lhr/audit-details.d.ts +9 -4
  210. package/types/lhr/lhr.d.ts +0 -4
  211. package/types/lhr/settings.d.ts +0 -4
  212. package/core/audits/accessibility/duplicate-id-active.js +0 -42
  213. package/core/audits/content-width.d.ts +0 -17
  214. package/core/audits/content-width.js +0 -76
  215. package/core/audits/installable-manifest.d.ts +0 -111
  216. package/core/audits/installable-manifest.js +0 -248
  217. package/core/audits/layout-shift-elements.d.ts +0 -16
  218. package/core/audits/layout-shift-elements.js +0 -101
  219. package/core/audits/manual/pwa-cross-browser.d.ts +0 -12
  220. package/core/audits/manual/pwa-cross-browser.js +0 -40
  221. package/core/audits/manual/pwa-each-page-has-url.d.ts +0 -12
  222. package/core/audits/manual/pwa-each-page-has-url.js +0 -38
  223. package/core/audits/manual/pwa-page-transitions.d.ts +0 -12
  224. package/core/audits/manual/pwa-page-transitions.js +0 -38
  225. package/core/audits/maskable-icon.d.ts +0 -25
  226. package/core/audits/maskable-icon.js +0 -70
  227. package/core/audits/multi-check-audit.d.ts +0 -28
  228. package/core/audits/multi-check-audit.js +0 -82
  229. package/core/audits/no-unload-listeners.d.ts +0 -16
  230. package/core/audits/no-unload-listeners.js +0 -86
  231. package/core/audits/performance-budget.d.ts +0 -39
  232. package/core/audits/performance-budget.js +0 -154
  233. package/core/audits/script-elements-test-audit.d.ts +0 -14
  234. package/core/audits/script-elements-test-audit.js +0 -29
  235. package/core/audits/seo/plugins.d.ts +0 -15
  236. package/core/audits/seo/plugins.js +0 -150
  237. package/core/audits/seo/tap-targets.d.ts +0 -50
  238. package/core/audits/seo/tap-targets.js +0 -352
  239. package/core/audits/splash-screen.d.ts +0 -37
  240. package/core/audits/splash-screen.js +0 -98
  241. package/core/audits/themed-omnibox.d.ts +0 -42
  242. package/core/audits/themed-omnibox.js +0 -102
  243. package/core/audits/timing-budget.d.ts +0 -43
  244. package/core/audits/timing-budget.js +0 -175
  245. package/core/computed/manifest-values.d.ts +0 -24
  246. package/core/computed/manifest-values.js +0 -136
  247. package/core/config/budget.d.ts +0 -74
  248. package/core/config/budget.js +0 -340
  249. package/core/config/metrics-to-audits.d.ts +0 -19
  250. package/core/config/metrics-to-audits.js +0 -62
  251. package/core/gather/driver/service-workers.d.ts +0 -16
  252. package/core/gather/driver/service-workers.js +0 -52
  253. package/core/gather/gatherers/dobetterweb/tags-blocking-first-paint.d.ts +0 -47
  254. package/core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js +0 -233
  255. package/core/gather/gatherers/global-listeners.d.ts +0 -27
  256. package/core/gather/gatherers/global-listeners.js +0 -108
  257. package/core/gather/gatherers/installability-errors.d.ts +0 -17
  258. package/core/gather/gatherers/installability-errors.js +0 -56
  259. package/core/gather/gatherers/script-elements.d.ts +0 -21
  260. package/core/gather/gatherers/script-elements.js +0 -100
  261. package/core/gather/gatherers/seo/embedded-content.d.ts +0 -10
  262. package/core/gather/gatherers/seo/embedded-content.js +0 -63
  263. package/core/gather/gatherers/seo/tap-targets.d.ts +0 -21
  264. package/core/gather/gatherers/seo/tap-targets.js +0 -389
  265. package/core/gather/gatherers/service-worker.d.ts +0 -10
  266. package/core/gather/gatherers/service-worker.js +0 -32
  267. package/core/gather/gatherers/web-app-manifest.d.ts +0 -32
  268. package/core/gather/gatherers/web-app-manifest.js +0 -106
  269. package/report/renderer/pwa-category-renderer.d.ts +0 -55
  270. package/report/renderer/pwa-category-renderer.js +0 -184
  271. package/third-party/chromium-synchronization/installability-errors-test.js +0 -79
  272. package/types/lhr/budget.d.ts +0 -60
@@ -1,150 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2018 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
-
7
- import {Audit} from '../audit.js';
8
- import * as i18n from '../../lib/i18n/i18n.js';
9
-
10
- const JAVA_APPLET_TYPE = 'application/x-java-applet';
11
- const JAVA_BEAN_TYPE = 'application/x-java-bean';
12
- const TYPE_BLOCKLIST = new Set([
13
- 'application/x-shockwave-flash',
14
- // See https://docs.oracle.com/cd/E19683-01/816-0378/using_tags/index.html
15
- JAVA_APPLET_TYPE,
16
- JAVA_BEAN_TYPE,
17
- // See https://msdn.microsoft.com/es-es/library/cc265156(v=vs.95).aspx
18
- 'application/x-silverlight',
19
- 'application/x-silverlight-2',
20
- ]);
21
- const FILE_EXTENSION_BLOCKLIST = new Set([
22
- 'swf',
23
- 'flv',
24
- 'class',
25
- 'xap',
26
- ]);
27
- const SOURCE_PARAMS = new Set([
28
- 'code',
29
- 'movie',
30
- 'source',
31
- 'src',
32
- ]);
33
-
34
- const UIStrings = {
35
- /** Title of a Lighthouse audit that provides detail on the browser plugins used by the page. This descriptive title is shown when there is no plugin content on the page that would restrict search indexing. */
36
- title: 'Document avoids plugins',
37
- /** Descriptive title of a Lighthouse audit that provides detail on the browser plugins used by the page. This title is shown when there is plugin content on the page. */
38
- failureTitle: 'Document uses plugins',
39
- /** Description of a Lighthouse audit that tells the user *why* they need to avoid using browser plugins in their content. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
40
- description: 'Search engines can\'t index plugin content, and ' +
41
- 'many devices restrict plugins or don\'t support them. ' +
42
- '[Learn more about avoiding plugins](https://developer.chrome.com/docs/lighthouse/seo/plugins/).',
43
- };
44
-
45
- const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
46
-
47
- /**
48
- * Verifies if given MIME type matches any known plugin MIME type
49
- * @param {string} type
50
- * @return {boolean}
51
- */
52
- function isPluginType(type) {
53
- type = type.trim().toLowerCase();
54
-
55
- return TYPE_BLOCKLIST.has(type) ||
56
- type.startsWith(JAVA_APPLET_TYPE) || // e.g. "application/x-java-applet;jpi-version=1.4"
57
- type.startsWith(JAVA_BEAN_TYPE);
58
- }
59
-
60
- /**
61
- * Verifies if given url points to a file that has a known plugin extension
62
- * @param {string} url
63
- * @return {boolean}
64
- */
65
- function isPluginURL(url) {
66
- try {
67
- // in order to support relative URLs we need to provied a base URL
68
- const filePath = new URL(url, 'http://example.com').pathname;
69
- const parts = filePath.split('.');
70
-
71
- if (parts.length < 2) {
72
- return false;
73
- }
74
- const part = parts[parts.length - 1];
75
- return FILE_EXTENSION_BLOCKLIST.has(part.trim().toLowerCase());
76
- } catch (e) {
77
- return false;
78
- }
79
- }
80
-
81
- class Plugins extends Audit {
82
- /**
83
- * @return {LH.Audit.Meta}
84
- */
85
- static get meta() {
86
- return {
87
- id: 'plugins',
88
- title: str_(UIStrings.title),
89
- failureTitle: str_(UIStrings.failureTitle),
90
- description: str_(UIStrings.description),
91
- requiredArtifacts: ['EmbeddedContent'],
92
- };
93
- }
94
-
95
- /**
96
- * @param {LH.Artifacts} artifacts
97
- * @return {LH.Audit.Product}
98
- */
99
- static audit(artifacts) {
100
- const plugins = artifacts.EmbeddedContent
101
- .filter(item => {
102
- if (item.tagName === 'APPLET') {
103
- return true;
104
- }
105
-
106
- if (
107
- (item.tagName === 'EMBED' || item.tagName === 'OBJECT') &&
108
- item.type &&
109
- isPluginType(item.type)
110
- ) {
111
- return true;
112
- }
113
-
114
- const embedSrc = item.src || item.code;
115
- if (item.tagName === 'EMBED' && embedSrc && isPluginURL(embedSrc)) {
116
- return true;
117
- }
118
-
119
- if (item.tagName === 'OBJECT' && item.data && isPluginURL(item.data)) {
120
- return true;
121
- }
122
-
123
- const failingParams = item.params.filter(param =>
124
- SOURCE_PARAMS.has(param.name.trim().toLowerCase()) && isPluginURL(param.value)
125
- );
126
-
127
- return failingParams.length > 0;
128
- })
129
- .map(plugin => {
130
- return {
131
- source: Audit.makeNodeItem(plugin.node),
132
- };
133
- });
134
-
135
- /** @type {LH.Audit.Details.Table['headings']} */
136
- const headings = [
137
- {key: 'source', valueType: 'code', label: 'Element source'},
138
- ];
139
-
140
- const details = Audit.makeTableDetails(headings, plugins);
141
-
142
- return {
143
- score: Number(plugins.length === 0),
144
- details,
145
- };
146
- }
147
- }
148
-
149
- export default Plugins;
150
- export {UIStrings};
@@ -1,50 +0,0 @@
1
- export default TapTargets;
2
- export type ClientRectOverlapFailure = {
3
- overlapScoreRatio: number;
4
- tapTargetScore: number;
5
- overlappingTargetScore: number;
6
- };
7
- export type TapTargetOverlapFailure = {
8
- overlapScoreRatio: number;
9
- tapTargetScore: number;
10
- overlappingTargetScore: number;
11
- tapTarget: LH.Artifacts.TapTarget;
12
- overlappingTarget: LH.Artifacts.TapTarget;
13
- };
14
- export type BoundedTapTarget = {
15
- paddedBoundsRect: LH.Artifacts.Rect;
16
- tapTarget: LH.Artifacts.TapTarget;
17
- };
18
- export type TapTargetTableItem = {
19
- tapTarget: LH.Audit.Details.NodeValue;
20
- overlappingTarget: LH.Audit.Details.NodeValue;
21
- size: string;
22
- overlapScoreRatio: number;
23
- height: number;
24
- width: number;
25
- tapTargetScore: number;
26
- overlappingTargetScore: number;
27
- };
28
- declare class TapTargets extends Audit {
29
- /**
30
- * @param {LH.Artifacts} artifacts
31
- * @param {LH.Audit.Context} context
32
- * @return {Promise<LH.Audit.Product>}
33
- */
34
- static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
35
- }
36
- declare namespace TapTargets {
37
- export { FINGER_SIZE_PX };
38
- }
39
- export namespace UIStrings {
40
- const title: string;
41
- const failureTitle: string;
42
- const description: string;
43
- const tapTargetHeader: string;
44
- const overlappingTargetHeader: string;
45
- const explanationViewportMetaNotOptimized: string;
46
- const displayValue: string;
47
- }
48
- import { Audit } from '../audit.js';
49
- declare const FINGER_SIZE_PX: 48;
50
- //# sourceMappingURL=tap-targets.d.ts.map
@@ -1,352 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2018 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
-
7
- /**
8
- * @fileoverview Checks that links, buttons, etc. are sufficiently large and that there's
9
- * no other tap target that's too close so that the user might accidentally tap on.
10
- */
11
-
12
- import {Audit} from '../audit.js';
13
- import {ViewportMeta} from '../../computed/viewport-meta.js';
14
- import {
15
- rectsTouchOrOverlap,
16
- getRectOverlapArea,
17
- getRectAtCenter,
18
- allRectsContainedWithinEachOther,
19
- getLargestRect,
20
- getBoundingRectWithPadding,
21
- } from '../../lib/rect-helpers.js';
22
- import {getTappableRectsFromClientRects} from '../../lib/tappable-rects.js';
23
- import * as i18n from '../../lib/i18n/i18n.js';
24
-
25
- const UIStrings = {
26
- /** Title of a Lighthouse audit that provides detail on whether tap targets (like buttons and links) on a page are big enough so they can easily be tapped on a mobile device. This descriptive title is shown when tap targets are easy to tap on. */
27
- title: 'Tap targets are sized appropriately',
28
- /** Descriptive title of a Lighthouse audit that provides detail on whether tap targets (like buttons and links) on a page are big enough so they can easily be tapped on a mobile device. This descriptive title is shown when tap targets are not easy to tap on. */
29
- failureTitle: 'Tap targets are not sized appropriately',
30
- /** Description of a Lighthouse audit that tells the user why buttons and links need to be big enough and what 'big enough' means. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
31
- description: 'Interactive elements like buttons and links should be large enough (48x48px), or have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more about tap targets](https://developer.chrome.com/docs/lighthouse/seo/tap-targets/).',
32
- /** Label of a table column that identifies tap targets (like buttons and links) that have failed the audit and aren't easy to tap on. */
33
- tapTargetHeader: 'Tap Target',
34
- /** Label of a table column that identifies a tap target (like a link or button) that overlaps with another tap target. */
35
- overlappingTargetHeader: 'Overlapping Target',
36
- /** Explanatory message stating that there was a failure in an audit caused by the viewport meta tag not being optimized for mobile screens, which caused tap targets like buttons and links to be too small to tap on. */
37
- /* eslint-disable-next-line max-len */
38
- explanationViewportMetaNotOptimized: 'Tap targets are too small because there\'s no viewport meta tag optimized for mobile screens',
39
- /** Explanatory message stating that a certain percentage of the tap targets (like buttons and links) on the page are of an appropriately large size. */
40
- displayValue: '{decimalProportion, number, percent} appropriately sized tap targets',
41
- };
42
-
43
- const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
44
-
45
- const FINGER_SIZE_PX = 48;
46
- // Ratio of the finger area tapping on an unintended element
47
- // to the finger area tapping on the intended element
48
- const MAX_ACCEPTABLE_OVERLAP_SCORE_RATIO = 0.25;
49
-
50
- /**
51
- * Returns a tap target augmented with a bounding rect for quick overlapping
52
- * rejections. Rect contains all the client rects, padded to half FINGER_SIZE_PX.
53
- * @param {LH.Artifacts.TapTarget[]} targets
54
- * @return {BoundedTapTarget[]}
55
- */
56
- function getBoundedTapTargets(targets) {
57
- return targets.map(tapTarget => {
58
- return {
59
- tapTarget,
60
- paddedBoundsRect: getBoundingRectWithPadding(tapTarget.clientRects, FINGER_SIZE_PX),
61
- };
62
- });
63
- }
64
-
65
- /**
66
- * @param {LH.Artifacts.Rect} cr
67
- */
68
- function clientRectBelowMinimumSize(cr) {
69
- return cr.width < FINGER_SIZE_PX || cr.height < FINGER_SIZE_PX;
70
- }
71
-
72
- /**
73
- * A target is "too small" if none of its clientRects are at least the size of a finger.
74
- * @param {BoundedTapTarget[]} targets
75
- * @return {BoundedTapTarget[]}
76
- */
77
- function getTooSmallTargets(targets) {
78
- return targets.filter(target => {
79
- return target.tapTarget.clientRects.every(clientRectBelowMinimumSize);
80
- });
81
- }
82
-
83
- /**
84
- * @param {BoundedTapTarget[]} tooSmallTargets
85
- * @param {BoundedTapTarget[]} allTargets
86
- * @return {TapTargetOverlapFailure[]}
87
- */
88
- function getAllOverlapFailures(tooSmallTargets, allTargets) {
89
- /** @type {TapTargetOverlapFailure[]} */
90
- const failures = [];
91
-
92
- tooSmallTargets.forEach(target => {
93
- // Convert client rects to unique tappable areas from a user's perspective
94
- const tappableRects = getTappableRectsFromClientRects(target.tapTarget.clientRects);
95
-
96
- for (const maybeOverlappingTarget of allTargets) {
97
- if (maybeOverlappingTarget === target) {
98
- // Checking the same target with itself, skip.
99
- continue;
100
- }
101
-
102
- if (!rectsTouchOrOverlap(target.paddedBoundsRect, maybeOverlappingTarget.paddedBoundsRect)) {
103
- // Bounding boxes (padded with half FINGER_SIZE_PX) don't overlap, skip.
104
- continue;
105
- }
106
-
107
- if (target.tapTarget.href === maybeOverlappingTarget.tapTarget.href) {
108
- const isHttpOrHttpsLink = /https?:\/\//.test(target.tapTarget.href);
109
- if (isHttpOrHttpsLink) {
110
- // No overlap because same target action, skip.
111
- continue;
112
- }
113
- }
114
-
115
- const maybeOverlappingRects = maybeOverlappingTarget.tapTarget.clientRects;
116
- if (allRectsContainedWithinEachOther(tappableRects, maybeOverlappingRects)) {
117
- // If one tap target is fully contained within the other that's
118
- // probably intentional (e.g. an item with a delete button inside).
119
- // We'll miss some problems because of this, but that's better
120
- // than falsely reporting a failure.
121
- continue;
122
- }
123
-
124
- const rectFailure = getOverlapFailureForTargetPair(tappableRects, maybeOverlappingRects);
125
- if (rectFailure) {
126
- failures.push({
127
- ...rectFailure,
128
- tapTarget: target.tapTarget,
129
- overlappingTarget: maybeOverlappingTarget.tapTarget,
130
- });
131
- }
132
- }
133
- });
134
-
135
- return failures;
136
- }
137
-
138
- /**
139
- * @param {LH.Artifacts.Rect[]} tappableRects
140
- * @param {LH.Artifacts.Rect[]} maybeOverlappingRects
141
- * @return {ClientRectOverlapFailure | null}
142
- */
143
- function getOverlapFailureForTargetPair(tappableRects, maybeOverlappingRects) {
144
- /** @type ClientRectOverlapFailure | null */
145
- let greatestFailure = null;
146
-
147
- for (const targetCR of tappableRects) {
148
- const fingerRect = getRectAtCenter(targetCR, FINGER_SIZE_PX);
149
- // Score indicates how much of the finger area overlaps each target when the user
150
- // taps on the center of targetCR
151
- const tapTargetScore = getRectOverlapArea(fingerRect, targetCR);
152
-
153
- for (const maybeOverlappingCR of maybeOverlappingRects) {
154
- const overlappingTargetScore = getRectOverlapArea(fingerRect, maybeOverlappingCR);
155
-
156
- const overlapScoreRatio = overlappingTargetScore / tapTargetScore;
157
- if (overlapScoreRatio < MAX_ACCEPTABLE_OVERLAP_SCORE_RATIO) {
158
- // low score means it's clear that the user tried to tap on the targetCR,
159
- // rather than the other tap target client rect
160
- continue;
161
- }
162
-
163
- // only update our state if this was the biggest failure we've seen for this pair
164
- if (!greatestFailure || overlapScoreRatio > greatestFailure.overlapScoreRatio) {
165
- greatestFailure = {
166
- overlapScoreRatio,
167
- tapTargetScore,
168
- overlappingTargetScore,
169
- };
170
- }
171
- }
172
- }
173
- return greatestFailure;
174
- }
175
-
176
- /**
177
- * Only report one failure if two targets overlap each other
178
- * @param {TapTargetOverlapFailure[]} overlapFailures
179
- * @return {TapTargetOverlapFailure[]}
180
- */
181
- function mergeSymmetricFailures(overlapFailures) {
182
- /** @type TapTargetOverlapFailure[] */
183
- const failuresAfterMerging = [];
184
-
185
- overlapFailures.forEach((failure, overlapFailureIndex) => {
186
- const symmetricFailure = overlapFailures.find(f =>
187
- f.tapTarget === failure.overlappingTarget &&
188
- f.overlappingTarget === failure.tapTarget
189
- );
190
-
191
- if (!symmetricFailure) {
192
- failuresAfterMerging.push(failure);
193
- return;
194
- }
195
-
196
- const {overlapScoreRatio: failureOSR} = failure;
197
- const {overlapScoreRatio: symmetricOSR} = symmetricFailure;
198
- // Push if:
199
- // - the current failure has a higher OSR
200
- // - OSRs are the same, and the current failure comes before its symmetric partner in the list
201
- // Otherwise do nothing and let the symmetric partner be pushed later.
202
- if (failureOSR > symmetricOSR || (
203
- failureOSR === symmetricOSR &&
204
- overlapFailureIndex < overlapFailures.indexOf(symmetricFailure)
205
- )) {
206
- failuresAfterMerging.push(failure);
207
- }
208
- });
209
-
210
- return failuresAfterMerging;
211
- }
212
-
213
- /**
214
- * @param {TapTargetOverlapFailure[]} overlapFailures
215
- * @return {TapTargetTableItem[]}
216
- */
217
- function getTableItems(overlapFailures) {
218
- const tableItems = overlapFailures.map(failure => {
219
- const largestCR = getLargestRect(failure.tapTarget.clientRects);
220
- const width = Math.floor(largestCR.width);
221
- const height = Math.floor(largestCR.height);
222
- const size = width + 'x' + height;
223
- return {
224
- tapTarget: Audit.makeNodeItem(failure.tapTarget.node),
225
- overlappingTarget: Audit.makeNodeItem(failure.overlappingTarget.node),
226
- tapTargetScore: failure.tapTargetScore,
227
- overlappingTargetScore: failure.overlappingTargetScore,
228
- overlapScoreRatio: failure.overlapScoreRatio,
229
- size,
230
- width,
231
- height,
232
- };
233
- });
234
-
235
- tableItems.sort((a, b) => {
236
- return b.overlapScoreRatio - a.overlapScoreRatio;
237
- });
238
-
239
- return tableItems;
240
- }
241
-
242
- class TapTargets extends Audit {
243
- /**
244
- * @return {LH.Audit.Meta}
245
- */
246
- static get meta() {
247
- return {
248
- id: 'tap-targets',
249
- title: str_(UIStrings.title),
250
- failureTitle: str_(UIStrings.failureTitle),
251
- description: str_(UIStrings.description),
252
- requiredArtifacts: ['MetaElements', 'TapTargets'],
253
- };
254
- }
255
-
256
- /**
257
- * @param {LH.Artifacts} artifacts
258
- * @param {LH.Audit.Context} context
259
- * @return {Promise<LH.Audit.Product>}
260
- */
261
- static async audit(artifacts, context) {
262
- if (context.settings.formFactor === 'desktop') {
263
- // Tap target sizes aren't important for desktop SEO, so disable the audit there.
264
- // On desktop people also tend to have more precise pointing devices than fingers.
265
- return {
266
- score: 1,
267
- notApplicable: true,
268
- };
269
- }
270
-
271
- const viewportMeta = await ViewportMeta.request(artifacts.MetaElements, context);
272
- if (!viewportMeta.isMobileOptimized) {
273
- return {
274
- score: 0,
275
- explanation: str_(UIStrings.explanationViewportMetaNotOptimized),
276
- };
277
- }
278
-
279
- // Augment the targets with padded bounding rects for quick intersection testing.
280
- const boundedTapTargets = getBoundedTapTargets(artifacts.TapTargets);
281
-
282
- const tooSmallTargets = getTooSmallTargets(boundedTapTargets);
283
- const overlapFailures = getAllOverlapFailures(tooSmallTargets, boundedTapTargets);
284
- const overlapFailuresForDisplay = mergeSymmetricFailures(overlapFailures);
285
- const tableItems = getTableItems(overlapFailuresForDisplay);
286
-
287
- /** @type {LH.Audit.Details.Table['headings']} */
288
- const headings = [
289
- {key: 'tapTarget', valueType: 'node', label: str_(UIStrings.tapTargetHeader)},
290
- {key: 'size', valueType: 'text', label: str_(i18n.UIStrings.columnSize)},
291
- {key: 'overlappingTarget', valueType: 'node', label: str_(UIStrings.overlappingTargetHeader)},
292
- ];
293
-
294
- const details = Audit.makeTableDetails(headings, tableItems);
295
-
296
- const tapTargetCount = artifacts.TapTargets.length;
297
- const failingTapTargetCount = new Set(overlapFailures.map(f => f.tapTarget)).size;
298
- const passingTapTargetCount = tapTargetCount - failingTapTargetCount;
299
-
300
- let score = 1;
301
- let passingTapTargetRatio = 1;
302
- if (failingTapTargetCount > 0) {
303
- passingTapTargetRatio = (passingTapTargetCount / tapTargetCount);
304
- // If there are any failures then we don't want the audit to pass,
305
- // so keep the score below 90.
306
- score = passingTapTargetRatio * 0.89;
307
- }
308
- const displayValue = str_(UIStrings.displayValue, {decimalProportion: passingTapTargetRatio});
309
-
310
- return {
311
- score,
312
- details,
313
- displayValue,
314
- };
315
- }
316
- }
317
-
318
- TapTargets.FINGER_SIZE_PX = FINGER_SIZE_PX;
319
-
320
- export default TapTargets;
321
- export {UIStrings};
322
-
323
-
324
- /** @typedef {{
325
- overlapScoreRatio: number;
326
- tapTargetScore: number;
327
- overlappingTargetScore: number;
328
- }} ClientRectOverlapFailure */
329
-
330
- /** @typedef {{
331
- overlapScoreRatio: number;
332
- tapTargetScore: number;
333
- overlappingTargetScore: number;
334
- tapTarget: LH.Artifacts.TapTarget;
335
- overlappingTarget: LH.Artifacts.TapTarget;
336
- }} TapTargetOverlapFailure */
337
-
338
- /** @typedef {{
339
- paddedBoundsRect: LH.Artifacts.Rect;
340
- tapTarget: LH.Artifacts.TapTarget;
341
- }} BoundedTapTarget */
342
-
343
- /** @typedef {{
344
- tapTarget: LH.Audit.Details.NodeValue;
345
- overlappingTarget: LH.Audit.Details.NodeValue;
346
- size: string;
347
- overlapScoreRatio: number;
348
- height: number;
349
- width: number;
350
- tapTargetScore: number;
351
- overlappingTargetScore: number;
352
- }} TapTargetTableItem */
@@ -1,37 +0,0 @@
1
- export default SplashScreen;
2
- /**
3
- * @fileoverview
4
- * Audits if a page is configured for a custom splash screen when launched
5
- * https://github.com/GoogleChrome/lighthouse/issues/24
6
- *
7
- * Requirements:
8
- * * manifest is not empty
9
- * * manifest has a valid name
10
- * * manifest has a valid background_color
11
- * * manifest has a valid theme_color
12
- * * manifest contains icon that's a png and size >= 512px
13
- */
14
- declare class SplashScreen extends MultiCheckAudit {
15
- /**
16
- * @param {LH.Artifacts.ManifestValues} manifestValues
17
- * @param {Array<string>} failures
18
- */
19
- static assessManifest(manifestValues: LH.Artifacts.ManifestValues, failures: Array<string>): void;
20
- /**
21
- * @param {LH.Artifacts} artifacts
22
- * @param {LH.Audit.Context} context
23
- * @return {Promise<{failures: Array<string>, manifestValues: LH.Artifacts.ManifestValues}>}
24
- */
25
- static audit_(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<{
26
- failures: Array<string>;
27
- manifestValues: LH.Artifacts.ManifestValues;
28
- }>;
29
- }
30
- export namespace UIStrings {
31
- const title: string;
32
- const failureTitle: string;
33
- const description: string;
34
- }
35
- import MultiCheckAudit from './multi-check-audit.js';
36
- import { ManifestValues } from '../computed/manifest-values.js';
37
- //# sourceMappingURL=splash-screen.d.ts.map
@@ -1,98 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2017 Google LLC
4
- * SPDX-License-Identifier: Apache-2.0
5
- */
6
-
7
- import MultiCheckAudit from './multi-check-audit.js';
8
- import {ManifestValues} from '../computed/manifest-values.js';
9
- import * as i18n from '../lib/i18n/i18n.js';
10
-
11
- const UIStrings = {
12
- /** Title of a Lighthouse audit that provides detail on splash screens. This descriptive title is shown to users when the site has a custom splash screen. */
13
- title: 'Configured for a custom splash screen',
14
- /** Title of a Lighthouse audit that provides detail on splash screens. This descriptive title is shown to users when the site does not have a custom splash screen. */
15
- failureTitle: 'Is not configured for a custom splash screen',
16
- /** Description of a Lighthouse audit that tells the user why they should configure a custom splash screen. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
17
- description: 'A themed splash screen ensures a high-quality experience when ' +
18
- 'users launch your app from their homescreens. ' +
19
- '[Learn more about splash screens](https://developer.chrome.com/docs/lighthouse/pwa/splash-screen/).',
20
- };
21
-
22
- const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
23
-
24
- /**
25
- * @fileoverview
26
- * Audits if a page is configured for a custom splash screen when launched
27
- * https://github.com/GoogleChrome/lighthouse/issues/24
28
- *
29
- * Requirements:
30
- * * manifest is not empty
31
- * * manifest has a valid name
32
- * * manifest has a valid background_color
33
- * * manifest has a valid theme_color
34
- * * manifest contains icon that's a png and size >= 512px
35
- */
36
-
37
- class SplashScreen extends MultiCheckAudit {
38
- /**
39
- * @return {LH.Audit.Meta}
40
- */
41
- static get meta() {
42
- return {
43
- id: 'splash-screen',
44
- title: str_(UIStrings.title),
45
- failureTitle: str_(UIStrings.failureTitle),
46
- description: str_(UIStrings.description),
47
- supportedModes: ['navigation'],
48
- requiredArtifacts: ['WebAppManifest', 'InstallabilityErrors'],
49
- };
50
- }
51
-
52
- /**
53
- * @param {LH.Artifacts.ManifestValues} manifestValues
54
- * @param {Array<string>} failures
55
- */
56
- static assessManifest(manifestValues, failures) {
57
- if (manifestValues.isParseFailure && manifestValues.parseFailureReason) {
58
- failures.push(manifestValues.parseFailureReason);
59
- return;
60
- }
61
-
62
- const splashScreenCheckIds = [
63
- 'hasName',
64
- 'hasBackgroundColor',
65
- 'hasThemeColor',
66
- 'hasIconsAtLeast512px',
67
- ];
68
-
69
- manifestValues.allChecks
70
- .filter(item => splashScreenCheckIds.includes(item.id))
71
- .forEach(item => {
72
- if (!item.passing) {
73
- failures.push(item.failureText);
74
- }
75
- });
76
- }
77
-
78
- /**
79
- * @param {LH.Artifacts} artifacts
80
- * @param {LH.Audit.Context} context
81
- * @return {Promise<{failures: Array<string>, manifestValues: LH.Artifacts.ManifestValues}>}
82
- */
83
- static async audit_(artifacts, context) {
84
- /** @type {Array<string>} */
85
- const failures = [];
86
-
87
- const manifestValues = await ManifestValues.request(artifacts, context);
88
- SplashScreen.assessManifest(manifestValues, failures);
89
-
90
- return {
91
- failures,
92
- manifestValues,
93
- };
94
- }
95
- }
96
-
97
- export default SplashScreen;
98
- export {UIStrings};