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

chrome-devtools-frontend 1.0.1538310 → 1.0.1539728

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

package/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.ts DELETED Viewed

@@ -1,90 +0,0 @@
-// Copyright 2020 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 Elements from '../../../../panels/elements/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import {makeCrumb} from './helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const component = new Elements.ElementsBreadcrumbs.ElementsBreadcrumbs();
-const bodyCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 1,
-  nodeName: 'body',
-  nodeNameNicelyCased: 'body',
-  attributes: {class: 'body-class1 body-class2'},
-});
-const divCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 2,
-  nodeName: 'div',
-  nodeNameNicelyCased: 'div',
-  attributes: {
-    id: 'test-id',
-    class: 'wrapper-div',
-  },
-});
-const spanCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 3,
-  nodeName: 'span',
-  nodeNameNicelyCased: 'span',
-  attributes: {
-    id: 'my-span-has-a-long-id',
-  },
-});
-const strongCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 4,
-  nodeName: 'strong',
-  nodeNameNicelyCased: 'strong',
-  attributes: {
-    id: 'gotta-be-bold',
-  },
-});
-const emCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 5,
-  nodeName: 'em',
-  nodeNameNicelyCased: 'em',
-  attributes: {id: 'my-em-has-a-long-id', class: 'and-a-very-long-class'},
-});
-const crumbs = [emCrumb, strongCrumb, spanCrumb, divCrumb, bodyCrumb];
-const crumbsReversed = [...crumbs].reverse();
-const selectedNodeParam = new URLSearchParams(location.search)?.get('selectedCrumbIndex');
-const selectedNode = selectedNodeParam ? crumbsReversed[Number(selectedNodeParam)] : bodyCrumb;
-component.data = {
-  crumbs,
-  selectedNode,
-};
-document.getElementById('container')?.appendChild(component);
-const button = component.shadowRoot?.querySelector?.('button.overflow.right');
-button?.dispatchEvent(new MouseEvent('click'));
-// Each subsequent click is timed out to allow the smooth scroll to finish.
-window.setTimeout(() => {
-  button?.dispatchEvent(new MouseEvent('click'));
-  window.setTimeout(() => {
-    button?.dispatchEvent(new MouseEvent('click'));
-  }, 200);
-}, 200);
-const btn = document.querySelector('button');
-btn?.addEventListener('click', () => {
-  component.data = {
-    crumbs: [emCrumb, strongCrumb, spanCrumb, divCrumb, bodyCrumb],
-    selectedNode: divCrumb,
-  };
-});

package/front_end/ui/components/docs/elements_breadcrumbs/scroll.html DELETED Viewed

@@ -1,29 +0,0 @@
-<!--
-  Copyright 2020 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>Scrolling breadcrumbs example</title>
-    <style>
-      #container {
-        width: 400px;
-        border: 1px solid black;
-        margin: 20px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <button id="focus-body">Emulate click on body element</button>
-    <script type="module" src="./scroll.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/elements_breadcrumbs/scroll.ts DELETED Viewed

@@ -1,62 +0,0 @@
-// Copyright 2020 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 Elements from '../../../../panels/elements/components/components.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import {makeCrumb} from './helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-const component = new Elements.ElementsBreadcrumbs.ElementsBreadcrumbs();
-const bodyCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  nodeName: 'body',
-  nodeNameNicelyCased: 'body',
-  attributes: {
-    class: 'body-class1 body-class2',
-  },
-});
-const divCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  nodeName: 'div',
-  nodeNameNicelyCased: 'div',
-  attributes: {
-    id: 'test-id',
-    class: 'wrapper-div',
-  },
-});
-const spanCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  nodeName: 'span',
-  nodeNameNicelyCased: 'span',
-  attributes: {
-    id: 'my-span-has-a-long-id',
-  },
-});
-const emCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  nodeName: 'em',
-  nodeNameNicelyCased: 'em',
-  attributes: {
-    id: 'my-em-has-a-long-id',
-  },
-});
-document.getElementById('container')?.appendChild(component);
-component.data = {
-  crumbs: [emCrumb, spanCrumb, divCrumb, bodyCrumb],
-  selectedNode: bodyCrumb,
-};
-document.getElementById('focus-body')?.addEventListener('click', () => {
-  component.data = {
-    crumbs: [bodyCrumb],
-    selectedNode: bodyCrumb,
-  };
-});

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

