chrome-devtools-frontend 1.0.1672557 → 1.0.1675430

package/front_end/panels/timeline/components/CPUThrottlingSelector.ts

@@ -1,235 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import '../../../ui/kit/kit.js';
-import '../../../ui/components/menus/menus.js';
-
-import * as Common from '../../../core/common/common.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import type * as Menus from '../../../ui/components/menus/menus.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as PanelsCommon from '../../common/common.js';
-import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
-
-import cpuThrottlingSelectorStyles from './cpuThrottlingSelector.css.js';
-
-const {render, html} = Lit;
-
-const UIStrings = {
-  /**
-   * @description Text label for a selection box showing which CPU throttling option is applied.
-   * @example {No throttling} PH1
-   */
-  cpu: 'CPU: {PH1}',
-  /**
-   * @description Text label for a selection box showing which CPU throttling option is applied.
-   * @example {No throttling} PH1
-   */
-  cpuThrottling: 'CPU throttling: {PH1}',
-  /**
-   * @description Text label for a selection box showing that a specific option is recommended.
-   * @example {4x slowdown} PH1
-   */
-  recommendedThrottling: '{PH1} – recommended',
-  /**
-   * @description Text for why user should change a throttling setting.
-   */
-  recommendedThrottlingReason: 'Consider changing setting to simulate real user environments',
-  /**
-   * @description Text to prompt the user to run the CPU calibration process.
-   */
-  calibrate: 'Calibrate…',
-  /**
-   * @description Text to prompt the user to re-run the CPU calibration process.
-   */
-  recalibrate: 'Recalibrate…',
-  /**
-   * @description Label shown above a list of CPU calibration preset options.
-   */
-  labelCalibratedPresets: 'Calibrated presets',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/CPUThrottlingSelector.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-interface CPUThrottlingGroup {
-  name: string;
-  items: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[];
-  showCustomAddOption?: boolean;
-}
-
-interface ViewInput {
-  recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null;
-  currentOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
-  groups: CPUThrottlingGroup[];
-  throttling: PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling;
-  onMenuItemSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
-  onCalibrateClick: () => void;
-}
-
-export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
-  let recommendedInfoEl;
-  if (input.recommendedOption && input.currentOption === PanelsCommon.CPUThrottlingOption.NoThrottlingOption) {
-    recommendedInfoEl = html`<devtools-icon
-        title=${i18nString(UIStrings.recommendedThrottlingReason)}
-        name=info></devtools-icon>`;
-  }
-
-  const selectionTitle = input.currentOption.title();
-  const hasCalibratedOnce = input.throttling.low || input.throttling.mid;
-  const calibrationLabel = hasCalibratedOnce ? i18nString(UIStrings.recalibrate) : i18nString(UIStrings.calibrate);
-
-  // clang-format off
-  /* eslint-disable @devtools/no-deprecated-component-usages */
-  const template = html`
-    <style>${cpuThrottlingSelectorStyles}</style>
-    <devtools-select-menu
-          @selectmenuselected=${input.onMenuItemSelected}
-          .showDivider=${true}
-          .showArrow=${true}
-          .sideButton=${false}
-          .showSelectedItem=${true}
-          .jslogContext=${'cpu-throttling'}
-          .buttonTitle=${i18nString(UIStrings.cpu, {PH1: selectionTitle})}
-          .title=${i18nString(UIStrings.cpuThrottling, {PH1: selectionTitle})}
-        >
-        ${input.groups.map(group => {
-          return html`
-            <devtools-menu-group .name=${group.name} .title=${group.name}>
-              ${group.items.map(option => {
-                const title = option === input.recommendedOption ? i18nString(UIStrings.recommendedThrottling, {PH1: option.title()}) : option.title();
-                const rate = option.rate();
-                return html`
-                  <devtools-menu-item
-                    .value=${option.calibratedDeviceType ?? rate}
-                    .selected=${input.currentOption === option}
-                    .disabled=${rate === 0}
-                    .title=${title}
-                    jslog=${VisualLogging.item(option.jslogContext).track({click: true})}
-                  >
-                    ${title}
-                  </devtools-menu-item>
-                `;
-              })}
-              ${group.name === 'Calibrated presets' ? html`<devtools-menu-item
-                .value=${-1 /* This won't be displayed unless it has some value. */}
-                .title=${calibrationLabel}
-                jslog=${VisualLogging.action('cpu-throttling-selector-calibrate').track({click: true})}
-                @click=${input.onCalibrateClick}
-              >
-                ${calibrationLabel}
-              </devtools-menu-item>` : Lit.nothing}
-            </devtools-menu-group>`;
-        })}
-    </devtools-select-menu>
-    ${recommendedInfoEl}
-  `;
-  // clang-format on
-  render(template, target);
-};
-
-type View = typeof DEFAULT_VIEW;
-
-export class CPUThrottlingSelector extends UI.Widget.Widget {
-  #currentOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption;
-  #recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null = null;
-  #groups: CPUThrottlingGroup[] = [];
-  #calibratedThrottlingSetting: Common.Settings.Setting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>;
-  readonly #view: View;
-  readonly #cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
-
-  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element);
-    this.#currentOption = MobileThrottling.ThrottlingManager.throttlingManager().cpuThrottlingOption();
-    this.#calibratedThrottlingSetting =
-        Common.Settings.Settings.instance().createSetting<PanelsCommon.CPUThrottlingOption.CalibratedCPUThrottling>(
-            'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
-    this.#resetGroups();
-    this.#view = view;
-  }
-
-  set recommendedOption(recommendedOption: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption|null) {
-    this.#recommendedOption = recommendedOption;
-    this.requestUpdate();
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.#cpuThrottlingManager.addEventListener(SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange,
-                                                this);
-    this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
-    this.#onOptionChange();
-  }
-
-  override willHide(): void {
-    super.willHide();
-    this.#calibratedThrottlingSetting.removeChangeListener(this.#onCalibratedSettingChanged, this);
-    this.#cpuThrottlingManager.removeEventListener(SDK.CPUThrottlingManager.Events.RATE_CHANGED, this.#onOptionChange,
-                                                   this);
-  }
-
-  #onOptionChange(): void {
-    this.#currentOption = MobileThrottling.ThrottlingManager.throttlingManager().cpuThrottlingOption();
-
-    this.requestUpdate();
-  }
-
-  #onCalibratedSettingChanged(): void {
-    this.#resetGroups();
-    this.requestUpdate();
-  }
-
-  #onMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    let option;
-    if (typeof event.itemValue === 'string') {
-      if (event.itemValue === 'low-tier-mobile') {
-        option = PanelsCommon.CPUThrottlingOption.CalibratedLowTierMobileThrottlingOption;
-      } else if (event.itemValue === 'mid-tier-mobile') {
-        option = PanelsCommon.CPUThrottlingOption.CalibratedMidTierMobileThrottlingOption;
-      }
-    } else {
-      const rate = Number(event.itemValue);
-      option = MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.find(
-          option => !option.calibratedDeviceType && option.rate() === rate);
-    }
-
-    if (option) {
-      MobileThrottling.ThrottlingManager.throttlingManager().setCPUThrottlingOption(option);
-    }
-  }
-
-  #onCalibrateClick(): void {
-    void Common.Revealer.reveal(this.#calibratedThrottlingSetting);
-  }
-
-  #resetGroups(): void {
-    this.#groups = [
-      {
-        name: '',
-        items: MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.filter(
-            option => !option.calibratedDeviceType),
-      },
-      {
-        name: i18nString(UIStrings.labelCalibratedPresets),
-        items: MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets.filter(
-            option => option.calibratedDeviceType),
-      },
-    ];
-  }
-
-  override async performUpdate(): Promise<void> {
-    const input: ViewInput = {
-      recommendedOption: this.#recommendedOption,
-      currentOption: this.#currentOption,
-      groups: this.#groups,
-      throttling: this.#calibratedThrottlingSetting.get(),
-      onMenuItemSelected: this.#onMenuItemSelected.bind(this),
-      onCalibrateClick: this.#onCalibrateClick.bind(this),
-    };
-    this.#view(input, undefined, this.contentElement);
-  }
-}

