npm - chrome-devtools-frontend - Versions diffs - 1.0.1536371 → 1.0.1537860 - Mend

chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

package/front_end/ui/components/docs/radio_button/basic.ts DELETED Viewed

@@ -1,50 +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 * as UI from '../../../legacy/legacy.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-function radioExample({name, tabbable, disabled}: {
-  name: string,
-  tabbable: boolean,
-  disabled: boolean,
-}): HTMLElement {
-  const example = document.createElement('fieldset');
-  example.style.marginTop = '20px';
-  const legend = document.createElement('legend');
-  legend.textContent = name;
-  const list = document.createElement('div');
-  for (let i = 0; i < 3; ++i) {
-    const {label, radio} = UI.UIUtils.createRadioButton(name, `Option #${i + 1}`, name);
-    radio.tabIndex = tabbable ? 0 : -1;
-    radio.disabled = disabled;
-    radio.checked = i === 0;
-    list.append(label);
-  }
-  example.append(legend, list);
-  return example;
-}
-function init(): void {
-  const container = document.getElementById('container');
-  if (!container) {
-    return;
-  }
-  container.style.padding = '42px 42px';
-  container.style.margin = '42px 42px';
-  container.style.border = '1px solid rgb(0 0 0 / 20%)';
-  // Basic
-  container.appendChild(radioExample({name: 'basic', tabbable: true, disabled: false}));
-  // Not tab reachable
-  container.appendChild(radioExample({name: 'not-table-reachable', tabbable: false, disabled: false}));
-  // Disabled
-  container.appendChild(radioExample({name: 'disabled', tabbable: true, disabled: true}));
-}
-init();

package/front_end/ui/components/docs/select_menu/basic.html DELETED Viewed

@@ -1,19 +0,0 @@
-<!--
-  Copyright 2023 The Chromium Authors
-  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>Select menu example</title>
-</head>
-<body>
-  <script src="./basic.js" type="module"></script>
-</body>
-</html>

package/front_end/ui/components/docs/select_menu/basic.ts DELETED Viewed

@@ -1,95 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-import * as UI from '../../../../ui/legacy/legacy.js';
-import * as Lit from '../../../lit/lit.js';
-import * as VisualLogging from '../../../visual_logging/visual_logging.js';
-const {html} = Lit;
-function createDivWithP(text: string): HTMLDivElement {
-  const div = document.createElement('div');
-  div.style.paddingLeft = '25px';
-  const p = document.createElement('p');
-  p.style.marginLeft = '-25px';
-  p.textContent = text;
-  div.appendChild(p);
-  document.body.appendChild(div);
-  return div;
-}
-{
-  const simpleMenuHTML = createDivWithP('Simple item select with lit-html');
-  Lit.render(
-      html`<select id="menu" aria-label="Select an option"
-              @change=${onChange}>
-      <option hidden>Select an option</option>
-      <option id="option-1" jslog=${VisualLogging.item('option-1').track({
-        click: true
-      })}
-              value="Option1">Option 1</option>
-      <option jslog=${VisualLogging.item('option-2').track({
-        click: true
-      })}
-              value="Option2">Option 2</option>
-      <option disabled jslog=${VisualLogging.item('option-3').track({
-        click: true
-      })}
-              value="Option3">Option 3</option>
-    </select>`,
-      simpleMenuHTML);
-}
-{
-  const groupMenuHTML = createDivWithP('Select with groups with lit-html');
-  Lit.render(
-      html`<select aria-label="Select an option"
-                @change=${onChange}>
-      <optgroup label="Group 1">
-        <option jslog=${VisualLogging.item('option-1').track({
-        click: true
-      })}
-        value="Option1">Option 1</option>
-      </optgroup>
-      <optgroup label="Group 2">
-        <option jslog=${VisualLogging.item('option-2').track({
-        click: true
-      })}
-        value="Option2">Option 2</option>
-        <option jslog=${VisualLogging.item('option-3').track({
-        click: true
-      })}
-        value="Option3">Option 3</option>
-      </optgroup>
-    </select>`,
-      groupMenuHTML);
-}
-{
-  const simpleMenuImperative = createDivWithP('Simple item select with imperative API');
-  const simpleSelect = UI.UIUtils.createSelect('Select an option', [
-    'Option 1',
-    'Option 2',
-    'Option 3',
-  ]);
-  simpleSelect.addEventListener('change', event => onChange(event));
-  simpleMenuImperative.appendChild(simpleSelect);
-}
-{
-  const groupMenuImperative = createDivWithP('Select with groups with imperative API');
-  const group1 = new Map<string, string[]>([['Group 1', ['Option 1']]]);
-  const group2 = new Map<string, string[]>([['Group 2', ['Option 2', 'Option 3']]]);
-  const groupSelect = UI.UIUtils.createSelect('Select an option', [group1, group2]);
-  groupSelect.addEventListener('change', event => onChange(event));
-  groupMenuImperative.appendChild(groupSelect);
-}
-function onChange(event: Event): void {
-  const menu = event.target;
-  if (menu instanceof HTMLSelectElement) {
-    // eslint-disable-next-line no-console
-    console.log('Option selected: ', menu.value);
-  }
-}

