chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/network/NetworkItemView.ts

@@ -172,11 +172,10 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
         i18nString(UIStrings.headers));
 
     if (this.requestInternal.hasOverriddenHeaders()) {
-      const icon = new IconButton.Icon.Icon();
-      icon.data =
-          {iconName: 'small-status-dot', color: 'var(--sys-color-purple-bright)', width: '16px', height: '16px'};
-      icon.title = i18nString(UIStrings.containsOverriddenHeaders);
-      this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, icon);
+      const statusDot = document.createElement('div');
+      statusDot.className = 'status-dot';
+      statusDot.title = i18nString(UIStrings.containsOverriddenHeaders);
+      this.setSuffixElement(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, statusDot);
     }
 
     this.payloadView = null;
@@ -216,11 +215,10 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.rawResponseData));
 
       if (this.requestInternal.hasOverriddenContent) {
-        const icon = new IconButton.Icon.Icon();
-        icon.title = i18nString(UIStrings.responseIsOverridden);
-        icon.data =
-            {iconName: 'small-status-dot', color: 'var(--sys-color-purple-bright)', width: '16px', height: '16px'};
-        this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, icon);
+        const statusDot = document.createElement('div');
+        statusDot.className = 'status-dot';
+        statusDot.title = i18nString(UIStrings.responseIsOverridden);
+        this.setSuffixElement(NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, statusDot);
       }
     }
 
@@ -295,7 +293,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       const icon = new IconButton.Icon.Icon();
       icon.data = {iconName: 'warning-filled', color: 'var(--icon-warning)', width: '14px', height: '14px'};
       icon.title = i18nString(UIStrings.thirdPartyPhaseout);
-      this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.COOKIES, icon);
+      this.setTrailingTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.COOKIES, icon);
     }
   }
 

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

