chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/panels/elements/elementsTreeOutline.css

@@ -454,20 +454,26 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   line-height: 1.36;
   min-width: 200px;
   text-overflow: clip;
+  white-space: inherit;
+}
+
+:host(.elements-tree-nowrap) .tree-outline-disclosure li {
+  white-space: pre;
 }
 
 .tree-outline-disclosure li:not(.parent) {
   display: block;
 }
 
-.tree-outline-disclosure li:not(.parent)::before {
+.tree-outline-disclosure li:not(.parent)::before,
+.tree-outline-disclosure li.always-parent::before {
   display: none;
   content: none;
 }
 
 .tree-outline-disclosure li.parent {
   display: flex;
-  align-items: center;
+  align-items: normal;
 }
 
 .tree-outline-disclosure li.parent:not(.always-parent) {
@@ -485,18 +491,27 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
   text-shadow: none;
   margin: 0 var(--sys-size-2) 0 -3px;
   background-color: var(--icon-default);
+  flex-shrink: 0;
 }
 
-.tree-outline-disclosure li.parent.expanded::before {
+.tree-outline-disclosure li.parent:not(.always-parent).expanded::before {
   mask-image: var(--image-file-arrow-drop-down);
 }
 
 .tree-outline-disclosure devtools-widget,
-.tree-outline-disclosure devtools-widget > div,
 .tree-outline-disclosure .tree-element-title {
   display: contents;
 }
 
+.tree-outline-disclosure devtools-widget > div {
+  display: inline;
+}
+
+.tree-outline-disclosure devtools-widget > div:has(.elements-tree-editor),
+.tree-outline-disclosure li:has(.elements-tree-editor) {
+  display: block;
+}
+
 .tree-outline-disclosure li .webkit-html-tag.close {
   margin-left: -12px;
 }
@@ -555,6 +570,7 @@ li.hovered:not(.always-parent) + ol.children:not(.shadow-root) {
 .tree-outline-disclosure li .selection {
   display: none;
   z-index: -1;
+  margin-left: 0;
 }
 
 .tree-outline-disclosure li.selected .selection {

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -165,7 +165,8 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, _output: object, target: DocumentFragment) => void = DEFAULT_VIEW) {
     super(element, {useShadowDom: 'pure'});
     this.view = view;
     this.#scale = 1;

package/front_end/panels/event_listeners/eventListenersView.css

@@ -53,7 +53,7 @@
   color: var(--sys-color-primary);
   background-color: var(--sys-color-cdt-base-container);
   border-radius: 7px;
-  border: 1px solid var(--sys-color-tonal-outline);
+  border: var(--sys-size-1) solid var(--sys-color-tonal-outline);
   margin-left: 5px;
   display: block;
   flex-shrink: 0;

package/front_end/panels/issues/AffectedElementsView.ts

@@ -38,6 +38,9 @@ export class AffectedElementsView extends AffectedResourcesView {
     rowElement.setAttribute('jslog', `${VisualLogging.tableRow('affected-element')}`);
     if (element.backendNodeId) {
       rowElement.setAttribute('data-backend-node-id', String(element.backendNodeId));
+      if (element.target) {
+        rowElement.setAttribute('data-target-id', element.target.id());
+      }
     }
     rowElement.appendChild(cellElement);
     this.affectedResources.appendChild(rowElement);

package/front_end/panels/issues/AffectedLazyLoadImagesView.ts

@@ -44,7 +44,7 @@ export class AffectedLazyLoadImagesView extends AffectedResourcesView {
   readonly #view: View;
 
   constructor(parent: IssueView, issue: IssuesManager.IssueAggregator.AggregatedIssue, jslogContext: string,
-              view = DEFAULT_VIEW) {
+              view: View = DEFAULT_VIEW) {
     super(parent, issue, jslogContext);
     this.#view = view;
   }

package/front_end/panels/issues/issues.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AffectedElementsView from './AffectedElementsView.js';
 import * as AffectedLazyLoadImagesView from './AffectedLazyLoadImagesView.js';
 import * as AffectedSelectivePermissionsInterventionView from './AffectedSelectivePermissionsInterventionView.js';
 import * as IssueRevealer from './IssueRevealer.js';
@@ -9,6 +10,7 @@ import * as IssuesPane from './IssuesPane.js';
 import * as IssueView from './IssueView.js';
 
 export {
+  AffectedElementsView,
   AffectedLazyLoadImagesView,
   AffectedSelectivePermissionsInterventionView,
   IssueRevealer,

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -222,6 +222,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: Docu
       html`
     <div class="layer-details-container"
          data-backend-node-id=${domNode ? domNode.backendNodeId() : nothing}
+         data-target-id=${domNode ? domNode.domModel().target().id() : nothing}
          jslog=${VisualLogging.section('layer-details')}>
       <table>
         <tbody>
@@ -383,13 +384,14 @@ export interface EventTypes {
   [Events.PAINT_PROFILER_REQUESTED]: Selection;
 }
 
-export const slowScrollRectNames = new Map([
-  [SDK.LayerTreeBase.Layer.ScrollRectType.NON_FAST_SCROLLABLE, i18nLazyString(UIStrings.nonFastScrollable)],
-  [SDK.LayerTreeBase.Layer.ScrollRectType.TOUCH_EVENT_HANDLER, i18nLazyString(UIStrings.touchEventHandler)],
-  [SDK.LayerTreeBase.Layer.ScrollRectType.WHEEL_EVENT_HANDLER, i18nLazyString(UIStrings.wheelEventHandler)],
-  [SDK.LayerTreeBase.Layer.ScrollRectType.REPAINTS_ON_SCROLL, i18nLazyString(UIStrings.repaintsOnScroll)],
-  [
-    SDK.LayerTreeBase.Layer.ScrollRectType.MAIN_THREAD_SCROLL_REASON,
-    i18nLazyString(UIStrings.mainThreadScrollingReason),
-  ],
-]);
+export const slowScrollRectNames: Map<SDK.LayerTreeBase.Layer.ScrollRectType, () => Common.UIString.LocalizedString> =
+    new Map([
+      [SDK.LayerTreeBase.Layer.ScrollRectType.NON_FAST_SCROLLABLE, i18nLazyString(UIStrings.nonFastScrollable)],
+      [SDK.LayerTreeBase.Layer.ScrollRectType.TOUCH_EVENT_HANDLER, i18nLazyString(UIStrings.touchEventHandler)],
+      [SDK.LayerTreeBase.Layer.ScrollRectType.WHEEL_EVENT_HANDLER, i18nLazyString(UIStrings.wheelEventHandler)],
+      [SDK.LayerTreeBase.Layer.ScrollRectType.REPAINTS_ON_SCROLL, i18nLazyString(UIStrings.repaintsOnScroll)],
+      [
+        SDK.LayerTreeBase.Layer.ScrollRectType.MAIN_THREAD_SCROLL_REASON,
+        i18nLazyString(UIStrings.mainThreadScrollingReason),
+      ],
+    ]);

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -81,6 +81,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       <li role="treeitem"
           data-layer-id=${layer.id()}
           data-backend-node-id=${domNode ? domNode.backendNodeId() : nothing}
+          data-target-id=${domNode ? domNode.domModel().target().id() : nothing}
           jslog=${VisualLogging.treeItem('layer-item')}
           class=${isHovered ? 'hovered' : ''}
           ?selected=${isSelected}

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -93,7 +93,9 @@ export interface ViewOutput {
   canvasElement?: HTMLCanvasElement;
 }
 
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   // clang-format off
   render(html`<style>
       ${layers3DViewStyles}
@@ -173,11 +175,11 @@ export class Layers3DView extends Layers3DViewBase
   private mouseDownX?: number;
   private mouseDownY?: number;
 
-  #view: typeof DEFAULT_VIEW;
+  #view: View;
   #error?: 'missing-root' | 'webgl-disabled';
   #canvasElement!: HTMLCanvasElement;
 
-  constructor(layerViewHost: LayerViewHost, view = DEFAULT_VIEW) {
+  constructor(layerViewHost: LayerViewHost, view: View = DEFAULT_VIEW) {
     super();
     this.#view = view;
 
@@ -966,7 +968,7 @@ export const enum ChromeTexture {
   RIGHT = 2,
 }
 
-export const FragmentShader = '' +
+export const FragmentShader: string = '' +
     'precision mediump float;\n' +
     'varying vec4 vColor;\n' +
     'varying vec2 vTextureCoord;\n' +
@@ -976,7 +978,7 @@ export const FragmentShader = '' +
     '    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)) * vColor;\n' +
     '}';
 
-export const VertexShader = '' +
+export const VertexShader: string = '' +
     'attribute vec3 aVertexPosition;\n' +
     'attribute vec2 aTextureCoord;\n' +
     'attribute vec4 aVertexColor;\n' +
@@ -990,12 +992,12 @@ export const VertexShader = '' +
     'vTextureCoord = aTextureCoord;\n' +
     '}';
 
-export const HoveredBorderColor = [0, 0, 255, 1];
-export const SelectedBorderColor = [0, 255, 0, 1];
-export const BorderColor = [0, 0, 0, 1];
-export const ViewportBorderColor = [160, 160, 160, 1];
-export const ScrollRectBackgroundColor = [178, 100, 100, 0.6];
-export const HoveredImageMaskColor = [200, 200, 255, 1];
+export const HoveredBorderColor: number[] = [0, 0, 255, 1];
+export const SelectedBorderColor: number[] = [0, 255, 0, 1];
+export const BorderColor: number[] = [0, 0, 0, 1];
+export const ViewportBorderColor: number[] = [160, 160, 160, 1];
+export const ScrollRectBackgroundColor: number[] = [178, 100, 100, 0.6];
+export const HoveredImageMaskColor: number[] = [200, 200, 255, 1];
 export const BorderWidth = 1;
 export const SelectedBorderWidth = 2;
 export const ViewportBorderWidth = 3;

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

@@ -89,7 +89,7 @@ export class LinearMemoryHighlightChipList extends UI.Widget.Widget {
   #deleteHighlight = (_: HighlightInfo): void => {};
   #view: View;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

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

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export const HEXADECIMAL_REGEXP = /^0x[a-fA-F0-9]+$/;
-export const DECIMAL_REGEXP = /^0$|[1-9]\d*$/;
+export const HEXADECIMAL_REGEXP: RegExp = /^0x[a-fA-F0-9]+$/;
+export const DECIMAL_REGEXP: RegExp = /^0$|[1-9]\d*$/;
 
 export function toHexString(data: {number: number, pad: number, prefix: boolean}): string {
   const hex = data.number.toString(16).padStart(data.pad, '0');

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

@@ -57,7 +57,7 @@ const DEFAULT_MODE_MAPPING = new Map([
   [ValueType.POINTER64, ValueTypeMode.HEXADECIMAL],
 ]);
 
-export const VALUE_TYPE_MODE_LIST = [
+export const VALUE_TYPE_MODE_LIST: ValueTypeMode[] = [
   ValueTypeMode.DECIMAL,
   ValueTypeMode.HEXADECIMAL,
   ValueTypeMode.OCTAL,

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

@@ -86,7 +86,7 @@ export class ValueInterpreterSettings extends UI.Widget.Widget {
   #valueTypes = new Set<ValueType>();
   #onToggle: (type: ValueType, checked: boolean) => void = () => {};
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
   }

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

@@ -5,26 +5,26 @@
  */
 
 .highlight-chip-list {
-  min-height: 20px;
+  min-height: var(--sys-size-9);
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
   align-items: center;
   background-color: var(--sys-color-cdt-base-container);
-  margin: 8px 0;
-  gap: 8px;
-  row-gap: 6px;
+  margin: var(--sys-size-5) 0;
+  gap: var(--sys-size-5);
+  row-gap: var(--sys-size-4);
 }
 
 .highlight-chip {
   background: var(--sys-color-cdt-base-container);
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   height: 18px;
-  border-radius: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
   flex: 0 0 auto;
   max-width: 250px;
   position: relative;
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
 }
 
 .highlight-chip:hover {
@@ -37,8 +37,8 @@
   position: absolute;
   right: 0;
   top: 0;
-  border-radius: 4px;
-  width: 24px;
+  border-radius: var(--sys-shape-corner-extra-small);
+  width: var(--sys-size-11);
   align-items: center;
   justify-content: center;
 }
@@ -98,8 +98,8 @@
 }
 
 .highlight-chip.focused {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  outline-offset: var(--sys-size-2);
 }
 
 .highlight-chip:hover > .delete-highlight-container {

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

@@ -22,7 +22,7 @@
     flex-direction: column;
     font-family: var(--monospace-font-family);
     font-size: var(--monospace-font-size);
-    padding: 9px 12px 9px 7px;
+    padding: 9px var(--sys-size-6) 9px 7px;
   }
 
   devtools-linear-memory-inspector-viewer {
@@ -30,7 +30,7 @@
   }
 
   .navigator-widget ~ devtools-linear-memory-inspector-viewer {
-    margin-top: 12px;
+    margin-top: var(--sys-size-6);
   }
 
   .value-interpreter {

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

@@ -5,7 +5,7 @@
  */
 
 .navigator {
-  min-height: 24px;
+  min-height: var(--sys-size-11);
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;

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

@@ -11,7 +11,7 @@
   }
 
   .value-interpreter {
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     background-color: var(--sys-color-cdt-base-container);
     overflow: hidden;
     width: 400px;
@@ -29,8 +29,8 @@
 
   .settings-toolbar-button {
     padding: 0;
-    width: 20px;
-    height: 20px;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
     border: none;
     outline: none;
     background-color: transparent;
@@ -42,8 +42,8 @@
 
   .divider {
     display: block;
-    height: 1px;
-    margin-bottom: 12px;
+    height: var(--sys-size-1);
+    margin-bottom: var(--sys-size-6);
     background-color: var(--sys-color-divider);
   }
 }

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

@@ -7,7 +7,7 @@
 :host {
   flex: auto;
   display: flex;
-  min-height: 20px;
+  min-height: var(--sys-size-9);
 }
 
 .view {
@@ -20,13 +20,13 @@
 
 .row {
   display: flex;
-  height: 20px;
+  height: var(--sys-size-9);
   align-items: center;
 }
 
 .cell {
   text-align: center;
-  border: 1px solid transparent;
+  border: var(--sys-size-1) solid transparent;
   border-radius: 2px;
 
   &.focused-area {
@@ -51,7 +51,7 @@
 }
 
 .text-cell {
-  min-width: 14px;
+  min-width: var(--sys-size-7);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -65,10 +65,10 @@
 }
 
 .divider {
-  width: 1px;
+  width: var(--sys-size-1);
   height: inherit;
   background-color: var(--sys-color-divider);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .highlight-area {

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

@@ -13,10 +13,10 @@
   width: 100%;
   display: grid;
   grid-template-columns: auto auto 1fr;
-  gap: 4px 24px;
-  min-height: 24px;
+  gap: var(--sys-size-3) var(--sys-size-11);
+  min-height: var(--sys-size-11);
   overflow: hidden;
-  padding: 2px 12px;
+  padding: var(--sys-size-2) var(--sys-size-6);
   align-items: baseline;
   justify-content: start;
 }
@@ -27,7 +27,7 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  min-height: 24px;
+  min-height: var(--sys-size-11);
 }
 
 .value-type-value-with-link {
@@ -40,10 +40,10 @@
 }
 
 .signed-divider {
-  width: 1px;
+  width: var(--sys-size-1);
   height: 15px;
   background-color: var(--sys-color-divider);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 .selectable-text {

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

@@ -8,13 +8,13 @@
   :scope {
     flex: auto;
     display: flex;
-    min-height: 20px;
+    min-height: var(--sys-size-9);
   }
 
   .settings {
     display: flex;
     flex-wrap: wrap;
-    margin: 0 12px 12px;
+    margin: 0 var(--sys-size-6) var(--sys-size-6);
     gap: 15px 45px;
   }
 

package/front_end/panels/media/PlayerPropertiesView.ts

@@ -517,7 +517,7 @@ export class PlayerPropertiesView extends UI.Widget.VBox {
     [PlayerPropertyKeys.TEXT_TRACKS]: new TrackProperty(PlayerPropertyKeys.TEXT_TRACKS),
   };
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }

package/front_end/panels/media/TickingFlameChart.ts

@@ -30,8 +30,9 @@ const DefaultStyle: () => PerfUI.FlameChart.GroupStyle = () => ({
   useDecoratorsForOverview: false,
 });
 
-export const HotColorScheme = ['#ffba08', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208'];
-export const ColdColorScheme = ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf'];
+export const HotColorScheme: string[] = ['#ffba08', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208'];
+export const ColdColorScheme: string[] =
+    ['#7400b8', '#6930c3', '#5e60ce', '#5390d9', '#4ea8de', '#48bfe3', '#56cfe1', '#64dfdf'];
 
 function calculateFontColor(backgroundColor: string): string {
   const parsedColor = Common.Color.parse(backgroundColor)?.as(Common.Color.Format.HSL);

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -207,7 +207,8 @@ export class NetworkThrottlingSelect extends NetworkThrottlingSelectBase {
     currentConditions?: SDK.NetworkManager.Conditions,
     includeBlocking?: true,
   } = {},
-              settings = Common.Settings.Settings.instance(), view = DEFAULT_VIEW) {
+              settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
+              view: ViewFunction = DEFAULT_VIEW) {
     super(element);
     this.#settings = settings;
     SDK.NetworkManager.customUserNetworkConditionsSetting(settings).addChangeListener(this.requestUpdate, this);

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -405,7 +405,7 @@ export class SaveDataOverrideSelect extends UI.Widget.Widget<HTMLSelectElement>
   readonly #setting: Common.Settings.Setting<SDK.EmulationModel.DataSaverOverride>;
   readonly #view: SaveDataOverrideViewFunction;
 
-  constructor(element: HTMLElement, view = DEFAULT_SAVE_DATA_VIEW) {
+  constructor(element: HTMLElement, view: SaveDataOverrideViewFunction = DEFAULT_SAVE_DATA_VIEW) {
     super(element);
     this.#view = view;
     this.#setting = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.dataSaverSettingDescriptor);

package/front_end/panels/mobile_throttling/ThrottlingPresets.ts

@@ -145,7 +145,8 @@ export class ThrottlingPresets {
     SDK.NetworkManager.OfflineConditions,
   ];
 
-  static cpuThrottlingPresets = PanelsCommon.CPUThrottlingOption.cpuThrottlingPresets;
+  static cpuThrottlingPresets: PanelsCommon.CPUThrottlingOption.CPUThrottlingOption[] =
+      PanelsCommon.CPUThrottlingOption.cpuThrottlingPresets;
 }
 
 // @ts-expect-error exported for Tests.js

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -986,15 +986,17 @@ export class NetworkRequestNode extends NetworkNode {
     return aValue.localeCompare(bValue) || aRequest.identityCompare(bRequest);
   }
 
-  static readonly ResponseHeaderStringComparator = NetworkRequestNode.HeaderStringComparator.bind(
-      null,
-      (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.responseHeaderValue(name),
-  );
-
-  static readonly RequestHeaderStringComparator = NetworkRequestNode.HeaderStringComparator.bind(
-      null,
-      (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.requestHeaderValue(name),
-  );
+  static readonly ResponseHeaderStringComparator:
+      (propertyName: string, a: NetworkNode, b: NetworkNode) => number = NetworkRequestNode.HeaderStringComparator.bind(
+          null,
+          (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.responseHeaderValue(name),
+      );
+
+  static readonly RequestHeaderStringComparator:
+      (propertyName: string, a: NetworkNode, b: NetworkNode) => number = NetworkRequestNode.HeaderStringComparator.bind(
+          null,
+          (req: SDK.NetworkRequest.NetworkRequest, name: string) => req.requestHeaderValue(name),
+      );
 
   static ResponseHeaderNumberComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(allada) Handle this properly for group nodes.

package/front_end/panels/network/NetworkLogView.ts

@@ -1691,7 +1691,10 @@ export class NetworkLogView extends NetworkLogViewBase implements
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Scheme, String(request.scheme));
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.StatusCode, String(request.statusCode));
     this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.ResourceType, request.resourceType().name());
-    this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Url, request.securityOrigin());
+    const requestURLSecurityOrigin = request.requestURLSecurityOrigin();
+    if (!requestURLSecurityOrigin.isOpaque()) {
+      this.suggestionBuilder.addItem(NetworkForward.UIFilter.FilterType.Url, requestURLSecurityOrigin.siteId());
+    }
 
     const priority = request.priority();
     if (priority) {

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -831,8 +831,11 @@ export class NetworkLogViewColumns {
     }
 
     const isRequestHeader = headerId.startsWith('request-header-');
-    const sortingFunction = isRequestHeader ? NetworkRequestNode.RequestHeaderStringComparator.bind(null, headerId) :
-                                              NetworkRequestNode.ResponseHeaderStringComparator.bind(null, headerId);
+    // The comparators look up the raw header value by its actual name, so strip
+    // the 'request-header-'/'response-header-' prefix from the column id first.
+    const headerName = headerId.replace(/^(?:request|response)-header-/, '');
+    const sortingFunction = isRequestHeader ? NetworkRequestNode.RequestHeaderStringComparator.bind(null, headerName) :
+                                              NetworkRequestNode.ResponseHeaderStringComparator.bind(null, headerName);
 
     const columnConfigBase = Object.assign({}, DEFAULT_COLUMN_CONFIG, {
       id: headerId,

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -383,7 +383,7 @@ export class AffectedCountWidget extends UI.Widget.Widget {
   #condition?: SDK.NetworkManager.RequestCondition;
   #lookUpRequestCount?: (condition: SDK.NetworkManager.RequestCondition) => number;
 
-  constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: AffectedCountView = AFFECTED_COUNT_DEFAULT_VIEW) {
     super(target);
     this.#view = view;
   }
@@ -459,7 +459,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox {
   #viewOutput: ViewOutput = {itemRefs: new Map()};
   #editingCondition?: SDK.NetworkManager.RequestCondition;
 
-  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target, {
       jslog: `${VisualLogging.panel('network.blocked-urls').track({resize: true})}`,
       useShadowDom: true,