npm - chrome-devtools-frontend - Versions diffs - 1.0.1537268 → 1.0.1538310 - Mend

chrome-devtools-frontend 1.0.1537268 → 1.0.1538310

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 (98) hide show

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

@@ -1,44 +0,0 @@
-<!--
-  Copyright 2021 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>Button example</title>
-    <style>
-      body {
-        overflow: auto  !important; /* stylelint-disable-line declaration-no-important */
-      }
-      div {
-        width: 500px;
-        padding: 25px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <header>Buttons</header>
-    <div id="buttons"></div>
-    <header>Primary buttons</header>
-    <div id="primary-buttons"></div>
-    <header>Tonal buttons</header>
-    <div id="tonal-buttons"></div>
-    <header>Outlined buttons</header>
-    <div id="outlined-buttons"></div>
-    <header>Text buttons</header>
-    <div id="text-buttons"></div>
-    <header>Icon buttons</header>
-    <div id="icon-buttons"></div>
-    <header>Floating buttons</header>
-    <div id="floating-buttons"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,175 +0,0 @@
-// Copyright 2021 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 Buttons from '../../buttons/buttons.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const BUTTONS_SECTION = '#buttons';
-const PRIMARY_SECTION = '#primary-buttons';
-const TONAL_SECTION = '#tonal-buttons';
-const OUTLINED_SECTION = '#outlined-buttons';
-const TEXT_SECTION = '#text-buttons';
-const ICON_SECTION = '#icon-buttons';
-const FLOATING_SECTION = '#floating-buttons';
-const DEFAULT_TEXT = 'Default';
-const WITH_ICON_TEXT = 'With icon';
-const MICRO_TEXT = 'Micro';
-function append(section: string, element: HTMLElement): void {
-  document.querySelector(section)?.appendChild(element);
-}
-// Buttons
-{
-  const primaryButton = new Buttons.Button.Button();
-  primaryButton.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-  };
-  primaryButton.innerText = 'Primary button';
-  append(BUTTONS_SECTION, primaryButton);
-  const tonalButton = new Buttons.Button.Button();
-  tonalButton.data = {
-    variant: Buttons.Button.Variant.TONAL,
-  };
-  tonalButton.innerText = 'Tonal button';
-  append(BUTTONS_SECTION, tonalButton);
-  const outlinedButton = new Buttons.Button.Button();
-  outlinedButton.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-  };
-  outlinedButton.innerText = 'Outlined button';
-  append(BUTTONS_SECTION, outlinedButton);
-  const textButton = new Buttons.Button.Button();
-  textButton.data = {
-    variant: Buttons.Button.Variant.TEXT,
-  };
-  textButton.innerText = 'Text button';
-  append(BUTTONS_SECTION, textButton);
-  const iconButton = new Buttons.Button.Button();
-  iconButton.data = {
-    variant: Buttons.Button.Variant.ICON,
-    iconName: 'gear',
-  };
-  append(BUTTONS_SECTION, iconButton);
-}
-// Primary buttons
-{
-  const primaryDefault = new Buttons.Button.Button();
-  primaryDefault.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-  };
-  primaryDefault.innerText = DEFAULT_TEXT;
-  append(PRIMARY_SECTION, primaryDefault);
-  const primaryWithIcon = new Buttons.Button.Button();
-  primaryWithIcon.innerText = WITH_ICON_TEXT;
-  primaryWithIcon.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    iconName: 'plus',
-  };
-  append(PRIMARY_SECTION, primaryWithIcon);
-}
-// Tonal buttons
-{
-  const tonalDefault = new Buttons.Button.Button();
-  tonalDefault.data = {
-    variant: Buttons.Button.Variant.TONAL,
-  };
-  tonalDefault.innerText = DEFAULT_TEXT;
-  append(TONAL_SECTION, tonalDefault);
-  const tonalWithIcon = new Buttons.Button.Button();
-  tonalWithIcon.innerText = WITH_ICON_TEXT;
-  tonalWithIcon.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    iconName: 'plus',
-  };
-  append(TONAL_SECTION, tonalWithIcon);
-}
-// Outlined buttons
-{
-  const outlinedDefault = new Buttons.Button.Button();
-  outlinedDefault.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-  };
-  outlinedDefault.innerText = DEFAULT_TEXT;
-  append(OUTLINED_SECTION, outlinedDefault);
-  const outlinedWithIcon = new Buttons.Button.Button();
-  outlinedWithIcon.innerText = WITH_ICON_TEXT;
-  outlinedWithIcon.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-    iconName: 'plus',
-  };
-  append(OUTLINED_SECTION, outlinedWithIcon);
-  const outlinedMicro = new Buttons.Button.Button();
-  outlinedMicro.innerText = MICRO_TEXT;
-  outlinedMicro.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-    size: Buttons.Button.Size.MICRO,
-  };
-  append(OUTLINED_SECTION, outlinedMicro);
-}
-// Text buttons
-{
-  const textDefault = new Buttons.Button.Button();
-  textDefault.innerText = DEFAULT_TEXT;
-  textDefault.data = {
-    variant: Buttons.Button.Variant.TEXT,
-  };
-  append(TEXT_SECTION, textDefault);
-  const textWithIcon = new Buttons.Button.Button();
-  textWithIcon.innerText = WITH_ICON_TEXT;
-  textWithIcon.data = {
-    variant: Buttons.Button.Variant.TEXT,
-    iconName: 'plus',
-  };
-  append(TEXT_SECTION, textWithIcon);
-}
-// Icon buttons
-{
-  const iconDefault = new Buttons.Button.Button();
-  iconDefault.data = {
-    variant: Buttons.Button.Variant.ICON,
-    iconName: 'gear',
-  };
-  append(ICON_SECTION, iconDefault);
-  const iconToggle = new Buttons.Button.Button();
-  iconToggle.data = {
-    variant: Buttons.Button.Variant.ICON_TOGGLE,
-    iconName: 'gear',
-    toggledIconName: 'gear',
-    toggled: true,
-    toggleType: Buttons.Button.ToggleType.PRIMARY,
-  };
-  const toggledWithLabel = document.createElement('span');
-  toggledWithLabel.textContent = '(Toggle)';
-  append(ICON_SECTION, iconToggle);
-  append(ICON_SECTION, toggledWithLabel);
-}
-// Floating buttons
-{
-  const floatingButton = Buttons.FloatingButton.create('smart-assistant', 'Ask AI!');
-  append(FLOATING_SECTION, floatingButton);
-}

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

@@ -1,23 +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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Basic Radio Button example</title>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-    <style>
-      fieldset { label { display: block; } }
-    </style>
-  </body>
-</html>

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);
-  });
-}