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

chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

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

package/front_end/ui/components/docs/perf_piechart/basic-with-legend.ts DELETED Viewed

@@ -1,20 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as PerfUI from '../../../legacy/components/perf_ui/perf_ui.js';
-await FrontendHelpers.initializeGlobalVars();
-const chart = new PerfUI.PieChart.PieChart();
-document.getElementById('container')?.appendChild(chart);
-chart.data = {
-  chartName: 'Nice Chart',
-  size: 110,
-  formatter: value => String(value) + ' %',
-  showLegend: true,
-  total: 100,
-  slices: [{value: 75, color: 'crimson', title: 'Filling'}, {value: 25, color: 'burlywood', title: 'Crust'}],
-};

package/front_end/ui/components/docs/perf_piechart/basic-without-legend.html DELETED Viewed

@@ -1,20 +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>PieChart example without a legend</title>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic-without-legend.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/perf_piechart/basic-without-legend.ts DELETED Viewed

@@ -1,18 +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 PerfUI from '../../../legacy/components/perf_ui/perf_ui.js';
-const chart = new PerfUI.PieChart.PieChart();
-document.getElementById('container')?.appendChild(chart);
-chart.data = {
-  chartName: 'Nice Chart',
-  size: 110,
-  formatter: value => String(value) + ' %',
-  showLegend: false,
-  total: 100,
-  slices: [{value: 75, color: 'crimson', title: 'Filling'}, {value: 25, color: 'burlywood', title: 'Crust'}],
-};

package/front_end/ui/components/docs/snackbars/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>Toast example</title>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,50 +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 ComponentHelpers from '../../helpers/helpers.js';
-import * as Snackbars from '../../snackbars/snackbars.js';
-await FrontendHelpers.initializeGlobalVars();
-await ComponentHelpers.ComponentServerSetup.setup();
-const container = document.getElementById('container');
-if (!container) {
-  throw new Error('No component container found.');
-}
-const onActionClick = (): void => {
-  // eslint-disable-next-line no-console
-  console.log('Action button clicked!');
-};
-const showButton1 = document.createElement('button');
-showButton1.textContent = 'Show Long Action Snackbar';
-showButton1.addEventListener('click', () => {
-  Snackbars.Snackbar.Snackbar.show({
-    message: 'This is a snackbar demonstrating a long action and closable state.',
-    closable: true,
-    actionProperties: {
-      label: 'This is a long action button',
-      title: 'Click here to perform the designated action',
-      onClick: onActionClick,
-    }
-  });
-});
-container.appendChild(showButton1);
-const showButton2 = document.createElement('button');
-showButton2.textContent = 'Show Action Snackbar';
-showButton2.addEventListener('click', () => {
-  Snackbars.Snackbar.Snackbar.show({
-    message: 'This is a snackbar demonstrating an action and closable state.',
-    closable: true,
-    actionProperties: {
-      label: 'Action',
-      title: 'Click here to perform the designated action',
-      onClick: onActionClick,
-    }
-  });
-});
-container.appendChild(showButton2);

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

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

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

@@ -1,28 +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 Common from '../../../../core/common/common.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as SurveyLink from '../../survey_link/survey_link.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const link = new SurveyLink.SurveyLink.SurveyLink();
-document.getElementById('container')?.appendChild(link);
-// TODO(petermarshall): The icon doesn't render because importing sub-components cross-module
-// is tricky. Add some more interesting examples once it does.
-link.data = {
-  trigger: 'test trigger',
-  promptText: Common.UIString.LocalizedEmptyString,
-  canShowSurvey: (_trigger, callback) => {
-    setTimeout(callback.bind(undefined, {canShowSurvey: true}), 500);
-  },
-  showSurvey: (_trigger, callback) => {
-    setTimeout(callback.bind(undefined, {surveyShown: true}), 1500);
-  },
-};

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

@@ -1,33 +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>Basic TreeOutline example</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-        padding: 20px;
-        height: 300px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <button id="recursively-expand">Recursively expand</button>
-    <button id="expand-to-belgrave-house">Expand to show BEL node</button>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,38 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as TreeOutline from '../../tree_outline/tree_outline.js';
-import {belgraveHouse, officesAndProductsData} from './sample-data.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const component = new TreeOutline.TreeOutline.TreeOutline<string>();
-component.data = {
-  defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
-  tree: officesAndProductsData,
-};
-component.setAttribute('animated', 'animated');
-component.addEventListener('treenodemouseover', (event: Event) => {
-  const evt = event as TreeOutline.TreeOutline.ItemMouseOverEvent<string>;
-  // eslint-disable-next-line no-console
-  console.log('Node', evt.data.node, 'mouseover');
-});
-component.addEventListener('treenodemouseout', (event: Event) => {
-  const evt = event as TreeOutline.TreeOutline.ItemMouseOutEvent<string>;
-  // eslint-disable-next-line no-console
-  console.log('Node', evt.data.node, 'mouseout');
-});
-document.getElementById('container')?.appendChild(component);
-document.getElementById('recursively-expand')?.addEventListener('click', () => {
-  void component.expandRecursively();
-});
-document.getElementById('expand-to-belgrave-house')?.addEventListener('click', () => {
-  void component.expandToAndSelectTreeNode(belgraveHouse);
-});

