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

chrome-devtools-frontend 1.0.1538523 → 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/color_swatch/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 Common from '../../../../core/common/common.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as InlineEditor from '../../../legacy/components/inline_editor/inline_editor.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-function appendExample(swatch: InlineEditor.ColorSwatch.ColorSwatch): void {
-  const li = document.createElement('li');
-  li.appendChild(swatch);
-  document.querySelector('#container')?.appendChild(li);
-}
-// Simple
-let component = new InlineEditor.ColorSwatch.ColorSwatch();
-component.renderColor(Common.Color.parse('#f06') as Common.Color.Color);
-appendExample(component);
-// No text next to the swatch
-component = new InlineEditor.ColorSwatch.ColorSwatch();
-component.renderColor(Common.Color.parse('gold') as Common.Color.Color);
-let content = document.createElement('span');
-content.textContent = '';
-component.appendChild(content);
-appendExample(component);
-// Custom content
-component = new InlineEditor.ColorSwatch.ColorSwatch();
-component.renderColor(Common.Color.parse('rebeccapurple') as Common.Color.Color);
-content = document.createElement('span');
-content.textContent = 'custom content';
-component.appendChild(content);
-appendExample(component);

package/front_end/ui/components/docs/color_swatch/change-color.html DELETED Viewed

@@ -1,24 +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>Color Swatch picker example</title>
-    <style>
-      #picker {
-        visibility: hidden;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-      <input type="color" id="picker">
-    </div>
-    <script type="module" src="./change-color.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/color_swatch/change-color.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 InlineEditor from '../../../legacy/components/inline_editor/inline_editor.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-const container = document.querySelector('#container');
-const picker = document.querySelector<HTMLInputElement>('#picker');
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const component = new InlineEditor.ColorSwatch.ColorSwatch();
-document.getElementById('container')?.appendChild(component);
-component.renderColor(Common.Color.parse('#f06') as Common.Color.Color);
-container?.insertBefore(component, picker);
-picker?.addEventListener('input', e => {
-  const color = Common.Color.parse((e.target as HTMLInputElement).value);
-  if (color) {
-    component.renderColor(color);
-  }
-});
-component.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName, () => picker?.click());

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

@@ -1,25 +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>inherited Computed Style Property example</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,19 +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';
-await FrontendHelpers.initializeGlobalVars();
-const component = new Elements.ComputedStyleProperty.ComputedStyleProperty();
-document.getElementById('container')?.appendChild(component);
-component.innerHTML = `
-<span slot="name">display</span>
-<span slot="value">block</span>
-  `;
-component.traceable = false;
-component.inherited = true;

package/front_end/ui/components/docs/computed_style_property/traceable.html DELETED Viewed

@@ -1,25 +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>traceable Computed Style Property example</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./traceable.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/computed_style_property/traceable.ts DELETED Viewed

@@ -1,16 +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';
-const component = new Elements.ComputedStyleProperty.ComputedStyleProperty();
-document.getElementById('container')?.appendChild(component);
-component.innerHTML = `
-<span slot="name">display</span>
-<span slot="value">grid</span>
-  `;
-component.traceable = true;
-component.inherited = false;

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

@@ -1,25 +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 Computed Style Trace example</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,24 +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';
-const component = new Elements.ComputedStyleTrace.ComputedStyleTrace();
-const traceValue = document.createElement('span');
-traceValue.textContent = 'block';
-traceValue.slot = 'trace-value';
-component.appendChild(traceValue);
-const traceLink = document.createElement('span');
-traceLink.textContent = 'user agent stylesheet';
-traceLink.slot = 'trace-link';
-component.appendChild(traceLink);
-document.getElementById('container')?.appendChild(component);
-component.data = {
-  selector: 'body',
-  active: true,
-  onNavigateToSource: () => {},
-};

