chrome-devtools-frontend 1.0.1542501 → 1.0.1543472

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/input/basic.html

@@ -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>Input example</title>
-    <style>
-      #container {
-        padding: 25px;
-        width: 300px;
-        display: flex;
-        flex-direction: column;
-        font-size: 16px;
-      }
-      #container > * {
-        margin-bottom: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-      <input class="devtools-text-input" placeholder="placeholder" />
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

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

@@ -1,12 +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 Input from '../../input/input.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-document.head.appendChild(document.createElement('style')).textContent = Input.textInputStyles;

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

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

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

@@ -1,48 +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 '../../report_view/report_view.js';
-
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-
-const {html} = Lit;
-
-await ComponentHelpers.ComponentServerSetup.setup();
-
-const exampleRenderHelper = (key: string, value: string) => html`
-          <devtools-report-key>${key}</devtools-report-key>
-          <devtools-report-value>${value}</devtools-report-value>
-        `;
-
-const container = document.querySelector<HTMLElement>('#container');
-if (!container) {
-  throw new Error('Could not find container');
-}
-
-Lit.render(
-    html`
-        <style>
-          .source-code {
-            font-family: monospace;
-          }
-        </style>
-
-        <devtools-report .data=${{
-reportTitle:
-  'Optional Title',
-    }}>
-          <devtools-report-section-header>Section 1</devtools-report-section-header>
-          <devtools-report-key>Basic plain text field</devtools-report-key>
-          <devtools-report-value>And this is the value</devtools-report-value>
-          <devtools-report-key>A field with a code value</devtools-report-key>
-          <devtools-report-value class="source-code">SomeCodeValue</devtools-report-value>
-          <devtools-report-divider></devtools-report-divider>
-          <devtools-report-section-header>Section 2</devtools-report-section-header>
-          ${exampleRenderHelper('Using a small helper', 'to render report rows')}
-          ${exampleRenderHelper('This wide column defines the column width', 'for all rows')}
-          <devtools-report-divider></devtools-report-divider>
-        </devtools-report>
-      `,
-    container);

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>

package/front_end/ui/components/docs/text_prompt/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 TextPrompt from '../../text_prompt/text_prompt.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-const textPrompt = new TextPrompt.TextPrompt.TextPrompt();
-document.getElementById('container')?.appendChild(textPrompt);
-
-textPrompt.data = {
-  ariaLabel: 'Quick open prompt',
-  prefix: 'Open',
-  suggestion: 'File',
-};

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

@@ -1,56 +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>DevTools Theme Colors</title>
-  <style>
-    body {
-      /**
-       * The injected themes switch off user-select. This switches
-       * it back on so that we can select colors.
-       */
-      user-select: auto !important; /* stylelint-disable-line declaration-no-important */
-      overflow: auto !important; /* stylelint-disable-line declaration-no-important */
-    }
-
-    #container {
-      display: grid;
-      max-width: 600px;
-      grid-template-columns: repeat(2, 1fr);
-      row-gap: var(--sys-size-5);
-      column-gap: var(--sys-size-5);
-
-      > span {
-        font: var(--sys-typescale-headline1);
-      }
-
-      > div {
-        display: block;
-        border-bottom-width: var(--sys-size-9);
-        border-bottom-style: solid;
-        text-align: center;
-        font: var(--sys-typescale-body1-regular);
-        margin-bottom: var(--sys-size-5);
-      }
-    }
-  </style>
-</head>
-
-<body>
-
-  <div id="container">
-    <span>Light Mode</span>
-    <span>Dark Mode</span>
-  </div>
-
-  <script type="module" src="./basic.js"></script>
-</body>
-
-</html>

package/front_end/ui/components/docs/toggle_dark_mode.ts

@@ -1,36 +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.
-
-const DARK_THEME_CLASS = 'theme-with-dark-background';
-
-function toggleDarkMode(force?: boolean): void {
-  // Only use the second arg if its not undefined. The spec treats `undefined` as falsy. :/
-  document.body.classList.toggle(...[DARK_THEME_CLASS, ...force !== undefined ? [force] : []]);
-}
-
-export function init(): void {
-  // To keep consistent test results, we don't auto-initialize darkmode. This'd do it, though:
-  //    toggleDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);
-
-  window.addEventListener('load', () => {
-    const button = document.createElement('button');
-    button.innerText = 'Toggle light/dark mode';
-    button.className = 'component-docs-ui';
-
-    button.style.position = 'fixed';
-    button.style.bottom = '10px';
-    button.style.right = '10px';
-    button.style.width = '200px';
-    button.style.fontSize = '16px';
-    button.style.padding = '5px';
-    button.style.cursor = 'pointer';
-
-    button.addEventListener('click', event => {
-      event.preventDefault();
-      toggleDarkMode();
-    });
-
-    document.body.appendChild(button);
-  });
-}