chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/network/RequestPayloadView.ts

@@ -38,20 +38,25 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectPropertiesSectionStyles from '../../ui/legacy/components/object_ui/objectPropertiesSection.css.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestPayloadTreeStyles from './requestPayloadTree.css.js';
 import requestPayloadViewStyles from './requestPayloadView.css.js';
+
 const UIStrings = {
   /**
-   *@description A context menu item in the Watch Expressions Sidebar Pane of the Sources panel and Network pane request.
+   *@description A context menu item Payload View of the Network panel to copy a parsed value.
    */
   copyValue: 'Copy value',
+  /**
+   *@description A context menu item Payload View of the Network panel to copy the payload.
+   */
+  copyPayload: 'Copy',
   /**
    * @description Text in Request Payload View of the Network panel. This is a noun-phrase meaning the
    * payload of a network request.
@@ -125,6 +130,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
+    this.registerRequiredCSS(requestPayloadViewStyles);
     this.element.classList.add('request-payload-view');
     this.element.setAttribute('jslog', `${VisualLogging.pane('payload').track({resize: true})}`);
 
@@ -137,7 +143,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
     }
 
     const root = new UI.TreeOutline.TreeOutlineInShadow();
-    root.registerCSSFiles([objectValueStyles, objectPropertiesSectionStyles, requestPayloadTreeStyles]);
+    root.registerRequiredCSS(objectValueStyles, objectPropertiesSectionStyles, requestPayloadTreeStyles);
     root.element.classList.add('request-payload-tree');
     root.makeDense();
     this.element.appendChild(root.element);
@@ -148,7 +154,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
-    this.registerCSSFiles([requestPayloadViewStyles]);
+    super.wasShown();
     this.request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshFormData, this);
 
     this.refreshQueryString();
@@ -160,17 +166,16 @@ export class RequestPayloadView extends UI.Widget.VBox {
     this.request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshFormData, this);
   }
 
-  private addEntryContextMenuHandler(treeElement: UI.TreeOutline.TreeElement, value: string): void {
+  private addEntryContextMenuHandler(
+      treeElement: UI.TreeOutline.TreeElement, menuItem: string, jslogContext: string, getValue: () => string): void {
     treeElement.listItemElement.addEventListener('contextmenu', event => {
       event.consume(true);
       const contextMenu = new UI.ContextMenu.ContextMenu(event);
-      const decodedValue = decodeURIComponent(value);
-      const copyDecodedValueHandler = (): void => {
+      const copyValueHandler = (): void => {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(decodedValue);
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(getValue());
       };
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyValue), copyDecodedValueHandler, {jslogContext: 'copy-value'});
+      contextMenu.clipboardSection().appendItem(menuItem, copyValueHandler, {jslogContext});
       void contextMenu.show();
     });
   }
@@ -183,7 +188,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
       if (value.indexOf('%') >= 0) {
         try {
           value = decodeURIComponent(value);
-        } catch (e) {
+        } catch {
           errorDecoding = true;
         }
       }
@@ -232,7 +237,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
       try {
         const json = JSON.parse(formData);
         this.refreshRequestJSONPayload(json, formData);
-      } catch (e) {
+      } catch {
         this.populateTreeElementWithSourceText(this.requestPayloadCategory, formData);
       }
     }
@@ -249,8 +254,10 @@ export class RequestPayloadView extends UI.Widget.VBox {
     sourceTextElement.textContent = trim ? text.substr(0, MAX_LENGTH) : text;
 
     const sourceTreeElement = new UI.TreeOutline.TreeElement(sourceTextElement);
+
     treeElement.removeChildren();
     treeElement.appendChild(sourceTreeElement);
+    this.addEntryContextMenuHandler(sourceTreeElement, i18nString(UIStrings.copyPayload), 'copy-payload', () => text);
     if (!trim) {
       return;
     }
@@ -350,7 +357,8 @@ export class RequestPayloadView extends UI.Widget.VBox {
       }
 
       const paramTreeElement = new UI.TreeOutline.TreeElement(paramNameValue);
-      this.addEntryContextMenuHandler(paramTreeElement, param.value);
+      this.addEntryContextMenuHandler(
+          paramTreeElement, i18nString(UIStrings.copyValue), 'copy-value', () => decodeURIComponent(param.value));
       paramsTreeElement.appendChild(paramTreeElement);
     }
 

package/front_end/panels/network/RequestPreviewView.test.ts

@@ -11,6 +11,8 @@ import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 
 import * as Network from './network.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 async function contentData(): Promise<TextUtils.ContentData.ContentData> {
   const content = '<style> p { color: red; }</style><link rel="stylesheet" ref="http://devtools-frontend.test/style">';
   return new TextUtils.ContentData.ContentData(content, false, 'text/css');
@@ -28,9 +30,8 @@ function renderPreviewView(request: SDK.NetworkRequest.NetworkRequest): Network.
 describeWithLocale('RequestPreviewView', () => {
   it('prevents previewed html from making same-site requests', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'http://devtools-frontend.test/content' as Platform.DevToolsPath.UrlString,
-        '' as Platform.DevToolsPath.UrlString, null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/content`, urlString``, null,
+        null, null);
     request.setContentDataProvider(contentData);
     request.mimeType = Platform.MimeType.MimeType.HTML;
     const component = renderPreviewView(request);
@@ -43,9 +44,8 @@ describeWithLocale('RequestPreviewView', () => {
 
   it('does add utf-8 charset to the data URL for the HTML preview for already decoded content', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'http://devtools-frontend.test/index.html' as Platform.DevToolsPath.UrlString,
-        '' as Platform.DevToolsPath.UrlString, null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/index.html`, urlString``,
+        null, null, null);
     request.setContentDataProvider(
         () => Promise.resolve(new TextUtils.ContentData.ContentData(
             '<!DOCTYPE html>\n<p>Iñtërnâtiônàlizætiøn☃𝌆</p>', false, 'text/html', 'utf-16')));
@@ -65,9 +65,8 @@ describeWithLocale('RequestPreviewView', () => {
 
   it('does add the correct charset to the data URL for the HTML preview for base64 content', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'http://devtools-frontend.test/index.html' as Platform.DevToolsPath.UrlString,
-        '' as Platform.DevToolsPath.UrlString, null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/index.html`, urlString``,
+        null, null, null);
     // UTF-16 + base64 encoded "<!DOCTYPE html>\n<p>Iñtërnâtiônàlizætiøn☃𝌆</p>".
     request.setContentDataProvider(
         () => Promise.resolve(new TextUtils.ContentData.ContentData(

package/front_end/panels/network/RequestPreviewView.ts

@@ -28,6 +28,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -64,7 +66,7 @@ export class RequestPreviewView extends RequestResponseView {
     if (!(view instanceof UI.View.SimpleView)) {
       return view;
     }
-    const toolbar = new UI.Toolbar.Toolbar('network-item-preview-toolbar', this.element);
+    const toolbar = this.element.createChild('devtools-toolbar', 'network-item-preview-toolbar');
     void view.toolbarItems().then(items => {
       items.map(item => toolbar.appendToolbarItem(item));
     });
@@ -74,7 +76,7 @@ export class RequestPreviewView extends RequestResponseView {
   private async htmlPreview(): Promise<UI.Widget.Widget|null> {
     const contentData = await this.request.requestContentData();
     if (TextUtils.ContentData.ContentData.isError(contentData)) {
-      return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData) + ': ' + contentData.error);
+      return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData), contentData.error);
     }
 
     const allowlist = new Set<string>(['text/html', 'text/plain', 'application/xhtml+xml']);
@@ -111,6 +113,6 @@ export class RequestPreviewView extends RequestResponseView {
       return provided;
     }
 
-    return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.previewNotAvailable));
+    return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.previewNotAvailable), '');
   }
 }

package/front_end/panels/network/RequestResponseView.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -13,12 +13,13 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Network from './network.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithEnvironment('RequestResponseView', () => {
   it('does show WASM disassembly for WASM module requests', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'http://devtools-frontend.test/module.wasm' as Platform.DevToolsPath.UrlString,
-        '' as Platform.DevToolsPath.UrlString, null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/module.wasm`, urlString``,
+        null, null, null);
     request.setContentDataProvider(
         () => Promise.resolve(new TextUtils.ContentData.ContentData(
             'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=',
@@ -26,7 +27,7 @@ describeWithEnvironment('RequestResponseView', () => {
     request.mimeType = 'application/wasm';
     request.finished = true;
 
-    const mockedSourceView = new UI.EmptyWidget.EmptyWidget('<disassembled WASM>');
+    const mockedSourceView = new UI.EmptyWidget.EmptyWidget('<disassembled WASM>', '');
     const viewStub = sinon.stub(SourceFrame.ResourceSourceFrame.ResourceSourceFrame, 'createSearchableView')
                          .returns(mockedSourceView);
 
@@ -44,9 +45,8 @@ describeWithEnvironment('RequestResponseView', () => {
 
   it('shows the BinaryResourceView for binary content', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId,
-        'http://devtools-frontend.test/image.png' as Platform.DevToolsPath.UrlString,
-        '' as Platform.DevToolsPath.UrlString, null, null, null);
+        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/image.png`, urlString``,
+        null, null, null);
     request.setContentDataProvider(
         () => Promise.resolve(new TextUtils.ContentData.ContentData(
             'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=',

package/front_end/panels/network/RequestResponseView.ts

@@ -40,10 +40,14 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {BinaryResourceView} from './BinaryResourceView.js';
 
 const UIStrings = {
+  /**
+   *@description Text in Request Response View of the Network panel if no preview can be shown
+   */
+  noPreview: 'Nothing to preview',
   /**
    *@description Text in Request Response View of the Network panel
    */
-  thisRequestHasNoResponseData: 'This request has no response data available.',
+  thisRequestHasNoResponseData: 'This request has no response data available',
   /**
    *@description Text in Request Preview View of the Network panel
    */
@@ -119,12 +123,13 @@ export class RequestResponseView extends UI.Widget.VBox {
   async createPreview(): Promise<UI.Widget.Widget> {
     const contentData = await this.request.requestStreamingContent();
     if (TextUtils.StreamingContentData.isError(contentData)) {
-      return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData) + ': ' + contentData.error);
+      return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData), contentData.error);
     }
 
     const sourceView = RequestResponseView.#sourceViewForRequest(this.request, contentData);
     if (!sourceView || this.request.statusCode === 204) {
-      return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoResponseData));
+      return new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noPreview), i18nString(UIStrings.thisRequestHasNoResponseData));
     }
 
     return sourceView;