package/front_end/ui/components/docs/console_insight/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>Basic Console Insight example</title>
-    <style>
-      #container {
-        box-sizing: border-box;
-        border: 1px solid;
-        width: 600px;
-        margin: 1em;
-        padding: 1em;
-        background-color: aqua;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,103 +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 Host from '../../../../core/host/host.js';
-import * as Console from '../../../../panels/console/console.js';
-import * as Explain from '../../../../panels/explain/explain.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const ConsoleInsight = Explain.ConsoleInsight;
-const component = new ConsoleInsight(
-    {
-      getSearchQuery() {
-        return '';
-      },
-      async buildPrompt() {
-        return {
-          prompt: '',
-          isPageReloadRecommended: false,
-          sources: [
-            {
-              type: Console.PromptBuilder.SourceType.MESSAGE,
-              value: 'Something went wrong\n\nSomething went wrong',
-            },
-            {
-              type: Console.PromptBuilder.SourceType.NETWORK_REQUEST,
-              value: `Request: https://example.com/data.html
-Request headers:
-:authority: example.com
-:method: GET
-:path: https://example.com/data.json
-:scheme: https
-accept: */*
-accept-encoding: gzip, deflate, br
-accept-language: en-DE,en;q=0.9,de-DE;q=0.8,de;q=0.7,en-US;q=0.6
-referer: https://example.com/demo.html
-sec-ch-ua: "Not A(Brand";v="99", "Google Chrome";v="121", "Chromium";v="121"
-sec-ch-ua-arch: "arm"
-sec-ch-ua-bitness: "64"
-sec-ch-ua-full-version: "121.0.6116.0"
-sec-ch-ua-full-version-list: "Not A(Brand";v="99.0.0.0", "Google Chrome";v="121.0.6116.0", "Chromium";v="121.0.6116.0"
-sec-ch-ua-mobile: ?0
-sec-ch-ua-model: ""
-sec-ch-ua-platform: "macOS"
-sec-ch-ua-platform-version: "14.1.0"
-sec-ch-ua-wow64: ?0
-sec-fetch-dest: empty
-sec-fetch-mode: cors
-sec-fetch-site: same-origin
-user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
-Response headers:
-accept-ch: Sec-CH-UA, Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA-WoW64
-content-length: 1646
-content-type: text/html; charset=UTF-8
-cross-origin-opener-policy-report-only: same-origin; report-to="gfe-static-content-corp"
-date: Fri, 10 Nov 2023 13:46:47 GMT
-permissions-policy: ch-ua=*, ch-ua-arch=*, ch-ua-bitness=*, ch-ua-full-version=*, ch-ua-full-version-list=*, ch-ua-mobile=*, ch-ua-model=*, ch-ua-platform=*, ch-ua-platform-version=*, ch-ua-wow64=*
-server: sffe
-strict-transport-security: max-age=31536000; includeSubdomains
-vary: Origin
-Response status: 404`,
-            },
-          ],
-        };
-      },
-    },
-    {
-      async *
-          doConversation() {
-            await new Promise(resolve => setTimeout(resolve, 2000));
-            yield {
-              explanation: `Some text with \`code\`. Some code:
-\`\`\`ts
-console.log('test');
-document.querySelector('test').style = 'black';
-\`\`\`
-Some text with \`code\`. Some code:
-\`\`\`ts
-console.log('test');
-document.querySelector('test').style = 'black';
-\`\`\`
-Some text with \`code\`. Some code:
-\`\`\`ts
-console.log('test');
-document.querySelector('test').style = 'black';
-\`\`\`
-`,
-              metadata: {},
-              completed: true,
-            };
-          },
-      registerClientEvent: () => Promise.resolve({}),
-    },
-    Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
-document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/console_insight/error.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>Basic Console Insight example</title>
-    <style>
-      #container {
-        box-sizing: border-box;
-        border: 1px solid;
-        width: 600px;
-        margin: 1em;
-        padding: 1em;
-        background-color: aqua;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script type="module" src="./error.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/console_insight/error.ts DELETED Viewed

@@ -1,33 +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 Host from '../../../../core/host/host.js';
-import * as Explain from '../../../../panels/explain/explain.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const ConsoleInsight = Explain.ConsoleInsight;
-const component = new ConsoleInsight(
-    {
-      getSearchQuery() {
-        return '';
-      },
-      async buildPrompt() {
-        return {prompt: '', sources: [], isPageReloadRecommended: false};
-      },
-    },
-    {
-      async *
-          // eslint-disable-next-line require-yield
-          doConversation() {
-            throw new Error('Could not connect to the server');
-          },
-      registerClientEvent: () => Promise.resolve({}),
-    },
-    Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
-document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/console_insight/loading.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>Basic Console Insight example</title>
-    <style>
-      #container {
-        box-sizing: border-box;
-        border: 1px solid;
-        width: 600px;
-        margin: 1em;
-        padding: 1em;
-        background-color: aqua;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-    <script type="module" src="./loading.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/console_insight/loading.ts DELETED Viewed

@@ -1,47 +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 Host from '../../../../core/host/host.js';
-import * as Explain from '../../../../panels/explain/explain.js';
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-const ConsoleInsight = Explain.ConsoleInsight;
-const component = new ConsoleInsight(
-    {
-      getSearchQuery() {
-        return '';
-      },
-      async buildPrompt() {
-        return {prompt: '', sources: [], isPageReloadRecommended: false};
-      },
-    },
-    {
-      async *
-          doConversation() {
-            await new Promise(_resolve => {});
-            yield {
-              explanation: `## Result
-Some text with \`code\`. Some code:
-\`\`\`ts
-console.log('test');
-document.querySelector('test').style = 'black';
-\`\`\`
-Links: [https://example.com](https://example.com)
-Images: ![https://example.com](https://example.com)
-`,
-              metadata: {},
-              completed: true,
-            };
-          },
-      registerClientEvent: () => Promise.resolve({}),
-    },
-    Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
-document.getElementById('container')?.appendChild(component);

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

@@ -1,43 +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 Breadcrumbs example</title>
-    <style>
-      #container {
-        width: 80%;
-        border: 1px solid black;
-      }
-      .fake-crumb-element {
-        width: 300px;
-        height: 40px;
-        background: red;
-        margin-bottom: 10px;
-        padding: 2px;
-        color: white;
-        font-size: 20px;
-        text-align: center;
-      }
-      .fake-crumb-element.highlight {
-        background: blue;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="fake-crumb-element" data-fake-crumb-1>body</div>
-    <div class="fake-crumb-element" data-fake-crumb-2>div#test-id</div>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,54 +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: 2,
-  nodeName: 'body',
-  nodeNameNicelyCased: 'body',
-  highlightNode: () => {
-    document.querySelector('[data-fake-crumb-1]')?.classList.add('highlight');
-  },
-  clearHighlight: () => {
-    document.querySelector('[data-fake-crumb-1]')?.classList.remove('highlight');
-  },
-});
-const divCrumb = makeCrumb({
-  nodeType: Node.ELEMENT_NODE,
-  id: 3,
-  nodeName: 'div',
-  nodeNameNicelyCased: 'div',
-  attributes: {
-    id: 'test-id',
-  },
-  highlightNode: () => {
-    document.querySelector('[data-fake-crumb-2]')?.classList.add('highlight');
-  },
-  clearHighlight: () => {
-    document.querySelector('[data-fake-crumb-2]')?.classList.remove('highlight');
-  },
-});
-document.getElementById('container')?.appendChild(component);
-component.data = {
-  crumbs: [divCrumb, bodyCrumb],
-  selectedNode: bodyCrumb,
-};
-component.addEventListener('breadcrumbsnodeselected', ({legacyDomNode}) => {
-  // eslint-disable-next-line no-console
-  console.log('node selected', legacyDomNode);
-});

package/front_end/ui/components/docs/elements_breadcrumbs/helpers.ts 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.
-import type * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Elements from '../../../../panels/elements/components/components.js';
-interface CrumbOverrides extends Partial<Elements.Helper.DOMNode> {
-  attributes?: Record<string, string|undefined>;
-}
-let id = 0;
-export const makeCrumb = (overrides: CrumbOverrides = {}) => {
-  const attributes = overrides.attributes || {};
-  const newCrumb: Elements.Helper.DOMNode = {
-    nodeType: Node.ELEMENT_NODE,
-    id: id++,
-    pseudoType: '',
-    parentNode: null,
-    shadowRootType: '',
-    nodeName: 'body',
-    nodeNameNicelyCased: 'body',
-    legacyDomNode: {} as unknown as SDK.DOMModel.DOMNode,
-    highlightNode: () => {},
-    clearHighlight: () => {},
-    getAttribute: (x: string) => attributes[x] || '',
-    ...overrides,
-  };
-  return newCrumb;
-};

package/front_end/ui/components/docs/elements_breadcrumbs/scroll-to-active-element.html 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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Scrolling breadcrumbs example</title>
-    <style>
-      #container {
-        width: 500px;
-        border: 1px solid black;
-      }
-      button {
-        margin-top: 20px;
-        width: 400px;
-        font-size: 18px;
-        padding: 10px;
-      }
-      :root {
-        --tab-selected-bg-color: lightblue;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <button>Click me to make the <code>div</code> crumb the selected node (as if the user had clicked it in the elements pane)</button>
-    <script type="module" src="./scroll-to-active-element.js"></script>
-  </body>
-</html>