chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/elements/components/AdornerSettingsPane.ts

@@ -1,132 +0,0 @@
-// Copyright (c) 2021 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 * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as Input from '../../../ui/components/input/input.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-
-import type {AdornerSettingsMap} from './AdornerManager.js';
-import adornerSettingsPaneStyles from './adornerSettingsPane.css.js';
-
-const UIStrings = {
-  /**
-   * @description Title of a list of settings to toggle badges.
-   */
-  settingsTitle: 'Show badges',
-  /**
-   * @description ARIA label of the button to close the badge settings pane
-   */
-  closeButton: 'Close',
-};
-const str_ = i18n.i18n.registerUIStrings('panels/elements/components/AdornerSettingsPane.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-const {render, html} = LitHtml;
-
-export class AdornerSettingUpdatedEvent extends Event {
-  static readonly eventName = 'adornersettingupdated';
-  data: {
-    adornerName: string,
-    isEnabledNow: boolean,
-    newSettings: AdornerSettingsMap,
-  };
-
-  constructor(adornerName: string, isEnabledNow: boolean, newSettings: AdornerSettingsMap) {
-    super(AdornerSettingUpdatedEvent.eventName, {});
-    this.data = {adornerName, isEnabledNow, newSettings};
-  }
-}
-
-export interface AdornerSettingsPaneData {
-  settings: Readonly<AdornerSettingsMap>;
-}
-
-export class AdornerSettingsPane extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #settings: AdornerSettingsMap = new Map();
-
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [Input.checkboxStyles, adornerSettingsPaneStyles];
-  }
-
-  set data(data: AdornerSettingsPaneData) {
-    this.#settings = new Map(data.settings.entries());
-    this.#render();
-  }
-
-  show(): void {
-    this.classList.remove('hidden');
-    const settingsPane = this.#shadow.querySelector<HTMLElement>('.adorner-settings-pane');
-    if (settingsPane) {
-      settingsPane.focus();
-    }
-  }
-
-  hide(): void {
-    this.classList.add('hidden');
-  }
-
-  #onChange(ev: Event): void {
-    const inputEl = ev.target as HTMLInputElement;
-    const adorner = inputEl.dataset.adorner;
-    if (adorner === undefined) {
-      return;
-    }
-    const isEnabledNow = inputEl.checked;
-    this.#settings.set(adorner, isEnabledNow);
-    this.dispatchEvent(new AdornerSettingUpdatedEvent(adorner, isEnabledNow, this.#settings));
-    this.#render();
-  }
-
-  #render(): void {
-    const settingTemplates = [];
-    for (const [adorner, isEnabled] of this.#settings) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      settingTemplates.push(html`
-        <label class="setting" title=${adorner}>
-          <input
-            class="adorner-status"
-            type="checkbox" name=${adorner}
-            .checked=${isEnabled}
-            jslog=${VisualLogging.toggle(adorner).track({change: true})}
-            data-adorner=${adorner}>
-          <span class="adorner-name">${adorner}</span>
-        </label>
-      `);
-      // clang-format on
-    }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <div class="adorner-settings-pane" tabindex="-1" jslog=${VisualLogging.pane('adorner-settings')}>
-        <div class="settings-title">${i18nString(UIStrings.settingsTitle)}</div>
-        <div class="setting-list" @change=${this.#onChange}>
-          ${settingTemplates}
-        </div>
-        <devtools-button aria-label=${i18nString(UIStrings.closeButton)}
-                                             .iconName=${'cross'}
-                                             .size=${Buttons.Button.Size.SMALL}
-                                             .title=${i18nString(UIStrings.closeButton)}
-                                             .variant=${Buttons.Button.Variant.ICON}
-                                             jslog=${VisualLogging.close().track({click: true})}
-                                             @click=${this.hide}></devtools-button>
-      </div>
-    `, this.#shadow, {
-      host: this,
-    });
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-adorner-settings-pane', AdornerSettingsPane);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-adorner-settings-pane': AdornerSettingsPane;
-  }
-}

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -1,40 +0,0 @@
-/*
- * Copyright 2021 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.
- */
-
-.adorner-settings-pane {
-  display: flex;
-  height: auto;
-  padding: var(--sys-size-4) var(--sys-size-6);
-  color: var(--sys-color-on-surface);
-  font-size: 12px;
-  align-items: center;
-
-  & > .settings-title {
-    font-weight: var(--ref-typeface-weight-medium);
-    margin-right: var(--sys-size-4);
-    min-width: fit-content;
-  }
-
-  & > .setting-list {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}
-
-.setting {
-  margin-left: 1em;
-  display: flex;
-  min-width: fit-content;
-}
-
-.adorner-status {
-  margin: auto 0.4em auto 0;
-}
-
-.adorner-status,
-.adorner-name {
-  vertical-align: middle;
-}

package/front_end/panels/freestyler/freestyler.ts

@@ -1,16 +0,0 @@
-// 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.
-
-export * from './AiAgent.js';
-export * from './AiHistoryStorage.js';
-export * from './ChangeManager.js';
-export * from './DrJonesFileAgent.js';
-export * from './DrJonesNetworkAgent.js';
-export * from './DrJonesPerformanceAgent.js';
-export * from './components/FreestylerChatUi.js';
-export * from './components/UserActionRow.js';
-export * from './ExtensionScope.js';
-export * from './FreestylerAgent.js';
-export * from './FreestylerEvaluateAction.js';
-export * from './FreestylerPanel.js';

package/front_end/panels/recorder/injected/.eslintrc.js

@@ -1,14 +0,0 @@
-// Copyright 2023 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 path = require('path');
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', '..', '..', 'scripts', 'eslint_rules', 'lib');
-
-module.exports = {
-  rules : {
-    // The code is rolled up and tree-shaken independently from the regular entrypoints.
-    'rulesdir/es_modules_import' : 'off',
-  }
-};

package/front_end/panels/timeline/ExtensionDataGatherer.ts

@@ -1,65 +0,0 @@
-// 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 type * as Trace from '../../models/trace/trace.js';
-
-import {TimelinePanel} from './TimelinePanel.js';
-
-type ExtensionData = Trace.Handlers.ModelHandlers.ExtensionTraceData.ExtensionTraceData;
-
-let extensionDataGathererInstance: ExtensionDataGatherer|undefined;
-
-/**
- * This class abstracts the source of extension data out by providing a
- * single access point to the performance panel for extension data.
- */
-export class ExtensionDataGatherer {
-  #parsedTrace: Trace.Handlers.Types.ParsedTrace|null = null;
-  #extensionDataByModel: Map<Trace.Handlers.Types.ParsedTrace, ExtensionData> = new Map();
-  static instance(): ExtensionDataGatherer {
-    if (extensionDataGathererInstance) {
-      return extensionDataGathererInstance;
-    }
-    extensionDataGathererInstance = new ExtensionDataGatherer();
-    return extensionDataGathererInstance;
-  }
-
-  static removeInstance(): void {
-    extensionDataGathererInstance = undefined;
-  }
-
-  /**
-   * Gets the data provided by extensions.
-   */
-  getExtensionData(): ExtensionData {
-    const extensionDataEnabled = TimelinePanel.extensionDataVisibilitySetting().get();
-    if (!extensionDataEnabled || !this.#parsedTrace || !this.#parsedTrace.ExtensionTraceData) {
-      return {extensionMarkers: [], extensionTrackData: [], entryToNode: new Map()};
-    }
-    const maybeCachedData = this.#extensionDataByModel.get(this.#parsedTrace);
-    if (maybeCachedData) {
-      return maybeCachedData;
-    }
-    return this.#parsedTrace.ExtensionTraceData;
-  }
-
-  saveCurrentModelData(): void {
-    if (this.#parsedTrace && !this.#extensionDataByModel.has(this.#parsedTrace)) {
-      this.#extensionDataByModel.set(this.#parsedTrace, this.getExtensionData());
-    }
-  }
-
-  modelChanged(parsedTrace: Trace.Handlers.Types.ParsedTrace|null): void {
-    if (parsedTrace === this.#parsedTrace) {
-      return;
-    }
-    if (this.#parsedTrace !== null) {
-      // DevTools extension data is assumed to be useful only for the current
-      // trace data (model). As such, if the model changes, we cache the devtools
-      // extension data we have collected for the previous model and listen
-      // for new data that applies to the new model.
-      this.saveCurrentModelData();
-    }
-    this.#parsedTrace = parsedTrace;
-  }
-}

package/front_end/panels/timeline/TimelineLandingPage.ts

@@ -1,108 +0,0 @@
-// 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 * as Root from '../../core/root/root.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import * as Components from './components/components.js';
-
-const UIStrings = {
-  /**
-   * @description Text for an option to learn more about something
-   */
-  learnmore: 'Learn more',
-  /**
-   * @description Text in Timeline Panel of the Performance panel
-   */
-  wasd: 'WASD',
-  /**
-   * @description Text in Timeline Panel of the Performance panel
-   * @example {record} PH1
-   * @example {Ctrl + R} PH2
-   */
-  clickTheRecordButtonSOrHitSTo: 'Click the record button {PH1} or hit {PH2} to start a new recording.',
-  /**
-   * @description Text in Timeline Panel of the Performance panel
-   * @example {reload button} PH1
-   * @example {Ctrl + R} PH2
-   */
-  clickTheReloadButtonSOrHitSTo: 'Click the reload button {PH1} or hit {PH2} to record the page load.',
-  /**
-   * @description Text in Timeline Panel of the Performance panel
-   * @example {Ctrl + U} PH1
-   * @example {Learn more} PH2
-   */
-  afterRecordingSelectAnAreaOf:
-      'After recording, select an area of interest in the overview by dragging. Then, zoom and pan the timeline with the mousewheel or {PH1} keys. {PH2}',
-};
-
-const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineLandingPage.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-interface Options {
-  isNode?: boolean;
-}
-
-export class TimelineLandingPage extends UI.Widget.VBox {
-  private readonly toggleRecordAction: UI.ActionRegistration.Action;
-
-  constructor(toggleRecordAction: UI.ActionRegistration.Action, options?: Options) {
-    super();
-
-    this.toggleRecordAction = toggleRecordAction;
-
-    const isNode = options?.isNode === true;
-    this.contentElement.classList.add('timeline-landing-page', 'fill');
-
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_OBSERVATIONS) && !isNode) {
-      this.renderLandingPage();
-    } else {
-      this.renderLegacyLandingPage();
-    }
-  }
-
-  private renderLandingPage(): void {
-    const liveMetricsWidget =
-        LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, new Components.LiveMetricsView.LiveMetricsView());
-    liveMetricsWidget.show(this.contentElement);
-  }
-
-  private renderLegacyLandingPage(): void {
-    function encloseWithTag(tagName: string, contents: string): HTMLElement {
-      const e = document.createElement(tagName);
-      e.textContent = contents;
-      return e;
-    }
-
-    const learnMoreNode = UI.XLink.XLink.create(
-        'https://developer.chrome.com/docs/devtools/evaluate-performance/', i18nString(UIStrings.learnmore), undefined,
-        undefined, 'learn-more');
-
-    const recordKey = encloseWithTag(
-        'b',
-        UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('timeline.toggle-recording')[0].title());
-    const reloadKey = encloseWithTag(
-        'b', UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('timeline.record-reload')[0].title());
-    const navigateNode = encloseWithTag('b', i18nString(UIStrings.wasd));
-
-    this.contentElement.classList.add('legacy');
-    const centered = this.contentElement.createChild('div');
-
-    const recordButton = UI.UIUtils.createInlineButton(
-        UI.Toolbar.Toolbar.createActionButton(this.toggleRecordAction, {showLabel: false, ignoreToggleable: true}));
-    const reloadButton =
-        UI.UIUtils.createInlineButton(UI.Toolbar.Toolbar.createActionButtonForId('timeline.record-reload'));
-
-    centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
-        str_, UIStrings.clickTheRecordButtonSOrHitSTo, {PH1: recordButton, PH2: recordKey}));
-
-    centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
-        str_, UIStrings.clickTheReloadButtonSOrHitSTo, {PH1: reloadButton, PH2: reloadKey}));
-
-    centered.createChild('p').appendChild(i18n.i18n.getFormatLocalizedString(
-        str_, UIStrings.afterRecordingSelectAnAreaOf, {PH1: navigateNode, PH2: learnMoreNode}));
-  }
-}

