chrome-devtools-frontend 1.0.1541552 → 1.0.1543082

package/front_end/panels/security/IPProtectionView.ts

@@ -1,287 +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 '../../ui/components/switch/switch.js';
-import '../../ui/components/cards/cards.js';
-import '../../ui/legacy/components/data_grid/data_grid.js';
-import '../../ui/components/buttons/buttons.js';
-
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
-
-import ipProtectionViewStyles from './ipProtectionView.css.js';
-
-const {render, html} = Lit;
-const {widgetConfig} = UI.Widget;
-
-const UIStrings = {
-  /**
-   *@description Title in the view's header for the IP Protection tool in the Privacy & Security panel
-   */
-  viewTitle: 'IP Protection Proxy Controls',
-  /**
-   *@description Explanation in the view's header about the purpose of this IP Protection tool
-   */
-  viewExplanation: 'Test how this site will perform if IP Proxy is enabled in Chrome',
-  /**
-   *@description Title in the card within the IP Protection tool
-   */
-  cardTitle: 'IP Protection Proxy Status',
-  /**
-   *@description Subheading for bypassing IP protection toggle
-   */
-  bypassTitle: 'Bypass IP Protection',
-  /**
-   *@description Description of bypass IP protection toggle
-   */
-  bypassDescription: 'Temporarily bypass IP protection for testing',
-  /**
-   * @description Text informing the user that IP Proxy is not available
-   */
-  notInIncognito: 'IP proxy unavailable',
-  /**
-   * @description Description in the widget instructing users to open site in incognito
-   */
-  openIncognito: 'IP proxy is only available within incognito mode. Open site in incognito.',
-  /**
-   * @description Column header for the ID of a proxy request in the Proxy Request View panel.
-   */
-  idColumn: 'ID',
-  /**
-   * @description Column header for the URL of a proxy request in the Proxy Request View panel.
-   */
-  urlColumn: 'URL',
-  /**
-   * @description Column header for the HTTP method of a proxy request in the Proxy Request View panel.
-   */
-  methodColumn: 'Method',
-  /**
-   * @description Column header for the status code of a proxy request in the Proxy Request View panel.
-   */
-  statusColumn: 'Status',
-  /**
-   * @description Title for the grid of proxy requests.
-   */
-  proxyRequests: 'Proxy Requests',
-  /**
-   * @description The status text for the available status of the IP protection proxy.
-   */
-  Available: 'IP Protection is enabled and active.',
-  /**
-   * @description The status text for when the feature is not enabled.
-   */
-  FeatureNotEnabled: 'IP Protection feature is not enabled.',
-  /**
-   * @description The status text for when the masked domain list is not enabled.
-   */
-  MaskedDomainListNotEnabled: 'Masked Domain List feature is not enabled.',
-  /**
-   * @description The status text for when the masked domain list is not populated.
-   */
-  MaskedDomainListNotPopulated: 'Masked Domain List is not populated.',
-  /**
-   * @description The status text for when authentication tokens are unavailable.
-   */
-  AuthTokensUnavailable: 'Limit for authentication tokens was reached. IP Protection will be paused.',
-  /**
-   * @description The status text for when the proxy is unavailable for another reason.
-   */
-  Unavailable: 'IP Protection is unavailable.',
-  /**
-   * @description The status text for when the proxy is bypassed by DevTools.
-   */
-  BypassedByDevTools: 'IP Protection is being bypassed by DevTools.',
-  /**
-   * @description The status text for when the status is unknown or being loaded.
-   */
-  statusUnknown: 'Status unknown',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/security/IPProtectionView.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-// Explicitly reference dynamically referenced UIStrings to prevent the linter from removing
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const allStatusStrings = [
-  UIStrings.Available,
-  UIStrings.FeatureNotEnabled,
-  UIStrings.MaskedDomainListNotEnabled,
-  UIStrings.MaskedDomainListNotPopulated,
-  UIStrings.AuthTokensUnavailable,
-  UIStrings.Unavailable,
-  UIStrings.BypassedByDevTools,
-  UIStrings.statusUnknown,
-];
-const INCOGNITO_EXPLANATION_URL = 'https://support.google.com/chrome/answer/95464?hl=en&co=GENIE.Platform%3DDesktop' as
-    Platform.DevToolsPath.UrlString;
-
-/** A simplified representation of a network request for mock data. **/
-interface MockNetworkRequest {
-  requestId: string;
-  url: string;
-  requestMethod: string;
-  statusCode: number;
-}
-
-export interface ViewInput {
-  status: Protocol.Network.IpProxyStatus|null;
-  proxyRequests: readonly MockNetworkRequest[];
-}
-export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-
-export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const {status} = input;
-  const statusText = status ? i18nString(UIStrings[status]) : i18nString(UIStrings.statusUnknown);
-
-  // clang-format off
-  const cardHeader = html`
-    <div class="card-header">
-      <div class="lhs">
-        <div class="text">
-          <h2 class="main-text">${i18nString(UIStrings.cardTitle)}</h2>
-          <div class="body subtext">${statusText}</div>
-        </div>
-      </div>
-      <div class="status-badge">
-       ${
-      status === Protocol.Network.IpProxyStatus.Available ?
-          html`<devtools-icon class="status-icon green-status-icon" role="presentation" name="check-circle"></devtools-icon>` :
-          html`<devtools-icon class="status-icon red-status-icon" role="presentation" name="cross-circle-filled"></devtools-icon>`}
-      </div>
-    </div>
-  `;
-  render(
-      html`
-    <style>
-      ${ipProtectionViewStyles}
-    </style>
-    ${
-          Root.Runtime.hostConfig.isOffTheRecord ? html`
-      <div class="overflow-auto">
-        <div class="ip-protection">
-          <div class="header">
-            <h1>${i18nString(UIStrings.viewTitle)}</h1>
-            <div class="body">${i18nString(UIStrings.viewExplanation)}</div>
-          </div>
-          <devtools-card class="card-container">
-            <div class="card">
-              ${cardHeader}
-              <div>
-                <div class="card-row">
-                  <div class="lhs">
-                    <h3 class="main-text">${i18nString(UIStrings.bypassTitle)}</h3>
-                    <div class="body subtext">${i18nString(UIStrings.bypassDescription)}</div>
-                  </div>
-                  <div>
-                    <devtools-switch></devtools-switch>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </devtools-card>
-          <devtools-data-grid striped name=${i18nString(UIStrings.proxyRequests)}>
-          <table>
-            <thead>
-              <tr>
-                <th id="id" sortable>${i18nString(UIStrings.idColumn)}</th>
-                <th id="url" sortable>${i18nString(UIStrings.urlColumn)}</th>
-                <th id="method" sortable>${i18nString(UIStrings.methodColumn)}</th>
-                <th id="status" sortable>${i18nString(UIStrings.statusColumn)}</th>
-              </tr>
-            </thead>
-            <tbody id="proxy-requests-body">
-              ${input.proxyRequests.map((request, index) => html`
-                <tr data-request-id=${request.requestId}>
-                  <td>${index + 1}</td>
-                  <td>${request.url}</td>
-                  <td>${request.requestMethod}</td>
-                  <td>${String(request.statusCode)}</td>
-                </tr>
-              `)}
-            </tbody>
-          </table>
-        </devtools-data-grid>
-        </div>
-      </div>
-    ` :
-    html`
-      <div class="empty-report">
-        <devtools-widget
-          class="learn-more"
-          .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
-                                          header: i18nString(UIStrings.notInIncognito),
-                                          text: i18nString(UIStrings.openIncognito),
-                                          link: INCOGNITO_EXPLANATION_URL,
-                                        })}>
-        </devtools-widget>
-      </div>
-    `}
-  `,
-    target);
-  // clang-format on
-};
-export class IPProtectionView extends UI.Widget.VBox {
-  #view: View;
-  #proxyRequests: MockNetworkRequest[] = [];
-  #status: Protocol.Network.IpProxyStatus|null = null;
-
-  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {useShadowDom: true});
-    this.#view = view;
-
-    // TODO(crbug.com/429153435): Replace with real data.
-    this.#proxyRequests = [
-      {requestId: '1', url: 'https://example.com/api/data', requestMethod: 'GET', statusCode: 200},
-      {requestId: '2', url: 'https://example.com/api/submit', requestMethod: 'POST', statusCode: 404},
-      {requestId: '3', url: 'https://example.com/assets/style.css', requestMethod: 'GET', statusCode: 200},
-    ];
-  }
-
-  override async wasShown(): Promise<void> {
-    super.wasShown();
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
-        this.#updateIpProtectionStatus, this);
-    await this.#updateIpProtectionStatus();
-  }
-
-  override willHide(): void {
-    SDK.TargetManager.TargetManager.instance().removeModelListener(
-        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
-        this.#updateIpProtectionStatus, this);
-    super.willHide();
-  }
-
-  async #updateIpProtectionStatus(): Promise<void> {
-    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!target) {
-      this.#status = null;
-      this.requestUpdate();
-      return;
-    }
-    const model = target.model(SDK.NetworkManager.NetworkManager);
-    if (!model) {
-      this.#status = null;
-      this.requestUpdate();
-      return;
-    }
-    const status = await model.getIpProtectionProxyStatus();
-    this.#status = status;
-    this.requestUpdate();
-  }
-
-  get proxyRequests(): readonly MockNetworkRequest[] {
-    return this.#proxyRequests;
-  }
-
-  override performUpdate(): void {
-    const input = {status: this.#status, proxyRequests: this.#proxyRequests};
-    this.#view(input, this, this.contentElement);
-  }
-}

