chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/network/RequestTimingView.ts

@@ -45,196 +45,196 @@ import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const UIStrings = {
   /**
-   *@description Text used to label the time taken to receive an HTTP/2 Push message.
+   * @description Text used to label the time taken to receive an HTTP/2 Push message.
    */
   receivingPush: 'Receiving `Push`',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   queueing: 'Queueing',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   stalled: 'Stalled',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   initialConnection: 'Initial connection',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   dnsLookup: 'DNS Lookup',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   proxyNegotiation: 'Proxy negotiation',
   /**
-   *@description Text used to label the time taken to read an HTTP/2 Push message.
+   * @description Text used to label the time taken to read an HTTP/2 Push message.
    */
   readingPush: 'Reading `Push`',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   contentDownload: 'Content Download',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   requestSent: 'Request sent',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   requestToServiceworker: 'Request to `ServiceWorker`',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   startup: 'Startup',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   respondwith: 'respondWith',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   ssl: 'SSL',
   /**
-   *@description Text for sum
+   * @description Text for sum
    */
   total: 'Total',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   waitingTtfb: 'Waiting for server response',
   /**
-   *@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 Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   routerEvaluation: 'Router Evaluation',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   routerCacheLookup: 'Cache Lookup',
   /**
-   *@description Inner element text content in Network Log View Columns of the Network panel
+   * @description Inner element text content in Network Log View Columns of the Network panel
    */
   waterfall: 'Waterfall',
   /**
-   *@description Text for the duration of something
+   * @description Text for the duration of something
    */
   duration: 'Duration',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
-   *@example {120.39ms} PH1
+   * @description Text of a DOM element in Request Timing View of the Network panel
+   * @example {120.39ms} PH1
    */
   queuedAtS: 'Queued at {PH1}',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
-   *@example {120.39ms} PH1
+   * @description Text of a DOM element in Request Timing View of the Network panel
+   * @example {120.39ms} PH1
    */
   startedAtS: 'Started at {PH1}',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   serverPush: 'Server Push',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
+   * @description Text of a DOM element in Request Timing View of the Network panel
    */
   resourceScheduling: 'Resource Scheduling',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   connectionStart: 'Connection Start',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   requestresponse: 'Request/Response',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
+   * @description Text of a DOM element in Request Timing View of the Network panel
    */
   cautionRequestIsNotFinishedYet: 'CAUTION: request is not finished yet!',
   /**
-   *@description Text in Request Timing View of the Network panel
+   * @description Text in Request Timing View of the Network panel
    */
   explanation: 'Explanation',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
+   * @description Text of a DOM element in Request Timing View of the Network panel
    */
   serverTiming: 'Server Timing',
   /**
-   *@description Text of a DOM element in Request Timing View of the Network panel
+   * @description Text of a DOM element in Request Timing View of the Network panel
    */
   time: 'TIME',
   /**
-   *@description Label for the Server Timing API
+   * @description Label for the Server Timing API
    */
   theServerTimingApi: 'the Server Timing API',
   /**
-   *@description Text to inform about the ServerTiming API, which can be used to report timing information to DevTools about the substeps that the server performed to answer the requests. Timing information is, e.g., the duration of the substep.
-   *@example {https://web.dev/custom-metrics/#server-timing-api} PH1
+   * @description Text to inform about the ServerTiming API, which can be used to report timing information to DevTools about the substeps that the server performed to answer the requests. Timing information is, e.g., the duration of the substep.
+   * @example {https://web.dev/custom-metrics/#server-timing-api} PH1
    */
   duringDevelopmentYouCanUseSToAdd:
       'During development, you can use {PH1} to add insights into the server-side timing of this request.',
   /**
-   *@description Header for last column of network timing tab.
+   * @description Header for last column of network timing tab.
    */
   durationC: 'DURATION',
   /**
-   *@description Description for treeitem in ServiceWorker Fetch Details
+   * @description Description for treeitem in ServiceWorker Fetch Details
    */
   originalRequest: 'Original Request',
   /**
-   *@description Description for treeitem in ServiceWorker Fetch Details
+   * @description Description for treeitem in ServiceWorker Fetch Details
    */
   responseReceived: 'Response Received',
   /**
-   *@description Text for an unspecified service worker response source
+   * @description Text for an unspecified service worker response source
    */
   unknown: 'Unknown',
   /**
-   *@description Displays how a particular response was fetched
-   *@example {Network fetch} PH1
+   * @description Displays how a particular response was fetched
+   * @example {Network fetch} PH1
    */
   sourceOfResponseS: 'Source of response: {PH1}',
   /**
-   *@description Name of storage cache from which a response was fetched
-   *@example {v1} PH1
+   * @description Name of storage cache from which a response was fetched
+   * @example {v1} PH1
    */
   cacheStorageCacheNameS: 'Cache storage cache name: {PH1}',
   /**
-   *@description Text for unknown cache storage name
+   * @description Text for unknown cache storage name
    */
   cacheStorageCacheNameUnknown: 'Cache storage cache name: Unknown',
   /**
-   *@description Time at which a response was retrieved
-   *@example {Fri Apr 10 2020 17:20:27 GMT-0700 (Pacific Daylight Time)} PH1
+   * @description Time at which a response was retrieved
+   * @example {Fri Apr 10 2020 17:20:27 GMT-0700 (Pacific Daylight Time)} PH1
    */
   retrievalTimeS: 'Retrieval Time: {PH1}',
   /**
-   *@description Text used to show that serviceworker fetch response source is ServiceWorker Cache Storage
+   * @description Text used to show that serviceworker fetch response source is ServiceWorker Cache Storage
    */
   serviceworkerCacheStorage: '`ServiceWorker` cache storage',
   /**
-   *@description Text used to show that serviceworker fetch response source is HTTP cache
+   * @description Text used to show that serviceworker fetch response source is HTTP cache
    */
   fromHttpCache: 'From HTTP cache',
   /**
-   *@description Text used to show that data was retrieved via a Network fetch
+   * @description Text used to show that data was retrieved via a Network fetch
    */
   networkFetch: 'Network fetch',
   /**
-   *@description Text used to show that data was retrieved using ServiceWorker fallback code
+   * @description Text used to show that data was retrieved using ServiceWorker fallback code
    */
   fallbackCode: 'Fallback code',
   /**
-   *@description Name of the specified source for SW static routing API.
-   *@example {network} PH1
+   * @description Name of the specified source for SW static routing API.
+   * @example {network} PH1
    */
   routerMatchedSource: 'Matched source: {PH1}',
   /**
-   *@description Name of the actually used source for SW static routing API.
-   *@example {network} PH1
+   * @description Name of the actually used source for SW static routing API.
+   * @example {network} PH1
    */
   routerActualSource: 'Actual source: {PH1}',
 } as const;

