chrome-devtools-frontend 1.0.1030946 → 1.0.1032245

package/front_end/core/sdk/Target.ts

@@ -73,6 +73,9 @@ export class Target extends ProtocolClient.InspectorBackend.TargetBase {
       case Type.Browser:
         this.#capabilitiesMask = Capability.Target | Capability.IO;
         break;
+      case Type.Tab:
+        this.#capabilitiesMask = Capability.Target;
+        break;
     }
     this.#typeInternal = type;
     this.#parentTargetInternal = parentTarget;
@@ -227,6 +230,7 @@ export enum Type {
   Node = 'node',
   Browser = 'browser',
   AuctionWorklet = 'auction-worklet',
+  Tab = 'tab',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -52,7 +52,10 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
   async run(): Promise<void> {
     let firstCall = true;
     await SDK.Connections.initMainConnection(async () => {
-      const type = Root.Runtime.Runtime.queryParam('v8only') ? SDK.Target.Type.Node : SDK.Target.Type.Frame;
+      const type = Root.Runtime.Runtime.queryParam('v8only') ?
+          SDK.Target.Type.Node :
+          (Root.Runtime.Runtime.queryParam('targetType') === 'tab' ? SDK.Target.Type.Tab : SDK.Target.Type.Frame);
+      // TODO(crbug.com/1348385): support waiting for debugger with tab target.
       const waitForDebuggerInPage =
           type === SDK.Target.Type.Frame && Root.Runtime.Runtime.queryParam('panel') === 'sources';
       const target = SDK.TargetManager.TargetManager.instance().createTarget(

package/front_end/entrypoints/main/MainImpl.ts

@@ -322,6 +322,9 @@ export class MainImpl {
         'evaluateExpressionsWithSourceMaps', 'Console: Resolve variable names in expressions using source maps',
         undefined);
     Root.Runtime.experiments.register('instrumentationBreakpoints', 'Enable instrumentation breakpoints', true);
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.BREAKPOINT_VIEW, 'Enable re-designed Breakpoint Sidebar Pane in the Sources Panel',
+        true);
 
     // Dual-screen
     Root.Runtime.experiments.register(

package/front_end/generated/InspectorBackendCommands.js

@@ -52,8 +52,8 @@ inspectorBackend.registerCommand("Animation.setPlaybackRate", [{"name": "playbac
 inspectorBackend.registerCommand("Animation.setTiming", [{"name": "animationId", "type": "string", "optional": false}, {"name": "duration", "type": "number", "optional": false}, {"name": "delay", "type": "number", "optional": false}], []);
 
 // Audits.
-inspectorBackend.registerEnum("Audits.CookieExclusionReason", {ExcludeSameSiteUnspecifiedTreatedAsLax: "ExcludeSameSiteUnspecifiedTreatedAsLax", ExcludeSameSiteNoneInsecure: "ExcludeSameSiteNoneInsecure", ExcludeSameSiteLax: "ExcludeSameSiteLax", ExcludeSameSiteStrict: "ExcludeSameSiteStrict", ExcludeInvalidSameParty: "ExcludeInvalidSameParty", ExcludeSamePartyCrossPartyContext: "ExcludeSamePartyCrossPartyContext"});
-inspectorBackend.registerEnum("Audits.CookieWarningReason", {WarnSameSiteUnspecifiedCrossSiteContext: "WarnSameSiteUnspecifiedCrossSiteContext", WarnSameSiteNoneInsecure: "WarnSameSiteNoneInsecure", WarnSameSiteUnspecifiedLaxAllowUnsafe: "WarnSameSiteUnspecifiedLaxAllowUnsafe", WarnSameSiteStrictLaxDowngradeStrict: "WarnSameSiteStrictLaxDowngradeStrict", WarnSameSiteStrictCrossDowngradeStrict: "WarnSameSiteStrictCrossDowngradeStrict", WarnSameSiteStrictCrossDowngradeLax: "WarnSameSiteStrictCrossDowngradeLax", WarnSameSiteLaxCrossDowngradeStrict: "WarnSameSiteLaxCrossDowngradeStrict", WarnSameSiteLaxCrossDowngradeLax: "WarnSameSiteLaxCrossDowngradeLax", WarnAttributeValueExceedsMaxSize: "WarnAttributeValueExceedsMaxSize"});
+inspectorBackend.registerEnum("Audits.CookieExclusionReason", {ExcludeSameSiteUnspecifiedTreatedAsLax: "ExcludeSameSiteUnspecifiedTreatedAsLax", ExcludeSameSiteNoneInsecure: "ExcludeSameSiteNoneInsecure", ExcludeSameSiteLax: "ExcludeSameSiteLax", ExcludeSameSiteStrict: "ExcludeSameSiteStrict", ExcludeInvalidSameParty: "ExcludeInvalidSameParty", ExcludeSamePartyCrossPartyContext: "ExcludeSamePartyCrossPartyContext", ExcludeDomainNonASCII: "ExcludeDomainNonASCII"});
+inspectorBackend.registerEnum("Audits.CookieWarningReason", {WarnSameSiteUnspecifiedCrossSiteContext: "WarnSameSiteUnspecifiedCrossSiteContext", WarnSameSiteNoneInsecure: "WarnSameSiteNoneInsecure", WarnSameSiteUnspecifiedLaxAllowUnsafe: "WarnSameSiteUnspecifiedLaxAllowUnsafe", WarnSameSiteStrictLaxDowngradeStrict: "WarnSameSiteStrictLaxDowngradeStrict", WarnSameSiteStrictCrossDowngradeStrict: "WarnSameSiteStrictCrossDowngradeStrict", WarnSameSiteStrictCrossDowngradeLax: "WarnSameSiteStrictCrossDowngradeLax", WarnSameSiteLaxCrossDowngradeStrict: "WarnSameSiteLaxCrossDowngradeStrict", WarnSameSiteLaxCrossDowngradeLax: "WarnSameSiteLaxCrossDowngradeLax", WarnAttributeValueExceedsMaxSize: "WarnAttributeValueExceedsMaxSize", WarnDomainNonASCII: "WarnDomainNonASCII"});
 inspectorBackend.registerEnum("Audits.CookieOperation", {SetCookie: "SetCookie", ReadCookie: "ReadCookie"});
 inspectorBackend.registerEnum("Audits.MixedContentResolutionStatus", {MixedContentBlocked: "MixedContentBlocked", MixedContentAutomaticallyUpgraded: "MixedContentAutomaticallyUpgraded", MixedContentWarning: "MixedContentWarning"});
 inspectorBackend.registerEnum("Audits.MixedContentResourceType", {AttributionSrc: "AttributionSrc", Audio: "Audio", Beacon: "Beacon", CSPReport: "CSPReport", Download: "Download", EventSource: "EventSource", Favicon: "Favicon", Font: "Font", Form: "Form", Frame: "Frame", Image: "Image", Import: "Import", Manifest: "Manifest", Ping: "Ping", PluginData: "PluginData", PluginResource: "PluginResource", Prefetch: "Prefetch", Resource: "Resource", Script: "Script", ServiceWorker: "ServiceWorker", SharedWorker: "SharedWorker", Stylesheet: "Stylesheet", Track: "Track", Video: "Video", Worker: "Worker", XMLHttpRequest: "XMLHttpRequest", XSLT: "XSLT"});
@@ -67,7 +67,7 @@ inspectorBackend.registerEnum("Audits.AttributionReportingIssueType", {Permissio
 inspectorBackend.registerEnum("Audits.GenericIssueErrorType", {CrossOriginPortalPostMessageError: "CrossOriginPortalPostMessageError"});
 inspectorBackend.registerEnum("Audits.DeprecationIssueType", {AuthorizationCoveredByWildcard: "AuthorizationCoveredByWildcard", CanRequestURLHTTPContainingNewline: "CanRequestURLHTTPContainingNewline", ChromeLoadTimesConnectionInfo: "ChromeLoadTimesConnectionInfo", ChromeLoadTimesFirstPaintAfterLoadTime: "ChromeLoadTimesFirstPaintAfterLoadTime", ChromeLoadTimesWasAlternateProtocolAvailable: "ChromeLoadTimesWasAlternateProtocolAvailable", CookieWithTruncatingChar: "CookieWithTruncatingChar", CrossOriginAccessBasedOnDocumentDomain: "CrossOriginAccessBasedOnDocumentDomain", CrossOriginWindowAlert: "CrossOriginWindowAlert", CrossOriginWindowConfirm: "CrossOriginWindowConfirm", CSSSelectorInternalMediaControlsOverlayCastButton: "CSSSelectorInternalMediaControlsOverlayCastButton", DeprecationExample: "DeprecationExample", DocumentDomainSettingWithoutOriginAgentClusterHeader: "DocumentDomainSettingWithoutOriginAgentClusterHeader", EventPath: "EventPath", ExpectCTHeader: "ExpectCTHeader", GeolocationInsecureOrigin: "GeolocationInsecureOrigin", GeolocationInsecureOriginDeprecatedNotRemoved: "GeolocationInsecureOriginDeprecatedNotRemoved", GetUserMediaInsecureOrigin: "GetUserMediaInsecureOrigin", HostCandidateAttributeGetter: "HostCandidateAttributeGetter", IdentityInCanMakePaymentEvent: "IdentityInCanMakePaymentEvent", InsecurePrivateNetworkSubresourceRequest: "InsecurePrivateNetworkSubresourceRequest", LegacyConstraintGoogIPv6: "LegacyConstraintGoogIPv6", LocalCSSFileExtensionRejected: "LocalCSSFileExtensionRejected", MediaSourceAbortRemove: "MediaSourceAbortRemove", MediaSourceDurationTruncatingBuffered: "MediaSourceDurationTruncatingBuffered", NavigateEventRestoreScroll: "NavigateEventRestoreScroll", NavigateEventTransitionWhile: "NavigateEventTransitionWhile", NoSysexWebMIDIWithoutPermission: "NoSysexWebMIDIWithoutPermission", NotificationInsecureOrigin: "NotificationInsecureOrigin", NotificationPermissionRequestedIframe: "NotificationPermissionRequestedIframe", ObsoleteWebRtcCipherSuite: "ObsoleteWebRtcCipherSuite", OpenWebDatabaseInsecureContext: "OpenWebDatabaseInsecureContext", OverflowVisibleOnReplacedElement: "OverflowVisibleOnReplacedElement", PersistentQuotaType: "PersistentQuotaType", PictureSourceSrc: "PictureSourceSrc", PrefixedCancelAnimationFrame: "PrefixedCancelAnimationFrame", PrefixedRequestAnimationFrame: "PrefixedRequestAnimationFrame", PrefixedStorageInfo: "PrefixedStorageInfo", PrefixedVideoDisplayingFullscreen: "PrefixedVideoDisplayingFullscreen", PrefixedVideoEnterFullscreen: "PrefixedVideoEnterFullscreen", PrefixedVideoEnterFullScreen: "PrefixedVideoEnterFullScreen", PrefixedVideoExitFullscreen: "PrefixedVideoExitFullscreen", PrefixedVideoExitFullScreen: "PrefixedVideoExitFullScreen", PrefixedVideoSupportsFullscreen: "PrefixedVideoSupportsFullscreen", RangeExpand: "RangeExpand", RequestedSubresourceWithEmbeddedCredentials: "RequestedSubresourceWithEmbeddedCredentials", RTCConstraintEnableDtlsSrtpFalse: "RTCConstraintEnableDtlsSrtpFalse", RTCConstraintEnableDtlsSrtpTrue: "RTCConstraintEnableDtlsSrtpTrue", RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics: "RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics", RTCPeerConnectionSdpSemanticsPlanB: "RTCPeerConnectionSdpSemanticsPlanB", RtcpMuxPolicyNegotiate: "RtcpMuxPolicyNegotiate", SharedArrayBufferConstructedWithoutIsolation: "SharedArrayBufferConstructedWithoutIsolation", TextToSpeech_DisallowedByAutoplay: "TextToSpeech_DisallowedByAutoplay", V8SharedArrayBufferConstructedInExtensionWithoutIsolation: "V8SharedArrayBufferConstructedInExtensionWithoutIsolation", XHRJSONEncodingDetection: "XHRJSONEncodingDetection", XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload: "XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload", XRSupportsSession: "XRSupportsSession"});
 inspectorBackend.registerEnum("Audits.ClientHintIssueReason", {MetaTagAllowListInvalidOrigin: "MetaTagAllowListInvalidOrigin", MetaTagModifiedHTML: "MetaTagModifiedHTML"});
-inspectorBackend.registerEnum("Audits.FederatedAuthRequestIssueReason", {ApprovalDeclined: "ApprovalDeclined", TooManyRequests: "TooManyRequests", ManifestListHttpNotFound: "ManifestListHttpNotFound", ManifestListNoResponse: "ManifestListNoResponse", ManifestListInvalidResponse: "ManifestListInvalidResponse", ManifestNotInManifestList: "ManifestNotInManifestList", ManifestListTooBig: "ManifestListTooBig", ManifestHttpNotFound: "ManifestHttpNotFound", ManifestNoResponse: "ManifestNoResponse", ManifestInvalidResponse: "ManifestInvalidResponse", ClientMetadataHttpNotFound: "ClientMetadataHttpNotFound", ClientMetadataNoResponse: "ClientMetadataNoResponse", ClientMetadataInvalidResponse: "ClientMetadataInvalidResponse", ClientMetadataMissingPrivacyPolicyUrl: "ClientMetadataMissingPrivacyPolicyUrl", DisabledInSettings: "DisabledInSettings", ErrorFetchingSignin: "ErrorFetchingSignin", InvalidSigninResponse: "InvalidSigninResponse", AccountsHttpNotFound: "AccountsHttpNotFound", AccountsNoResponse: "AccountsNoResponse", AccountsInvalidResponse: "AccountsInvalidResponse", IdTokenHttpNotFound: "IdTokenHttpNotFound", IdTokenNoResponse: "IdTokenNoResponse", IdTokenInvalidResponse: "IdTokenInvalidResponse", IdTokenInvalidRequest: "IdTokenInvalidRequest", ErrorIdToken: "ErrorIdToken", Canceled: "Canceled"});
+inspectorBackend.registerEnum("Audits.FederatedAuthRequestIssueReason", {ApprovalDeclined: "ApprovalDeclined", TooManyRequests: "TooManyRequests", ManifestListHttpNotFound: "ManifestListHttpNotFound", ManifestListNoResponse: "ManifestListNoResponse", ManifestListInvalidResponse: "ManifestListInvalidResponse", ManifestNotInManifestList: "ManifestNotInManifestList", ManifestListTooBig: "ManifestListTooBig", ManifestHttpNotFound: "ManifestHttpNotFound", ManifestNoResponse: "ManifestNoResponse", ManifestInvalidResponse: "ManifestInvalidResponse", ClientMetadataHttpNotFound: "ClientMetadataHttpNotFound", ClientMetadataNoResponse: "ClientMetadataNoResponse", ClientMetadataInvalidResponse: "ClientMetadataInvalidResponse", DisabledInSettings: "DisabledInSettings", ErrorFetchingSignin: "ErrorFetchingSignin", InvalidSigninResponse: "InvalidSigninResponse", AccountsHttpNotFound: "AccountsHttpNotFound", AccountsNoResponse: "AccountsNoResponse", AccountsInvalidResponse: "AccountsInvalidResponse", IdTokenHttpNotFound: "IdTokenHttpNotFound", IdTokenNoResponse: "IdTokenNoResponse", IdTokenInvalidResponse: "IdTokenInvalidResponse", IdTokenInvalidRequest: "IdTokenInvalidRequest", ErrorIdToken: "ErrorIdToken", Canceled: "Canceled"});
 inspectorBackend.registerEnum("Audits.InspectorIssueCode", {CookieIssue: "CookieIssue", MixedContentIssue: "MixedContentIssue", BlockedByResponseIssue: "BlockedByResponseIssue", HeavyAdIssue: "HeavyAdIssue", ContentSecurityPolicyIssue: "ContentSecurityPolicyIssue", SharedArrayBufferIssue: "SharedArrayBufferIssue", TrustedWebActivityIssue: "TrustedWebActivityIssue", LowTextContrastIssue: "LowTextContrastIssue", CorsIssue: "CorsIssue", AttributionReportingIssue: "AttributionReportingIssue", QuirksModeIssue: "QuirksModeIssue", NavigatorUserAgentIssue: "NavigatorUserAgentIssue", GenericIssue: "GenericIssue", DeprecationIssue: "DeprecationIssue", ClientHintIssue: "ClientHintIssue", FederatedAuthRequestIssue: "FederatedAuthRequestIssue"});
 inspectorBackend.registerEvent("Audits.issueAdded", ["issue"]);
 inspectorBackend.registerEnum("Audits.GetEncodedResponseRequestEncoding", {Webp: "webp", Jpeg: "jpeg", Png: "png"});

package/front_end/generated/SupportedCSSProperties.js

@@ -1290,8 +1290,7 @@ export const generatedProperties = [
   "keywords": [
    "normal",
    "inline-size",
-   "size",
-   "style"
+   "size"
   ],
   "name": "container-type"
  },
@@ -4073,8 +4072,7 @@ export const generatedPropertyValues = {
   "values": [
    "normal",
    "inline-size",
-   "size",
-   "style"
+   "size"
   ]
  },
  "content-visibility": {

package/front_end/generated/protocol.ts

@@ -703,6 +703,7 @@ export namespace Audits {
     ExcludeSameSiteStrict = 'ExcludeSameSiteStrict',
     ExcludeInvalidSameParty = 'ExcludeInvalidSameParty',
     ExcludeSamePartyCrossPartyContext = 'ExcludeSamePartyCrossPartyContext',
+    ExcludeDomainNonASCII = 'ExcludeDomainNonASCII',
   }
 
   export const enum CookieWarningReason {
@@ -715,6 +716,7 @@ export namespace Audits {
     WarnSameSiteLaxCrossDowngradeStrict = 'WarnSameSiteLaxCrossDowngradeStrict',
     WarnSameSiteLaxCrossDowngradeLax = 'WarnSameSiteLaxCrossDowngradeLax',
     WarnAttributeValueExceedsMaxSize = 'WarnAttributeValueExceedsMaxSize',
+    WarnDomainNonASCII = 'WarnDomainNonASCII',
   }
 
   export const enum CookieOperation {
@@ -1116,7 +1118,6 @@ export namespace Audits {
     ClientMetadataHttpNotFound = 'ClientMetadataHttpNotFound',
     ClientMetadataNoResponse = 'ClientMetadataNoResponse',
     ClientMetadataInvalidResponse = 'ClientMetadataInvalidResponse',
-    ClientMetadataMissingPrivacyPolicyUrl = 'ClientMetadataMissingPrivacyPolicyUrl',
     DisabledInSettings = 'DisabledInSettings',
     ErrorFetchingSignin = 'ErrorFetchingSignin',
     InvalidSigninResponse = 'InvalidSigninResponse',

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -287,7 +287,9 @@ const UIStrings = {
   v8SharedArrayBufferConstructedInExtensionWithoutIsolation:
       'Extensions should opt into cross-origin isolation to continue using `SharedArrayBuffer`. See https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/.',
   /**
-   * @description TODO(crbug.com/1318881): Description needed for translation
+   * @description Warning displayed to developers that they are using
+   * `XMLHttpRequest` API in a way that they expect an unsupported character
+   * encoding `UTF-16` could be used in the server reply.
    */
   xhrJSONEncodingDetection: 'UTF-16 is not supported by response json in `XMLHttpRequest`',
   /**
@@ -434,6 +436,15 @@ export class DeprecationIssue extends Issue {
         messageFunction = i18nLazyString(UIStrings.mediaSourceDurationTruncatingBuffered);
         feature = 6107495151960064;
         break;
+      case Protocol.Audits.DeprecationIssueType.NavigateEventRestoreScroll:
+        messageFunction = i18nLazyString(
+            UIStrings.deprecatedWithReplacement, {PH1: 'navigateEvent.restoreScroll()', PH2: 'navigateEvent.scroll()'});
+        break;
+      case Protocol.Audits.DeprecationIssueType.NavigateEventTransitionWhile:
+        messageFunction = i18nLazyString(
+            UIStrings.deprecatedWithReplacement,
+            {PH1: 'navigateEvent.transitionWhile()', PH2: 'navigateEvent.intercept()'});
+        break;
       case Protocol.Audits.DeprecationIssueType.NoSysexWebMIDIWithoutPermission:
         messageFunction = i18nLazyString(UIStrings.noSysexWebMIDIWithoutPermission);
         feature = 5138066234671104;

package/front_end/models/text_utils/CodeMirrorUtils.ts

@@ -34,8 +34,7 @@ type Tokenizer = (line: string, callback: (value: string, style: string|null) =>
 export function createCssTokenizer(): Tokenizer {
   async function tokenize(line: string, callback: (value: string, style: string|null) => void): Promise<void> {
     const streamParser = await CodeMirror.cssStreamParser();
-    const stream = new CodeMirror.StringStream();
-    stream.string = line;
+    const stream = new CodeMirror.StringStream(line, 4, 2);
 
     const state = streamParser.startState();
     let lastPos = stream.pos;

package/front_end/models/timeline_model/TimelineModel.ts

@@ -47,6 +47,10 @@ const UIStrings = {
   */
   threadS: 'Thread {PH1}',
   /**
+  *@description Text shown when rendering the User Interactions track in the Performance panel
+  */
+  userInteractions: 'User Interactions',
+  /**
   *@description Title of a worker in the timeline flame chart of the Performance panel
   *@example {https://google.com} PH1
   */
@@ -244,6 +248,29 @@ export class TimelineModelImpl {
   isUserTimingEvent(event: SDK.TracingModel.Event): boolean {
     return event.categoriesString === TimelineModelImpl.Category.UserTiming;
   }
+
+  isEventTimingInteractionEvent(event: SDK.TracingModel.Event): boolean {
+    if (event.name !== RecordType.EventTiming) {
+      return false;
+    }
+    type InteractionEventData = {
+      duration?: number, interactionId: number,
+    };
+    const data = event.args.data as InteractionEventData;
+    // Filter out:
+    // 1. events without a duration, or a duration of 0
+    // 2. events without an interactionId, or with an interactionId of 0,
+    //    which indicates that it's not a "top level" interaction event and
+    //    we can therefore ignore it. This can happen with "mousedown" for
+    //    example; an interaction ID is assigned to the "pointerdown" event
+    //    as it's the "first" event to be triggered when the user clicks,
+    //    but the browser doesn't attempt to assign IDs to all subsequent
+    //    events, as that's a hard heuristic to get right.
+    const duration = data.duration || 0;
+    const interactionId = data.interactionId || 0;
+    return (duration > 0 && interactionId > 0);
+  }
+
   isParseHTMLEvent(event: SDK.TracingModel.Event): boolean {
     return event.name === RecordType.ParseHTML;
   }
@@ -362,9 +389,32 @@ export class TimelineModelImpl {
     this.processAsyncBrowserEvents(tracingModel);
     this.buildGPUEvents(tracingModel);
     this.buildLoadingEvents(tracingModel, layoutShiftEvents);
+    this.collectInteractionEvents(tracingModel);
     this.resetProcessingState();
   }
 
+  private collectInteractionEvents(tracingModel: SDK.TracingModel.TracingModel): void {
+    const mainRendererThread = tracingModel.getThreadByName('Renderer', 'CrRendererMain');
+    if (!mainRendererThread) {
+      return;
+    }
+
+    const interactionEvents: SDK.TracingModel.AsyncEvent[] = [];
+
+    const track = this.ensureNamedTrack(TrackType.UserInteractions);
+    track.thread = mainRendererThread;
+    track.name = UIStrings.userInteractions;
+    track.forMainFrame = true;
+
+    for (const event of mainRendererThread.asyncEvents()) {
+      if (!this.isEventTimingInteractionEvent(event)) {
+        continue;
+      }
+      interactionEvents.push(event);
+    }
+    track.asyncEvents = interactionEvents;
+  }
+
   private processGenericTrace(tracingModel: SDK.TracingModel.TracingModel): void {
     let browserMainThread = SDK.TracingModel.TracingModel.browserMainThread(tracingModel);
     if (!browserMainThread && tracingModel.sortedProcesses().length) {
@@ -1610,6 +1660,7 @@ export enum RecordType {
   TimeStamp = 'TimeStamp',
   ConsoleTime = 'ConsoleTime',
   UserTiming = 'UserTiming',
+  EventTiming = 'EventTiming',
 
   ResourceWillSendRequest = 'ResourceWillSendRequest',
   ResourceSendRequest = 'ResourceSendRequest',
@@ -1822,6 +1873,7 @@ export enum TrackType {
   GPU = 'GPU',
   Experience = 'Experience',
   Other = 'Other',
+  UserInteractions = 'UserInteractions',
 }
 
 const enum WorkletType {

package/front_end/panels/application/components/StackTrace.ts

@@ -155,7 +155,7 @@ export class StackTrace extends HTMLElement {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
     for (const item of this.#stackTraceRows) {
-      if (this.#showHidden || (!item.ignoreListHide && !item.rowCountHide)) {
+      if (this.#showHidden || !item.ignoreListHide) {
         if ('functionName' in item) {
           expandableRows.push(LitHtml.html`
           <${StackTraceRow.litTagName} data-stack-trace-row .data=${{
@@ -168,7 +168,7 @@ export class StackTrace extends HTMLElement {
           `);
         }
       }
-      if (!this.#showHidden && 'functionName' in item && (item.ignoreListHide || item.rowCountHide)) {
+      if (!this.#showHidden && 'functionName' in item && item.ignoreListHide) {
         hiddenCallFramesCount++;
       }
     }

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -7,6 +7,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
+import accessibilityTreeViewStyles from './accessibilityTreeView.css.js';
 import {ElementsPanel} from './ElementsPanel.js';
 
 export class AccessibilityTreeView extends UI.Widget.VBox implements
@@ -21,8 +22,12 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
     // toggleButton is bound to a click handler on ElementsPanel to switch between the DOM tree
     // and accessibility tree views.
     this.toggleButton = toggleButton;
-    this.contentElement.appendChild(this.toggleButton);
-    this.contentElement.appendChild(this.accessibilityTreeComponent);
+
+    const container = this.contentElement.createChild('div');
+
+    container.classList.add('accessibility-tree-view-container');
+    container.appendChild(this.toggleButton);
+    container.appendChild(this.accessibilityTreeComponent);
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.AccessibilityModel.AccessibilityModel, this);
 
@@ -61,6 +66,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
     if (this.inspectedDOMNode) {
       await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode);
     }
+    this.registerCSSFiles([accessibilityTreeViewStyles]);
   }
 
   async refreshAccessibilityTree(): Promise<void> {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -14,47 +14,46 @@ import {
 
 const UIStrings = {
   /**
-    *@description The type of the CSS rule validation message that is shown in the Style panel. "Deprecated property" means that the property in the declaration is deprecated and should not be used.
+    *@description The type of the CSS rule validation message shown in the Style pane. "Deprecated property" means that a property in the declaration is deprecated and should not be used.
     */
   deprecatedPropertyHintPrefix: 'Deprecated property',
   /**
-    *@description The type of the CSS rule validation message that is shown in the Style panel. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
+    *@description The type of the CSS rule validation message shown in the Style pane. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
     */
   inactivePropertyHintPrefix: 'Inactive property',
   /**
-    *@description The message that is shown in the Style panel when the user hovers over a property that has not effect due to some other property.
+    *@description The message shown in the Style pane when the user hovers over a property that has no effect due to some other property.
     *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and, therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property on the same element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
   /**
-    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to some other property.
+    *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to some other property.
     *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     */
-  ruleViolatedBySameElementRuleFix:
-      'For this property to work, please remove or change the value of {REASON_PROPERTY_DECLARATION_CODE}.',
+  ruleViolatedBySameElementRuleFix: 'Try removing {REASON_PROPERTY_DECLARATION_CODE} or changing its value.',
   /**
-    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the current property value.
+    *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the current property value.
     *@example {display: block} EXISTING_PROPERTY_DECLARATION
     *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
   ruleViolatedBySameElementRuleChangeSuggestion:
-      'For this property to work, please change the {EXISTING_PROPERTY_DECLARATION} rule to {TARGET_PROPERTY_DECLARATION}.',
+      'Try changing the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
   /**
-    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to properties of the parent element.
+    *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to properties of the parent element.
     *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
     *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'Parent element has {REASON_PROPERTY_DECLARATION_CODE} rule, therefore this elements {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
   /**
-    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the properties of the parent element.
+    *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the properties of the parent element.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
   ruleViolatedByParentElementRuleFix:
-      'Please change parent element\'s {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+      'Try changing the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -103,7 +103,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
-  private topLayerContainer?: TopLayerContainer;
+  #topLayerContainerByParent: Map<UI.TreeOutline.TreeElement, TopLayerContainer> = new Map();
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -453,7 +453,7 @@ export class ElementsTreeOutline extends
       }
     }
 
-    this.createTopLayerContainer();
+    void this.createTopLayerContainer(this.rootElement(), this.rootDOMNode.domModel());
 
     if (selectedNode) {
       this.revealAndSelectNode(selectedNode, true);
@@ -1183,9 +1183,16 @@ export class ElementsTreeOutline extends
     });
   }
 
-  createTopLayerContainer(): void {
-    this.topLayerContainer = new TopLayerContainer(this);
-    void this.topLayerContainer.throttledUpdateTopLayerElements();
+  async createTopLayerContainer(parent: UI.TreeOutline.TreeElement, domModel: SDK.DOMModel.DOMModel): Promise<void> {
+    if (!parent.treeOutline || !(parent.treeOutline instanceof ElementsTreeOutline)) {
+      return;
+    }
+    const container = new TopLayerContainer(parent.treeOutline, domModel);
+    await container.throttledUpdateTopLayerElements();
+    if (container.currentTopLayerElements.size > 0) {
+      parent.appendChild(container);
+    }
+    this.#topLayerContainerByParent.set(parent, container);
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1342,6 +1349,9 @@ export class ElementsTreeOutline extends
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
+    if (child.nodeType() === Node.DOCUMENT_NODE) {
+      void this.createTopLayerContainer(newElement, child.domModel());
+    }
     return newElement;
   }
 
@@ -1447,8 +1457,14 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private topLayerElementsChanged(): void {
-    void this.topLayerContainer?.throttledUpdateTopLayerElements();
+  private async topLayerElementsChanged(): Promise<void> {
+    for (const [parent, container] of this.#topLayerContainerByParent) {
+      await container.throttledUpdateTopLayerElements();
+      if (container.currentTopLayerElements.size > 0 && container.parent !== parent) {
+        parent.appendChild(container);
+      }
+      container.hidden = container.currentTopLayerElements.size === 0;
+    }
   }
 
   private static treeOutlineSymbol = Symbol('treeOutline');

package/front_end/panels/elements/TopLayerContainer.ts

@@ -14,23 +14,24 @@ import {type ElementsTreeElement} from './ElementsTreeElement.js';
 
 const UIStrings = {
   /**
-   * @description Top layer is rendered closest to the user within a viewport, therefore its elements always appear on top of all other content
-   */
-  topLayer: 'top-layer',
+  *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.
+  */
+  reveal: 'reveal',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
-  domContainer: ElementsTreeOutline.ElementsTreeOutline;
+  tree: ElementsTreeOutline.ElementsTreeOutline;
+  domModel: SDK.DOMModel.DOMModel;
   currentTopLayerElements: Set<ElementsTreeElement>;
   topLayerUpdateThrottler: Common.Throttler.Throttler;
-  #inserted = false;
 
-  constructor(domContainer: ElementsTreeOutline.ElementsTreeOutline) {
+  constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
-    this.domContainer = domContainer;
+    this.tree = tree;
+    this.domModel = domModel;
     this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
@@ -44,26 +45,19 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
     this.removeCurrentTopLayerElementsAdorners();
     this.currentTopLayerElements = new Set();
 
-    const domModel = this.domContainer.rootDOMNode?.domModel();
-    if (!domModel) {
-      this.hidden = true;
-      return;
-    }
-
-    const newTopLayerElementsIDs = await domModel.getTopLayerElements();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
-      this.hidden = true;
       return;
     }
 
     let topLayerElementIndex = 0;
     for (let i = 0; i < newTopLayerElementsIDs.length; i++) {
-      const topLayerDOMNode = domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
+      const topLayerDOMNode = this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i]);
       if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-            domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+            this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.domContainer.treeElementByNode.get(topLayerDOMNode);
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
         if (!topLayerTreeElement) {
           continue;
         }
@@ -73,21 +67,16 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
         // Add the element's backdrop if previous top layer element is a backdrop.
-        const previousTopLayerDOMNode = (i > 0) ? domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
+        const previousTopLayerDOMNode =
+            (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
         if (previousTopLayerDOMNode && previousTopLayerDOMNode.nodeName() === '::backdrop') {
           const backdropElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
-              domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
+              this.domModel.target(), previousTopLayerDOMNode.backendNodeId(), 0, previousTopLayerDOMNode.nodeName());
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
       }
     }
-
-    this.hidden = topLayerElementIndex <= 0;
-    if (!this.hidden && !this.#inserted) {
-      this.domContainer.appendChild(this);
-      this.#inserted = true;
-    }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
@@ -118,8 +107,8 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
       adorner.addInteraction(onClick, {
         isToggle: false,
         shouldPropagateOnKeydown: false,
-        ariaLabelDefault: i18nString(UIStrings.topLayer),
-        ariaLabelActive: i18nString(UIStrings.topLayer),
+        ariaLabelDefault: i18nString(UIStrings.reveal),
+        ariaLabelActive: i18nString(UIStrings.reveal),
       });
       adorner.addEventListener('mousedown', e => e.consume(), false);
     }

package/front_end/panels/elements/accessibilityTreeView.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2022 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.
+ */
+
+.accessibility-tree-view-container {
+  height: 100%;
+  overflow: auto;
+}

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -77,16 +77,15 @@ export class AccessibilityTreeNode extends HTMLElement {
     const name = LitHtml.html`"<span class='attribute-value'>${this.#name}</span>"`;
     const properties = this.#properties.map(
         ({name, value}) => isPrintable(value.type) ?
-            LitHtml.html`&nbsp<span class='attribute-name'>${name}</span>:&nbsp<span class='attribute-value'>${
+            LitHtml.html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
                 value.value}</span>` :
             LitHtml.nothing);
-
+    const content = this.#ignored ? LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
+                                    LitHtml.html`${role}&nbsp;${name}${properties}`;
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write('Accessibility node render', () => {
       // clang-format off
       LitHtml.render(
-        this.#ignored ?
-          LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
-          LitHtml.html`${role}&nbsp${name}${properties}`,
+        LitHtml.html`<div class='container'>${content}</div>`,
         this.#shadow,
         {host: this});
       // clang-format on

package/front_end/panels/elements/components/accessibilityTreeNode.css

@@ -4,6 +4,15 @@
  * found in the LICENSE file.
  */
 
+.container {
+  width: 100%;
+  display: inline-block;
+}
+
+.container:hover {
+  background-color: var(--item-hover-color);
+}
+
 span {
   color: var(--color-syntax-8);
   font-family: var(--monospace-font-family);

package/front_end/panels/elements/components/cssHintDetailsView.css

@@ -4,10 +4,14 @@
  * found in the LICENSE file.
  */
 
+:host {
+  padding: 6px;
+}
+
 .hint-popup-wrapper {
-  width: 400px;
-  line-height: 1.1;
+  max-width: 232px;
   font-size: 12px;
+  line-height: 1.4;
 }
 
 code {

package/front_end/panels/elements/stylesSectionTree.css

@@ -159,7 +159,7 @@ ol.expanded {
   position: absolute;
   top: 0;
   bottom: 0;
-  margin: auto auto auto 5px;
+  margin: auto auto auto 3px;
   display: inline-block;
   cursor: pointer;
   transform: scale(0.9);

package/front_end/panels/network/NetworkItemView.ts

@@ -311,7 +311,20 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header: string|undefined): void {
-    this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
-    this.headersView.revealHeader(section, header);
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
+      this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent);
+      this.headersViewComponent.revealHeader(section, header);
+    } else {
+      this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
+      this.headersView.revealHeader(section, header);
+    }
+  }
+
+  getHeadersView(): RequestHeadersView {
+    return this.headersView;
+  }
+
+  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView {
+    return this.headersViewComponent;
   }
 }