chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/lighthouse/LighthouseReportRenderer.test.ts

@@ -70,7 +70,7 @@ describeWithMockConnection('LighthouseReportRenderer', () => {
     await Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.linkifyNodeDetails(sourceElement);
 
     assert.strictEqual(sourceElement.childNodes.length, NUM_NODES);
-    assert.deepStrictEqual([...sourceElement.childNodes].map(n => n.textContent), ['link1', 'link2', 'link3']);
+    assert.deepEqual([...sourceElement.childNodes].map(n => n.textContent), ['link1', 'link2', 'link3']);
   });
 
   it('resets tooltip', async () => {

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -188,8 +188,8 @@ export class StatusView {
   }
 
   private render(): void {
-    const dialogRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        this.dialog.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
+    const dialogRoot =
+        UI.UIUtils.createShadowRootWithCoreStyles(this.dialog.contentElement, {cssFile: [lighthouseDialogStyles]});
     const lighthouseViewElement = dialogRoot.createChild('div', 'lighthouse-view vbox');
 
     const cancelButton = UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), this.cancel.bind(this), {

package/front_end/panels/lighthouse/LighthouseTimespanView.ts

@@ -68,8 +68,8 @@ export class TimespanView extends UI.Dialog.Dialog {
   }
 
   render(): void {
-    const dialogRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        this.contentElement, {cssFile: [lighthouseDialogStyles], delegatesFocus: undefined});
+    const dialogRoot =
+        UI.UIUtils.createShadowRootWithCoreStyles(this.contentElement, {cssFile: [lighthouseDialogStyles]});
 
     this.endButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.endTimespan),

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-.toolbar {
-  background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
-}
-
 .lh-root {
   --report-menu-width: 0;
 
@@ -47,6 +42,11 @@ button.view-trace {
   flex: none;
 }
 
+.lighthouse-toolbar-container > .toolbar {
+  background-color: var(--sys-color-cdt-base-container);
+  border-bottom: 1px solid var(--sys-color-divider);
+}
+
 .lighthouse-toolbar-container > :first-child {
   flex: 1 1 auto;
 }

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -34,6 +34,7 @@
   flex-shrink: 0;
   background-repeat: no-repeat;
   background-size: contain;
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-lighthouse_logo);
 }
 
@@ -112,7 +113,7 @@ input[type="radio"] {
     margin-bottom: 0;
   }
 
-  &:not(:has(span[is="dt-checkbox"])) {
+  &:not(:has(dt-checkbox)) {
     margin-bottom: 6px;
   }
 }

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.test.ts

@@ -119,7 +119,7 @@ describeWithEnvironment('LinearMemoryInspectorController', () => {
     const instance = LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     const expressionName = 'myCar';
     const result = await instance.evaluateExpression(callFrame, expressionName);
-    assert.strictEqual(result, undefined);
+    assert.isUndefined(result);
     assert.isTrue(stub.calledOnceWithExactly(
         `Tried to evaluate the expression '${expressionName}' but got an error: ${errorText}`));
   });
@@ -140,7 +140,7 @@ describeWithEnvironment('LinearMemoryInspectorController', () => {
     const instance = LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     const expressionName = 'myCar.manufacturer';
     const result = await instance.evaluateExpression(callFrame, expressionName);
-    assert.strictEqual(result, undefined);
+    assert.isUndefined(result);
     assert.isTrue(stub.calledOnceWithExactly(
         `Tried to evaluate the expression '${expressionName}' but got an exception: ${exceptionText}`));
   });
@@ -171,7 +171,7 @@ describeWithEnvironment('LinearMemoryInspectorController', () => {
     assert.deepEqual(instance.getHighlightInfo(bufferId), highlightInfo);
 
     instance.removeHighlight(bufferId, highlightInfo);
-    assert.deepEqual(instance.getHighlightInfo(bufferId), undefined);
+    assert.isUndefined(instance.getHighlightInfo(bufferId));
   });
 
   it('does not change the stored highlight when the provided highlightInfo does not match', () => {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.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.
 
-/* eslint-disable rulesdir/es_modules_import */
+/* eslint-disable rulesdir/es-modules-import */
 
 import {
   dispatchClickEvent,
@@ -398,13 +398,13 @@ describeWithLocale('LinearMemoryInspector', () => {
   it('returns undefined on parsing invalid address', () => {
     const address = '20a';
     const parsedAddress = LinearMemoryInspectorComponents.LinearMemoryInspectorUtils.parseAddress(address);
-    assert.strictEqual(parsedAddress, undefined);
+    assert.isUndefined(parsedAddress);
   });
 
   it('returns undefined on parsing negative address', () => {
     const address = '-20';
     const parsedAddress = LinearMemoryInspectorComponents.LinearMemoryInspectorUtils.parseAddress(address);
-    assert.strictEqual(parsedAddress, undefined);
+    assert.isUndefined(parsedAddress);
   });
 
   it('can hide the value inspector', async () => {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryViewer.test.ts

@@ -344,8 +344,8 @@ describe('LinearMemoryViewer', () => {
     const byteCells = getElementsWithinComponent(component, '.byte-cell.highlight-area', HTMLSpanElement);
     const textCells = getElementsWithinComponent(component, '.text-cell.highlight-area', HTMLSpanElement);
 
-    assert.strictEqual(byteCells.length, 0);
-    assert.strictEqual(textCells.length, 0);
+    assert.lengthOf(byteCells, 0);
+    assert.lengthOf(textCells, 0);
   });
 
   it('highlights correct number of bytes when highlight info set', async () => {

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.test.ts

@@ -229,7 +229,7 @@ describeWithLocale('ValueInterpreterDisplay', () => {
 
     const actualValues = Array.from(dataValues).map(x => x.innerText);
     const expectedValues = ['0x47AC8401', '0x420C0C2B47AC8401'];
-    assert.deepStrictEqual(actualValues, expectedValues);
+    assert.deepEqual(actualValues, expectedValues);
   });
 
   it('renders value in selected LinearMemoryInspector.ValueInterpreterDisplayUtils.ValueTypes', () => {
@@ -251,7 +251,7 @@ describeWithLocale('ValueInterpreterDisplay', () => {
 
     const actualValues = Array.from(dataValues).map(x => x.innerText);
     const expectedValues = ['33793', '-31743', '88328.01'];
-    assert.deepStrictEqual(actualValues, expectedValues);
+    assert.deepEqual(actualValues, expectedValues);
   });
 
   it('renders only unsigned values for Octal and Hexadecimal representation', () => {
@@ -288,7 +288,7 @@ describeWithLocale('ValueInterpreterDisplay', () => {
 
     const actualValues = Array.from(dataValues).map(x => x.innerText);
     const expectedValues = ['310', '0xC9C8', '3419064776', '-875902520'];
-    assert.deepStrictEqual(actualValues, expectedValues);
+    assert.deepEqual(actualValues, expectedValues);
   });
 
   it('triggers a value changed event on selecting a new mode', async () => {

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -5,7 +5,7 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-// eslint-disable-next-line rulesdir/es_modules_import
+// eslint-disable-next-line rulesdir/es-modules-import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';

package/front_end/panels/linear_memory_inspector/components/valueInterpreterSettings.css

@@ -14,8 +14,7 @@
   display: flex;
   flex-wrap: wrap;
   margin: 0 12px 12px;
-  column-gap: 45px;
-  row-gap: 15px;
+  gap: 15px 45px;
 }
 
 .value-types-selection {

package/front_end/panels/media/MainView.test.ts

@@ -8,7 +8,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.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 * as Media from './media.js';
 
@@ -39,7 +39,7 @@ describeWithMockConnection('MediaMainView', () => {
         event, ...[data] as unknown as Common.EventTarget.EventPayloadToRestParameters<Media.MediaModel.EventTypes, T>);
     await new Promise(resolve => setTimeout(resolve, 0));
     assert.strictEqual(expectedCall.called, inScope);
-    await Coordinator.RenderCoordinator.RenderCoordinator.instance().done();
+    await RenderCoordinator.done();
     mainView.detach();
   };
 

package/front_end/panels/media/PlayerMessagesView.ts

@@ -221,10 +221,9 @@ class MessageLevelSelector implements UI.SoftDropDown.Delegate<SelectableLevel>
 
   createElementForItem(item: SelectableLevel): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        element, {cssFile: [playerMessagesViewStyles], delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [playerMessagesViewStyles]});
     const container = shadowRoot.createChild('div', 'media-messages-level-dropdown-element');
-    const checkBox = container.createChild('div', 'media-messages-level-dropdown-checkbox') as HTMLElement;
+    const checkBox = container.createChild('div', 'media-messages-level-dropdown-checkbox');
     const text = container.createChild('span', 'media-messages-level-dropdown-text');
     UI.UIUtils.createTextChild(text, item.title);
     this.elementsForItems.set(item, checkBox);

package/front_end/panels/media/TickingFlameChart.ts

@@ -493,7 +493,7 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
     return false;
   }
 
-  prepareHighlightedEntryInfo(index: number): Element|null {
+  preparePopoverElement(index: number): Element|null {
     const element = document.createElement('div');
     (this.eventMap.get(index) as Event).decorate(element);
     return element;

package/front_end/panels/mobile_throttling/ThrottlingManager.test.ts

@@ -65,7 +65,7 @@ describeWithEnvironment('ThrottlingManager', () => {
     it('listens to changes in cpu throttling setting', () => {
       const cpuThrottlingPresets = MobileThrottling.ThrottlingPresets.ThrottlingPresets.cpuThrottlingPresets;
       const throttlingManager = MobileThrottling.ThrottlingManager.throttlingManager();
-      const selector = throttlingManager.createCPUThrottlingSelector();
+      const selector = throttlingManager.createCPUThrottlingSelector().control;
       assert.strictEqual(
           cpuThrottlingPresets[selector.selectedIndex()], SDK.CPUThrottlingManager.CPUThrottlingRates.NO_THROTTLING);
 

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

@@ -133,7 +133,7 @@ export class ThrottlingSettingsTab extends UI.Widget.VBox implements
 
     const settingsContent =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
-    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
+    settingsContent.classList.add('settings-card-container', 'throttling-conditions-settings');
 
     const addButton = new Buttons.Button.Button();
     addButton.classList.add('add-conditions-button');
@@ -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;
@@ -212,7 +212,7 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     return editor;
   }
 
-  update(): void {
+  override update(): void {
     const enabled = this.manager.blockingEnabled();
     this.list.element.classList.toggle('blocking-disabled', !enabled && Boolean(this.manager.blockedPatterns().length));
 

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')));
+  });
+});