package/front_end/panels/timeline/components/NetworkThrottlingSelector.ts

@@ -1,245 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../ui/kit/kit.js';
-import '../../../ui/components/menus/menus.js';
-
-import * as Common from '../../../core/common/common.js';
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as Menus from '../../../ui/components/menus/menus.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
-
-import networkThrottlingSelectorStyles from './networkThrottlingSelector.css.js';
-
-const {html, nothing} = Lit;
-
-const UIStrings = {
-  /**
-   * @description Text label for a selection box showing which network throttling option is applied.
-   * @example {No throttling} PH1
-   */
-  network: 'Network: {PH1}',
-  /**
-   * @description Text label for a selection box showing which network throttling option is applied.
-   * @example {No throttling} PH1
-   */
-  networkThrottling: 'Network throttling: {PH1}',
-  /**
-   * @description Text label for a selection box showing that a specific option is recommended for network throttling.
-   * @example {Fast 4G} PH1
-   */
-  recommendedThrottling: '{PH1} – recommended',
-  /**
-   * @description Text for why user should change a throttling setting.
-   */
-  recommendedThrottlingReason: 'Consider changing setting to simulate real user environments',
-  /**
-   * @description Text label for a menu group that disables network throttling.
-   */
-  disabled: 'Disabled',
-  /**
-   * @description Text label for a menu group that contains default presets for network throttling.
-   */
-  presets: 'Presets',
-  /**
-   * @description Text label for a menu group that contains custom presets for network throttling.
-   */
-  custom: 'Custom',
-  /**
-   * @description Text label for a menu option to add a new custom throttling preset.
-   */
-  add: 'Add…',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/NetworkThrottlingSelector.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-interface ConditionsGroup {
-  name: string;
-  items: SDK.NetworkManager.Conditions[];
-  showCustomAddOption?: boolean;
-  jslogContext?: string;
-}
-
-export class NetworkThrottlingSelector extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #customNetworkConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions[]>;
-  #groups: ConditionsGroup[] = [];
-  #currentConditions: SDK.NetworkManager.Conditions;
-  #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
-
-  constructor() {
-    super();
-    this.#customNetworkConditionsSetting =
-        Common.Settings.Settings.instance().moduleSetting('custom-network-conditions');
-    this.#resetPresets();
-    this.#currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    this.#render();
-  }
-
-  set recommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null) {
-    this.#recommendedConditions = recommendedConditions;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
-        SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onConditionsChanged, this);
-
-    // Also call onConditionsChanged immediately to make sure we get the
-    // latest snapshot. Otherwise if another panel updated this value and this
-    // component wasn't in the DOM, this component will not update itself
-    // when it is put into the page
-    this.#onConditionsChanged();
-    this.#customNetworkConditionsSetting.addChangeListener(this.#onSettingChanged, this);
-  }
-
-  disconnectedCallback(): void {
-    SDK.NetworkManager.MultitargetNetworkManager.instance().removeEventListener(
-        SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, this.#onConditionsChanged, this);
-    this.#customNetworkConditionsSetting.removeChangeListener(this.#onSettingChanged, this);
-  }
-
-  #resetPresets(): void {
-    this.#groups = [
-      {
-        name: i18nString(UIStrings.disabled),
-        items: [
-          SDK.NetworkManager.NoThrottlingConditions,
-        ],
-      },
-      {
-        name: i18nString(UIStrings.presets),
-        items: MobileThrottling.ThrottlingPresets.ThrottlingPresets.networkPresets,
-      },
-      {
-        name: i18nString(UIStrings.custom),
-        items: this.#customNetworkConditionsSetting.get(),
-        showCustomAddOption: true,
-        jslogContext: 'custom-network-throttling-item',
-      },
-    ];
-  }
-
-  #onConditionsChanged(): void {
-    this.#currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  #onMenuItemSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): void {
-    const newConditions = this.#groups.flatMap(g => g.items).find(item => {
-      const keyForItem = this.#keyForNetworkConditions(item);
-      return keyForItem === event.itemValue;
-    });
-    if (newConditions) {
-      SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(newConditions);
-    }
-  }
-
-  #onSettingChanged(): void {
-    this.#resetPresets();
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  #getConditionsTitle(conditions: SDK.NetworkManager.Conditions): string {
-    return conditions.title instanceof Function ? conditions.title() : conditions.title;
-  }
-
-  #onAddClick(): void {
-    void Common.Revealer.reveal(this.#customNetworkConditionsSetting);
-  }
-
-  /**
-   * The key that uniquely identifies the condition setting. All the DevTools
-   * presets have the i18nKey, so we rely on that, but for custom user added
-   * ones we fallback to using the title (it wouldn't make sense for a user to
-   * add presets with the same title)
-   */
-  #keyForNetworkConditions(conditions: SDK.NetworkManager.Conditions): string {
-    return conditions.i18nTitleKey || this.#getConditionsTitle(conditions);
-  }
-
-  #render = (): void => {
-    const selectionTitle = this.#getConditionsTitle(this.#currentConditions);
-    const selectedConditionsKey = this.#keyForNetworkConditions(this.#currentConditions);
-
-    let recommendedInfoEl;
-    if (this.#recommendedConditions && this.#currentConditions === SDK.NetworkManager.NoThrottlingConditions) {
-      recommendedInfoEl = html`<devtools-icon
-        title=${i18nString(UIStrings.recommendedThrottlingReason)}
-        name=info></devtools-icon>`;
-    }
-
-    // clang-format off
-    /* eslint-disable @devtools/no-deprecated-component-usages */
-    const output = html`
-      <style>${networkThrottlingSelectorStyles}</style>
-      <devtools-select-menu
-        @selectmenuselected=${this.#onMenuItemSelected}
-        .showDivider=${true}
-        .showArrow=${true}
-        .sideButton=${false}
-        .showSelectedItem=${true}
-        .jslogContext=${'network-conditions'}
-        .buttonTitle=${i18nString(UIStrings.network, {PH1: selectionTitle})}
-        .title=${i18nString(UIStrings.networkThrottling, {PH1: selectionTitle})}
-      >
-        ${this.#groups.map(group => {
-          return html`
-            <devtools-menu-group .name=${group.name} .title=${group.name}>
-              ${group.items.map(conditions => {
-                let title = this.#getConditionsTitle(conditions);
-                if (conditions === this.#recommendedConditions) {
-                  title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
-                }
-
-                const key = this.#keyForNetworkConditions(conditions);
-                const jslogContext = group.jslogContext || Platform.StringUtilities.toKebabCase(conditions.i18nTitleKey || title);
-                return html`
-                  <devtools-menu-item
-                    .value=${key}
-                    .selected=${selectedConditionsKey === key}
-                    .title=${title}
-                    jslog=${VisualLogging.item(jslogContext).track({click: true})}
-                  >
-                    ${title}
-                  </devtools-menu-item>
-                `;
-              })}
-              ${group.showCustomAddOption ? html`
-                <devtools-menu-item
-                  .value=${1 /* This won't be displayed unless it has some value. */}
-                  .title=${i18nString(UIStrings.add)}
-                  jslog=${VisualLogging.action('add').track({click: true})}
-                  @click=${this.#onAddClick}
-                >
-                  ${i18nString(UIStrings.add)}
-                </devtools-menu-item>
-              ` : nothing}
-            </devtools-menu-group>
-          `;
-        })}
-      </devtools-select-menu>
-      ${recommendedInfoEl}
-    `;
-    /* eslint-enable @devtools/no-deprecated-component-usages */
-    // clang-format on
-    Lit.render(output, this.#shadow, {host: this});
-  };
-}
-
-customElements.define('devtools-network-throttling-selector', NetworkThrottlingSelector);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-network-throttling-selector': NetworkThrottlingSelector;
-  }
-}

package/front_end/panels/timeline/components/cpuThrottlingSelector.css

@@ -1,30 +0,0 @@
-/*
- * Copyright 2024 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
- @scope to (devtools-widget > *) {
-  :scope {
-    display: flex;
-    align-items: center;
-    max-width: 100%;
-    height: 20px;
-  }
-
-  * {
-    font-family: var(--default-font-family);
-  }
-
-  devtools-icon[name="info"] {
-    margin-left: var(--sys-size-3);
-    width: var(--sys-size-8);
-    height: var(--sys-size-8);
-  }
-
-  devtools-select-menu {
-    min-width: 160px;
-    max-width: 100%;
-    height: 20px;
-  }
-}

package/front_end/panels/timeline/components/networkThrottlingSelector.css

@@ -1,24 +0,0 @@
-/*
- * Copyright 2024 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-:host {
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  height: 20px;
-}
-
-devtools-icon[name="info"] {
-  margin-left: var(--sys-size-3);
-  width: var(--sys-size-8);
-  height: var(--sys-size-8);
-}
-
-devtools-select-menu {
-  min-width: 160px;
-  max-width: 100%;
-  height: 20px;
-}