lighthouse 9.5.0-dev.20230121 → 9.5.0-dev.20230123

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 (49) hide show
  1. package/core/audits/bf-cache.js +1 -1
  2. package/core/audits/screenshot-thumbnails.d.ts +2 -1
  3. package/core/audits/screenshot-thumbnails.js +14 -9
  4. package/core/computed/processed-navigation.d.ts +12 -6
  5. package/core/computed/processed-navigation.js +19 -6
  6. package/core/util.cjs +42 -9
  7. package/core/util.d.cts +114 -2
  8. package/dist/report/bundle.esm.js +199 -261
  9. package/dist/report/flow.js +23 -23
  10. package/dist/report/standalone.js +17 -17
  11. package/flow-report/assets/standalone-flow-template.html +1 -1
  12. package/flow-report/src/i18n/i18n.d.ts +103 -100
  13. package/flow-report/src/i18n/i18n.tsx +12 -8
  14. package/flow-report/src/sidebar/sidebar.tsx +1 -1
  15. package/flow-report/src/summary/category.tsx +1 -1
  16. package/flow-report/src/topbar.tsx +4 -28
  17. package/package.json +2 -2
  18. package/readme.md +1 -1
  19. package/report/assets/standalone-template.html +1 -1
  20. package/report/assets/styles.css +3 -3
  21. package/report/assets/templates.html +4 -28
  22. package/report/renderer/category-renderer.js +9 -9
  23. package/report/renderer/components.js +119 -202
  24. package/report/renderer/crc-details-renderer.js +4 -3
  25. package/report/renderer/{i18n.d.ts → i18n-formatter.d.ts} +3 -9
  26. package/report/renderer/{i18n.js → i18n-formatter.js} +2 -11
  27. package/report/renderer/performance-category-renderer.js +4 -4
  28. package/report/renderer/report-renderer.js +14 -18
  29. package/report/renderer/report-ui-features.js +6 -6
  30. package/report/renderer/snippet-renderer.js +1 -1
  31. package/report/renderer/util.d.ts +115 -3
  32. package/report/renderer/util.js +42 -9
  33. package/report/test/renderer/category-renderer-test.js +2 -2
  34. package/report/test/renderer/crc-details-renderer-test.js +2 -2
  35. package/report/test/renderer/details-renderer-test.js +2 -2
  36. package/report/test/renderer/dom-test.js +2 -2
  37. package/report/test/renderer/element-screenshot-renderer-test.js +2 -2
  38. package/report/test/renderer/{i18n-test.js → i18n-formatter-test.js} +15 -21
  39. package/report/test/renderer/performance-category-renderer-test.js +2 -2
  40. package/report/test/renderer/pwa-category-renderer-test.js +2 -2
  41. package/report/test/renderer/snippet-renderer-test.js +2 -2
  42. package/report/test/renderer/util-test.js +2 -2
  43. package/report/test-assets/lhr-3.0.0.json +2332 -0
  44. package/report/test-assets/lhr-4.3.0.json +4754 -0
  45. package/report/test-assets/lhr-5.0.0.json +5994 -0
  46. package/report/test-assets/lhr-6.0.0.json +7222 -0
  47. package/report/test-assets/lhr-8.5.0.json +8679 -0
  48. package/shared/localization/locales/en-US.json +1 -1
  49. package/shared/localization/locales/en-XL.json +1 -1
package/flow-report/assets/standalone-flow-template.html CHANGED
@@ -19,7 +19,7 @@ limitations under the License.
19
19
  <head>
20
20
  <meta charset="utf-8">
21
21
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
22
- <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
22
+ <link rel="icon" href='data:image/svg+xml;utf8,<svg 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="%23F63"/><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="%23FFA385"/><path fill="%23FF3" d="M20.5 10h7v7h-7z"/></svg>'>
23
23
  <title>Lighthouse Flow Report</title>
24
24
  <style>/*%%LIGHTHOUSE_FLOW_CSS%%*/</style>
