chrome-devtools-frontend
Version:
Chrome DevTools UI
131 lines (115 loc) • 5.14 kB
JavaScript
// Copyright 2024 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
const ratings = {
good: 'is good',
'needs-improvement': 'needs improvement',
poor: 'is poor',
};
const compares = {
better: 'significantly better than',
worse: 'significantly worse than',
similar: 'similar to',
};
function camelize(string) {
return string.replace(/-./g, x => x[1].toUpperCase());
}
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
console.log(`// Copyright 2024 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import * as i18n from '../../../core/i18n/i18n.js';
import {type MetricRating} from './Utils.js';
// This file is auto-generated by scripts/generate_metric_compare_strings.js.
//
// If you need to update one or more of these strings, it is preferable to modify the script
// and write stdout to this file (Minor formatting differences may apply).
const UIStrings = {`);
for (const [rating, ratingText] of Object.entries(ratings)) {
for (const [compare, compareText] of Object.entries(compares)) {
const tag = camelize(rating) + capitalizeFirstLetter(compare) + 'Compare';
const transition = compare === 'similar' ? 'and' : 'but';
console.log(` /**
* @description Text block that compares a local metric value to real user experiences. "local" refers to a developers local testing environment.
* @example {LCP} PH1
* @example {500 ms} PH2
*/
${tag}: 'Your local {PH1} value of {PH2} ${ratingText}, ${transition} is ${compareText} your users’ experience.',`);
}
const tag = camelize(rating) + 'Summarized';
console.log(` /**
* @description Text block that summarize a local metric value. "local" refers to a developers local testing environment.
* @example {LCP} PH1
* @example {500 ms} PH2
*/
${tag}: 'Your local {PH1} value of {PH2} ${ratingText}.',`);
}
for (const [localRating, localRatingText] of Object.entries(ratings)) {
for (const [fieldRating, fieldRatingText] of Object.entries(ratings)) {
const tag = camelize(localRating) + capitalizeFirstLetter(camelize(fieldRating)) + 'DetailedCompare';
const transition = localRating === fieldRating ? 'Additionally' : 'However';
console.log(` /**
* @description Text block that compares a local metric value to real user experiences. "field data" should be interpreted as "real user data". "local" refers to a developers local testing environment.
* @example {LCP} PH1
* @example {500 ms} PH2
* @example {400 ms} PH3
* @example {40%} PH4
*/
${tag}: 'Your local {PH1} value of {PH2} ${
localRatingText} and is rated the same as {PH4} of real-user {PH1} experiences. ${
transition}, the field data 75th percentile {PH1} value of {PH3} ${fieldRatingText}.',`);
}
}
console.log(`};
const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/MetricCompareStrings.ts', UIStrings);
export type CompareRating = ${Object.keys(compares).map(c => `'${c}'`).join('|')};`);
console.log(`
export function renderCompareText(options: {metric: string, rating: MetricRating, compare?: CompareRating, localValue: Element}): Element {
const {rating, compare} = options;
const values = {
PH1: options.metric,
PH2: options.localValue,
};
`);
for (const rating of Object.keys(ratings)) {
for (const compare of Object.keys(compares)) {
const tag = camelize(rating) + capitalizeFirstLetter(compare) + 'Compare';
console.log(` if (rating === '${rating}' && compare === '${compare}') {
return i18n.i18n.getFormatLocalizedString(str_, UIStrings.${tag}, values);
}`);
}
const tag = camelize(rating) + 'Summarized';
console.log(` if (rating === '${rating}' && !compare) {
return i18n.i18n.getFormatLocalizedString(str_, UIStrings.${tag}, values);
}`);
}
console.log(`
throw new Error('Compare string not found');
}`);
console.log(`
export function renderDetailedCompareText(options: {metric: string, localRating: MetricRating, fieldRating?: MetricRating, localValue: Element, fieldValue: Element, percent: string}): Element {
const {localRating, fieldRating} = options;
const values = {
PH1: options.metric,
PH2: options.localValue,
PH3: options.fieldValue,
PH4: options.percent,
};
`);
for (const localRating of Object.keys(ratings)) {
for (const fieldRating of Object.keys(ratings)) {
const tag = camelize(localRating) + capitalizeFirstLetter(camelize(fieldRating)) + 'DetailedCompare';
console.log(` if (localRating === '${localRating}' && fieldRating === '${fieldRating}') {
return i18n.i18n.getFormatLocalizedString(str_, UIStrings.${tag}, values);
}`);
}
const tag = camelize(localRating) + 'Summarized';
console.log(` if (localRating === '${localRating}' && !fieldRating) {
return i18n.i18n.getFormatLocalizedString(str_, UIStrings.${tag}, values);
}`);
}
console.log(`
throw new Error('Detailed compare string not found');
}`);