chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -21,6 +21,16 @@ import {
   ThrottlingPresets,
 } from './ThrottlingPresets.js';
 
+export interface CPUThrottlingSelectorWrapper {
+  control: UI.Toolbar.ToolbarComboBox;
+  updateRecommendedRate(recommendedRate: number|null): void;
+}
+
+export interface NetworkThrottlingSelectorWrapper {
+  selector: NetworkThrottlingSelector;
+  updateRecommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null): void;
+}
+
 const UIStrings = {
   /**
    *@description Text with two placeholders separated by a colon
@@ -82,6 +92,12 @@ const UIStrings = {
    *@description Tooltip text for an input box that overrides navigator.hardwareConcurrency on the page
    */
   hardwareConcurrencySettingLabel: 'Override the value reported by navigator.hardwareConcurrency',
+  /**
+   * @description Text label for a selection box showing that a specific option is recommended for CPU or Network throttling.
+   * @example {Fast 4G} PH1
+   * @example {4x slowdown} PH1
+   */
+  recommendedThrottling: '{PH1} - recommended',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -135,68 +151,6 @@ export class ThrottlingManager {
     return throttlingManagerInstance;
   }
 
-  decorateSelectWithNetworkThrottling(selectElement: HTMLSelectElement): NetworkThrottlingSelector {
-    let options: (SDK.NetworkManager.Conditions|null)[] = [];
-    const selector = new NetworkThrottlingSelector(populate, select, this.customNetworkConditionsSetting);
-    selectElement.setAttribute(
-        'jslog',
-        `${
-            VisualLogging.dropDown()
-                .track({change: true})
-                .context(this.currentNetworkThrottlingConditionsSetting.name)}`);
-    selectElement.addEventListener('change', optionSelected, false);
-    return selector;
-
-    function populate(groups: NetworkThrottlingConditionsGroup[]): (SDK.NetworkManager.Conditions|null)[] {
-      selectElement.removeChildren();
-      options = [];
-      for (let i = 0; i < groups.length; ++i) {
-        const group = groups[i];
-        const groupElement = selectElement.createChild('optgroup') as HTMLOptGroupElement;
-        groupElement.label = group.title;
-        for (const conditions of group.items) {
-          // The title is usually an i18nLazyString except for custom values that are stored in the local storage in the form of a string.
-          const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
-          const option = new Option(title, title);
-          UI.ARIAUtils.setLabel(option, i18nString(UIStrings.sS, {PH1: group.title, PH2: title}));
-          const jslogContext = i === groups.length - 1 ?
-              'custom-network-throttling-item' :
-              Platform.StringUtilities.toKebabCase(conditions.i18nTitleKey || title);
-          option.setAttribute('jslog', `${VisualLogging.item(jslogContext).track({
-                                click: true,
-                              })}`);
-          groupElement.appendChild(option);
-          options.push(conditions);
-        }
-        if (i === groups.length - 1) {
-          const option = new Option(i18nString(UIStrings.add), i18nString(UIStrings.add));
-          UI.ARIAUtils.setLabel(option, i18nString(UIStrings.addS, {PH1: group.title}));
-          option.setAttribute('jslog', `${VisualLogging.action('add').track({click: true})}`);
-          groupElement.appendChild(option);
-          options.push(null);
-        }
-      }
-      return options;
-    }
-
-    function optionSelected(): void {
-      if (selectElement.selectedIndex === selectElement.options.length - 1) {
-        selector.revealAndUpdate();
-      } else {
-        const option = options[selectElement.selectedIndex];
-        if (option) {
-          selector.optionSelected(option);
-        }
-      }
-    }
-
-    function select(index: number): void {
-      if (selectElement.selectedIndex !== index) {
-        selectElement.selectedIndex = index;
-      }
-    }
-  }
-
   createOfflineToolbarCheckbox(): UI.Toolbar.ToolbarCheckbox {
     const checkbox = new UI.Toolbar.ToolbarCheckbox(
         i18nString(UIStrings.offline), i18nString(UIStrings.forceDisconnectedFromNetwork), forceOffline.bind(this));
@@ -267,7 +221,7 @@ export class ThrottlingManager {
       const option = options[index];
       if (option) {
         button.setText(option.title);
-        button.setTitle(`${option.title} ${option.description}`);
+        button.setTitle(`${option.title}: ${option.description}`);
       }
     }
   }
@@ -296,13 +250,98 @@ export class ThrottlingManager {
     this.updatePanelIcon();
   }
 
-  createCPUThrottlingSelector(): UI.Toolbar.ToolbarComboBox {
+  createNetworkThrottlingSelector(selectElement: HTMLSelectElement): NetworkThrottlingSelectorWrapper {
+    let options: (SDK.NetworkManager.Conditions|null)[] = [];
+    let titles: string[] = [];
+    let optionEls: HTMLOptionElement[] = [];
+    const selector = new NetworkThrottlingSelector(populate, select, this.customNetworkConditionsSetting);
+    selectElement.setAttribute(
+        'jslog',
+        `${
+            VisualLogging.dropDown()
+                .track({change: true})
+                .context(this.currentNetworkThrottlingConditionsSetting.name)}`);
+    selectElement.addEventListener('change', optionSelected, false);
+
+    function populate(groups: NetworkThrottlingConditionsGroup[]): (SDK.NetworkManager.Conditions|null)[] {
+      selectElement.removeChildren();
+      options = [];
+      titles = [];
+      optionEls = [];
+      for (let i = 0; i < groups.length; ++i) {
+        const group = groups[i];
+        const groupElement = selectElement.createChild('optgroup');
+        groupElement.label = group.title;
+        for (const conditions of group.items) {
+          // The title is usually an i18nLazyString except for custom values that are stored in the local storage in the form of a string.
+          const title = typeof conditions.title === 'function' ? conditions.title() : conditions.title;
+          const option = new Option(title, title);
+          UI.ARIAUtils.setLabel(option, i18nString(UIStrings.sS, {PH1: group.title, PH2: title}));
+          const jslogContext = i === groups.length - 1 ?
+              'custom-network-throttling-item' :
+              Platform.StringUtilities.toKebabCase(conditions.i18nTitleKey || title);
+          option.setAttribute('jslog', `${VisualLogging.item(jslogContext).track({
+                                click: true,
+                              })}`);
+          groupElement.appendChild(option);
+          options.push(conditions);
+
+          titles.push(title);
+          optionEls.push(option);
+        }
+        if (i === groups.length - 1) {
+          const option = new Option(i18nString(UIStrings.add), i18nString(UIStrings.add));
+          UI.ARIAUtils.setLabel(option, i18nString(UIStrings.addS, {PH1: group.title}));
+          option.setAttribute('jslog', `${VisualLogging.action('add').track({click: true})}`);
+          groupElement.appendChild(option);
+          options.push(null);
+        }
+      }
+      return options;
+    }
+
+    function optionSelected(): void {
+      if (selectElement.selectedIndex === selectElement.options.length - 1) {
+        selector.revealAndUpdate();
+      } else {
+        const option = options[selectElement.selectedIndex];
+        if (option) {
+          selector.optionSelected(option);
+        }
+      }
+    }
+
+    function select(index: number): void {
+      if (selectElement.selectedIndex !== index) {
+        selectElement.selectedIndex = index;
+      }
+    }
+
+    return {
+      selector,
+      updateRecommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null) {
+        for (let i = 0; i < optionEls.length; i++) {
+          let title = titles[i];
+          if (options[i] === recommendedConditions) {
+            title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+          }
+          optionEls[i].text = title;
+        }
+      },
+    };
+  }
+
+  createCPUThrottlingSelector(): CPUThrottlingSelectorWrapper {
     const control = new UI.Toolbar.ToolbarComboBox(
         event => this.setCPUThrottlingRate(this.cpuThrottlingRates[(event.target as HTMLSelectElement).selectedIndex]),
         i18nString(UIStrings.cpuThrottling), '', 'cpu-throttling');
     this.cpuThrottlingControls.add(control);
     const currentRate = this.cpuThrottlingManager.cpuThrottlingRate();
 
+    const titles: string[] = [];
+    const optionEls: HTMLOptionElement[] = [];
+    const rates = this.cpuThrottlingRates;
+
     for (let i = 0; i < this.cpuThrottlingRates.length; ++i) {
       const rate = this.cpuThrottlingRates[i];
       const title = rate === 1 ? i18nString(UIStrings.noThrottling) : i18nString(UIStrings.dSlowdown, {PH1: rate});
@@ -312,8 +351,23 @@ export class ThrottlingManager {
       if (currentRate === rate) {
         control.setSelectedIndex(i);
       }
+
+      titles.push(title);
+      optionEls.push(option);
     }
-    return control;
+
+    return {
+      control,
+      updateRecommendedRate(recommendedRate: number|null) {
+        for (let i = 0; i < optionEls.length; i++) {
+          let title = titles[i];
+          if (rates[i] === recommendedRate) {
+            title = i18nString(UIStrings.recommendedThrottling, {PH1: title});
+          }
+          optionEls[i].text = title;
+        }
+      },
+    };
   }
 
   /** Hardware Concurrency doesn't store state in a setting. */

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -9,7 +9,7 @@ const UIStrings = {
   /**
    *@description Text for no network throttling
    */
-  noThrottling: 'No throttling',
+  noThrottling: 'No CPU and no network throttling',
   /**
    *@description Text in Throttling Presets of the Network panel
    */
@@ -111,6 +111,42 @@ export class ThrottlingPresets {
     ];
   }
 
+  static getRecommendedNetworkPreset(rtt: number): SDK.NetworkManager.Conditions|null {
+    const RTT_COMPARISON_THRESHOLD = 200;
+    const RTT_MINIMUM = 60;
+
+    if (!Number.isFinite(rtt)) {
+      return null;
+    }
+
+    if (rtt < RTT_MINIMUM) {
+      return null;
+    }
+
+    let closestPreset: SDK.NetworkManager.Conditions|null = null;
+    let smallestDiff = Infinity;
+    for (const preset of ThrottlingPresets.networkPresets) {
+      const {targetLatency} = preset;
+      if (!targetLatency) {
+        continue;
+      }
+
+      const diff = Math.abs(targetLatency - rtt);
+      if (diff > RTT_COMPARISON_THRESHOLD) {
+        continue;
+      }
+
+      if (smallestDiff < diff) {
+        continue;
+      }
+
+      closestPreset = preset;
+      smallestDiff = diff;
+    }
+
+    return closestPreset;
+  }
+
   static networkPresets: SDK.NetworkManager.Conditions[] = [
     SDK.NetworkManager.Fast4GConditions,
     SDK.NetworkManager.Slow4GConditions,

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -145,16 +145,17 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
     addButton.textContent = i18nString(UIStrings.addCustomProfile);
     addButton.addEventListener('click', () => this.addButtonClicked());
 
-    const listContainer = settingsContent.createChild('div');
+    const container = settingsContent.createChild('div');
     const card = new Cards.Card.Card();
     settingsContent.appendChild(card);
     card.data = {
       heading: i18nString(UIStrings.networkThrottlingProfiles),
-      content: [listContainer, addButton],
+      content: [container],
     };
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.element.classList.add('conditions-list');
-    this.list.show(listContainer);
+    this.list.show(container);
+    container.appendChild(addButton);
 
     this.customSetting = Common.Settings.Settings.instance().moduleSetting('custom-network-conditions');
     this.customSetting.addChangeListener(this.conditionsUpdated, this);

package/front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -5,13 +5,16 @@
  */
 
 .add-conditions-button {
-  margin-bottom: var(--sys-size-5);
+  margin: var(--sys-size-5) 0;
   border: none;
 }
 
 .conditions-list {
-  margin-top: var(--sys-size-3);
   flex: auto;
+
+  &:has(.list-item) {
+    margin-top: var(--sys-size-3);
+  }
 }
 
 .conditions-list-item {
@@ -26,7 +29,7 @@
 .conditions-list-text {
   text-overflow: ellipsis;
   overflow: hidden;
-  flex: 0 0 50px;
+  flex: 0 0 60px;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -73,6 +76,10 @@
   display: flex;
   flex-direction: row;
   margin: 6px 5px;
+
+  .conditions-list-title-text {
+    white-space: unset;
+  }
 }
 
 .conditions-edit-row input {
@@ -92,10 +99,8 @@
 }
 
 .conditions-edit-optional {
-  position: absolute;
-  bottom: -20px;
-  right: 0;
-  color: var(--sys-color-state-disabled);
+  margin-top: var(--sys-size-5);
+  color: var(--sys-color-on-surface-subtle);
 }
 
 .editor-buttons {
@@ -104,7 +109,7 @@
 
 .settings-card-container-wrapper {
   scrollbar-gutter: stable;
-  padding-bottom: var(--sys-size-8);
+  padding: var(--sys-size-8) 0;
   overflow: auto;
   position: absolute;
   inset: var(--sys-size-8) 0 0;

package/front_end/panels/network/BlockedURLsPane.ts

@@ -129,7 +129,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     const count = this.blockedRequestsCount(pattern.url);
     const element = document.createElement('div');
     element.classList.add('blocked-url');
-    const checkbox = (element.createChild('input', 'blocked-url-checkbox') as HTMLInputElement);
+    const checkbox = element.createChild('input', 'blocked-url-checkbox');
     checkbox.type = 'checkbox';
     checkbox.checked = pattern.enabled;
     checkbox.disabled = !editable;

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

@@ -0,0 +1,15 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Network from './network.js';
+
+describe('userAgentGroups', () => {
+  it('Chrome UAs all have placeholder for major version patching', () => {
+    const {userAgentGroups} = Network.NetworkConfigView;
+    const chromeUAs = userAgentGroups.map(g => g.values).flat().filter(v => v.value.includes(' Chrome/'));
+    assert.isAtLeast(chromeUAs.length, 10);
+    // We should not add any new UAs without the %s that gets patched via `patchUserAgentWithChromeVersion`
+    assert.isTrue(chromeUAs.every(v => v.value.includes('Chrome/%s')));
+  });
+});

package/front_end/panels/network/NetworkConfigView.ts

@@ -111,7 +111,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
     userAgentSelectElement.appendChild(UI.UIUtils.createOption(customOverride.title, customOverride.value, 'custom'));
 
     for (const userAgentDescriptor of userAgentGroups) {
-      const groupElement = (userAgentSelectElement.createChild('optgroup') as HTMLOptGroupElement);
+      const groupElement = userAgentSelectElement.createChild('optgroup');
       groupElement.label = userAgentDescriptor.title;
       for (const userAgentVersion of userAgentDescriptor.values) {
         const userAgentValue =
@@ -212,8 +212,8 @@ export class NetworkConfigView extends UI.Widget.VBox {
   private createNetworkThrottlingSection(): void {
     const title = i18nString(UIStrings.networkThrottling);
     const section = this.createSection(title, 'network-config-throttling');
-    const networkThrottlingSelect = (section.createChild('select', 'chrome-select') as HTMLSelectElement);
-    MobileThrottling.ThrottlingManager.throttlingManager().decorateSelectWithNetworkThrottling(networkThrottlingSelect);
+    const networkThrottlingSelect = section.createChild('select', 'chrome-select');
+    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(networkThrottlingSelect);
     UI.ARIAUtils.setLabel(networkThrottlingSelect, title);
   }
 
@@ -339,7 +339,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
       Zstd: Protocol.Network.ContentEncoding.Zstd,
     };
     for (const encoding of Object.values(contentEncodings)) {
-      const label = UI.UIUtils.CheckboxLabel.create(encoding, true, undefined, encoding);
+      const label = UI.UIUtils.CheckboxLabel.createWithStringLiteral(encoding, true, undefined, encoding);
       encodingsSection.appendChild(label);
       checkboxes.set(encoding, label.checkboxElement);
     }
@@ -723,7 +723,7 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'Microsoft Edge \u2014 Android Mobile',
         value:
-            'Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPM4.171019.021.D1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36 EdgA/42.0.0.2057',
+            'Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPM4.171019.021.D1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36 EdgA/42.0.0.2057',
         metadata: {
           brands: [
             {brand: 'Not A;Brand', version: '99'},
@@ -741,7 +741,7 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'Microsoft Edge \u2014 Android Tablet',
         value:
-            'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Safari/537.36 EdgA/42.0.0.2057',
+            'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 EdgA/42.0.0.2057',
         metadata: {
           brands: [
             {brand: 'Not A;Brand', version: '99'},
@@ -759,13 +759,13 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'Microsoft Edge (EdgeHTML) \u2014 Windows',
         value:
-            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19042',
+            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 Edge/18.19042',
         metadata: null,
       },
       {
         title: 'Microsoft Edge (EdgeHTML) \u2014 XBox',
         value:
-            'Mozilla/5.0 (Windows NT 10.0; Win64; x64; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041',
+            'Mozilla/5.0 (Windows NT 10.0; Win64; x64; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 Edge/18.19041',
         metadata: null,
       },
     ],
@@ -776,13 +776,13 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'Opera \u2014 Mac',
         value:
-            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 OPR/65.0.3467.48',
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 OPR/65.0.3467.48',
         metadata: null,
       },
       {
         title: 'Opera \u2014 Windows',
         value:
-            'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36 OPR/65.0.3467.48',
+            'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36 OPR/65.0.3467.48',
         metadata: null,
       },
       {
@@ -836,7 +836,7 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'UC Browser \u2014 Android Mobile',
         value:
-            'Mozilla/5.0 (Linux; U; Android 8.1.0; en-US; Nexus 6P Build/OPM7.181205.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.108 UCBrowser/12.11.1.1197 Mobile Safari/537.36',
+            'Mozilla/5.0 (Linux; U; Android 8.1.0; en-US; Nexus 6P Build/OPM7.181205.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/%s UCBrowser/12.11.1.1197 Mobile Safari/537.36',
         metadata: null,
       },
       {

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

@@ -275,8 +275,8 @@ describeWithEnvironment('NetworkLogView', () => {
     const iconElement = el.querySelector('.icon.image') as HTMLElement;
     const imagePreview = el.querySelector('.image-network-icon-preview') as HTMLImageElement;
 
-    assert.isTrue(iconElement instanceof HTMLDivElement);
-    assert.isTrue(imagePreview instanceof HTMLImageElement);
+    assert.instanceOf(iconElement, HTMLDivElement);
+    assert.instanceOf(imagePreview, HTMLImageElement);
   });
 
   it('mime win: show document icon for fetch-html', async () => {

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -23,13 +24,11 @@ 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();
-
 describeWithMockConnection('NetworkLogView', () => {
   let target: SDK.Target.Target;
   let networkLogView: Network.NetworkLogView.NetworkLogView;
@@ -139,11 +138,11 @@ describeWithMockConnection('NetworkLogView', () => {
     });
     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=^\\^"^"',
     );
   });
 
@@ -153,11 +152,11 @@ describeWithMockConnection('NetworkLogView', () => {
     });
     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^"',
     );
   });
 
@@ -167,11 +166,11 @@ describeWithMockConnection('NetworkLogView', () => {
     });
     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^\"',
     );
   });
 
@@ -262,7 +261,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(
@@ -303,7 +302,7 @@ describeWithMockConnection('NetworkLogView', () => {
           'Load: 251\u00a0ms',
         ]);
       } else {
-        assert.strictEqual(textElements.length, 0);
+        assert.lengthOf(textElements, 0);
       }
     });
   };
@@ -322,14 +321,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 +349,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]);
@@ -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 () => {
@@ -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();