chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -51,39 +51,39 @@ const UIStrings = {
    */
   sOpcodeS: '{PH1} (Opcode {PH2})',
   /**
-   *@description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel
+   * @description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel
    */
   continuationFrame: 'Continuation Frame',
   /**
-   *@description Op codes text frame of map in Resource Web Socket Frame View of the Network panel
+   * @description Op codes text frame of map in Resource Web Socket Frame View of the Network panel
    */
   textMessage: 'Text Message',
   /**
-   *@description Op codes binary frame of map in Resource Web Socket Frame View of the Network panel
+   * @description Op codes binary frame of map in Resource Web Socket Frame View of the Network panel
    */
   binaryMessage: 'Binary Message',
   /**
-   *@description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel indicating that the web socket connection has been closed.
+   * @description Op codes continuation frame of map in Resource Web Socket Frame View of the Network panel indicating that the web socket connection has been closed.
    */
   connectionCloseMessage: 'Connection Close Message',
   /**
-   *@description Op codes ping frame of map in Resource Web Socket Frame View of the Network panel
+   * @description Op codes ping frame of map in Resource Web Socket Frame View of the Network panel
    */
   pingMessage: 'Ping Message',
   /**
-   *@description Op codes pong frame of map in Resource Web Socket Frame View of the Network panel
+   * @description Op codes pong frame of map in Resource Web Socket Frame View of the Network panel
    */
   pongMessage: 'Pong Message',
   /**
-   *@description Data grid name for Web Socket Frame data grids
+   * @description Data grid name for Web Socket Frame data grids
    */
   webSocketFrame: 'Web Socket Frame',
   /**
-   *@description Text for something not available
+   * @description Text for something not available
    */
   na: 'N/A',
   /**
-   *@description Example for placeholder text
+   * @description Example for placeholder text
    */
   filterUsingRegex: 'Filter using regex (example: (web)?socket)',
 } as const;

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -16,87 +16,87 @@ import signedExchangeInfoViewStyles from './signedExchangeInfoView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text for errors
+   * @description Text for errors
    */
   errors: 'Errors',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   signedHttpExchange: 'Signed HTTP exchange',
   /**
-   *@description Text for an option to learn more about something
+   * @description Text for an option to learn more about something
    */
   learnmore: 'Learn more',
   /**
-   *@description Text in Request Headers View of the Network panel
+   * @description Text in Request Headers View of the Network panel
    */
   requestUrl: 'Request URL',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   responseCode: 'Response code',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   headerIntegrityHash: 'Header integrity hash',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   responseHeaders: 'Response headers',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   signature: 'Signature',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   label: 'Label',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   certificateUrl: 'Certificate URL',
   /**
-   *@description Text to view a security certificate
+   * @description Text to view a security certificate
    */
   viewCertificate: 'View certificate',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   integrity: 'Integrity',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   certificateSha: 'Certificate SHA256',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   validityUrl: 'Validity URL',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   date: 'Date',
   /**
-   *@description Text in Signed Exchange Info View of the Network panel
+   * @description Text in Signed Exchange Info View of the Network panel
    */
   expires: 'Expires',
   /**
-   *@description Text for a security certificate
+   * @description Text for a security certificate
    */
   certificate: 'Certificate',
   /**
-   *@description Text that refers to the subject of a security certificate
+   * @description Text that refers to the subject of a security certificate
    */
   subject: 'Subject',
   /**
-   *@description Text to show since when an item is valid
+   * @description Text to show since when an item is valid
    */
   validFrom: 'Valid from',
   /**
-   *@description Text to indicate the expiry date
+   * @description Text to indicate the expiry date
    */
   validUntil: 'Valid until',
   /**
-   *@description Text for the issuer of an item
+   * @description Text for the issuer of an item
    */
   issuer: 'Issuer',
 } as const;
@@ -117,7 +117,7 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
     root.registerRequiredCSS(signedExchangeInfoTreeStyles);
     root.element.classList.add('signed-exchange-info-tree');
     root.setFocusable(false);
-    root.makeDense();
+    root.setDense(true);
     root.expandTreeElementsWhenArrowing = true;
     this.element.appendChild(root.element);
 
@@ -128,8 +128,8 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
       for (const error of signedExchangeInfo.errors) {
         const fragment = document.createDocumentFragment();
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)', width: '14px', height: '14px'};
-        icon.classList.add('prompt-icon');
+        icon.name = 'cross-circle-filled';
+        icon.classList.add('prompt-icon', 'small');
         fragment.appendChild(icon);
         fragment.createChild('div', 'error-log').textContent = error.message;
         errorMessagesCategory.createLeaf(fragment);

package/front_end/panels/network/binaryResourceView.css

@@ -8,6 +8,7 @@
   border-top: 1px solid var(--sys-color-divider);
   border-bottom: 0;
   padding-left: 5px;
+  flex: none;
 }
 
 .binary-view-copied-text {

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.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>