@@ -1,34 +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>Basic Icon Button example</title>
-  <style>
-    #container {
-      width: 80%;
-      border: 1px solid black;
-      padding: 20px;
-      height: 300px;
-    }
-    #container > icon-button {
-      vertical-align: middle;
-    }
-  </style>
-</head>
-<body>
-  <div id="container">
-  </div>
-  <ul id="events"></ul>
-  <script type="module" src="./basic.js"></script>
-</body>
-</html>

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

@@ -1,67 +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 IconButton from '../../icon_button/icon_button.js';
-function appendComponent(data: IconButton.IconButton.IconButtonData) {
-  const component = new IconButton.IconButton.IconButton();
-  component.data = data;
-  document.getElementById('container')?.appendChild(component);
-}
-appendComponent({
-  clickHandler: () => {},
-  groups: [{iconName: 'review', iconColor: 'var(--icon-default)', text: '1 item'}],
-});
-appendComponent({
-  clickHandler: () => {},
-  groups: [
-    {iconName: 'review', iconColor: 'var(--icon-primary)', text: 'Test'},
-    {iconName: 'warning-filled', iconColor: '', text: '1'},
-  ],
-});
-appendComponent({
-  clickHandler: () => {},
-  groups: [
-    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23', iconHeight: '2ex', iconWidth: '2ex'},
-    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
-  ],
-});
-appendComponent({
-  groups: [
-    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
-    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
-  ],
-});
-appendComponent({
-  clickHandler: () => {},
-  groups: [
-    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
-    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
-  ],
-  trailingText: 'Issues',
-});
-appendComponent({
-  clickHandler: () => {},
-  groups: [
-    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
-    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
-  ],
-  leadingText: 'Issues:',
-});
-appendComponent({
-  clickHandler: () => {},
-  groups: [
-    {iconName: 'issue-exclamation-filled', iconColor: 'yellow', text: '23'},
-    {iconName: 'issue-text-filled', iconColor: 'blue', text: '1'},
-  ],
-  leadingText: 'Issues:',
-  compact: true,
-});

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

@@ -1,35 +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>Basic Issue Counter example</title>
-  <style>
-    #container {
-      width: 80%;
-      border: 1px solid black;
-      padding: 20px;
-      height: 300px;
-    }
-    #container > devtools-issue-counter {
-      vertical-align: middle;
-    }
-  </style>
-</head>
-<body>
-  <div id="container">
-  </div>
-  <ul id="events"></ul>
-  <script type="module" src="./basic.js"></script>
-</body>
-</html>

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

@@ -1,34 +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 type * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import type * as IssueCounterModule from '../../../../ui/components/issue_counter/issue_counter.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const IssueCounter: typeof IssueCounterModule =
-    await import('../../../../ui/components/issue_counter/issue_counter.js');
-function appendComponent(data: IssueCounterModule.IssueCounter.IssueCounterData) {
-  const component = new IssueCounter.IssueCounter.IssueCounter();
-  component.data = data;
-  document.getElementById('container')?.appendChild(component);
-}
-const mockIssueManager = {
-  addEventListener(): void{},
-  removeEventListener(): void{},
-  numberOfIssues(): number {
-    return 1;
-  },
-} as unknown as IssuesManager.IssuesManager.IssuesManager;
-appendComponent({issuesManager: mockIssueManager});
-appendComponent({issuesManager: mockIssueManager, clickHandler: () => {}});
-appendComponent({issuesManager: mockIssueManager, clickHandler: () => {}, compact: true});

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

@@ -1,31 +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>Basic Request Link Icon example</title>
-  <style>
-    #container {
-      width: 80%;
-      border: 1px solid black;
-      padding: 20px;
-      height: 300px;
-    }
-  </style>
-</head>
-<body>
-  <div id="container">
-  </div>
-  <ul id="events"></ul>
-  <script type="module" src="./basic.js"></script>
-</body>
-</html>

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

