chrome-devtools-frontend/scripts/generate_metric_compare_strings.js

Chrome DevTools UI

// 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');
}`);