chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -1,7 +1,7 @@
 // Copyright 2025 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
+
 /* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import * as Common from '../../../core/common/common.js';
@@ -19,55 +19,55 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Section header for a list of the main aspects of a direct socket connection
+   * @description Section header for a list of the main aspects of a direct socket connection
    */
   general: 'General',
   /**
-   *@description Section header for a list of the main aspects of a direct socket connection
+   * @description Section header for a list of the main aspects of a direct socket connection
    */
   options: 'Options',
   /**
-   *@description Section header for a list of the main aspects of a direct socket connection
+   * @description Section header for a list of the main aspects of a direct socket connection
    */
   openInfo: 'Open Info',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   type: 'DirectSocket Type',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   errorMessage: 'Error message',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   status: 'Status',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketTypeTcp: 'TCP',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketTypeUdpConnected: 'UDP (connected)',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketTypeUdpBound: 'UDP (bound)',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketStatusOpening: 'Opening',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketStatusOpen: 'Open',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketStatusClosed: 'Closed',
   /**
-   *@description Text in Connection info View of the Network panel
+   * @description Text in Connection info View of the Network panel
    */
   directSocketStatusAborted: 'Aborted',
 
@@ -212,11 +212,13 @@ export class DirectSocketConnectionView extends UI.Widget.Widget {
   #view: View;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('connection-info').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.#request = request;
     this.#view = view;
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('connection-info').track({resize: true})}`);
     this.performUpdate();
   }
 

package/front_end/panels/network/components/HeaderSectionRow.ts

@@ -23,39 +23,39 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
+   * @description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
    */
   activeClientExperimentVariation: 'Active `client experiment variation IDs`.',
   /**
-   *@description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
+   * @description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
    */
   activeClientExperimentVariationIds: 'Active `client experiment variation IDs` that trigger server-side behavior.',
   /**
-   *@description Text in Headers View of the Network panel for X-Client-Data HTTP headers
+   * @description Text in Headers View of the Network panel for X-Client-Data HTTP headers
    */
   decoded: 'Decoded:',
   /**
-   *@description The title of a button to enable overriding a HTTP header.
+   * @description The title of a button to enable overriding a HTTP header.
    */
   editHeader: 'Override header',
   /**
-   *@description Description of which letters the name of an HTTP header may contain (a-z, A-Z, 0-9, '-', or '_').
+   * @description Description of which letters the name of an HTTP header may contain (a-z, A-Z, 0-9, '-', or '_').
    */
   headerNamesOnlyLetters: 'Header names should contain only letters, digits, hyphens or underscores',
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
   /**
-   *@description Text for a link to the issues panel
+   * @description Text for a link to the issues panel
    */
   learnMoreInTheIssuesTab: 'Learn more in the issues tab',
   /**
-   *@description Hover text prompting the user to reload the whole page or refresh the particular request, so that the changes they made take effect.
+   * @description Hover text prompting the user to reload the whole page or refresh the particular request, so that the changes they made take effect.
    */
   reloadPrompt: 'Refresh the page/request for these changes to take effect',
   /**
-   *@description The title of a button which removes a HTTP header override.
+   * @description The title of a button which removes a HTTP header override.
    */
   removeOverride: 'Remove this header override',
 } as const;
@@ -180,12 +180,7 @@ export class HeaderSectionRow extends HTMLElement {
             Lit.nothing
           }
           ${isHeaderNameEditable && !this.#isValidHeaderName ?
-            html`<devtools-icon class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{
-              iconName: 'cross-circle-filled',
-              width: '16px',
-              height: '16px',
-              color: 'var(--icon-error)',
-            }}>
+            html`<devtools-icon class="inline-icon disallowed-characters medium" title=${UIStrings.headerNamesOnlyLetters} name='cross-circle-filled'>
             </devtools-icon>` : Lit.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?