package/front_end/panels/network/ResourceChunkView.ts

@@ -19,55 +19,55 @@ import viewStyles from './resourceChunkView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Event Source Messages View of the Network panel
+   * @description Text in Event Source Messages View of the Network panel
    */
   data: 'Data',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   length: 'Length',
   /**
-   *@description Text that refers to the time
+   * @description Text that refers to the time
    */
   time: 'Time',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAll: 'Clear All',
   /**
-   *@description Text to filter result items
+   * @description Text to filter result items
    */
   filter: 'Filter',
   /**
-   *@description Text in Messages View of the Network panel that shows if no message is selected for viewing its content
+   * @description Text in Messages View of the Network panel that shows if no message is selected for viewing its content
    */
   noMessageSelected: 'No message selected',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   selectMessageToBrowseItsContent: 'Select message to browse its content.',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   copyMessageD: 'Copy message…',
   /**
-   *@description A context menu item in the Messages View of the Network panel
+   * @description A context menu item in the Messages View of the Network panel
    */
   copyMessage: 'Copy message',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAllL: 'Clear all',
   /**
-   *@description Text for everything
+   * @description Text for everything
    */
   all: 'All',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   send: 'Send',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   receive: 'Receive',
 } as const;

package/front_end/panels/network/ResourceDirectSocketChunkView.ts

