chrome-devtools-frontend 1.0.1681498 → 1.0.1682249

package/front_end/panels/media/playerPropertiesView.css

@@ -20,7 +20,7 @@
   }
 }
 
-.media-property-renderer:nth-child(even):not(:hover) {
+.media-property-renderer:nth-child(even of :not(.media-property-renderer-hidden)):not(:hover) {
   background: var(--sys-color-surface1);
 }
 

package/front_end/panels/network/NetworkPanel.ts

@@ -356,7 +356,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     this.preserveLogSetting =
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.preserveNetworkLogSettingDescriptor);
-    this.recordLogSetting = Common.Settings.Settings.instance().moduleSetting('network-log.record-log');
+    this.recordLogSetting =
+        Common.Settings.Settings.instance().resolve(Logs.NetworkLog.recordNetworkLogSettingDescriptor);
     this.recordLogSetting.addChangeListener(({data}) => this.toggleRecord(data));
 
     this.throttlingSelect = this.createThrottlingConditionsSelect();

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

@@ -7,7 +7,6 @@ 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 * as Platform from '../../../core/platform/platform.js';
-import type {NameValue} from '../../../core/sdk/NetworkRequest.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../core/text_utils/text_utils.js';
 import * as Protocol from '../../../generated/protocol.js';
@@ -91,7 +90,7 @@ class ResponseHeaderSectionBase extends HTMLElement {
   protected readonly shadow = this.attachShadow({mode: 'open'});
   protected headerDetails: HeaderDetailsDescriptor[] = [];
 
-  protected setHeaders(headers: NameValue[]): void {
+  protected setHeaders(headers: SDK.NetworkRequest.NameValue[]): void {
     headers.sort(function(a, b) {
       return Platform.StringUtilities.compare(a.name.toLowerCase(), b.name.toLowerCase());
     });

package/front_end/panels/network/network-meta.ts

@@ -7,6 +7,7 @@ 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';
+import * as Logs from '../../models/logs/logs.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -545,6 +546,11 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.preserveNetworkLogSett
   ],
 });
 
+SettingsUI.SettingUIRegistration.register(Logs.NetworkLog.recordNetworkLogSettingDescriptor, {
+  category: Common.Settings.SettingCategory.NETWORK,
+  title: i18nLazyString(UIStrings.recordNetworkLog),
+});
+
 UI.ViewManager.registerLocationResolver({
   name: UI.ViewManager.ViewLocationValues.NETWORK_SIDEBAR,
   category: UI.ViewManager.ViewLocationCategory.NETWORK,

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -86,8 +86,9 @@ const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
       chartsInfo: input.chartsInfo,
       metrics: input.metrics,
     })} class=${classMap({suspended: input.suspended})}></devtools-widget>
-    <div class="perfmon-chart-container ${classMap({suspended: input.suspended})}">
+    <div class="perfmon-chart-container ${classMap({suspended: input.suspended})}" jslog=${VisualLogging.section('perfmon-chart')}>
       <canvas tabindex="-1" aria-label=${i18nString(UIStrings.graphsDisplayingARealtimeViewOf)}