package/front_end/panels/network/RequestTimingView.test.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
@@ -11,12 +11,14 @@ import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 import * as Network from './NetworkTimeCalculator.js';
 import * as RequestTimingView from './RequestTimingView.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 function createNetworkRequest(
     matchedSource: Protocol.Network.ServiceWorkerRouterSource,
     actualSource: Protocol.Network.ServiceWorkerRouterSource): SDK.NetworkRequest.NetworkRequest {
   const request = SDK.NetworkRequest.NetworkRequest.create(
-      'requestId' as Protocol.Network.RequestId, 'http://devtools-frontend.test' as Platform.DevToolsPath.UrlString,
-      '' as Platform.DevToolsPath.UrlString, null, null, null);
+      'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test`, urlString``, null, null,
+      null);
 
   request.mimeType = 'application/wasm';
   request.finished = true;
@@ -159,7 +161,7 @@ describeWithLocale('ResourceTimingView', () => {
     const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
     assert.isNotNull(shadowElement, 'shadow element does not exist');
     const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
-    assert.strictEqual(content.length, 2, 'does not match the tree item');
+    assert.lengthOf(content, 2, 'does not match the tree item');
 
     // Check the content of the view. Since the value is set from matched to actual,
     // the order should be the same.

package/front_end/panels/network/RequestTimingView.ts

@@ -245,6 +245,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   private tableElement?: Element;
   constructor(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator) {
     super();
+    this.registerRequiredCSS(networkingTimingTableStyles);
     this.element.classList.add('resource-timing-view');
 
     this.request = request;
@@ -440,19 +441,19 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     const startTimeHeader = tableElement.createChild('thead', 'network-timing-start');
     const tableHeaderRow = startTimeHeader.createChild('tr');
-    const activityHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const activityHeaderCell = tableHeaderRow.createChild('th');
     activityHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = i18nString(UIStrings.label);
     activityHeaderCell.scope = 'col';
-    const waterfallHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const waterfallHeaderCell = tableHeaderRow.createChild('th');
     waterfallHeaderCell.createChild('span', 'network-timing-hidden-header').textContent =
         i18nString(UIStrings.waterfall);
     waterfallHeaderCell.scope = 'col';
-    const durationHeaderCell = (tableHeaderRow.createChild('th') as HTMLTableCellElement);
+    const durationHeaderCell = tableHeaderRow.createChild('th');
     durationHeaderCell.createChild('span', 'network-timing-hidden-header').textContent = i18nString(UIStrings.duration);
     durationHeaderCell.scope = 'col';
 
-    const queuedCell = (startTimeHeader.createChild('tr').createChild('td') as HTMLTableCellElement);
-    const startedCell = (startTimeHeader.createChild('tr').createChild('td') as HTMLTableCellElement);
+    const queuedCell = startTimeHeader.createChild('tr').createChild('td');
+    const startedCell = startTimeHeader.createChild('tr').createChild('td');
     queuedCell.colSpan = startedCell.colSpan = 3;
     UI.UIUtils.createTextChild(
         queuedCell, i18nString(UIStrings.queuedAtS, {PH1: calculator.formatValue(request.issueTime(), 2)}));
@@ -524,13 +525,13 @@ export class RequestTimingView extends UI.Widget.VBox {
     }
 
     if (!request.finished && !request.preserved) {
-      const cell = (tableElement.createChild('tr').createChild('td', 'caution') as HTMLTableCellElement);
+      const cell = tableElement.createChild('tr').createChild('td', 'caution');
       cell.colSpan = 3;
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.cautionRequestIsNotFinishedYet));
     }
 
     const footer = tableElement.createChild('tr', 'network-timing-footer');
-    const note = (footer.createChild('td') as HTMLTableCellElement);
+    const note = footer.createChild('td');
     note.colSpan = 1;
     const explanationLink = UI.XLink.XLink.create(
         'https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation',
@@ -543,8 +544,7 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     const lastTimingRightEdge = right === undefined ? 100 : right;
 
-    const breakElement =
-        (tableElement.createChild('tr', 'network-timing-table-header').createChild('td') as HTMLTableCellElement);
+    const breakElement = tableElement.createChild('tr', 'network-timing-table-header').createChild('td');
     breakElement.colSpan = 3;
     breakElement.createChild('hr', 'break');
 
@@ -555,7 +555,7 @@ export class RequestTimingView extends UI.Widget.VBox {
 
     if (!serverTimings) {
       const informationRow = tableElement.createChild('tr');
-      const information = (informationRow.createChild('td') as HTMLTableCellElement);
+      const information = informationRow.createChild('td');
       information.colSpan = 3;
 
       const link = UI.XLink.XLink.create(
@@ -779,7 +779,6 @@ export class RequestTimingView extends UI.Widget.VBox {
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
     this.calculator.addEventListener(Events.BOUNDARIES_CHANGED, this.boundaryChanged, this);
-    this.registerCSSFiles([networkingTimingTableStyles]);
     this.refresh();
   }
 

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -59,6 +59,10 @@ const UIStrings = {
    *@description Text to filter result items
    */
   filter: 'Filter',
+  /**
+   *@description Text in Resource Web Socket Frame View of the Network panel that shows if no message is selected for viewing its content
+   */
+  noMessageSelected: 'No message selected',
   /**
    *@description Text in Resource Web Socket Frame View of the Network panel
    */
@@ -162,6 +166,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
+    this.registerRequiredCSS(webSocketFrameViewStyles);
 
     this.element.classList.add('websocket-frame-view');
     this.element.setAttribute('jslog', `${VisualLogging.pane('web-socket-messages').track({resize: true})}`);
@@ -206,7 +211,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
     }, this);
     this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.onFrameDeselected, this);
 
-    this.mainToolbar = new UI.Toolbar.Toolbar('');
+    this.mainToolbar = document.createElement('devtools-toolbar');
 
     this.clearAllButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'clear');
     this.clearAllButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.clearFrames, this);
@@ -232,12 +237,13 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
     this.mainToolbar.appendToolbarItem(this.filterTextInput);
 
     const mainContainer = new UI.Widget.VBox();
-    mainContainer.element.appendChild(this.mainToolbar.element);
+    mainContainer.element.appendChild(this.mainToolbar);
     this.dataGrid.asWidget().show(mainContainer.element);
     mainContainer.setMinimumSize(0, 72);
     this.splitWidget.setMainWidget(mainContainer);
 
-    this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.selectMessageToBrowseItsContent));
+    this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget(
+        i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectMessageToBrowseItsContent));
     this.splitWidget.setSidebarWidget(this.frameEmptyWidget);
 
     this.selectedNode = null;