@@ -1,26 +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 type * as Protocol from '../../../../generated/protocol.js';
-import type * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import type * as IssueCounterModule from '../../../../ui/components/issue_counter/issue_counter.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const IssueLinkIcon: typeof IssueCounterModule =
-    await import('../../../../ui/components/issue_counter/issue_counter.js');
-function appendComponent(data: IssueCounterModule.IssueLinkIcon.IssueLinkIconData) {
-  const component = new IssueLinkIcon.IssueLinkIcon.IssueLinkIcon();
-  component.data = data;
-  document.getElementById('container')?.appendChild(component);
-}
-appendComponent({
-  issueId: 'fakeid' as Protocol.Audits.IssueId,
-  issueResolver: {waitFor: () => new Promise(() => {})} as unknown as IssuesManager.IssueResolver.IssueResolver,
-});

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

@@ -1,26 +0,0 @@
-<!--
-  Copyright 2020 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>Linear memory inspector example</title>
-    <style>
-      #container {
-        width: 850px;
-        height: 400px;
-        border: 1px solid black;
-        display: flex;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,44 +0,0 @@
-// Copyright 2020 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 LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as UI from '../../../legacy/legacy.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const {render, html} = Lit;
-const {widgetConfig} = UI.Widget;
-const array = [];
-const string = 'Hello this is a string from the memory buffer!';
-for (let i = 0; i < string.length; ++i) {
-  array.push(string.charCodeAt(i));
-}
-for (let i = -1000; i < 1000; ++i) {
-  array.push(i);
-}
-const memory = new Uint8Array(array);
-const container = document.getElementById('container');
-if (container) {
-  render(
-      html`
-    <devtools-widget .widgetConfig=${
-          widgetConfig(LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector, {
-            memory,
-            address: 0,
-            memoryOffset: 0,
-            outerMemoryLength: memory.length,
-          })}>
-    </devtools-widget>
-  `,
-      container);
-}

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

@@ -1,28 +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>Menu example</title>
-  <style>
-    #root {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 50%;
-    }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-  <script src="./basic.js" type="module"></script>
-</body>
-</html>

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

@@ -1,66 +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 menuItems = [
-  {
-    name: 'Opt 1',
-    value: '1',
-    selected: true,
-    group: '',
-  },
-  {
-    name: 'Opt 2',
-    value: '2',
-    group: '',
-  },
-  {
-    name: 'Opt 3',
-    value: '3',
-    group: '',
-  },
-  {
-    name: 'Opt 4',
-    value: '4',
-    group: '',
-  },
-];
-const root = document.getElementById('root');
-const button = document.createElement('button');
-button.innerText = 'Toggle menu';
-const menu = new Menus.Menu.Menu();
-menu.origin = button;
-menu.open = false;
-menu.showDivider = true;
-menuItems.forEach(item => {
-  const menuItem = new Menus.Menu.MenuItem();
-  menuItem.value = item.value;
-  menuItem.selected = Boolean(item.selected);
-  const itemContent = document.createElement('div');
-  itemContent.textContent = item.name;
-  menuItem.appendChild(itemContent);
-  menu.appendChild(menuItem);
-});
-menu.addEventListener('menuitemselected', evt => {
-  menu.querySelectorAll('devtools-menu-item').forEach(item => {
-    item.selected = item.value === evt.itemValue;
-  });
-});
-menu.addEventListener('menucloserequest', _evt => {
-  menu.open = false;
-});
-button.addEventListener('click', _menuEvent => {
-  menu.open = !menu.open;
-});
-if (root) {
-  root.appendChild(menu);
-  root.appendChild(button);
-}

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

@@ -1,20 +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>Recorder: ControlButton</title>
-</head>
-<body>
-  <div id="container"></div>
-  <script src="./basic.js" type="module"></script>
-</body>
-</html>

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

@@ -1,15 +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 ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const component = new RecorderComponents.ControlButton.ControlButton();
-component.shape = 'circle';
-component.label = 'ControlButton';
-document.getElementById('container')?.appendChild(component);

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

@@ -1,20 +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>Recorder: RecordingListView</title>
-</head>
-<body>
-  <div id="container"></div>
-  <script src="./basic.js" type="module"></script>
-</body>
-</html>

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

@@ -1,26 +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 ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
-import * as RecorderComponents from '../../../../panels/recorder/components/components.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const component = new RecorderComponents.RecordingListView.RecordingListView();
-component.recordings = [
-  {
-    storageName: '1',
-    name: 'Title 1',
-  },
-  {
-    storageName: '2',
-    name: 'Title 2',
-  },
-];
-const container = document.getElementById('container');
-if (container) {
-  component.show(container);
-}