package/front_end/ui/components/docs/tree_outline/custom-renderers.html DELETED Viewed

@@ -1,32 +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>TreeOutline with custom renderers</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-        padding: 20px;
-        height: 300px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <button id="recursively-expand">Recursively expand</button>
-    <script type="module" src="./custom-renderers.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/tree_outline/custom-renderers.ts DELETED Viewed

@@ -1,61 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as TreeOutline from '../../tree_outline/tree_outline.js';
-const {html} = Lit;
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-interface TreeNodeData {
-  cssProperty: string;
-  cssValue: string;
-}
-const data: TreeOutline.TreeOutline.TreeOutlineData<TreeNodeData> = {
-  defaultRenderer: (node, state) => {
-    const {cssProperty, cssValue} = node.treeNodeData;
-    const valueStyles = Lit.Directives.styleMap({
-      paddingLeft: '10px',
-      fontStyle: 'italic',
-      color: 'var(--sys-color-token-property-special)',
-    });
-    return html`<code>${cssProperty}</code>:${
-        state.isExpanded ? Lit.nothing : html`<code style=${valueStyles}>${cssValue}</code>`}`;
-  },
-  tree: [
-    {
-      treeNodeData: {cssProperty: 'border', cssValue: '1px solid red'},
-      id: '1',
-    },
-    {
-      treeNodeData: {cssProperty: 'font-size', cssValue: '20px'},
-      id: '2',
-    },
-    {
-      treeNodeData: {cssProperty: 'margin', cssValue: '10px 5px'},
-      id: '3',
-      async children(): Promise<Array<TreeOutline.TreeOutlineUtils.TreeNode<TreeNodeData>>> {
-        return [
-          {treeNodeData: {cssProperty: 'margin-left', cssValue: '5px'}, id: '4'},
-          {treeNodeData: {cssProperty: 'margin-right', cssValue: '5px'}, id: '5'},
-          {treeNodeData: {cssProperty: 'margin-top', cssValue: '10px'}, id: '6'},
-          {treeNodeData: {cssProperty: 'margin-bottom', cssValue: '10px'}, id: '7'},
-        ];
-      },
-    },
-  ],
-};
-const component = new TreeOutline.TreeOutline.TreeOutline<TreeNodeData>();
-component.data = data;
-document.getElementById('container')?.appendChild(component);
-document.getElementById('recursively-expand')?.addEventListener('click', () => {
-  void component.expandRecursively();
-});

package/front_end/ui/components/docs/tree_outline/lazy-children.html DELETED Viewed

@@ -1,32 +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>Tree Outline with Lazy Children</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-        padding: 20px;
-        height: 300px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <button id="recursively-expand">Recursively expand</button>
-    <script type="module" src="./lazy-children.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/tree_outline/lazy-children.ts DELETED Viewed