+          jslog=${VisualLogging.canvas('perfmon-canvas')}
           .width=${Math.round(input.width * window.devicePixelRatio)} .height=${input.height}
           style="height:${input.height / window.devicePixelRatio}px" ${ref(e => {
             if (e) {

package/front_end/panels/recorder/RecordingView.ts

@@ -26,7 +26,6 @@ import type * as Converters from './converters/converters.js';
 import type * as Extensions from './extensions/extensions.js';
 import {ExtensionView} from './ExtensionView.js';
 import * as Models from './models/models.js';
-import {PlayRecordingSpeed} from './models/RecordingPlayer.js';
 import * as Actions from './recorder-actions/recorder-actions.js';
 import recordingViewStyles from './recordingView.css.js';
 import {ReplaySection} from './ReplaySection.js';
@@ -174,7 +173,7 @@ export const enum TargetPanel {
 
 export interface PlayRecordingEvent {
   targetPanel: TargetPanel;
-  speed: PlayRecordingSpeed;
+  speed: Models.RecordingPlayer.PlayRecordingSpeed;
   extension?: Extensions.ExtensionManager.Extension;
 }
 
@@ -769,8 +768,13 @@ interface ViewInput {
   getStepState: (step: Models.Schema.Step) => State;
   onAbortReplay: () => void;
   onMeasurePerformanceClick: (event: Event) => void;
-  onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
-  onCodeFormatChange: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onTogglePlaying: (
+      speed: Models.RecordingPlayer.PlayRecordingSpeed,
+      extension?: Extensions.ExtensionManager.Extension,
+      ) => void;
+  onCodeFormatChange: (
+      event: Menus.SelectMenu.SelectMenuItemSelectedEvent,
+      ) => void;
   onCopyStep: (step: Models.Schema.Step) => void;
   onEditTitleButtonClick: (event: Event) => void;
   onNetworkConditionsChange: (event: Event) => void;
@@ -781,8 +785,14 @@ interface ViewInput {
   onTimeoutInput: (event: Event) => void;
   onTitleBlur: (event: Event) => void;
   onTitleInputKeyDown: (event: KeyboardEvent) => void;
-  onStepChanged?: (currentStep: Models.Schema.Step, newStep: Models.Schema.Step) => void;
-  onAddStep?: (stepOrSection: Models.Schema.Step|Models.Section.Section, position: AddStepPosition) => void;
+  onStepChanged?: (
+      currentStep: Models.Schema.Step,
+      newStep: Models.Schema.Step,
+      ) => void;
+  onAddStep?: (
+      stepOrSection: Models.Schema.Step|Models.Section.Section,
+      position: AddStepPosition,
+      ) => void;
   onRemoveStep?: (step: Models.Schema.Step) => void;
   onAddBreakpoint?: (index: number) => void;
   onRemoveBreakpoint?: (index: number) => void;
@@ -935,72 +945,78 @@ export class RecordingView extends UI.Widget.Widget {
         ].find(converter => converter.getId() === this.#converterId) ??
         this.builtInConverters[0];
 
-    this.#view({
-      breakpointIndexes: this.breakpointIndexes,
-      builtInConverters: this.builtInConverters,
-      converterId: this.#converterId,
-      converterName: converter?.getFormatName(),
-      currentError: this.currentError ?? null,
-      currentStep: this.currentStep ?? null,
-      editorState: this.#editorState ?? null,
-      extensionConverters: this.extensionConverters,
-      extensionDescriptor: this.extensionDescriptor,
-      isRecording: this.isRecording,
-      isTitleInvalid: this.#isTitleInvalid,
-      lastReplayResult: this.lastReplayResult ?? null,
-      recorderSettings: this.#recorderSettings ?? null,
-      recording: this.recording,
-      recordingTogglingInProgress: this.recordingTogglingInProgress,
-      replayAllowed: this.replayAllowed,
-      replayExtensions: this.replayExtensions ?? [],
-      replaySettingsExpanded: this.#replaySettingsExpanded,
-      replayState: this.replayState,
-      sections: this.sections,
-      selectedStep: this.#selectedStep ?? null,
-      settings: this.settings ?? null,
-      showCodeView: this.#showCodeView,
-
-      onAddAssertion: () => {
-        this.onAddAssertion?.();
-      },
-      onRecordingFinished: () => {
-        this.onRecordingFinished?.();
-      },
-      getSectionState: this.#getSectionState.bind(this),
-      getStepState: this.#getStepState.bind(this),
-      onAbortReplay: () => {
-        this.onAbortReplay?.();
-      },
-      onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
-      onTogglePlaying: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => {
-        this.onPlayRecording?.({
-          targetPanel: TargetPanel.DEFAULT,
-          speed,
-          extension,
-        });
-      },
-      onStepChanged: (currentStep, newStep) => this.onStepChanged?.(currentStep, newStep),
-      onAddStep: (stepOrSection, position) => this.onAddStep?.(stepOrSection, position),
-      onRemoveStep: step => this.onRemoveStep?.(step),
-      onAddBreakpoint: index => this.onAddBreakpoint?.(index),
-      onRemoveBreakpoint: index => this.onRemoveBreakpoint?.(index),
-      onAttributeRequested: send => this.onAttributeRequested?.(send),
-      onCodeFormatChange: this.#onCodeFormatChange.bind(this),
-      onCopyStep: this.#onCopyStepEvent.bind(this),
-      onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
-      onNetworkConditionsChange: this.#onNetworkConditionsChange.bind(this),
-      onReplaySettingsKeydown: this.#onReplaySettingsKeydown.bind(this),
-      onSelectMenuLabelClick: this.#onSelectMenuLabelClick.bind(this),
-      onStepClick: this.#onStepClick.bind(this),
-      onStepHover: this.#onStepHover.bind(this),
-      onTimeoutInput: this.#onTimeoutInput.bind(this),
-      onTitleBlur: this.#onTitleBlur.bind(this),
-      onTitleInputKeyDown: this.#onTitleInputKeyDown.bind(this),
-      onToggleReplaySettings: this.#onToggleReplaySettings.bind(this),
-      onWrapperClick: this.#onWrapperClick.bind(this),
-      showCodeToggle: this.showCodeToggle.bind(this),
-    },
-               this.#viewOutput, this.contentElement);
+    this.#view(
+        {
+          breakpointIndexes: this.breakpointIndexes,
+          builtInConverters: this.builtInConverters,
+          converterId: this.#converterId,
+          converterName: converter?.getFormatName(),
+          currentError: this.currentError ?? null,
+          currentStep: this.currentStep ?? null,
+          editorState: this.#editorState ?? null,
+          extensionConverters: this.extensionConverters,
+          extensionDescriptor: this.extensionDescriptor,
+          isRecording: this.isRecording,
+          isTitleInvalid: this.#isTitleInvalid,
+          lastReplayResult: this.lastReplayResult ?? null,
+          recorderSettings: this.#recorderSettings ?? null,
+          recording: this.recording,
+          recordingTogglingInProgress: this.recordingTogglingInProgress,
+          replayAllowed: this.replayAllowed,
+          replayExtensions: this.replayExtensions ?? [],
+          replaySettingsExpanded: this.#replaySettingsExpanded,
+          replayState: this.replayState,
+          sections: this.sections,
+          selectedStep: this.#selectedStep ?? null,
+          settings: this.settings ?? null,
+          showCodeView: this.#showCodeView,
+
+          onAddAssertion: () => {
+            this.onAddAssertion?.();
+          },
+          onRecordingFinished: () => {
+            this.onRecordingFinished?.();
+          },
+          getSectionState: this.#getSectionState.bind(this),
+          getStepState: this.#getStepState.bind(this),
+          onAbortReplay: () => {
+            this.onAbortReplay?.();
+          },
+          onMeasurePerformanceClick: this.#handleMeasurePerformanceClickEvent.bind(this),
+          onTogglePlaying: (
+              speed: Models.RecordingPlayer.PlayRecordingSpeed,
+              extension?: Extensions.ExtensionManager.Extension,
+              ) => {
+            this.onPlayRecording?.({
+              targetPanel: TargetPanel.DEFAULT,
+              speed,
+              extension,
+            });
+          },
+          onStepChanged: (currentStep, newStep) => this.onStepChanged?.(currentStep, newStep),
+          onAddStep: (stepOrSection, position) => this.onAddStep?.(stepOrSection, position),
+          onRemoveStep: step => this.onRemoveStep?.(step),
+          onAddBreakpoint: index => this.onAddBreakpoint?.(index),
+          onRemoveBreakpoint: index => this.onRemoveBreakpoint?.(index),
+          onAttributeRequested: send => this.onAttributeRequested?.(send),
+          onCodeFormatChange: this.#onCodeFormatChange.bind(this),
+          onCopyStep: this.#onCopyStepEvent.bind(this),
+          onEditTitleButtonClick: this.#onEditTitleButtonClick.bind(this),
+          onNetworkConditionsChange: this.#onNetworkConditionsChange.bind(this),
+          onReplaySettingsKeydown: this.#onReplaySettingsKeydown.bind(this),
+          onSelectMenuLabelClick: this.#onSelectMenuLabelClick.bind(this),
+          onStepClick: this.#onStepClick.bind(this),
+          onStepHover: this.#onStepHover.bind(this),
+          onTimeoutInput: this.#onTimeoutInput.bind(this),
+          onTitleBlur: this.#onTitleBlur.bind(this),
+          onTitleInputKeyDown: this.#onTitleInputKeyDown.bind(this),
+          onToggleReplaySettings: this.#onToggleReplaySettings.bind(this),
+          onWrapperClick: this.#onWrapperClick.bind(this),
+          showCodeToggle: this.showCodeToggle.bind(this),
+        },
+        this.#viewOutput,
+        this.contentElement,
+    );
   }
 
   override wasShown(): void {
@@ -1217,7 +1233,7 @@ export class RecordingView extends UI.Widget.Widget {
 
     this.onPlayRecording?.({
       targetPanel: TargetPanel.PERFORMANCE_PANEL,
-      speed: PlayRecordingSpeed.NORMAL,
+      speed: Models.RecordingPlayer.PlayRecordingSpeed.NORMAL,
     });
   }
 

package/front_end/panels/recorder/ReplaySection.ts

@@ -11,7 +11,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type * as Extensions from './extensions/extensions.js';
 import * as Models from './models/models.js';
-import {PlayRecordingSpeed} from './models/RecordingPlayer.js';
 import * as Actions from './recorder-actions/recorder-actions.js';
 import replaySectionStyles from './replaySection.css.js';
 
@@ -72,9 +71,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const REPLAY_EXTENSION_PREFIX = 'extension';
 
-function isPlayRecordingSpeed(string: string): string is PlayRecordingSpeed {
-  return string === PlayRecordingSpeed.NORMAL || string === PlayRecordingSpeed.SLOW ||
-      string === PlayRecordingSpeed.VERY_SLOW || string === PlayRecordingSpeed.EXTREMELY_SLOW;
+function isPlayRecordingSpeed(
+    string: string,
+    ): string is Models.RecordingPlayer.PlayRecordingSpeed {
+  return (string === Models.RecordingPlayer.PlayRecordingSpeed.NORMAL ||
+          string === Models.RecordingPlayer.PlayRecordingSpeed.SLOW ||
+          string === Models.RecordingPlayer.PlayRecordingSpeed.VERY_SLOW ||
+          string === Models.RecordingPlayer.PlayRecordingSpeed.EXTREMELY_SLOW);
 }
 
 interface Item {
@@ -190,7 +193,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
  * select menu + a button.
  */
 export class ReplaySection extends UI.Widget.Widget {
-  onStartReplay?: (speed: PlayRecordingSpeed, extension?: Extensions.ExtensionManager.Extension) => void;
+  onStartReplay?: (
+      speed: Models.RecordingPlayer.PlayRecordingSpeed,
+      extension?: Extensions.ExtensionManager.Extension,
+      ) => void;
 
   #disabled = false;
   #settings?: Models.RecorderSettings.RecorderSettings;
@@ -209,7 +215,9 @@ export class ReplaySection extends UI.Widget.Widget {
     this.performUpdate();
   }
 
-  set replayExtensions(replayExtensions: Extensions.ExtensionManager.Extension[]) {
+  set replayExtensions(
+      replayExtensions: Extensions.ExtensionManager.Extension[],
+  ) {
     this.#replayExtensions = replayExtensions;
     this.#groups = this.#computeGroups();
     this.performUpdate();
@@ -236,8 +244,10 @@ export class ReplaySection extends UI.Widget.Widget {
           disabled: this.#disabled,
           groups: this.#groups,
           selectedItem,
-          actionTitle:
-              Models.Tooltip.getTooltipForActions(selectedItem.label(), Actions.RecorderActions.REPLAY_RECORDING),
+          actionTitle: Models.Tooltip.getTooltipForActions(
+              selectedItem.label(),
+              Actions.RecorderActions.REPLAY_RECORDING,
+              ),
           onButtonClick: () => this.#onStartReplay(),
           onItemSelected: (item: string) => this.#onItemSelected(item),
         },
@@ -247,35 +257,37 @@ export class ReplaySection extends UI.Widget.Widget {
   }
 
   #computeGroups(): Group[] {
-    const groups: Group[] = [{
-      name: i18nString(UIStrings.speedGroup),
-      items: [
-        {
-          value: PlayRecordingSpeed.NORMAL,
-          buttonIconName: 'play',
-          buttonLabel: () => i18nString(UIStrings.ReplayNormalButtonLabel),
-          label: () => i18nString(UIStrings.ReplayNormalItemLabel),
-        },
-        {
-          value: PlayRecordingSpeed.SLOW,
-          buttonIconName: 'play',
-          buttonLabel: () => i18nString(UIStrings.ReplaySlowButtonLabel),
-          label: () => i18nString(UIStrings.ReplaySlowItemLabel),
-        },
-        {
-          value: PlayRecordingSpeed.VERY_SLOW,
-          buttonIconName: 'play',
-          buttonLabel: () => i18nString(UIStrings.ReplayVerySlowButtonLabel),
-          label: () => i18nString(UIStrings.ReplayVerySlowItemLabel),
-        },
-        {
-          value: PlayRecordingSpeed.EXTREMELY_SLOW,
-          buttonIconName: 'play',
-          buttonLabel: () => i18nString(UIStrings.ReplayExtremelySlowButtonLabel),
-          label: () => i18nString(UIStrings.ReplayExtremelySlowItemLabel),
-        },
-      ],
-    }];
+    const groups: Group[] = [
+      {
+        name: i18nString(UIStrings.speedGroup),
+        items: [
+          {
+            value: Models.RecordingPlayer.PlayRecordingSpeed.NORMAL,
+            buttonIconName: 'play',
+            buttonLabel: () => i18nString(UIStrings.ReplayNormalButtonLabel),
+            label: () => i18nString(UIStrings.ReplayNormalItemLabel),
+          },
+          {
+            value: Models.RecordingPlayer.PlayRecordingSpeed.SLOW,
+            buttonIconName: 'play',
+            buttonLabel: () => i18nString(UIStrings.ReplaySlowButtonLabel),
+            label: () => i18nString(UIStrings.ReplaySlowItemLabel),
+          },
+          {
+            value: Models.RecordingPlayer.PlayRecordingSpeed.VERY_SLOW,
+            buttonIconName: 'play',
+            buttonLabel: () => i18nString(UIStrings.ReplayVerySlowButtonLabel),
+            label: () => i18nString(UIStrings.ReplayVerySlowItemLabel),
+          },
+          {
+            value: Models.RecordingPlayer.PlayRecordingSpeed.EXTREMELY_SLOW,
+            buttonIconName: 'play',
+            buttonLabel: () => i18nString(UIStrings.ReplayExtremelySlowButtonLabel),
+            label: () => i18nString(UIStrings.ReplayExtremelySlowItemLabel),
+          },
+        ],
+      },
+    ];
     if (this.#replayExtensions.length) {
       groups.push({
         name: i18nString(UIStrings.extensionGroup),
@@ -308,20 +320,27 @@ export class ReplaySection extends UI.Widget.Widget {
     const value = this.#settings?.replayExtension || this.#settings?.speed || '';
     if (value.startsWith(REPLAY_EXTENSION_PREFIX)) {
       const origin = value.substring(REPLAY_EXTENSION_PREFIX.length);
-      const extension = this.#replayExtensions.find(ext => ext.getOrigin() === origin);
+      const extension = this.#replayExtensions.find(
+          ext => ext.getOrigin() === origin,
+      );
       if (extension) {
         if (this.#settings) {
           this.#settings.replayExtension = REPLAY_EXTENSION_PREFIX + extension.getOrigin();
         }
         if (this.onStartReplay) {
-          this.onStartReplay(PlayRecordingSpeed.NORMAL, extension);
+          this.onStartReplay(
+              Models.RecordingPlayer.PlayRecordingSpeed.NORMAL,
+              extension,
+          );
         }
         this.performUpdate();
         return;
       }
     }
     if (this.onStartReplay) {
-      this.onStartReplay(this.#settings ? this.#settings.speed : PlayRecordingSpeed.NORMAL);
+      this.onStartReplay(
+          this.#settings ? this.#settings.speed : Models.RecordingPlayer.PlayRecordingSpeed.NORMAL,
+      );
     }
     this.performUpdate();
   }

package/front_end/panels/recorder/injected/injected.ts

@@ -5,8 +5,12 @@
 import * as RecordingClient from './RecordingClient.js';
 import * as SelectorPicker from './SelectorPicker.js';
 import type {AccessibilityBindings} from './selectors/ARIASelector.js';
+import {findMinMax} from './selectors/CSSSelector.js';
 import type * as Step from './Step.js';
 
+// Exported for testing
+export {findMinMax};
+
 declare global {
   interface Window {
     stopShortcut(payload: string): void;

package/front_end/panels/security/SecurityPanel.ts

@@ -18,7 +18,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
-import {ShowOriginEvent} from './OriginTreeElement.js';
 import originViewStyles from './originView.css.js';
 import {
   Events,
@@ -580,13 +579,13 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
 
     this.mainView = new SecurityMainView();
     this.mainView.panel = this;
-    this.element.addEventListener(ShowOriginEvent.eventName, (event: ShowOriginEvent) => {
-      if (event.origin) {
-        this.showOrigin(event.origin);
+    this.sidebar.onShowOrigin = (origin: Platform.DevToolsPath.UrlString|null) => {
+      if (origin) {
+        this.showOrigin(origin);
       } else {
         this.setVisibleView(this.mainView);
       }
-    });
+    };
 
     this.lastResponseReceivedForLoaderId = new Map();
 
@@ -641,7 +640,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   }
 
   private updateVisibleSecurityState(visibleSecurityState: PageVisibleSecurityState): void {
-    this.sidebar.securityOverviewElement.setSecurityState(visibleSecurityState.securityState);
+    this.sidebar.updateOverviewSecurityState(visibleSecurityState.securityState);
     this.mainView.updateVisibleSecurityState(visibleSecurityState);
   }