package/front_end/ui/components/docs/expandable_list/basic.html

@@ -1,24 +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 Expandable List example</title>
-    <style>
-      #container {
-        padding: 20px;
-        font-size: 16px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/expandable_list/basic.ts

@@ -1,30 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ExpandableList from '../../expandable_list/expandable_list.js';
-
-const {html} = Lit;
-
-await FrontendHelpers.initializeGlobalVars();
-
-const component = new ExpandableList.ExpandableList.ExpandableList();
-
-const rows = [];
-rows.push(html`
-  <div>This is row 1. Click on the triangle icon to expand.</div>
-`);
-
-for (let rowNumber = 2; rowNumber < 11; rowNumber++) {
-  rows.push(html`
-    <div>This is row ${rowNumber}.</div>
-  `);
-}
-
-component.data = {
-  rows,
-};
-
-document.getElementById('container')?.appendChild(component);

package/front_end/ui/components/docs/markdown_image/basic.html

@@ -1,19 +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 Markdown Image example</title>
-  </head>
-  <body>
-    <div id="icon"></div>
-    <div id="image"></div>
-
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/markdown_image/basic.ts

@@ -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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as MarkdownView from '../../markdown_view/markdown_view.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-// Adding a couple image keys to the image map.
-MarkdownView.MarkdownImagesMap.markdownImages.set('test-icon', {
-  src: '../../Images/issue-text-filled.svg',
-  isIcon: true,
-  width: '20px',
-  height: '20px',
-});
-MarkdownView.MarkdownImagesMap.markdownImages.set('test-image', {
-  src: '../../Images/lighthouse_logo.svg',
-  width: '200px',
-  height: '200px',
-  isIcon: false,
-});
-
-const iconComponent = new MarkdownView.MarkdownImage.MarkdownImage();
-document.getElementById('icon')?.appendChild(iconComponent);
-iconComponent.data = {
-  key: 'test-icon',
-  title: 'Test icon title',
-};
-
-const imageComponent = new MarkdownView.MarkdownImage.MarkdownImage();
-document.getElementById('image')?.appendChild(imageComponent);
-imageComponent.data = {
-  key: 'test-image',
-  title: 'Test image title',
-};