@@ -17,31 +17,31 @@ import {DataGridItem, ResourceChunkView} from './ResourceChunkView.js';
 
 const UIStrings = {
   /**
-   *@description Text in Event Source Messages View of the Network panel
+   * @description Text in Event Source Messages View of the Network panel
    */
   data: 'Data',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   length: 'Length',
   /**
-   *@description Text that refers to the time
+   * @description Text that refers to the time
    */
   time: 'Time',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   address: 'Address',
   /**
-   *@description Text in Messages View of the Network panel
+   * @description Text in Messages View of the Network panel
    */
   port: 'Port',
   /**
-   *@description Data grid name for Direct Socket Chunk data grids
+   * @description Data grid name for Direct Socket Chunk data grids
    */
   directSocketChunk: 'Direct Socket Chunk',
   /**
-   *@description Example for placeholder text. Note: "(direct)?socket)" is an example code and should not be translated.
+   * @description Example for placeholder text. Note: "(direct)?socket)" is an example code and should not be translated.
    */
   filterUsingRegex: 'Filter using regex (example: `(direct)?socket)`',
 } as const;
@@ -91,7 +91,12 @@ export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.Network
   override getColumns(): DataGrid.DataGrid.ColumnDescriptor[] {
     if (this.request.directSocketInfo?.type === SDK.NetworkRequest.DirectSocketType.UDP_BOUND) {
       return [
-        {id: 'data', title: i18nString(UIStrings.data), sortable: false, weight: 63},
+        {
+          id: 'data',
+          title: i18nString(UIStrings.data),
+          sortable: false,
+          weight: 63,
+        },
         {
           id: 'address',
           title: i18nString(UIStrings.address),
@@ -113,16 +118,21 @@ export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.Network
           align: DataGrid.DataGrid.Align.RIGHT,
           weight: 5,
         },
-        {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 7},
-      ] as DataGrid.DataGrid.ColumnDescriptor[];
+        {
+          id: 'time',
+          title: i18nString(UIStrings.time),
+          sortable: true,
+          weight: 7,
+        },
+      ];
     }
     return super.getColumns();
   }
 }
 
 class ResourceChunkNode extends DataGridItem {
+  #binaryView: BinaryResourceView|null = null;
   readonly chunk: SDK.NetworkRequest.DirectSocketChunk;
-  private binaryViewInternal: BinaryResourceView|null;
 
   constructor(chunk: SDK.NetworkRequest.DirectSocketChunk, boundSocket: boolean) {
     const time = new Date(chunk.timestamp * 1000);
@@ -136,7 +146,7 @@ class ResourceChunkNode extends DataGridItem {
     const length = i18n.ByteUtilities.bytesToString(Platform.StringUtilities.base64ToSize(chunk.data));
     const maxDisplayLen = 30;
     if (chunk.data.length > maxDisplayLen) {
-      description = chunk.data.substring(0, maxDisplayLen) + '...';
+      description = chunk.data.substring(0, maxDisplayLen) + '…';
     } else {
       description = chunk.data;
     }
@@ -148,7 +158,6 @@ class ResourceChunkNode extends DataGridItem {
     }
 
     this.chunk = chunk;
-    this.binaryViewInternal = null;
   }
 
   override createCells(element: Element): void {
@@ -168,15 +177,15 @@ class ResourceChunkNode extends DataGridItem {
   }
 
   override binaryView(): BinaryResourceView|null {
-    if (!this.binaryViewInternal) {
+    if (!this.#binaryView) {
       if (this.dataText().length > 0) {
-        this.binaryViewInternal = new BinaryResourceView(
+        this.#binaryView = new BinaryResourceView(
             TextUtils.StreamingContentData.StreamingContentData.from(
-                new TextUtils.ContentData.ContentData(this.dataText(), true, 'applicaiton/octet-stream')),
+                new TextUtils.ContentData.ContentData(this.dataText(), true, 'application/octet-stream')),
             Platform.DevToolsPath.EmptyUrlString, Common.ResourceType.resourceTypes.DirectSocket);
       }
     }
-    return this.binaryViewInternal;
+    return this.#binaryView;
   }
 
   override getTime(): number {

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 {