@@ -1,91 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as TreeOutline from '../../tree_outline/tree_outline.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-async function loadInSomeNodes(): Promise<Array<TreeOutline.TreeOutlineUtils.TreeNode<string>>> {
-  const europeanOffices: Array<TreeOutline.TreeOutlineUtils.TreeNode<string>> = [
-    {
-      treeNodeData: 'UK',
-      id: 'UK',
-      children: () => Promise.resolve([
-        {
-          treeNodeData: 'LON',
-          id: 'LON',
-          children: () => Promise.resolve(
-              [{treeNodeData: '6PS', id: '6PS'}, {treeNodeData: 'CSG', id: 'CSG'}, {treeNodeData: 'BEL', id: 'BEL'}]),
-        },
-      ]),
-    },
-    {
-      treeNodeData: 'Germany',
-      id: 'Germany',
-      children: () => Promise.resolve([
-        {treeNodeData: 'MUC', id: 'MUC'},
-        {treeNodeData: 'BER', id: 'MUC'},
-      ]),
-    },
-  ];
-  return await new Promise(resolve => {
-    setTimeout(() => resolve(europeanOffices), 250);
-  });
-}
-const data: TreeOutline.TreeOutline.TreeOutlineData<string> = {
-  defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
-  tree: [
-    {
-      treeNodeData: 'Offices',
-      id: 'Offices',
-      children: () => Promise.resolve([
-        {
-          treeNodeData: 'Europe',
-          id: 'Europe',
-          async children() {
-            const children = await loadInSomeNodes();
-            return children;
-          },
-        },
-      ]),
-    },
-    {
-      treeNodeData: 'Products',
-      id: 'Products',
-      children: () => Promise.resolve([
-        {
-          treeNodeData: 'Chrome',
-          id: 'Chrome',
-        },
-        {
-          treeNodeData: 'YouTube',
-          id: 'YouTube',
-        },
-        {
-          treeNodeData: 'Drive',
-          id: 'Drive',
-        },
-        {
-          treeNodeData: 'Calendar',
-          id: 'Calendar',
-        },
-      ]),
-    },
-  ],
-};
-const component = new TreeOutline.TreeOutline.TreeOutline<string>();
-component.setAttribute('toplevelbordercolor', 'var(--sys-color-token-property-special)');
-component.data = data;
-document.getElementById('container')?.appendChild(component);
-document.getElementById('recursively-expand')?.addEventListener('click', () => {
-  void component.expandRecursively();
-});

package/front_end/ui/components/docs/tree_outline/sample-data.ts DELETED Viewed

@@ -1,67 +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 '../../tree_outline/tree_outline.js';
-import type * as TreeOutline from '../../tree_outline/tree_outline.js';
-export const belgraveHouse = {
-  treeNodeData: 'BEL',
-  id: 'BEL',
-};
-export const officesAndProductsData: Array<TreeOutline.TreeOutlineUtils.TreeNode<string>> = [
-  {
-    treeNodeData: 'Offices',
-    id: 'Offices',
-    children: () => Promise.resolve([
-      {
-        treeNodeData: 'Europe',
-        id: 'Europe',
-        children: () => Promise.resolve([
-          {
-            treeNodeData: 'UK',
-            id: 'UK',
-            children: () => Promise.resolve([
-              {
-                treeNodeData: 'LON',
-                id: 'LON',
-                children: () => Promise.resolve(
-                    [{treeNodeData: '6PS', id: '6PS'}, {treeNodeData: 'CSG', id: 'CSG'}, belgraveHouse]),
-              },
-            ]),
-          },
-          {
-            treeNodeData: 'Germany',
-            id: 'Germany',
-            children: () => Promise.resolve([
-              {treeNodeData: 'MUC', id: 'MUC'},
-              {treeNodeData: 'BER', id: 'BER'},
-            ]),
-          },
-        ]),
-      },
-    ]),
-  },
-  {
-    treeNodeData: 'Products',
-    id: 'Products',
-    children: () => Promise.resolve([
-      {
-        treeNodeData: 'Chrome',
-        id: 'Chrome',
-      },
-      {
-        treeNodeData: 'YouTube',
-        id: 'YouTube',
-      },
-      {
-        treeNodeData: 'Drive',
-        id: 'Drive',
-      },
-      {
-        treeNodeData: 'Calendar',
-        id: 'Calendar',
-      },
-    ]),
-  },
-];

package/front_end/ui/components/helpers/directives.ts DELETED Viewed

@@ -1,38 +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 Lit from '../../lit/lit.js';
-/**
- * Provides a hook to get a callback when a Lit node is rendered into the DOM:
- * @example
- *
- * ```
- * <p on-render=${nodeRenderedCallback(node => ...)}>
- * ```
- */
-class NodeRenderedCallback extends Lit.Directive.Directive {
-  constructor(partInfo: Lit.Directive.PartInfo) {
-    super(partInfo);
-    if (partInfo.type !== Lit.Directive.PartType.ATTRIBUTE) {
-      throw new Error('Node rendered callback directive must be used as an attribute.');
-    }
-  }
-  override update(part: Lit.Directive.ElementPart, [callback]: Lit.Directive.DirectiveParameters<this>): void {
-    callback(part.element);
-  }
-  /*
-   * Because this directive doesn't render anything, there's no implementation
-   * here for the render method. But we need it to state that it takes in a
-   * callback function at the callsite. Without this definition, the types in
-   * the update() method above don't get correctly picked up.
-   */
-  render(_callback: (domNode: Element) => void): void {
-  }
-}
-export const nodeRenderedCallback = Lit.Directive.directive(NodeRenderedCallback);