UNPKG

chrome-devtools-frontend

Version:
131 lines (115 loc) 5.14 kB
// 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'); }`);