package/front_end/ui/components/docs/select_menu/wide-option.html DELETED Viewed

@@ -1,38 +0,0 @@
-<!--
-  Copyright 2023 The Chromium Authors
-  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>Select menu example</title>
-  <style>
-    #root {
-      padding: 20px;
-      width: 80%;
-      margin: 0 auto;
-    }
-    #width-150 {
-      width: 150px;
-    }
-    #width-400 {
-      width: 400px;
-    }
-devtools-select-menu {
-  display: block;
-  margin: 15px;
-}
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script src="./wide-option.js" type="module"></script>
-</body>
-</html>

package/front_end/ui/components/docs/select_menu/wide-option.ts DELETED Viewed

@@ -1,43 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-import * as Menus from '../../../../ui/components/menus/menus.js';
-const root = document.getElementById('root');
-function makeMenu(id: string): void {
-  const items: Menus.Menu.MenuItem[] = [];
-  const menu = new Menus.SelectMenu.SelectMenu();
-  const options = [
-    {text: 'A short option', value: 'option-1'},
-    {text: 'A very long option that has a lot of text', value: 'option-2'},
-    {text: 'An  average sized option', value: 'option-3'},
-  ];
-  options.forEach(opt => {
-    const item = new Menus.Menu.MenuItem();
-    item.value = opt.value;
-    item.textContent = opt.text;
-    menu.appendChild(item);
-    items.push(item);
-  });
-  menu.addEventListener('selectmenuselected', (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => {
-    items.forEach(item => {
-      item.selected = item.value === event.itemValue;
-    });
-    const selectedOption = options.find(option => option.value === event.itemValue);
-    menu.buttonTitle = selectedOption?.text || '';
-  });
-  items[1].selected = true;
-  menu.buttonTitle = options[1].text;
-  menu.showArrow = true;
-  menu.id = id;
-  root?.appendChild(menu);
-}
-makeMenu('width-150');
-makeMenu('width-400');

package/front_end/ui/components/docs/spinners/basic.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!--
-  Copyright 2025 The Chromium Authors
-  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>Spinner example</title>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/spinners/basic.ts DELETED Viewed

@@ -1,22 +0,0 @@
-// Copyright 2025 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-import '../../spinners/spinners.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-const {html} = Lit;
-await FrontendHelpers.initializeGlobalVars();
-await ComponentHelpers.ComponentServerSetup.setup();
-const container = document.getElementById('container');
-if (!container) {
-  throw new Error('No component container found.');
-}
-Lit.render(html`<devtools-spinner></devtools-spinner>`, container);

package/front_end/ui/components/docs/tooltip/basic.html DELETED Viewed

@@ -1,20 +0,0 @@
-<!--
-  Copyright 2025 The Chromium Authors
-  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>Tooltip example</title>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/tooltip/basic.ts DELETED Viewed

@@ -1,82 +0,0 @@
-// Copyright 2025 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import {Tooltip} from '../../tooltips/Tooltip.js';
-const {html} = Lit;
-await FrontendHelpers.initializeGlobalVars();
-await ComponentHelpers.ComponentServerSetup.setup();
-const container = document.getElementById('container');
-if (!container) {
-  throw new Error('No component container found.');
-}
-Lit.render(
-    html`
-    <div style="position: relative; z-index: 0;">
-      <button aria-describedby="simple-tooltip" style="position: absolute; left: 16px; top: 16px;">
-        Simple
-      </button>
-      <devtools-tooltip id="simple-tooltip">Simple content</devtools-tooltip>
-    </div>
-    <div style="position: relative; z-index: 0;">
-      <span
-        aria-details="rich-tooltip"
-        style="position: absolute; left: 16px; top: 116px; border: 1px solid black;"
-      >
-        Non-button click trigger
-      </span>
-      <devtools-tooltip id="rich-tooltip" variant="rich" trigger="click">
-        <p>Rich tooltip</p>
-        <button>Action</button>
-      </devtools-tooltip>
-    </div>
-    <div>
-      <button
-        id="removable"
-        @click=${() => document.getElementById('removable')?.remove()}
-        class="anchor"
-        aria-details="programatic"
-        style="position: absolute; left: 16px; top: 216px;"
-      >
-        Click to remove anchor
-      </button>
-    </div>
-  `,
-    container);
-const anchor = container.querySelector('.anchor') as HTMLElement;
-const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
-programmaticTooltip.append('Text content');
-anchor.insertAdjacentElement('afterend', programmaticTooltip);
-// Make the buttons draggable, so that we can experiment with the position of the tooltip.
-container.querySelectorAll('button,span').forEach(anchor => draggable(anchor as HTMLElement));
-function draggable(element: HTMLElement|null): void {
-  if (!element) {
-    return;
-  }
-  element.addEventListener('mousedown', event => {
-    const target = event.target as HTMLElement;
-    const offsetX = event.clientX - target.getBoundingClientRect().left;
-    const offsetY = event.clientY - target.getBoundingClientRect().top;
-    function onMouseMove(event: MouseEvent) {
-      target.style.left = `${event.clientX - offsetX}px`;
-      target.style.top = `${event.clientY - offsetY}px`;
-    }
-    function onMouseUp() {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    }
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  });
-}

package/front_end/ui/legacy/SettingsUI.ts DELETED Viewed

@@ -1,254 +0,0 @@
-// Copyright 2014 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-imperative-dom-api */
-import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Platform from '../../core/platform/platform.js';
-import * as Settings from '../components/settings/settings.js';
-import {Directives} from '../lit/lit.js';
-import * as VisualLogging from '../visual_logging/visual_logging.js';
-import * as ARIAUtils from './ARIAUtils.js';
-import {InspectorView} from './InspectorView.js';
-import {Tooltip} from './Tooltip.js';
-import {bindInput, CheckboxLabel, createOption} from './UIUtils.js';
-const UIStrings = {
-  /**
-   * @description Note when a setting change will require the user to reload DevTools
-   */
-  srequiresReload: '*Requires reload',
-  /**
-   * @description Message to display if a setting change requires a reload of DevTools
-   */
-  oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('ui/legacy/SettingsUI.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export function createSettingCheckbox(
-    name: Common.UIString.LocalizedString, setting: Common.Settings.Setting<boolean>, tooltip?: string): CheckboxLabel {
-  const label = CheckboxLabel.create(name, undefined, undefined, setting.name);
-  label.name = name;
-  bindCheckbox(label, setting);
-  if (tooltip) {
-    Tooltip.install(label, tooltip);
-  }
-  return label;
-}
-const createSettingSelect = function(
-    name: string, options: Common.Settings.SimpleSettingOption[], requiresReload: boolean|null,
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement {
-  const container = document.createElement('div');
-  const settingSelectElement = container.createChild('p');
-  settingSelectElement.classList.add('settings-select');
-  const label = settingSelectElement.createChild('label');
-  const select = settingSelectElement.createChild('select');
-  label.textContent = name;
-  if (subtitle) {
-    container.classList.add('chrome-select-label');
-    label.createChild('p').textContent = subtitle;
-  }
-  select.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context(setting.name)}`);
-  ARIAUtils.bindLabelToControl(label, select);
-  for (const option of options) {
-    if (option.text && typeof option.value === 'string') {
-      select.add(createOption(option.text, option.value, Platform.StringUtilities.toKebabCase(option.value)));
-    }
-  }
-  let reloadWarning: HTMLElement|(Element | null) = (null as Element | null);
-  if (requiresReload) {
-    reloadWarning = container.createChild('p', 'reload-warning hidden');
-    reloadWarning.textContent = i18nString(UIStrings.srequiresReload);
-    ARIAUtils.markAsAlert(reloadWarning);
-  }
-  const {deprecation} = setting;
-  if (deprecation) {
-    const warning = new Settings.SettingDeprecationWarning.SettingDeprecationWarning();
-    warning.data = deprecation;
-    label.appendChild(warning);
-  }
-  setting.addChangeListener(settingChanged);
-  settingChanged();
-  select.addEventListener('change', selectChanged, false);
-  return container;
-  function settingChanged(): void {
-    const newValue = setting.get();
-    for (let i = 0; i < options.length; i++) {
-      if (options[i].value === newValue) {
-        select.selectedIndex = i;
-      }
-    }
-    select.disabled = setting.disabled();
-  }
-  function selectChanged(): void {
-    // Don't use event.target.value to avoid conversion of the value to string.
-    setting.set(options[select.selectedIndex].value);
-    if (reloadWarning) {
-      reloadWarning.classList.remove('hidden');
-      InspectorView.instance().displayReloadRequiredWarning(i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
-    }
-  }
-};
-export const bindToSetting =
-    (settingOrName: string|Common.Settings.Setting<boolean|string>|Common.Settings.RegExpSetting,
-     stringValidator?: (newSettingValue: string) => boolean): ReturnType<typeof Directives.ref> => {
-      const setting = typeof settingOrName === 'string' ?
-          Common.Settings.Settings.instance().moduleSetting(settingOrName) :
-          settingOrName;
-      // We can't use `setValue` as the change listener directly, otherwise we won't
-      // be able to remove it again.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      let setValue: (value: any) => void;
-      function settingChanged(): void {
-        setValue(setting.get());
-      }
-      if (setting.type() === Common.Settings.SettingType.BOOLEAN || typeof setting.defaultValue === 'boolean') {
-        return Directives.ref(e => {
-          if (e === undefined) {
-            setting.removeChangeListener(settingChanged);
-            return;
-          }
-          setting.addChangeListener(settingChanged);
-          setValue =
-              bindCheckboxImpl(e as CheckboxLabel, (setting as Common.Settings.Setting<boolean>).set.bind(setting));
-          setValue(setting.get());
-        });
-      }
-      if (setting.type() === Common.Settings.SettingType.REGEX || setting instanceof Common.Settings.RegExpSetting) {
-        return Directives.ref(e => {
-          if (e === undefined) {
-            setting.removeChangeListener(settingChanged);
-            return;
-          }
-          setting.addChangeListener(settingChanged);
-          setValue = bindInput(e as HTMLInputElement, setting.set.bind(setting), (value: string) => {
-            try {
-              new RegExp(value);
-              return true;
-            } catch {
-              return false;
-            }
-          }, /* numeric */ false);
-          setValue(setting.get());
-        });
-      }
-      if (typeof setting.defaultValue === 'string') {
-        return Directives.ref(e => {
-          if (e === undefined) {
-            setting.removeChangeListener(settingChanged);
-            return;
-          }
-          setting.addChangeListener(settingChanged);
-          setValue = bindInput(
-              e as HTMLInputElement, setting.set.bind(setting), stringValidator ?? (() => true), /* numeric */ false);
-          setValue(setting.get());
-        });
-      }
-      throw new Error(`Cannot infer type for setting  '${setting.name}'`);
-    };
-/**
- * @deprecated Prefer {@link bindToSetting} as this function leaks the checkbox via the setting listener.
- */
-export const bindCheckbox = function(
-    input: CheckboxLabel, setting: Common.Settings.Setting<boolean>, metric?: UserMetricOptions): void {
-  const setValue = bindCheckboxImpl(input, setting.set.bind(setting), metric);
-  setting.addChangeListener(event => setValue(event.data));
-  setValue(setting.get());
-};
-const bindCheckboxImpl = function(
-    input: CheckboxLabel, apply: (value: boolean) => void, metric?: UserMetricOptions): (value: boolean) => void {
-  input.addEventListener('change', onInputChanged, false);
-  function onInputChanged(): void {
-    apply(input.checked);
-    if (input.checked && metric?.enable) {
-      Host.userMetrics.actionTaken(metric.enable);
-    }
-    if (!input.checked && metric?.disable) {
-      Host.userMetrics.actionTaken(metric.disable);
-    }
-    if (metric?.toggle) {
-      Host.userMetrics.actionTaken(metric.toggle);
-    }
-  }
-  return function setValue(value: boolean): void {
-    if (value !== input.checked) {
-      input.checked = value;
-    }
-  };
-};
-export const createCustomSetting = function(name: string, element: Element): Element {
-  const p = document.createElement('p');
-  p.classList.add('settings-select');
-  const label = p.createChild('label');
-  label.textContent = name;
-  ARIAUtils.bindLabelToControl(label, element);
-  p.appendChild(element);
-  return p;
-};
-export const createControlForSetting = function(
-    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
-  const uiTitle = setting.title();
-  switch (setting.type()) {
-    case Common.Settings.SettingType.BOOLEAN: {
-      const component = new Settings.SettingCheckbox.SettingCheckbox();
-      component.data = {
-        setting: setting as Common.Settings.Setting<boolean>,
-      };
-      component.onchange = () => {
-        if (setting.reloadRequired()) {
-          InspectorView.instance().displayReloadRequiredWarning(i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
-        }
-      };
-      return component;
-    }
-    case Common.Settings.SettingType.ENUM:
-      return createSettingSelect(uiTitle, setting.options(), setting.reloadRequired(), setting, subtitle);
-    default:
-      console.error('Invalid setting type: ' + setting.type());
-      return null;
-  }
-};
-export interface SettingUI {
-  settingElement(): Element|null;
-}
-/**
- * Track toggle action as a whole or
- * track on and off action separately.
- */
-export interface UserMetricOptions {
-  toggle?: Host.UserMetrics.Action;
-  enable?: Host.UserMetrics.Action;
-  disable?: Host.UserMetrics.Action;
-}