@@ -205,12 +200,7 @@ export class HeaderSectionRow extends HTMLElement {
           ${this.#renderHeaderValue()}
         </div>
         ${showReloadInfoIcon ?
-          html`<devtools-icon class="row-flex-icon flex-right" title=${UIStrings.reloadPrompt} .data=${{
-            iconName: 'info',
-            width: '16px',
-            height: '16px',
-            color: 'var(--icon-default)',
-          }}>
+          html`<devtools-icon name="info" class="row-flex-icon flex-right medium" title=${UIStrings.reloadPrompt}>
           </devtools-icon>` : Lit.nothing
         }
       </div>
@@ -303,15 +293,10 @@ export class HeaderSectionRow extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
-        <devtools-icon class="row-flex-icon" title=${titleText} .data=${{
-            iconName: 'warning-filled',
-            color: 'var(--icon-warning)',
-            width: '16px',
-            height: '16px',
-          }}>
+        <devtools-icon class="row-flex-icon medium" title=${titleText} name='warning-filled'>
         </devtools-icon>
       `;
-            // clang-format on
+      // clang-format on
     }
     return Lit.nothing;
   }
@@ -342,34 +327,24 @@ export class HeaderSectionRow extends HTMLElement {
       // clang-format off
       return html`
         <div class="devtools-link" @click=${blockedDetails.reveal}>
-          <devtools-icon class="inline-icon" .data=${{
-            iconName: 'issue-exclamation-filled',
-            color: 'var(--icon-warning)',
-            width: '16px',
-            height: '16px',
-          }}>
+          <devtools-icon name="issue-exclamation-filled" class="inline-icon medium">
           </devtools-icon
           >${i18nString(UIStrings.learnMoreInTheIssuesTab)}
         </div>
       `;
-            // clang-format on
+      // clang-format on
     }
     if (blockedDetails?.link) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
         <x-link href=${blockedDetails.link.url} class="link">
-          <devtools-icon class="inline-icon" .data=${{
-            iconName: 'open-externally',
-            color: 'var(--icon-link)',
-            width: '20px',
-            height: '20px',
-          }}>
+          <devtools-icon name="open-externally" class="inline-icon extra-large" style="color: var(--icon-link);">
           </devtools-icon
           >${i18nString(UIStrings.learnMore)}
         </x-link>
       `;
-            // clang-format on
+      // clang-format on
     }
     return Lit.nothing;
   }

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -19,20 +19,20 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
   /**
-   *@description Message to explain lack of raw headers for a particular network request
+   * @description Message to explain lack of raw headers for a particular network request
    */
   provisionalHeadersAreShownDisableCache: 'Provisional headers are shown. Disable cache to see full headers.',
   /**
-   *@description Tooltip to explain lack of raw headers for a particular network request
+   * @description Tooltip to explain lack of raw headers for a particular network request
    */
   onlyProvisionalHeadersAre:
       'Only provisional headers are available because this request was not sent over the network and instead was served from a local cache, which doesn’t store the original request headers. Disable cache to see full request headers.',
   /**
-   *@description Message to explain lack of raw headers for a particular network request
+   * @description Message to explain lack of raw headers for a particular network request
    */
   provisionalHeadersAreShown: 'Provisional headers are shown.',
 } as const;
@@ -108,19 +108,14 @@ export class RequestHeaderSection extends HTMLElement {
       <div class="call-to-action">
         <div class="call-to-action-body">
           <div class="explanation" title=${cautionTitle}>
-            <devtools-icon class="inline-icon" .data=${{
-                iconName: 'warning-filled',
-                color: 'var(--icon-warning)',
-                width: '16px',
-                height: '16px',
-              }}>
+            <devtools-icon class="inline-icon medium" name='warning-filled'>
             </devtools-icon>
             ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       </div>
     `;
-                // clang-format on
+    // clang-format on
   }
 }
 

package/front_end/panels/network/components/RequestHeadersView.css