package/front_end/ui/components/docs/markdown_link/basic.html

@@ -1,17 +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 Markdown Link example</title>
-  </head>
-  <body>
-    <div id="target"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/markdown_link/basic.ts

@@ -1,19 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as MarkdownView from '../../markdown_view/markdown_view.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-MarkdownView.MarkdownLinksMap.markdownLinks.set('textLink', 'https://example.com/');
-
-const link = new MarkdownView.MarkdownLink.MarkdownLink();
-document.getElementById('target')?.appendChild(link);
-link.data = {
-  key: 'textLink',
-  title: 'Test link title',
-};

package/front_end/ui/components/docs/markdown_view/basic.html

@@ -1,25 +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 Markdown View example</title>
-    <style>
-      #container {
-        border: 1px solid;
-        width: 400px;
-        padding: 1em;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/markdown_view/basic.ts

@@ -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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Marked from '../../../../third_party/marked/marked.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as MarkdownView from '../../markdown_view/markdown_view.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-// Register images in the markdown image map.
-MarkdownView.MarkdownImagesMap.markdownImages.set('lighthouse-icon', {
-  src: '../../Images/lighthouse_logo.svg',
-  width: '16px',
-  height: '16px',
-  isIcon: true,
-});
-MarkdownView.MarkdownImagesMap.markdownImages.set('baseline', {
-  src: '../../Images/align-items-baseline.svg',
-  width: '200px',
-  height: '200px',
-  isIcon: false,
-});
-
-// Register a link in the markdown link map.
-MarkdownView.MarkdownLinksMap.markdownLinks.set('test-link', 'https://exampleLink.com/');
-
-const component = new MarkdownView.MarkdownView.MarkdownView();
-document.getElementById('container')?.appendChild(component);
-
-const markdownAst = Marked.Marked.lexer(`
-Lorem ipsum dolor sit amet, ![icon](lighthouse-icon) consectetur adipiscing elit. [Phasellus tristique](test-link) metus velit, a laoreet sapien ultricies eu. Fusce facilisis, felis id ullamcorper placerat, enim magna porta justo, nec aliquet orci arcu eu velit. Ut quis maximus dolor. Morbi congue tempus porttitor. Duis ut lorem gravida, vehicula mi et, suscipit risus.
-
-* Cras varius cursus eros.
-* Mauris non blandit turpis.
-
-Proin posuere varius risus, nec tristique urna elementum ut.
-
-\`\`\`js
-console.log('test')
-\`\`\`
-
-\`\`\`js
-MarkdownView.MarkdownImagesMap.markdownImages.set('lighthouse-icon', {
-  src: '../../Images/lighthouse_logo.svg',
-  width: '16px',
-  height: '16px',
-  isIcon: true,
-});
-MarkdownView.MarkdownImagesMap.markdownImages.set('baseline', {
-  src: '../../Images/align-items-baseline.svg',
-  width: '200px',
-  height: '200px',
-  isIcon: false,
-});
-\`\`\`
-
-![Image](baseline)
-
-\`Cras id elit at erat porttitor elementum\`. Donec purus nulla, suscipit eu hendrerit in, auctor eu erat. Proin ut accumsan mi, rhoncus interdum odio. Etiam dapibus posuere lorem.
-`);
-
-component.data = {
-  tokens: markdownAst,
-};

