chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/network/RequestPayloadView.ts

@@ -47,11 +47,16 @@ 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;

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;
@@ -778,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/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;

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

@@ -12,13 +12,17 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import type {EditableSpan} from './EditableSpan.js';
-import headerSectionRowStyles from './HeaderSectionRow.css.js';
+import headerSectionRowStylesRaw from './HeaderSectionRow.css.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const headerSectionRowStyles = new CSSStyleSheet();
+headerSectionRowStyles.replaceSync(headerSectionRowStylesRaw.cssContent);
+
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -62,9 +66,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/HeaderSectionRow.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const trashIconUrl = new URL('../../../Images/bin.svg', import.meta.url).toString();
-const editIconUrl = new URL('../../../Images/edit.svg', import.meta.url).toString();
-
 export const isValidHeaderName = (headerName: string): boolean => {
   return /^[a-z0-9_\-]+$/i.test(headerName);
 };
@@ -144,7 +145,7 @@ export class HeaderSectionRow extends HTMLElement {
       return;
     }
 
-    const rowClasses = LitHtml.Directives.classMap({
+    const rowClasses = Lit.Directives.classMap({
       row: true,
       'header-highlight': Boolean(this.#header.highlight),
       'header-overridden': Boolean(this.#header.isOverride) || this.#isHeaderValueEdited,
@@ -152,12 +153,12 @@ export class HeaderSectionRow extends HTMLElement {
       'header-deleted': Boolean(this.#header.isDeleted),
     });
 
-    const headerNameClasses = LitHtml.Directives.classMap({
+    const headerNameClasses = Lit.Directives.classMap({
       'header-name': true,
       'pseudo-header': this.#header.name.startsWith(':'),
     });
 
-    const headerValueClasses = LitHtml.Directives.classMap({
+    const headerValueClasses = Lit.Directives.classMap({
       'header-value': true,
       'header-warning': Boolean(this.#header.headerValueIncorrect),
       'flex-columns': this.#header.name === 'x-client-data' && !this.#header.isResponseHeader,
@@ -183,7 +184,7 @@ export class HeaderSectionRow extends HTMLElement {
         <div class=${headerNameClasses}>
           ${this.#header.headerNotSet ?
             html`<div class="header-badge header-badge-text">${i18n.i18n.lockedString('not-set')}</div> ` :
-            LitHtml.nothing
+            Lit.nothing
           }
           ${isHeaderNameEditable && !this.#isValidHeaderName ?
             html`<devtools-icon class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{
@@ -192,7 +193,7 @@ export class HeaderSectionRow extends HTMLElement {
               height: '16px',
               color: 'var(--icon-error)',
             }}>
-            </devtools-icon>` : LitHtml.nothing
+            </devtools-icon>` : Lit.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?
             html`<devtools-editable-span
@@ -217,7 +218,7 @@ export class HeaderSectionRow extends HTMLElement {
             height: '16px',
             color: 'var(--icon-default)',
           }}>
-          </devtools-icon>` : LitHtml.nothing
+          </devtools-icon>` : Lit.nothing
         }
       </div>
       ${this.#maybeRenderBlockedDetails(this.#header.blockedDetails)}
@@ -229,9 +230,9 @@ export class HeaderSectionRow extends HTMLElement {
     }
   }
 
-  #renderHeaderValue(): LitHtml.LitTemplate {
+  #renderHeaderValue(): Lit.LitTemplate {
     if (!this.#header) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
     if (this.#header.name === 'x-client-data' && !this.#header.isResponseHeader) {
       return this.#renderXClientDataHeader(this.#header);
@@ -248,7 +249,7 @@ export class HeaderSectionRow extends HTMLElement {
         <devtools-button
           title=${i18nString(UIStrings.editHeader)}
           .size=${Buttons.Button.Size.SMALL}
-          .iconUrl=${editIconUrl}
+          .iconName=${'edit'}
           .variant=${Buttons.Button.Variant.ICON}
           @click=${() => {
             this.dispatchEvent(new EnableHeaderEditingEvent());
@@ -256,7 +257,7 @@ export class HeaderSectionRow extends HTMLElement {
           jslog=${VisualLogging.action('enable-header-overrides').track({click: true})}
           class="enable-editing inline-button"
         ></devtools-button>
-      ` : LitHtml.nothing}
+      ` : Lit.nothing}
     `;
     }
     return html`
@@ -271,7 +272,7 @@ export class HeaderSectionRow extends HTMLElement {
       <devtools-button
         title=${i18nString(UIStrings.removeOverride)}
         .size=${Buttons.Button.Size.SMALL}
-        .iconUrl=${trashIconUrl}
+        .iconName=${'bin'}
         .variant=${Buttons.Button.Variant.ICON}
         class="remove-header inline-button"
         @click=${this.#onRemoveOverrideClick}
@@ -281,7 +282,7 @@ export class HeaderSectionRow extends HTMLElement {
     // clang-format on
   }
 
-  #renderXClientDataHeader(header: HeaderDescriptor): LitHtml.LitTemplate {
+  #renderXClientDataHeader(header: HeaderDescriptor): Lit.LitTemplate {
     const data = ClientVariations.parseClientVariations(header.value || '');
     const output = ClientVariations.formatClientVariations(
         data, i18nString(UIStrings.activeClientExperimentVariation),
@@ -302,7 +303,7 @@ export class HeaderSectionRow extends HTMLElement {
     });
   }
 
-  #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): LitHtml.LitTemplate {
+  #maybeRenderHeaderValueSuffix(header: HeaderDescriptor): Lit.LitTemplate {
     if (header.name === 'set-cookie' && header.setCookieBlockedReasons) {
       const titleText =
           header.setCookieBlockedReasons.map(SDK.NetworkRequest.setCookieBlockedReasonToUiString).join('\n');
@@ -319,12 +320,12 @@ export class HeaderSectionRow extends HTMLElement {
       `;
             // clang-format on
     }
-    return LitHtml.nothing;
+    return Lit.nothing;
   }
 
-  #maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
+  #maybeRenderBlockedDetails(blockedDetails?: BlockedDetailsDescriptor): Lit.LitTemplate {
     if (!blockedDetails) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -347,7 +348,7 @@ export class HeaderSectionRow extends HTMLElement {
     // clang-format on
   }
 
-  #maybeRenderBlockedDetailsLink(blockedDetails?: BlockedDetailsDescriptor): LitHtml.LitTemplate {
+  #maybeRenderBlockedDetailsLink(blockedDetails?: BlockedDetailsDescriptor): Lit.LitTemplate {
     if (blockedDetails?.reveal) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
@@ -382,7 +383,7 @@ export class HeaderSectionRow extends HTMLElement {
       `;
             // clang-format on
     }
-    return LitHtml.nothing;
+    return Lit.nothing;
   }
 
   #onHeaderValueFocusOut(event: Event): void {

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

@@ -7,14 +7,18 @@ import '../../../ui/legacy/legacy.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../forward/forward.js';
 
 import {EditingAllowedStatus, type HeaderDescriptor} from './HeaderSectionRow.js';
-import requestHeaderSectionStyles from './RequestHeaderSection.css.js';
+import requestHeaderSectionStylesRaw from './RequestHeaderSection.css.js';
 
-const {render, html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const requestHeaderSectionStyles = new CSSStyleSheet();
+requestHeaderSectionStyles.replaceSync(requestHeaderSectionStylesRaw.cssContent);
+
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -91,9 +95,9 @@ export class RequestHeaderSection extends HTMLElement {
     // clang-format on
   }
 
-  #maybeRenderProvisionalHeadersWarning(): LitHtml.LitTemplate {
+  #maybeRenderProvisionalHeadersWarning(): Lit.LitTemplate {
     if (!this.#request || this.#request.requestHeadersText() !== undefined) {
-      return LitHtml.nothing;
+      return Lit.nothing;
     }
 
     let cautionText;