package/front_end/ui/components/dialogs/IconDialog.ts

@@ -1,160 +0,0 @@
-// Copyright 2023 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 '../../../ui/components/icon_button/icon_button.js';
-import './Dialog.js';
-
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-
-import type {Dialog as DialogElement, DialogHorizontalAlignment, DialogVerticalPosition} from './Dialog.js';
-import iconDialogStyles from './iconDialog.css.js';
-
-const {html} = LitHtml;
-
-const UIStrings = {
-  /**
-   * @description Title of close button for the shortcuts dialog.
-   */
-  close: 'Close',
-};
-
-const str_ = i18n.i18n.registerUIStrings('ui/components/dialogs/IconDialog.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-icon-dialog': IconDialog;
-  }
-}
-
-export class ShowDialog extends Event {
-  static readonly eventName = 'showdialog';
-
-  constructor() {
-    super(ShowDialog.eventName);
-  }
-}
-
-export interface IconDialogData {
-  iconData: IconButton.Icon.IconData;
-  closeButton: boolean;
-  // The below are parts of DialogData. See comments of DialogData.
-  position: DialogVerticalPosition;
-  horizontalAlignment: DialogHorizontalAlignment;
-  closeOnESC: boolean;
-  closeOnScroll: boolean;
-}
-
-// This class provides a shorthand for a typical use case of Dialog,
-// i.e. Dialog on an icon.
-export class IconDialog extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  readonly #renderBound = this.#render.bind(this);
-
-  #data: IconDialogData|null = null;
-
-  #dialog: DialogElement|null = null;
-  #icon: IconButton.Icon.Icon|null = null;
-
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [iconDialogStyles];
-  }
-
-  set data(data: IconDialogData) {
-    this.#data = data;
-
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
-  }
-
-  #showDialog(): void {
-    if (!this.#dialog) {
-      throw new Error('Dialog not found');
-    }
-    void this.#dialog.setDialogVisible(true);
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
-    this.dispatchEvent(new ShowDialog());
-  }
-
-  #closeDialog(): void {
-    if (!this.#dialog) {
-      throw new Error('Dialog not found');
-    }
-    void this.#dialog.setDialogVisible(false);
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
-  }
-
-  #render(): void {
-    if (this.#data === null) {
-      throw new Error('IconDialog.data is not set');
-    }
-
-    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
-      throw new Error('IconDialog render was not scheduled');
-    }
-
-    let maybeCloseButton: LitHtml.LitTemplate = LitHtml.nothing;
-    if (this.#data.closeButton) {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
-      maybeCloseButton = html`
-        <div id='close-button-container'>
-          <div id='close-button-right-aligner'>
-            <devtools-icon
-              @click=${this.#closeDialog}
-              .data=${{
-                iconName: 'cross',
-                color: 'var(--icon-default-hover)',
-                width: '16px',
-                height: '16px',
-              }}
-              jslog=${VisualLogging.close().track({click: true})}
-              title=${i18nString(UIStrings.close)}
-            ></devtools-icon>
-          </div>
-        </div>
-      `;
-                // clang-format on
-    }
-
-    // clang-format off
-    LitHtml.render(html`
-      <devtools-icon
-        @click=${this.#showDialog}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
-          this.#icon = node as IconButton.Icon.Icon;
-        })}
-        .data=${this.#data.iconData}
-      ></devtools-icon>
-      <devtools-dialog
-        @clickoutsidedialog=${this.#closeDialog}
-        .showConnector=${true}
-        .origin=${() => {
-          if (!this.#icon) {
-            throw new Error('Icon not found');
-          }
-          return this.#icon;
-        }}
-        .position=${this.#data.position}
-        .horizontalAlignment=${this.#data.horizontalAlignment}
-        .closeOnESC=${this.#data.closeOnESC}
-        .closeOnScroll=${this.#data.closeOnScroll}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
-          this.#dialog = node as DialogElement;
-        })}
-      >
-        ${maybeCloseButton}
-        <div id='slot-container'>
-          <slot></slot>
-        </div>
-      </devtools-dialog>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-icon-dialog', IconDialog);

package/front_end/ui/components/dialogs/iconDialog.css

@@ -1,24 +0,0 @@
-/*
- * Copyright 2023 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.
- */
-
-#close-button-container {
-  height: 0;
-  width: 100%;
-}
-
-#close-button-container #close-button-right-aligner {
-  position: relative;
-  z-index: 1;
-  width: fit-content;
-  left: 100%;
-  transform: translateX(-100%);
-  padding-right: 12px;
-}
-
-#slot-container {
-  margin-top: -14px;
-  padding: 0 12px;
-}

package/front_end/ui/components/docs/.eslintrc.js

@@ -1,19 +0,0 @@
-// Copyright 2020 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.
-
-module.exports = {
-  overrides : [{
-    files : ['*.ts'],
-    rules : {
-      // This makes the component doc examples very verbose and doesn't add
-      // anything, so we leave return types to the developer within the
-      // component_docs folder.
-      '@typescript-eslint/explicit-function-return-type' : 'off',
-      'rulesdir/ban_style_tags_in_lit_html' : 'off',
-      // We use LitHtml to help render examples sometimes and we don't use
-      // {host: this} as often the `this` is the window.
-      'rulesdir/lit_html_host_this' : 'off',
-    }
-  }]
-};

package/front_end/ui/components/docs/icon_dialog/basic.html

@@ -1,28 +0,0 @@
-<!--
-  Copyright 2023 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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Shortcut dialog - basic example</title>
-    <style>
-      #container {
-        width: 800px;
-        height: 400px;
-        margin: 0 auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="container"></div>
-    <script src="./basic.js" type="module"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/icon_dialog/basic.ts

@@ -1,46 +0,0 @@
-// Copyright 2023 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 ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
-import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
-import * as LitHtml from '../../../lit-html/lit-html.js';
-
-const {html} = LitHtml;
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-// Disabled until https://crbug.com/1079231 is fixed.
-// clang-format off
-const iconDialog = html`
-Hello...
-
-<devtools-icon-dialog
-  .data=${{
-    iconData: {
-      iconName: 'info',
-      color: 'var(--icon-default-hover)',
-      width: '16px',
-      height: '16px',
-    },
-    closeButton: true,
-    position: Dialogs.Dialog.DialogVerticalPosition.AUTO,
-    horizontalAlignment: Dialogs.Dialog.DialogHorizontalAlignment.AUTO,
-    closeOnESC: true,
-    closeOnScroll: false,
-  }}
->
-  <div>
-    <h2>Hello world!</h2>
-    <div>
-      This is a dialog describing some additional information.
-    </div>
-  </div>
-</devtools-icon-dialog>
-`;
-    // clang-format on
-
-    const container = document.getElementById('container') as HTMLElement;
-    LitHtml.render(iconDialog, container);