@@ -273,8 +279,8 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.refresh();
-    this.registerCSSFiles([webSocketFrameViewStyles]);
     this.request.addEventListener(SDK.NetworkRequest.Events.WEBSOCKET_FRAME_ADDED, this.frameAdded, this);
   }
 
@@ -314,7 +320,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
     if (text) {
       try {
         this.filterRegex = new RegExp(text, 'i');
-      } catch (e: unknown) {
+      } catch {
         this.filterRegex = new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
       }
     } else {

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -4,15 +4,14 @@
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
-
-import signedExchangeInfoTreeStyles from './signedExchangeInfoTree.css.js';
-import signedExchangeInfoViewStyles from './signedExchangeInfoView.css.js';
-
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
+
+import signedExchangeInfoTreeStyles from './signedExchangeInfoTree.css.js';
+import signedExchangeInfoViewStyles from './signedExchangeInfoView.css.js';
 
 const UIStrings = {
   /**
@@ -107,13 +106,14 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super();
+    this.registerRequiredCSS(signedExchangeInfoViewStyles);
     console.assert(request.signedExchangeInfo() !== null);
     const signedExchangeInfo = (request.signedExchangeInfo() as Protocol.Network.SignedExchangeInfo);
 
     this.element.classList.add('signed-exchange-info-view');
 
     const root = new UI.TreeOutline.TreeOutlineInShadow();
-    root.registerCSSFiles([signedExchangeInfoTreeStyles]);
+    root.registerRequiredCSS(signedExchangeInfoTreeStyles);
     root.element.classList.add('signed-exchange-info-tree');
     root.setFocusable(false);
     root.makeDense();
@@ -256,10 +256,6 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
     }
     return fragment;
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([signedExchangeInfoViewStyles]);
-  }
 }
 
 export class Category extends UI.TreeOutline.TreeElement {

package/front_end/panels/network/binaryResourceView.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-.panel.network .toolbar.binary-view-toolbar {
+.panel.network devtools-toolbar.binary-view-toolbar {
   border-top: 1px solid var(--sys-color-divider);
   border-bottom: 0;
   padding-left: 5px;

package/front_end/panels/network/blockedURLsPane.css

@@ -19,8 +19,7 @@
 
 .no-blocked-urls,
 .blocked-urls {
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
 }
 
 .no-blocked-urls {

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

@@ -3,12 +3,14 @@
 // found in the LICENSE file.
 
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import {html, render} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import editableSpanStyles from './EditableSpan.css.js';
+import editableSpanStylesRaw from './EditableSpan.css.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const editableSpanStyles = new CSSStyleSheet();
+editableSpanStyles.replaceSync(editableSpanStylesRaw.cssContent);
 
 export interface EditableSpanData {
   value: string;