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

chrome-devtools-frontend 1.0.1539728 → 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 (132) hide show

package/package.json CHANGED Viewed

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1539728"
+  "version": "1.0.1539972"
 }

package/front_end/core/protocol_client/NodeURL.ts DELETED Viewed

@@ -1,40 +0,0 @@
-// Copyright 2018 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 '../common/common.js';
-import * as Host from '../host/host.js';
-import type * as Platform from '../platform/platform.js';
-export class NodeURL {
-  static patch(object: object): void {
-    process(object, '');
-    function process(object: {url?: string}, path: string): void {
-      if (object.url && NodeURL.isPlatformPath(object.url, Host.Platform.isWin())) {
-        // object.url can be of both types: RawPathString and UrlString
-        object.url = Common.ParsedURL.ParsedURL.rawPathToUrlString(object.url as Platform.DevToolsPath.RawPathString);
-      }
-      for (const entry of Object.entries(object)) {
-        const key = entry[0];
-        const value = entry[1];
-        const entryPath = path + '.' + key;
-        if (entryPath !== '.result.result.value' && value !== null && typeof value === 'object') {
-          process(
-              (value as {
-                url: string,
-              }),
-              entryPath);
-        }
-      }
-    }
-  }
-  static isPlatformPath(fileSystemPath: string, isWindows: boolean): boolean {
-    if (isWindows) {
-      const re = /^([a-z]:[\/\\]|\\\\)/i;
-      return re.test(fileSystemPath);
-    }
-    return fileSystemPath.length ? fileSystemPath[0] === '/' : false;
-  }
-}

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

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

@@ -1,49 +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 comboBoxExample({tabIndex, disabled}: {
-  tabIndex: number,
-  disabled: boolean,
-}): HTMLElement {
-  const example = document.createElement('div');
-  example.style.marginTop = '20px';
-  const disabledExplanation = document.createElement('div');
-  const tabbableExplanation = document.createElement('div');
-  const component = UI.UIUtils.createSelect('Select an option', ['Hamster', 'Mouse', 'Cat']);
-  component.disabled = disabled;
-  component.tabIndex = tabIndex;
-  disabledExplanation.textContent = `is disabled? ${component.disabled}`;
-  tabbableExplanation.textContent = `is tabbable? ${component.tabIndex >= 0}`;
-  example.appendChild(component);
-  example.appendChild(disabledExplanation);
-  example.appendChild(tabbableExplanation);
-  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(comboBoxExample({tabIndex: 0, disabled: false}));
-  // Not tab reachable
-  container.appendChild(comboBoxExample({tabIndex: -1, disabled: false}));
-  // Disabled
-  container.appendChild(comboBoxExample({tabIndex: 0, disabled: true}));
-}
-init();

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