@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -23,12 +24,12 @@ import {expectCalled} from '../../testing/ExpectStubCall.js';
 import {stubFileManager} from '../../testing/FileManagerHelpers.js';
 import {describeWithMockConnection, dispatchEvent} from '../../testing/MockConnection.js';
 import {activate} from '../../testing/ResourceTreeHelpers.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Network from './network.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+const {urlString} = Platform.DevToolsPath;
 
 describeWithMockConnection('NetworkLogView', () => {
   let target: SDK.Target.Target;
@@ -107,7 +108,7 @@ describeWithMockConnection('NetworkLogView', () => {
   }
 
   it('generates a valid curl command when some headers don\'t have values', async () => {
-    const request = createNetworkRequest('http://localhost' as Platform.DevToolsPath.UrlString, {
+    const request = createNetworkRequest(urlString`http://localhost`, {
       requestHeaders: [
         {name: 'header-with-value', value: 'some value'},
         {name: 'no-value-header', value: ''},
@@ -123,7 +124,7 @@ describeWithMockConnection('NetworkLogView', () => {
   // are only added on HTTP/2 and HTTP/3, have a preceeding colon like `:authority` but it still tests
   // the stripping function.
   it('generates a valid curl command while stripping internal headers', async () => {
-    const request = createNetworkRequest('http://localhost' as Platform.DevToolsPath.UrlString, {
+    const request = createNetworkRequest(urlString`http://localhost`, {
       requestHeaders: [
         {name: 'authority', value: 'www.example.com'},
       ],
@@ -134,44 +135,44 @@ describeWithMockConnection('NetworkLogView', () => {
   });
 
   it('generates a valid curl command when header values contain double quotes', async () => {
-    const request = createNetworkRequest('http://localhost' as Platform.DevToolsPath.UrlString, {
+    const request = createNetworkRequest(urlString`http://localhost`, {
       requestHeaders: [{name: 'cookie', value: 'eva="Sg4="'}],
     });
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'unix'),
-        'curl \'http://localhost\' -H \'cookie: eva=\"Sg4=\"\'',
+        'curl \'http://localhost\' -b \'eva=\"Sg4=\"\'',
     );
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'win'),
-        'curl ^"http://localhost^" -H ^"cookie: eva=^\\^"Sg4=^\\^"^"',
+        'curl ^"http://localhost^" -b ^"eva=^\\^"Sg4=^\\^"^"',
     );
   });
 
   it('generates a valid curl command when header values contain percentages', async () => {
-    const request = createNetworkRequest('http://localhost' as Platform.DevToolsPath.UrlString, {
+    const request = createNetworkRequest(urlString`http://localhost`, {
       requestHeaders: [{name: 'cookie', value: 'eva=%22Sg4%3D%22'}],
     });
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'unix'),
-        'curl \'http://localhost\' -H \'cookie: eva=%22Sg4%3D%22\'',
+        'curl \'http://localhost\' -b \'eva=%22Sg4%3D%22\'',
     );
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'win'),
-        'curl ^"http://localhost^" -H ^"cookie: eva=^%^22Sg4^%^3D^%^22^"',
+        'curl ^"http://localhost^" -b ^"eva=^%^22Sg4^%^3D^%^22^"',
     );
   });
 
   it('generates a valid curl command when header values contain newline and ampersand', async () => {
-    const request = createNetworkRequest('http://localhost' as Platform.DevToolsPath.UrlString, {
+    const request = createNetworkRequest(urlString`http://localhost`, {
       requestHeaders: [{name: 'cookie', value: 'query=evil\n\n & cmd /c calc.exe \n\n'}],
     });
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'unix'),
-        'curl \'http://localhost\' -H $\'cookie: query=evil\\n\\n & cmd /c calc.exe \\n\\n\'',
+        'curl \'http://localhost\' -b $\'query=evil\\n\\n & cmd /c calc.exe \\n\\n\'',
     );
     assert.strictEqual(
         await Network.NetworkLogView.NetworkLogView.generateCurlCommand(request, 'win'),
-        'curl ^\"http://localhost^\" -H ^\"cookie: query=evil^\n\n^\n\n ^& cmd /c calc.exe ^\n\n^\n\n^\"',
+        'curl ^\"http://localhost^\" -b ^\"query=evil^\n\n^\n\n ^& cmd /c calc.exe ^\n\n^\n\n^\"',
     );
   });
 
@@ -213,7 +214,7 @@ describeWithMockConnection('NetworkLogView', () => {
       SDK.TargetManager.TargetManager.instance().setScopeTarget(inScope ? target : null);
       const harWriterWrite = sinon.stub(HAR.Writer.Writer, 'write').resolves();
       const URL_HOST = 'example.com';
-      target.setInspectedURL(`http://${URL_HOST}/foo` as Platform.DevToolsPath.UrlString);
+      target.setInspectedURL(urlString`${`http://${URL_HOST}/foo`}`);
       const fileManager = stubFileManager();
 
       const FINISHED_REQUEST_1 = createNetworkRequest('http://example.com/', {finished: true});
@@ -239,8 +240,8 @@ describeWithMockConnection('NetworkLogView', () => {
     });
 
     it('can import and filter from HAR', async () => {
-      const URL_1 = 'http://example.com/' as Platform.DevToolsPath.UrlString;
-      const URL_2 = 'http://example.com/favicon.ico' as Platform.DevToolsPath.UrlString;
+      const URL_1 = urlString`http://example.com/`;
+      const URL_2 = urlString`http://example.com/favicon.ico`;
       function makeHarEntry(url: Platform.DevToolsPath.UrlString) {
         return {
           request: {method: 'GET', url, headersSize: -1, bodySize: 0},
@@ -262,7 +263,7 @@ describeWithMockConnection('NetworkLogView', () => {
       const blob = new Blob([JSON.stringify(har)], {type: 'text/plain'});
       const file = new File([blob], 'log.har');
       await networkLogView.onLoadFromFile(file);
-      await coordinator.done({waitForWork: true});
+      await RenderCoordinator.done({waitForWork: true});
 
       const rootNode = networkLogView.columns().dataGrid().rootNode();
       assert.deepEqual(
@@ -274,7 +275,7 @@ describeWithMockConnection('NetworkLogView', () => {
     });
 
     it('shows summary toolbar with content', () => {
-      target.setInspectedURL('http://example.com/' as Platform.DevToolsPath.UrlString);
+      target.setInspectedURL(urlString`http://example.com/`);
       const request = createNetworkRequest('http://example.com/', {finished: true});
       request.endTime = 0.669414;
       request.setIssueTime(0.435136, 0.435136);
@@ -290,7 +291,7 @@ describeWithMockConnection('NetworkLogView', () => {
       networkLogView.show(document.body);
 
       const toolbar = networkLogView.summaryToolbar();
-      const textElements = toolbar.element.shadowRoot?.querySelectorAll('.toolbar-text');
+      const textElements = toolbar.querySelectorAll('.toolbar-text');
       assert.exists(textElements);
       const textContents = [...textElements].map(item => item.textContent);
       if (inScope) {
@@ -303,7 +304,7 @@ describeWithMockConnection('NetworkLogView', () => {
           'Load: 251\u00a0ms',
         ]);
       } else {
-        assert.strictEqual(textElements.length, 0);
+        assert.lengthOf(textElements, 0);
       }
     });
   };
@@ -322,14 +323,14 @@ describeWithMockConnection('NetworkLogView', () => {
     networkLogView = createNetworkLogView();
     networkLogView.markAsRoot();
     networkLogView.show(document.body);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const rootNode = networkLogView.columns().dataGrid().rootNode();
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()), [request1, request2]);
 
     SDK.TargetManager.TargetManager.instance().setScopeTarget(anotherTarget);
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()),
         preserveLog ? [request1, request2, request3] : [request3]);
@@ -350,14 +351,14 @@ describeWithMockConnection('NetworkLogView', () => {
     networkLogView = createNetworkLogView();
     networkLogView.markAsRoot();
     networkLogView.show(document.body);
-    await coordinator.done();
+    await RenderCoordinator.done();
 
     const rootNode = networkLogView.columns().dataGrid().rootNode();
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()), [request1, request2]);
 
     activate(target);
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()),
         [request1, request2, request3]);
@@ -373,12 +374,11 @@ describeWithMockConnection('NetworkLogView', () => {
 
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
-        ['chrome-extension://url1' as Platform.DevToolsPath.UrlString, 'url2' as Platform.DevToolsPath.UrlString]);
+        [urlString`chrome-extension://url1`, urlString`url2`]);
 
     clickCheckbox(hideExtCheckbox);
     assert.deepEqual(
-        rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
-        ['url2' as Platform.DevToolsPath.UrlString]);
+        rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [urlString`url2`]);
   });
 
   it('can hide Chrome extension requests from dropdown', async () => {
@@ -391,7 +391,7 @@ describeWithMockConnection('NetworkLogView', () => {
 
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
-        ['chrome-extension://url1' as Platform.DevToolsPath.UrlString, 'url2' as Platform.DevToolsPath.UrlString]);
+        [urlString`chrome-extension://url1`, urlString`url2`]);
 
     const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
     if (!dropdown) {
@@ -405,8 +405,7 @@ describeWithMockConnection('NetworkLogView', () => {
     assert.isTrue(hideExtensionURL.hasAttribute('checked'));
 
     assert.deepEqual(
-        rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
-        ['url2' as Platform.DevToolsPath.UrlString]);
+        rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [urlString`url2`]);
 
     dropdown.discard();
   });
@@ -446,7 +445,7 @@ describeWithMockConnection('NetworkLogView', () => {
     const blockedCookiesCheckbox = getCheckbox(filterBar, 'Show only requests with blocked response cookies');
     clickCheckbox(blockedCookiesCheckbox);
     assert.deepEqual(rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [
-      'url1' as Platform.DevToolsPath.UrlString,
+      urlString`url1`,
     ]);
   });
 
@@ -466,7 +465,7 @@ describeWithMockConnection('NetworkLogView', () => {
 
     assert.deepEqual(
         rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()),
-        ['url1' as Platform.DevToolsPath.UrlString, 'url2' as Platform.DevToolsPath.UrlString]);
+        [urlString`url1`, urlString`url2`]);
 
     const dropdown = await openMoreTypesDropdown(filterBar, networkLogView);
     if (!dropdown) {
@@ -480,7 +479,7 @@ describeWithMockConnection('NetworkLogView', () => {
     assert.isTrue(blockedResponseCookies.hasAttribute('checked'));
 
     assert.deepEqual(rootNode.children.map(n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url()), [
-      'url1' as Platform.DevToolsPath.UrlString,
+      urlString`url1`,
     ]);
 
     dropdown.discard();
@@ -538,10 +537,10 @@ describeWithMockConnection('NetworkLogView', () => {
     networkLogView.show(document.body);
 
     const rootNode = networkLogView.columns().dataGrid().rootNode();
-    assert.strictEqual(rootNode.children.length, 1);
+    assert.lengthOf(rootNode.children, 1);
 
     networkLog.dispatchEventToListeners(Logs.NetworkLog.Events.RequestRemoved, {request});
-    assert.strictEqual(rootNode.children.length, 0);
+    assert.lengthOf(rootNode.children, 0);
   });
 
   it('correctly shows/hides "Copy all as HAR (with sensitive data)" menu item', async () => {
@@ -597,10 +596,10 @@ describeWithMockConnection('NetworkLogView', () => {
   });
 
   function createOverrideRequests() {
-    const urlNotOverridden = 'url-not-overridden' as Platform.DevToolsPath.UrlString;
-    const urlHeaderOverridden = 'url-header-overridden' as Platform.DevToolsPath.UrlString;
-    const urlContentOverridden = 'url-content-overridden' as Platform.DevToolsPath.UrlString;
-    const urlHeaderAndContentOverridden = 'url-header-und-content-overridden' as Platform.DevToolsPath.UrlString;
+    const urlNotOverridden = urlString`url-not-overridden`;
+    const urlHeaderOverridden = urlString`url-header-overridden`;
+    const urlContentOverridden = urlString`url-content-overridden`;
+    const urlHeaderAndContentOverridden = urlString`url-header-und-content-overridden`;
 
     createNetworkRequest(urlNotOverridden, {target});
     const r2 = createNetworkRequest(urlHeaderOverridden, {target});
@@ -703,6 +702,37 @@ describeWithMockConnection('NetworkLogView', () => {
     ]);
   });
 
+  it('filters localized resource categories', async () => {
+    // "simulate" other locale by stubbing out resource categories with a different text
+    sinon.stub(Common.ResourceType.resourceCategories.Document, 'title')
+        .returns(i18n.i18n.lockedString('<localized document>'));
+    sinon.stub(Common.ResourceType.resourceCategories.XHR, 'title').returns(i18n.i18n.lockedString('<localized xhr>'));
+
+    const documentRequest = createNetworkRequest('urlDocument', {finished: true});
+    documentRequest.setResourceType(Common.ResourceType.resourceTypes.Document);
+    const fetchRequest = createNetworkRequest('urlFetch', {finished: true});
+    fetchRequest.setResourceType(Common.ResourceType.resourceTypes.Fetch);
+
+    const filterBar = new UI.FilterBar.FilterBar('network-panel', true);
+    networkLogView = createNetworkLogView(filterBar);
+
+    networkLogView.markAsRoot();
+    networkLogView.show(document.body);
+    const rootNode = networkLogView.columns().dataGrid().rootNode();
+    const shownRequestUrls = () => rootNode.children.map(
+        n => (n as Network.NetworkDataGridNode.NetworkNode).request()?.url() as string | undefined);
+
+    const setting = Common.Settings.Settings.instance().createSetting('network-resource-type-filters', {});
+    setting.set({all: true});
+    assert.deepEqual(shownRequestUrls(), ['urlDocument', 'urlFetch']);
+
+    setting.set({[Common.ResourceType.resourceCategories.Document.name]: true});
+    assert.deepEqual(shownRequestUrls(), ['urlDocument']);
+
+    setting.set({[Common.ResourceType.resourceCategories.XHR.name]: true});
+    assert.deepEqual(shownRequestUrls(), ['urlFetch']);
+  });
+
   it('"Copy all" commands respects filters', async () => {
     createOverrideRequests();
 

package/front_end/panels/network/NetworkLogView.ts

@@ -32,6 +32,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -47,7 +49,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -456,8 +458,6 @@ const enum FetchStyle {
   NODE_JS = 1,
 }
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
     implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager>, NetworkLogViewInterface {
   private readonly networkInvertFilterSetting: Common.Settings.Setting<boolean>;
@@ -510,6 +510,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element,
       networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
     super();
+    this.registerRequiredCSS(networkLogViewStyles);
     this.setMinimumSize(50, 64);
 
     this.element.id = 'network-container';
@@ -666,8 +667,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     filterBar.filterButton().addEventListener(
         UI.Toolbar.ToolbarButton.Events.CLICK, this.dataGrid.scheduleUpdate.bind(this.dataGrid, true /* isFromUser */));
 
-    this.summaryToolbarInternal = new UI.Toolbar.Toolbar('network-summary-bar', this.element);
-    this.summaryToolbarInternal.element.setAttribute('role', 'status');
+    this.summaryToolbarInternal = this.element.createChild('devtools-toolbar', 'network-summary-bar');
+    this.summaryToolbarInternal.setAttribute('role', 'status');
 
     new UI.DropTarget.DropTarget(
         this.element, [UI.DropTarget.Type.File], i18nString(UIStrings.dropHarFilesHere), this.handleDrop.bind(this));
@@ -1122,7 +1123,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   private setHidden(value: boolean): void {
     this.columnsInternal.setHidden(value);
-    UI.ARIAUtils.setHidden(this.summaryToolbarInternal.element, value);
+    UI.ARIAUtils.setHidden(this.summaryToolbarInternal, value);
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {
@@ -1322,7 +1323,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.needsRefresh = true;
 
     if (this.isShowing()) {
-      void coordinator.write('NetworkLogView.render', this.refresh.bind(this));
+      void RenderCoordinator.write('NetworkLogView.render', this.refresh.bind(this));
     }
   }
 
@@ -1407,8 +1408,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.refreshIfNeeded();
-    this.registerCSSFiles([networkLogViewStyles]);
     this.columnsInternal.wasShown();
   }
 
@@ -1726,7 +1727,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (request) {
       if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.network-panel-context')) {
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
-        contextMenu.headerSection().appendAction(
+        contextMenu.footerSection().appendAction(
             'drjones.network-panel-context',
         );
       }
@@ -1999,7 +2000,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     if (this.timeFilter && !this.timeFilter(request)) {
       return false;
     }
-    const categoryName = request.resourceType().category().title();
+    const categoryName = request.resourceType().category().name;
     if (!this.resourceCategoryFilterUI.accept(categoryName)) {
       return false;
     }
@@ -2047,7 +2048,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     try {
       new URL(url);
       return true;
-    } catch (e) {
+    } catch {
       return false;
     }
   }
@@ -2459,13 +2460,16 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       if (ignoredHeaders.has(name.toLowerCase())) {
         continue;
       }
-      if (header.value.trim()) {
-        command.push('-H ' + escapeString(name + ': ' + header.value));
-      } else {
+      const value = header.value;
+      if (!value.trim()) {
         // A header passed with -H with no value or only whitespace as its
         // value tells curl to not set the header at all. To post an empty
         // header, you have to terminate it with a semicolon.
         command.push('-H ' + escapeString(name + ';'));
+      } else if (name.toLowerCase() === 'cookie') {
+        command.push('-b ' + escapeString(value));
+      } else {
+        command.push('-H ' + escapeString(name + ': ' + value));
       }
     }
     command = command.concat(data);
@@ -2586,11 +2590,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   static getDCLEventColor(): string {
-    return '--sys-color-token-attribute-value';
+    return '--sys-color-blue';
   }
 
   static getLoadEventColor(): string {
-    return '--sys-color-token-property-special';
+    return '--sys-color-error';
   }
 }
 
@@ -2648,7 +2652,6 @@ export class MoreFiltersDropDownUI extends
   private contextMenu?: UI.ContextMenu.ContextMenu;
   private activeFiltersCount: HTMLElement;
   private activeFiltersCountAdorner: Adorners.Adorner.Adorner;
-  private hasChanged = false;
 
   constructor() {
     super();
@@ -2688,13 +2691,11 @@ export class MoreFiltersDropDownUI extends
   }
 
   #onSettingChanged(): void {
-    this.hasChanged = true;
     this.dispatchEventToListeners(UI.FilterBar.FilterUIEvents.FILTER_CHANGED);
   }
 
   showMoreFiltersContextMenu(event: Common.EventTarget.EventTargetEvent<Event>): void {
     const mouseEvent = event.data;
-    this.hasChanged = false;
 
     this.networkHideDataURLSetting.addChangeListener(this.#onSettingChanged.bind(this));
     this.networkHideChromeExtensionsSetting.addChangeListener(this.#onSettingChanged.bind(this));

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -310,10 +310,8 @@ export class NetworkLogViewColumns {
     this.dataGridScroller.addEventListener('touchstart', this.onTouchStart.bind(this));
     this.dataGridScroller.addEventListener('touchmove', this.onTouchMove.bind(this));
     this.dataGridScroller.addEventListener('touchend', this.onTouchEnd.bind(this));
-    this.waterfallScroller =
-        (this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll') as HTMLDivElement);
-    this.waterfallScrollerContent =
-        (this.waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content') as HTMLDivElement);
+    this.waterfallScroller = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-v-scroll');
+    this.waterfallScrollerContent = this.waterfallScroller.createChild('div', 'network-waterfall-v-scroll-content');
 
     this.dataGridInternal.addEventListener(DataGrid.DataGrid.Events.PADDING_CHANGED, () => {
       this.waterfallScrollerWidthIsStale = true;
@@ -413,8 +411,7 @@ export class NetworkLogViewColumns {
   }
 
   private createWaterfallHeader(): void {
-    this.waterfallHeaderElement =
-        (this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header') as HTMLElement);
+    this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
     this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
@@ -847,10 +844,10 @@ export class NetworkLogViewColumns {
     let color = 'transparent';
     switch (className) {
       case 'network-dcl-divider':
-        color = '#0867CB';
+        color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-blue');
         break;
       case 'network-load-divider':
-        color = '#B31412';
+        color = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-error');
         break;
       default:
         return;

package/front_end/panels/network/NetworkManageCustomHeadersView.ts

@@ -52,11 +52,12 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
       changeHeaderColumnCallback: (arg0: string, arg1: string) => boolean,
       removeHeaderColumnCallback: (arg0: string) => boolean) {
     super(true);
+    this.registerRequiredCSS(networkManageCustomHeadersViewStyles);
 
-    this.contentElement.classList.add('custom-headers-wrapper');
     this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.manageHeaderColumns);
 
     this.list = new UI.ListWidget.ListWidget(this);
+    this.list.registerRequiredCSS(networkManageCustomHeadersViewStyles);
     this.list.element.classList.add('custom-headers-list');
 
     const placeholder = document.createElement('div');
@@ -81,9 +82,8 @@ export class NetworkManageCustomHeadersView extends UI.Widget.VBox implements UI
   }
 
   override wasShown(): void {
+    super.wasShown();
     this.headersUpdated();
-    this.list.registerCSSFiles([networkManageCustomHeadersViewStyles]);
-    this.registerCSSFiles([networkManageCustomHeadersViewStyles]);
   }
 
   private headersUpdated(): void {

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

@@ -7,13 +7,11 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
-import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 
 import * as Network from './network.js';
 
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-
 describeWithMockConnection('NetworkOverview', () => {
   let target: SDK.Target.Target;
   let networkOverview: Network.NetworkOverview.NetworkOverview;
@@ -49,7 +47,7 @@ describeWithMockConnection('NetworkOverview', () => {
     resourceTreeModel.dispatchEventToListeners(
         event,
         ...[{loadTime: 42}] as Common.EventTarget.EventPayloadToRestParameters<SDK.ResourceTreeModel.EventTypes, T>);
-    await coordinator.done();
+    await RenderCoordinator.done();
     assert.strictEqual(calculator.computePosition.called, inScope);
     networkOverview.detach();
   };