@@ -134,7 +134,7 @@ div.raw-headers-row {
 .header-grid-container {
   display: inline-grid;
   grid-template-columns: 156px 50px 1fr;
-  grid-gap: 4px;
+  gap: 4px;
   /* Make this fit into the same line as the summary marker */
   width: calc(100% - 15px);
 }
@@ -175,6 +175,6 @@ summary label {
   gap: var(--sys-size-3);
 }
 
-summary label input[type="checkbox"] {
+summary devtools-checkbox {
   margin-top: 1px;
 }

package/front_end/panels/network/components/RequestHeadersView.test.ts

@@ -31,6 +31,7 @@ import {
   resetRecordedMetrics,
 } from '../../../testing/UserMetricsHelpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as NetworkForward from '../forward/forward.js';
 
 import * as NetworkComponents from './components.js';
@@ -526,9 +527,11 @@ describeWithEnvironment('RequestHeadersView\'s Category', () => {
     component.addEventListener(NetworkComponents.RequestHeadersView.ToggleRawHeadersEvent.eventName, () => {
       eventCounter += 1;
     });
-    const checkbox = getElementWithinComponent(component, 'input', HTMLInputElement);
+    const checkbox = getElementWithinComponent(component, 'devtools-checkbox', UI.UIUtils.CheckboxLabel);
+    const inputElement = checkbox.shadowRoot?.querySelector('input');
+    assert.exists(inputElement);
 
-    dispatchClickEvent(checkbox);
+    dispatchClickEvent(inputElement);
     assert.strictEqual(eventCounter, 1);
   });
 });

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -1,7 +1,7 @@
 // Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-lit-render-outside-of-view, rulesdir/inject-checkbox-styles */
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
 
 import './RequestHeaderSection.js';
 
@@ -15,7 +15,6 @@ import * as Workspace from '../../../models/workspace/workspace.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -36,79 +35,79 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromDiskCache: '(from disk cache)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromMemoryCache: '(from memory cache)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromEarlyHints: '(from early hints)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromPrefetchCache: '(from prefetch cache)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromServiceWorker: '(from `service worker`)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromSignedexchange: '(from signed-exchange)',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   fromWebBundle: '(from Web Bundle)',
   /**
-   *@description Section header for a list of the main aspects of a http request
+   * @description Section header for a list of the main aspects of a http request
    */
   general: 'General',
   /**
-   *@description Label for a checkbox to switch between raw and parsed headers
+   * @description Label for a checkbox to switch between raw and parsed headers
    */
   raw: 'Raw',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   referrerPolicy: 'Referrer Policy',
   /**
-   *@description Text in Network Log View Columns of the Network panel
+   * @description Text in Network Log View Columns of the Network panel
    */
   remoteAddress: 'Remote Address',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   requestHeaders: 'Request Headers',
   /**
-   *@description The HTTP method of a request
+   * @description The HTTP method of a request
    */
   requestMethod: 'Request Method',
   /**
-   *@description The URL of a request
+   * @description The URL of a request
    */
   requestUrl: 'Request URL',
   /**
-   *@description A context menu item in the Network Log View Columns of the Network panel
+   * @description A context menu item in the Network Log View Columns of the Network panel
    */
   responseHeaders: 'Response Headers',
   /**
-   *@description A context menu item in the Network Log View Columns of the Network panel
+   * @description A context menu item in the Network Log View Columns of the Network panel
    */
   earlyHintsHeaders: 'Early Hints Headers',
   /**
-   *@description Title text for a link to the Sources panel to the file containing the header override definitions
+   * @description Title text for a link to the Sources panel to the file containing the header override definitions
    */
   revealHeaderOverrides: 'Reveal header override definitions',
   /**
-   *@description Text to show more content
+   * @description Text to show more content
    */
   showMore: 'Show more',
   /**
-   *@description HTTP response code
+   * @description HTTP response code
    */
   statusCode: 'Status Code',
 } as const;
@@ -296,11 +295,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     const fileIcon = html`
-      <devtools-icon class=${overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'} .data=${{
-          iconName: 'document',
-          width: '16px',
-          height: '16px',
-        } as IconButton.Icon.IconData}>
+      <devtools-icon name="document" class=${'medium' + overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'}>
       </devtools-icon>`;
     // clang-format on
 
@@ -321,11 +316,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           class="link devtools-link"
           jslog=${VisualLogging.link('devtools-override').track({click: true})}
       >
-        <devtools-icon class="inline-icon" .data=${{
-            iconName: 'help',
-            width: '16px',
-            height: '16px',
-          } as IconButton.Icon.IconData}>
+        <devtools-icon name="help" class="inline-icon medium">
         </devtools-icon>
       </x-link>
       <x-link
