chrome-devtools-frontend 1.0.1031400 → 1.0.1032322

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/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:
-      'The parent element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, this element\'s property {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 the parent element\'s property declaration from {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/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/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;
   }
 }

package/front_end/panels/network/components/RequestHeadersView.css

@@ -4,6 +4,15 @@
  * found in the LICENSE file.
  */
 
+devtools-request-headers-category {
+  --override-header-highlight-background-color: #ffff78;
+}
+
+.-theme-with-dark-background devtools-request-headers-category,
+:host-context(.-theme-with-dark-background) devtools-request-headers-category {
+  --override-header-highlight-background-color: #4c4c33;
+}
+
 .header {
   background-color: var(--color-background-elevation-1);
   border-bottom: var(--legacy-divider-border);
@@ -208,3 +217,7 @@ summary label {
 summary label:hover {
   color: var(--color-text-primary);
 }
+
+.header-highlight {
+  background-color: var(--override-header-highlight-background-color);
+}