package/front_end/ui/components/docs/markdown_view/code-block.html

@@ -1,30 +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>Code Block - Markdown View example</title>
-    <style>
-      #container {
-        max-width: 100vw;
-        max-height: 100vh;
-        border: 1px solid black;
-        padding: 24px;
-        overflow: auto;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: auto;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container"></div>
-
-    <script type="module" src="./code-block.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/markdown_view/code-block.ts

@@ -1,71 +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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as MarkdownView from '../../markdown_view/markdown_view.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-const container = document.getElementById('container');
-
-function appendCodeBlock(data: {
-  displayNotice: boolean,
-  header?: string,
-  showCopyButton?: boolean,
-}): void {
-  const component = new MarkdownView.CodeBlock.CodeBlock();
-  container?.appendChild(document.createTextNode(JSON.stringify(data)));
-  container?.appendChild(component);
-  component.codeLang = 'js';
-  component.code = `MarkdownView.MarkdownImagesMap.markdownImages.set('lighthouse-icon', {
-    src: '../../Images/lighthouse_logo.svg',
-    width: '16px',
-    height: '16px',
-    isIcon: true,
-  });
-  MarkdownView.MarkdownImagesMap.markdownImages.set('baseline', {
-    src: '../../Images/align-items-baseline.svg',
-    width: '200px',
-    height: '200px',
-    isIcon: false,
-  });`;
-  component.displayNotice = data.displayNotice;
-  if (data.header) {
-    component.header = data.header;
-  }
-  if (data.showCopyButton) {
-    component.showCopyButton = data.showCopyButton;
-  }
-}
-
-appendCodeBlock({
-  displayNotice: true,
-});
-appendCodeBlock({
-  displayNotice: false,
-});
-
-appendCodeBlock({
-  displayNotice: true,
-  header: 'Code executed',
-  showCopyButton: false,
-});
-appendCodeBlock({
-  displayNotice: false,
-  header: 'Code executed',
-  showCopyButton: false,
-});
-
-appendCodeBlock({
-  displayNotice: true,
-  header: 'Code executed',
-  showCopyButton: true,
-});
-appendCodeBlock({
-  displayNotice: false,
-  header: 'Code executed',
-  showCopyButton: true,
-});

package/front_end/ui/components/docs/text_prompt/basic.html

@@ -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 Text Prompt example</title>
-  <meta charset="UTF-8" />
-  <style>
-    #container {
-      width: 80%;
-      border: 1px solid black;
-      padding: 20px;
-      height: 300px;
-    }
-
-    #container > devtools-text-prompt {
-      vertical-align: middle;
-      font-size: 14px;
-      border: 1px solid #ccc;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="container"></div>
-  <script type="module" src="./basic.js"></script>
-</body>
-
-</html>