25
25
  <style>body {margin: 0}</style>
package/flow-report/src/i18n/i18n.d.ts CHANGED
@@ -4,106 +4,109 @@
4
4
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
5
5
  */
6
6
  import { FunctionComponent } from 'preact';
7
- import { I18n } from '../../../report/renderer/i18n';
8
- declare function useI18n(): I18n<{
9
- navigationDescription: string;
10
- timespanDescription: string;
11
- snapshotDescription: string;
12
- navigationLongDescription: string;
13
- timespanLongDescription: string;
14
- snapshotLongDescription: string;
15
- navigationReport: string;
16
- timespanReport: string;
17
- snapshotReport: string;
18
- summary: string;
19
- allReports: string;
20
- title: string;
21
- categories: string;
22
- categoryPerformance: string;
23
- categoryAccessibility: string;
24
- categoryBestPractices: string;
25
- categorySeo: string;
26
- categoryProgressiveWebApp: string;
27
- desktop: string;
28
- mobile: string;
29
- ratingPass: string;
30
- ratingAverage: string;
31
- ratingFail: string;
32
- ratingError: string;
33
- navigationReportCount: string;
34
- timespanReportCount: string;
35
- snapshotReportCount: string;
36
- save: string;
37
- helpLabel: string;
38
- helpDialogTitle: string;
39
- helpUseCaseInstructionNavigation: string;
40
- helpUseCaseInstructionTimespan: string;
41
- helpUseCaseInstructionSnapshot: string;
42
- helpUseCaseNavigation1: string;
43
- helpUseCaseNavigation2: string;
44
- helpUseCaseNavigation3: string;
45
- helpUseCaseTimespan1: string;
46
- helpUseCaseTimespan2: string;
47
- helpUseCaseSnapshot1: string;
48
- helpUseCaseSnapshot2: string;
49
- passedAuditCount: string;
50
- passableAuditCount: string;
51
- informativeAuditCount: string;
52
- highestImpact: string;
53
- varianceDisclaimer: string;
54
- calculatorLink: string;
55
- showRelevantAudits: string;
56
- opportunityResourceColumnLabel: string;
57
- opportunitySavingsColumnLabel: string;
58
- errorMissingAuditInfo: string;
59
- errorLabel: string;
60
- warningHeader: string;
61
- warningAuditsGroupTitle: string;
62
- passedAuditsGroupTitle: string;
63
- notApplicableAuditsGroupTitle: string;
64
- manualAuditsGroupTitle: string;
65
- toplevelWarningsMessage: string;
66
- crcInitialNavigation: string;
67
- crcLongestDurationLabel: string;
68
- snippetExpandButtonLabel: string;
69
- snippetCollapseButtonLabel: string;
70
- lsPerformanceCategoryDescription: string;
71
- labDataTitle: string;
72
- thirdPartyResourcesLabel: string;
73
- viewTreemapLabel: string;
74
- viewTraceLabel: string;
75
- viewOriginalTraceLabel: string;
76
- dropdownPrintSummary: string;
77
- dropdownPrintExpanded: string;
78
- dropdownCopyJSON: string;
79
- dropdownSaveHTML: string;
80
- dropdownSaveJSON: string;
81
- dropdownViewer: string;
82
- dropdownSaveGist: string;
83
- dropdownDarkTheme: string;
84
- runtimeSettingsDevice: string;
85
- runtimeSettingsNetworkThrottling: string;
86
- runtimeSettingsCPUThrottling: string;
87
- runtimeSettingsUANetwork: string;
88
- runtimeSettingsBenchmark: string;
89
- runtimeSettingsAxeVersion: string;
90
- runtimeSettingsScreenEmulation: string;
91
- footerIssue: string;
92
- runtimeNoEmulation: string;
93
- runtimeMobileEmulation: string;
94
- runtimeDesktopEmulation: string;
95
- runtimeUnknown: string;
96
- runtimeSingleLoad: string;
97
- runtimeAnalysisWindow: string;
98
- runtimeSingleLoadTooltip: string;
99
- throttlingProvided: string;
100
- show: string;
101
- hide: string;
102
- expandView: string;
103
- collapseView: string;
104
- runtimeSlow4g: string;
105
- runtimeCustom: string;
106
- }>;
7
+ import { I18nFormatter } from '../../../report/renderer/i18n-formatter';
8
+ declare function useI18n(): {
9
+ formatter: I18nFormatter;
10
+ strings: {
11
+ navigationDescription: string;
12
+ timespanDescription: string;
13
+ snapshotDescription: string;
14
+ navigationLongDescription: string;
15
+ timespanLongDescription: string;
16
+ snapshotLongDescription: string;
17
+ navigationReport: string;
18
+ timespanReport: string;
19
+ snapshotReport: string;
20
+ summary: string;
21
+ allReports: string;
22
+ title: string;
23
+ categories: string;
24
+ categoryPerformance: string;
25
+ categoryAccessibility: string;
26
+ categoryBestPractices: string;
27
+ categorySeo: string;
28
+ categoryProgressiveWebApp: string;
29
+ desktop: string;
30
+ mobile: string;
31
+ ratingPass: string;
32
+ ratingAverage: string;
33
+ ratingFail: string;
34
+ ratingError: string;
35
+ navigationReportCount: string;
36
+ timespanReportCount: string;
37
+ snapshotReportCount: string;
38
+ save: string;
39
+ helpLabel: string;
40
+ helpDialogTitle: string;
41
+ helpUseCaseInstructionNavigation: string;
42
+ helpUseCaseInstructionTimespan: string;
43
+ helpUseCaseInstructionSnapshot: string;
44
+ helpUseCaseNavigation1: string;
45
+ helpUseCaseNavigation2: string;
46
+ helpUseCaseNavigation3: string;
47
+ helpUseCaseTimespan1: string;
48
+ helpUseCaseTimespan2: string;
49
+ helpUseCaseSnapshot1: string;
50
+ helpUseCaseSnapshot2: string;
51
+ passedAuditCount: string;
52
+ passableAuditCount: string;
53
+ informativeAuditCount: string;
54
+ highestImpact: string;
55
+ varianceDisclaimer: string;
56
+ calculatorLink: string;
57
+ showRelevantAudits: string;
58
+ opportunityResourceColumnLabel: string;
59
+ opportunitySavingsColumnLabel: string;
60
+ errorMissingAuditInfo: string;
61
+ errorLabel: string;
62
+ warningHeader: string;
63
+ warningAuditsGroupTitle: string;
64
+ passedAuditsGroupTitle: string;
65
+ notApplicableAuditsGroupTitle: string;
66
+ manualAuditsGroupTitle: string;
67
+ toplevelWarningsMessage: string;
68
+ crcInitialNavigation: string;
69
+ crcLongestDurationLabel: string;
70
+ snippetExpandButtonLabel: string;
71
+ snippetCollapseButtonLabel: string;
72
+ lsPerformanceCategoryDescription: string;
73
+ labDataTitle: string;
74
+ thirdPartyResourcesLabel: string;
75
+ viewTreemapLabel: string;
76
+ viewTraceLabel: string;
77
+ viewOriginalTraceLabel: string;
78
+ dropdownPrintSummary: string;
79
+ dropdownPrintExpanded: string;
80
+ dropdownCopyJSON: string;
81
+ dropdownSaveHTML: string;
82
+ dropdownSaveJSON: string;
83
+ dropdownViewer: string;
84
+ dropdownSaveGist: string;
85
+ dropdownDarkTheme: string;
86
+ runtimeSettingsDevice: string;
87
+ runtimeSettingsNetworkThrottling: string;
88
+ runtimeSettingsCPUThrottling: string;
89
+ runtimeSettingsUANetwork: string;
90
+ runtimeSettingsBenchmark: string;
91
+ runtimeSettingsAxeVersion: string;
92
+ runtimeSettingsScreenEmulation: string;
93
+ footerIssue: string;
94
+ runtimeNoEmulation: string;
95
+ runtimeMobileEmulation: string;
96
+ runtimeDesktopEmulation: string;
97
+ runtimeUnknown: string;
98
+ runtimeSingleLoad: string;
99
+ runtimeAnalysisWindow: string;
100
+ runtimeSingleLoadTooltip: string;
101
+ throttlingProvided: string;
102
+ show: string;
103
+ hide: string;
104
+ expandView: string;
105
+ collapseView: string;
106
+ runtimeSlow4g: string;
107
+ runtimeCustom: string;
108
+ };
109
+ };
107
110
  declare function useLocalizedStrings(): {
108
111
  navigationDescription: string;
109
112
  timespanDescription: string;
package/flow-report/src/i18n/i18n.tsx CHANGED
@@ -8,13 +8,16 @@ import {createContext, FunctionComponent} from 'preact';
8
8
  import {useContext, useMemo} from 'preact/hooks';
9
9
 
10
10
  import {formatMessage} from '../../../shared/localization/format';
11
- import {I18n} from '../../../report/renderer/i18n';
11
+ import {I18nFormatter} from '../../../report/renderer/i18n-formatter';
12
12
  import {UIStrings} from './ui-strings';
13
13
  import {useFlowResult} from '../util';
14
14
  import strings from './localized-strings.js';
15
15
  import {Util} from '../../../report/renderer/util';
16
16
 
17
- const I18nContext = createContext(new I18n('en-US', {...Util.UIStrings, ...UIStrings}));
17
+ const I18nContext = createContext({
18
+ formatter: new I18nFormatter('en-US'),
19
+ strings: {...Util.UIStrings, ...UIStrings},
20
+ });
18
21
 
19
22
  function useLhrLocale() {
20
23
  const flowResult = useFlowResult();
@@ -51,9 +54,7 @@ const I18nProvider: FunctionComponent = ({children}) => {
51
54
  const {locale, lhrStrings} = useLhrLocale();
52
55
 
53
56
  const i18n = useMemo(() => {
54
- const i18n = new I18n(locale, {
55
- // Set any missing lhr strings to default (english) values.
56
- ...Util.UIStrings,
57
+ Util.applyStrings({
57
58
  // Preload with strings from the first lhr.
58
59
  // Used for legacy report components imported into the flow report.
59
60
  ...lhrStrings,
@@ -64,10 +65,13 @@ const I18nProvider: FunctionComponent = ({children}) => {
64
65
  });
65
66
 
66
67
  // Initialize renderer util i18n for strings rendered in wrapped components.
67
- // TODO: Don't attach global i18n to `Util`.
68
- Util.i18n = i18n;
68
+ // TODO: Don't attach global formatter to `Util`.
69
+ Util.i18n = new I18nFormatter(locale);
69
70
 
70
- return i18n;
71
+ return {
72
+ formatter: Util.i18n,
73
+ strings: Util.strings as typeof UIStrings & typeof Util.UIStrings,
74
+ };
71
75
  }, [locale, lhrStrings]);
72
76
 
73
77
  return (
package/flow-report/src/sidebar/sidebar.tsx CHANGED
@@ -77,7 +77,7 @@ const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title,
77
77
  return (
78
78
  <div className="SidebarHeader">
79
79
  <div className="SidebarHeader__title">{title}</div>
80
- <div className="SidebarHeader__date">{i18n.formatDateTime(date)}</div>
80
+ <div className="SidebarHeader__date">{i18n.formatter.formatDateTime(date)}</div>
81
81
  </div>
82
82
  );
83
83
  };
package/flow-report/src/summary/category.tsx CHANGED
@@ -132,7 +132,7 @@ const SummaryTooltip: FunctionComponent<{
132
132
  {
133
133
  !displayAsFraction && category.score !== null && <>
134
134
  <span> · </span>
135
- <span>{i18n.formatInteger(category.score * 100)}</span>
135
+ <span>{i18n.formatter.formatInteger(category.score * 100)}</span>
136
136
  </>
137
137
  }
138
138
  </div>
package/flow-report/src/topbar.tsx CHANGED
@@ -26,34 +26,10 @@ saveHtml.saveFile = saveFile;
26
26
  /* eslint-disable max-len */
27
27
  const Logo: FunctionComponent = () => {
28
28
  return (
29
- <svg height="24" width="24" viewBox="0 0 24 24" role="img">
30
- <defs>
31
- <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
32
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
33
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
34
- </linearGradient>
35
- <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
36
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
37
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
38
- </linearGradient>
39
- <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
40
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
41
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
42
- </linearGradient>
43
- <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
44
- <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
45
- <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
46
- </linearGradient>
47
- </defs>
48
- <g fill="none" fill-rule="evenodd">
49
- <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
50
- <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
51
- <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
52
- <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
53
- <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
54
- <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
55
- <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
56
- </g>
29
+ <svg role="img" class="lh-topbar__logo" title="Lighthouse logo" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
30
+ <path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="#F63"/>
31
+ <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"/>
32
+ <path fill="#FF3" d="M20.5 10h7v7h-7z"/>
57
33
  </svg>
58
34
  );
59
35
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "lighthouse",
3
3
  "type": "module",
4
- "version": "9.5.0-dev.20230121",
4
+ "version": "9.5.0-dev.20230123",
5
5
  "description": "Automated auditing, performance metrics, and best practices for the web.",
6
6
  "main": "./core/index.js",
7
7
  "bin": {
@@ -200,7 +200,7 @@
200
200
  "lighthouse-stack-packs": "1.8.2",
201
201
  "lodash": "^4.17.21",
202
202
  "lookup-closest-locale": "6.2.0",
203
- "metaviewport-parser": "0.2.0",
203
+ "metaviewport-parser": "0.3.0",
204
204
  "open": "^8.4.0",
205
205
  "parse-cache-control": "1.0.1",
206
206
  "ps-list": "^8.0.0",
package/readme.md CHANGED
@@ -461,7 +461,7 @@ See [Contributing](./CONTRIBUTING.md) to get started.
461
461
 
462
462
  ---
463
463
  <p align="center">
464
- <img src="https://raw.githubusercontent.com/GoogleChrome/lighthouse/8b3d7f052b2e64dd857e741d7395647f487697e7/assets/lighthouse-logo.png" alt="Lighthouse logo" height="150">
464
+ <img src="./assets/lighthouse-logo_512px.png" alt="Lighthouse logo" height="150">
465
465
  <br>
466
466
  <b>Lighthouse</b>, ˈlītˌhous (n): a <s>tower or other structure</s> tool containing a beacon light
467
467
  to warn or guide <s>ships at sea</s> developers.
package/report/assets/standalone-template.html CHANGED
@@ -19,7 +19,7 @@ limitations under the License.
19
19
  <head>
20
20
  <meta charset="utf-8">
21
21
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
22
- <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEhklEQVR4AWJxL/BhIAesev1U5tcflpncgNrKIsqNIwzC9feMpDUzs70kOczMzMzJJcxwCTMzncPMnOwtzBwzMzPb0vRfeZPp0VhPS5I39V5fdiXV1/VD+9QC7OVn9BsyH1XIoEI1PfmJvLFowVV564+34DFUHudbmfDh4kVXh//7XwE+WjS/YfXZe3yr4j2rqj1AIhSB7hZ8ZtPZu/zw8cK523U4wE1/rvPfWrz4zs0m9ZdC9yUJAlASdBAgocRegfF/f3/h/PuaFsxMdwjAR0vm1+06eMMfIrhLqTWqdH4EumU2SPfMhigJAlRQbZrgrRsl9U+Y2DYDFCz3ILC9kiAiqSrMwbWT0nceEnR+9Kggc2zjOJCASDENkg0a5HfZZgDP81CM3CrQs2Z1+o7DJ6ePr8sK0AOCHv5Jjdt3evyYSaZ351VIStIxPRAUtrBYbxC6w+BZ0ivVSBKkIhJhemSyZpfB00EiPO2VjzYkxhcqXQqCWCShGplvi3y0QxqbuBurMjyJeWnkHZuAEgIQGsUBqwrfjZ+IlBgKyRJzVVYF8O6qFWdh86YzQzMrZigYmxAyfvHgLZQ/LC1CbeniW2Hkqr/PH16SgvGuf2/uzNMBwJA/njxizGPtSyAf7EziJCMGRDRdhoAC4PL1A/SrKQMAAQkEfpJAcRQdrBJ7gNwjSpJsdwK+CANBkqa1LgQB4IicV9nYUct7gaxuDJUErQIiEAiMxLVOFlKzIktPpT0ggpdpC/8YAHnxbgkUY4tAAFSR7AAXNyAAWHJrA/kHGjzg5nleuwFO7Nd/IoDw4Pm58+4jNLmYG0wRA5bErc2Mr3Y+dXTDW1VvwqbJkzMCHQ4S1GTCBOIgUHJrGdEwqzR+jAp/o2qAZelUDoQnruEEdDclJI6576AlNVfc+22XN/+Y1vnJD0Yind6UpEEvn/Hqq15EYjCW7jZCJEpnNvDgkyelDjs106kuux2AAXCSobULOWP8mLhYlpoDMK4qAFXJGk+grtH8YXVz5KJblqaG1+VUdTc0I290bmUQAriGITRbdQnom0aoFj8kx1+wMD2ifncAXUQE4SkDqN1hE0jEophs1SUwZAOhUAiMCLwRtamtTZtbbmZErSAUHbSysaoEmnrsakiMiUAURi283gN6wans9oX8rOCrj7/JP35DFD+iQ7Au/K2KE1jzx6ujjUnXFH9KjEq6ZlhsTBICrNLJf47Pv/pkHzvup1w4dmUbEei0+bcXRqJuh5kVARQ8byyYxOwNGr7A87xh1tp8sGT+uMInrwi++Xj7TQz2d27NvwEkrOflAFQGIDA5khASBCGdO2/Z/MnLPwYfv5TFhjW7QhVKAB6afwe2LpFlFsCnlQEosgQgDsdOG1/LKeNqJS4JCSPJ/i+TakwEARor7gER1Iva5JmPOJK0RUqmoPnnlzFCtmIAhAAQEIQRgDaiYPIauNXcnDlRIrWNFY3hm7PG9YRqr7IV7HrCgAC17befjEvRq2nGhAHtBqDpOuI/I1diUUAMYIxEdyejBJqLnNoszGZtfiX/CztGv2mq+sdaAAAAAElFTkSuQmCC">
22
+ <link rel="icon" href='data:image/svg+xml;utf8,<svg 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="%23F63"/><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="%23FFA385"/><path fill="%23FF3" d="M20.5 10h7v7h-7z"/></svg>'>
23
23
  <title>Lighthouse Report</title>
24
24
  <style>body {margin: 0}</style>
25
25
  </head>
package/report/assets/styles.css CHANGED
@@ -918,7 +918,7 @@
918
918
  justify-content: space-between;
919
919
  padding-bottom: var(--default-padding);
920
920
  width: 100%;
921
- grid-template-columns: repeat(auto-fit, 60px);
921
+ grid-template-columns: repeat(auto-fit, 90px);
922
922
  }
923
923
 
924
924
  .lh-filmstrip__frame {
@@ -928,8 +928,8 @@
928
928
 
929
929
  .lh-filmstrip__thumbnail {
930
930
  border: 1px solid var(--report-border-color-secondary);
931
- max-height: 100px;
932
- max-width: 60px;
931
+ max-height: 150px;
932
+ max-width: 120px;
933
933
  }
934
934
 
935
935
  /* Audit */
package/report/assets/templates.html CHANGED
@@ -366,34 +366,10 @@ limitations under the License.
366
366
 
367
367
  <div class="lh-topbar">
368
368
  <!-- Lighthouse logo. -->
369
- <svg class="lh-topbar__logo" viewBox="0 0 24 24">
370
- <defs>
371
- <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
372
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
373
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
374
- </linearGradient>
375
- <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
376
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
377
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
378
- </linearGradient>
379
- <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
380
- <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
381
- <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
382
- </linearGradient>
383
- <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
384
- <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
385
- <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
386
- </linearGradient>
387
- </defs>
388
- <g fill="none" fill-rule="evenodd">
389
- <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
390
- <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
391
- <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
392
- <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
393
- <path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
394
- <path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
395
- <path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
396
- </g>
369
+ <svg role="img" class="lh-topbar__logo" title="Lighthouse logo" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
370
+ <path d="m14 7 10-7 10 7v10h5v7h-5l5 24H9l5-24H9v-7h5V7Z" fill="#F63"/>
371
+ <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"/>
372
+ <path fill="#FF3" d="M20.5 10h7v7h-7z"/>
397
373
  </svg>
398
374
 
399
375
  <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
package/report/renderer/category-renderer.js CHANGED
@@ -39,10 +39,10 @@ export class CategoryRenderer {
39
39
  */
40
40
  get _clumpTitles() {
41
41
  return {
42
- warning: Util.i18n.strings.warningAuditsGroupTitle,
43
- manual: Util.i18n.strings.manualAuditsGroupTitle,
44
- passed: Util.i18n.strings.passedAuditsGroupTitle,
45
- notApplicable: Util.i18n.strings.notApplicableAuditsGroupTitle,
42
+ warning: Util.strings.warningAuditsGroupTitle,
43
+ manual: Util.strings.manualAuditsGroupTitle,
44
+ passed: Util.strings.passedAuditsGroupTitle,
45
+ notApplicable: Util.strings.notApplicableAuditsGroupTitle,
46
46
  };
47
47
  }
48
48
 
@@ -62,7 +62,7 @@ export class CategoryRenderer {
62
62
  * @return {!Element}
63
63
  */
64
64
  populateAuditValues(audit, component) {
65
- const strings = Util.i18n.strings;
65
+ const strings = Util.strings;
66
66
  const auditEl = this.dom.find('.lh-audit', component);
67
67
  auditEl.id = audit.result.id;
68
68
  const scoreDisplayMode = audit.result.scoreDisplayMode;
@@ -334,8 +334,8 @@ export class CategoryRenderer {
334
334
  el.append(descriptionEl);
335
335
  }
336
336
 
337
- this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
338
- this.dom.find('.lh-clump-toggletext--hide', el).textContent = Util.i18n.strings.hide;
337
+ this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.strings.show;
338
+ this.dom.find('.lh-clump-toggletext--hide', el).textContent = Util.strings.hide;
339
339
 
340
340
  clumpElement.classList.add(`lh-clump--${clumpId.toLowerCase()}`);
341
341
  return el;
@@ -393,7 +393,7 @@ export class CategoryRenderer {
393
393
  percentageEl.textContent = scoreOutOf100.toString();
394
394
  if (category.score === null) {
395
395
  percentageEl.textContent = '?';
396
- percentageEl.title = Util.i18n.strings.errorLabel;
396
+ percentageEl.title = Util.strings.errorLabel;
397
397
  }
398
398
 
399
399
  // Render a numerical score if the category has applicable audits, or no audits whatsoever.
@@ -402,7 +402,7 @@ export class CategoryRenderer {
402
402
  } else {
403
403
  wrapper.classList.add(`lh-gauge__wrapper--not-applicable`);
404
404
  percentageEl.textContent = '-';
405
- percentageEl.title = Util.i18n.strings.notApplicableAuditsGroupTitle;
405
+ percentageEl.title = Util.strings.notApplicableAuditsGroupTitle;
406
406
  }
407
407
 
408
408
  this.dom.find('.lh-gauge__label', tmpl).textContent = category.title;