npm - chrome-devtools-frontend - Versions diffs - 1.0.1538523 → 1.0.1539972 - Mend

chrome-devtools-frontend 1.0.1538523 → 1.0.1539972

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

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/legacy_color_invert/basic.html DELETED Viewed

@@ -1,77 +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>Legacy color input</title>
-    <style>
-      #container {
-        margin: 20px;
-        padding: 0;
-      }
-      form {
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: 20px;
-      }
-      form input[type="submit"] {
-        margin-left: 20px;
-        padding: 10px;
-        font-size: 20px;
-        background: var(--sys-color-primary);
-        color: #fff;
-        border: 1px solid var(--sys-color-divider);
-        cursor: pointer;
-      }
-      form input[type="submit"]:hover {
-        background: var(--color-primary-variant);
-      }
-     .text-input, span, pre {
-       display: block;
-       font-size: 16px;
-     }
-     .text-input input {
-       display: block;
-       margin: 10px 0 0 0;
-       padding: 10px;
-       border: 1px solid #ccc;
-     }
-     pre {
-       margin: 10px 0;
-       padding: 10px;
-       border: 1px solid #ccc;
-       user-select: all !important;
-     }
-    </style>
-  </head>
-  <body>
-    <script type="module" src="./basic.js"></script>
-    <div id="container">
-      <form>
-        <label class="text-input">
-        CSS property:
-          <input type="text" id="css-property" placeholder="background-color"/>
-        </label>
-        <label class="text-input">
-          CSS value:
-          <input type="text" id="css-value" placeholder="rgb(10 10 10)"/>
-        </label>
-        <input type="submit" value="Go!" />
-      </form>
-      <span>Dark mode legacy value:</span>
-      <pre><code id="output"></code></pre>
-    </div>
-  </body>
-</html>

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

@@ -1,98 +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 Platform from '../../../../core/platform/platform.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const form = document.querySelector<HTMLFormElement>('form');
-if (!form) {
-  throw new Error('could not find form');
-}
-form.addEventListener('submit', event => {
-  event.preventDefault();
-  const property = form.querySelector<HTMLInputElement>('#css-property')?.value;
-  const value = form.querySelector<HTMLInputElement>('#css-value')?.value;
-  if (!property || !value) {
-    return;
-  }
-  const output = legacyInvertVariableForDarkMode(property, value);
-  const outputElem = document.querySelector<HTMLElement>('#output');
-  if (outputElem) {
-    outputElem.innerText = output;
-  }
-});
-/**
- * This code is largely copy and pasted from the legacy ThemeSupport
- * around color patching. This is because we are working towards removing the
- * legacy color patching, but still may need to be able to generate legacy dark
- * mode values for light colors during the migration. This doc exists for that
- * reason.
- */
-type ColorUsage = 'unknown'|'foreground'|'background';
-function patchHSLA(hsla: number[], colorUsage: ColorUsage): void {
-  const hue = hsla[0];
-  const sat = hsla[1];
-  let lit: number = hsla[2];
-  const alpha = hsla[3];
-  const minCap = colorUsage === 'background' ? 0.14 : 0;
-  const maxCap = colorUsage === 'foreground' ? 0.9 : 1;
-  lit = 1 - lit;
-  if (lit < minCap * 2) {
-    lit = minCap + lit / 2;
-  } else if (lit > 2 * maxCap - 1) {
-    lit = maxCap - 1 / 2 + lit / 2;
-  }
-  hsla[0] = Platform.NumberUtilities.clamp(hue, 0, 1);
-  hsla[1] = Platform.NumberUtilities.clamp(sat, 0, 1);
-  hsla[2] = Platform.NumberUtilities.clamp(lit, 0, 1);
-  hsla[3] = Platform.NumberUtilities.clamp(alpha, 0, 1);
-}
-function patchColor(colorAsText: string, colorUsage: ColorUsage): string {
-  const color = Common.Color.parse(colorAsText)?.as(Common.Color.Format.HSL);
-  if (!color) {
-    return colorAsText;
-  }
-  const hsla: Common.ColorUtils.Color4D = [color.h, color.s, color.l, color.alpha ?? 1];
-  patchHSLA(hsla, colorUsage);
-  const rgba = Common.Color.hsl2rgb(hsla);
-  const outColor = new Common.Color.Legacy(rgba, Common.Color.Format.RGBA);
-  let outText = outColor.asString();
-  if (!outText) {
-    outText = outColor.asString(outColor.hasAlpha() ? Common.Color.Format.RGBA : Common.Color.Format.RGB);
-  }
-  return outText || colorAsText;
-}
-function legacyInvertVariableForDarkMode(cssProperty: string, cssValue: string): string {
-  let colorUsage: ColorUsage = 'unknown';
-  if (cssProperty.indexOf('background') === 0 || cssProperty.indexOf('border') === 0) {
-    colorUsage = 'background';
-  }
-  if (cssProperty.indexOf('background') === -1) {
-    colorUsage = 'foreground';
-  }
-  const items = cssValue.replace(Common.Color.Regex, '\0$1\0').split('\0');
-  const output = [];
-  for (const item of items) {
-    if (!item) {
-      continue;
-    }
-    const newColor = patchColor(item, colorUsage);
-    output.push(newColor);
-  }
-  return output.join(' ');
-}

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

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