@@ -578,11 +569,10 @@ export class Category extends HTMLElement {
             </div>
             <div class="hide-when-closed">
               ${this.#checked !== undefined ? html`
-                <label>
-                  <input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle}
+                <devtools-checkbox .checked=${this.#checked} @change=${this.#onCheckboxToggle}
                          jslog=${VisualLogging.toggle('raw-headers').track({change: true})}>
                   ${i18nString(UIStrings.raw)}
-                </label>` : Lit.nothing}
+              </devtools-checkbox>` : Lit.nothing}
             </div>
             <div class="hide-when-closed">${this.#additionalContent}</div>
           </div>

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -20,39 +20,39 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Section heading in the Trust Token tab
+   * @description Section heading in the Trust Token tab
    */
   parameters: 'Parameters',
   /**
-   *@description Text that refers to some types
+   * @description Text that refers to some types
    */
   type: 'Type',
   /**
-   *@description Label for a Trust Token parameter
+   * @description Label for a Trust Token parameter
    */
   refreshPolicy: 'Refresh policy',
   /**
-   *@description Label for a list if origins in the Trust Token tab
+   * @description Label for a list if origins in the Trust Token tab
    */
   issuers: 'Issuers',
   /**
-   *@description Label for a report field in the Network panel
+   * @description Label for a report field in the Network panel
    */
   topLevelOrigin: 'Top level origin',
   /**
-   *@description Text for the issuer of an item
+   * @description Text for the issuer of an item
    */
   issuer: 'Issuer',
   /**
-   *@description Heading of a report section in the Network panel
+   * @description Heading of a report section in the Network panel
    */
   result: 'Result',
   /**
-   *@description Text for the status of something
+   * @description Text for the status of something
    */
   status: 'Status',
   /**
-   *@description Label for a field in the Network panel
+   * @description Label for a field in the Network panel
    */
   numberOfIssuedTokens: 'Number of issued tokens',
   /**
@@ -61,41 +61,41 @@ const UIStrings = {
    */
   success: 'Success',
   /**
-   *@description Text in the network panel for an error status
+   * @description Text in the network panel for an error status
    */
   failure: 'Failure',
   /**
-   *@description Detailed text for a success status in the Network panel
+   * @description Detailed text for a success status in the Network panel
    */
   theOperationsResultWasServedFrom: 'The operations result was served from cache.',
   /**
-   *@description Detailed text for a success status in the Network panel
+   * @description Detailed text for a success status in the Network panel
    */
   theOperationWasFulfilledLocally: 'The operation was fulfilled locally, no request was sent.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   theKeysForThisPSTIssuerAreUnavailable:
       'The keys for this PST issuer are unavailable. The issuer may need to be registered via the Chrome registration process.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   aClientprovidedArgumentWas: 'A client-provided argument was malformed or otherwise invalid.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   eitherNoInputsForThisOperation:
       'Either no inputs for this operation are available or the output exceeds the operations quota.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   theServersResponseWasMalformedOr: 'The servers response was malformed or otherwise invalid.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   theOperationFailedForAnUnknown: 'The operation failed for an unknown reason.',
   /**
-   *@description Text for an error status in the Network panel
+   * @description Text for an error status in the Network panel
    */
   perSiteLimit: 'Per-site issuer limit reached.',
 } as const;
@@ -201,7 +201,7 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
       <devtools-report-value>
         <span>
-          <devtools-icon class="status-icon"
+          <devtools-icon class="status-icon medium"
             .data=${getIconForStatusCode(trustTokenResult.status)}>
           </devtools-icon>
           <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
@@ -224,15 +224,11 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
 const SUCCESS_ICON_DATA: IconButton.Icon.IconWithName = {
   color: 'var(--icon-checkmark-green)',
   iconName: 'check-circle',
-  width: '16px',
-  height: '16px',
 };
 
 const FAILURE_ICON_DATA: IconButton.Icon.IconWithName = {
   color: 'var(--icon-error)',
   iconName: 'cross-circle-filled',
-  width: '16px',
-  height: '16px',
 };
 
 export function statusConsideredSuccess(status: Protocol.Network.TrustTokenOperationDoneEventStatus): boolean {