chrome-devtools-frontend 1.0.1568190 → 1.0.1568864

package/front_end/Images/src/grid-direction.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 9V3L17 3V9H11Z" fill="black"/>
+<path d="M3 9L3 3L9 3V9H3Z" fill="black"/>
+<path d="M3 17L3 11H9V17H3Z" fill="black"/>
+<path d="M15.1893 13.2803H10V14.7803H15.1894L13.4697 16.5L14.5303 17.5607L18.0607 14.0304L14.5303 10.5L13.4697 11.5607L15.1893 13.2803Z" fill="black"/>
+</svg>

package/front_end/generated/InspectorBackendCommands.ts

@@ -66,7 +66,7 @@ inspectorBackend.registerType("Animation.KeyframesRule", [{"name": "name", "type
 inspectorBackend.registerType("Animation.KeyframeStyle", [{"name": "offset", "type": "string", "optional": false, "description": "Keyframe's time offset.", "typeRef": null}, {"name": "easing", "type": "string", "optional": false, "description": "`AnimationEffect`'s timing function.", "typeRef": null}]);
 
 // Audits.
-inspectorBackend.registerEnum("Audits.CookieExclusionReason", {ExcludeSameSiteUnspecifiedTreatedAsLax: "ExcludeSameSiteUnspecifiedTreatedAsLax", ExcludeSameSiteNoneInsecure: "ExcludeSameSiteNoneInsecure", ExcludeSameSiteLax: "ExcludeSameSiteLax", ExcludeSameSiteStrict: "ExcludeSameSiteStrict", ExcludeInvalidSameParty: "ExcludeInvalidSameParty", ExcludeSamePartyCrossPartyContext: "ExcludeSamePartyCrossPartyContext", ExcludeDomainNonASCII: "ExcludeDomainNonASCII", ExcludeThirdPartyCookieBlockedInFirstPartySet: "ExcludeThirdPartyCookieBlockedInFirstPartySet", ExcludeThirdPartyPhaseout: "ExcludeThirdPartyPhaseout", ExcludePortMismatch: "ExcludePortMismatch", ExcludeSchemeMismatch: "ExcludeSchemeMismatch"});
+inspectorBackend.registerEnum("Audits.CookieExclusionReason", {ExcludeSameSiteUnspecifiedTreatedAsLax: "ExcludeSameSiteUnspecifiedTreatedAsLax", ExcludeSameSiteNoneInsecure: "ExcludeSameSiteNoneInsecure", ExcludeSameSiteLax: "ExcludeSameSiteLax", ExcludeSameSiteStrict: "ExcludeSameSiteStrict", ExcludeDomainNonASCII: "ExcludeDomainNonASCII", ExcludeThirdPartyCookieBlockedInFirstPartySet: "ExcludeThirdPartyCookieBlockedInFirstPartySet", ExcludeThirdPartyPhaseout: "ExcludeThirdPartyPhaseout", ExcludePortMismatch: "ExcludePortMismatch", ExcludeSchemeMismatch: "ExcludeSchemeMismatch"});
 inspectorBackend.registerEnum("Audits.CookieWarningReason", {WarnSameSiteUnspecifiedCrossSiteContext: "WarnSameSiteUnspecifiedCrossSiteContext", WarnSameSiteNoneInsecure: "WarnSameSiteNoneInsecure", WarnSameSiteUnspecifiedLaxAllowUnsafe: "WarnSameSiteUnspecifiedLaxAllowUnsafe", WarnSameSiteStrictLaxDowngradeStrict: "WarnSameSiteStrictLaxDowngradeStrict", WarnSameSiteStrictCrossDowngradeStrict: "WarnSameSiteStrictCrossDowngradeStrict", WarnSameSiteStrictCrossDowngradeLax: "WarnSameSiteStrictCrossDowngradeLax", WarnSameSiteLaxCrossDowngradeStrict: "WarnSameSiteLaxCrossDowngradeStrict", WarnSameSiteLaxCrossDowngradeLax: "WarnSameSiteLaxCrossDowngradeLax", WarnAttributeValueExceedsMaxSize: "WarnAttributeValueExceedsMaxSize", WarnDomainNonASCII: "WarnDomainNonASCII", WarnThirdPartyPhaseout: "WarnThirdPartyPhaseout", WarnCrossSiteRedirectDowngradeChangesInclusion: "WarnCrossSiteRedirectDowngradeChangesInclusion", WarnDeprecationTrialMetadata: "WarnDeprecationTrialMetadata", WarnThirdPartyCookieHeuristic: "WarnThirdPartyCookieHeuristic"});
 inspectorBackend.registerEnum("Audits.CookieOperation", {SetCookie: "SetCookie", ReadCookie: "ReadCookie"});
 inspectorBackend.registerEnum("Audits.InsightType", {GitHubResource: "GitHubResource", GracePeriod: "GracePeriod", Heuristics: "Heuristics"});
@@ -773,8 +773,8 @@ inspectorBackend.registerEnum("Network.TrustTokenOperationType", {Issuance: "Iss
 inspectorBackend.registerEnum("Network.AlternateProtocolUsage", {AlternativeJobWonWithoutRace: "alternativeJobWonWithoutRace", AlternativeJobWonRace: "alternativeJobWonRace", MainJobWonRace: "mainJobWonRace", MappingMissing: "mappingMissing", Broken: "broken", DnsAlpnH3JobWonWithoutRace: "dnsAlpnH3JobWonWithoutRace", DnsAlpnH3JobWonRace: "dnsAlpnH3JobWonRace", UnspecifiedReason: "unspecifiedReason"});
 inspectorBackend.registerEnum("Network.ServiceWorkerRouterSource", {Network: "network", Cache: "cache", FetchEvent: "fetch-event", RaceNetworkAndFetchHandler: "race-network-and-fetch-handler", RaceNetworkAndCache: "race-network-and-cache"});
 inspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Preload: "preload", SignedExchange: "SignedExchange", Preflight: "preflight", FedCM: "FedCM", Other: "other"});
-inspectorBackend.registerEnum("Network.SetCookieBlockedReason", {SecureOnly: "SecureOnly", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", SyntaxError: "SyntaxError", SchemeNotSupported: "SchemeNotSupported", OverwriteSecure: "OverwriteSecure", InvalidDomain: "InvalidDomain", InvalidPrefix: "InvalidPrefix", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", SamePartyFromCrossPartyContext: "SamePartyFromCrossPartyContext", SamePartyConflictsWithOtherAttributes: "SamePartyConflictsWithOtherAttributes", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", DisallowedCharacter: "DisallowedCharacter", NoCookieContent: "NoCookieContent"});
-inspectorBackend.registerEnum("Network.CookieBlockedReason", {SecureOnly: "SecureOnly", NotOnPath: "NotOnPath", DomainMismatch: "DomainMismatch", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", SamePartyFromCrossPartyContext: "SamePartyFromCrossPartyContext", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", PortMismatch: "PortMismatch", SchemeMismatch: "SchemeMismatch", AnonymousContext: "AnonymousContext"});
+inspectorBackend.registerEnum("Network.SetCookieBlockedReason", {SecureOnly: "SecureOnly", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", SyntaxError: "SyntaxError", SchemeNotSupported: "SchemeNotSupported", OverwriteSecure: "OverwriteSecure", InvalidDomain: "InvalidDomain", InvalidPrefix: "InvalidPrefix", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", DisallowedCharacter: "DisallowedCharacter", NoCookieContent: "NoCookieContent"});
+inspectorBackend.registerEnum("Network.CookieBlockedReason", {SecureOnly: "SecureOnly", NotOnPath: "NotOnPath", DomainMismatch: "DomainMismatch", SameSiteStrict: "SameSiteStrict", SameSiteLax: "SameSiteLax", SameSiteUnspecifiedTreatedAsLax: "SameSiteUnspecifiedTreatedAsLax", SameSiteNoneInsecure: "SameSiteNoneInsecure", UserPreferences: "UserPreferences", ThirdPartyPhaseout: "ThirdPartyPhaseout", ThirdPartyBlockedInFirstPartySet: "ThirdPartyBlockedInFirstPartySet", UnknownError: "UnknownError", SchemefulSameSiteStrict: "SchemefulSameSiteStrict", SchemefulSameSiteLax: "SchemefulSameSiteLax", SchemefulSameSiteUnspecifiedTreatedAsLax: "SchemefulSameSiteUnspecifiedTreatedAsLax", NameValuePairExceedsMaxSize: "NameValuePairExceedsMaxSize", PortMismatch: "PortMismatch", SchemeMismatch: "SchemeMismatch", AnonymousContext: "AnonymousContext"});
 inspectorBackend.registerEnum("Network.CookieExemptionReason", {None: "None", UserSetting: "UserSetting", TPCDMetadata: "TPCDMetadata", TPCDDeprecationTrial: "TPCDDeprecationTrial", TopLevelTPCDDeprecationTrial: "TopLevelTPCDDeprecationTrial", TPCDHeuristics: "TPCDHeuristics", EnterprisePolicy: "EnterprisePolicy", StorageAccess: "StorageAccess", TopLevelStorageAccess: "TopLevelStorageAccess", Scheme: "Scheme", SameSiteNoneCookiesInSandbox: "SameSiteNoneCookiesInSandbox"});
 inspectorBackend.registerEnum("Network.AuthChallengeSource", {Server: "Server", Proxy: "Proxy"});
 inspectorBackend.registerEnum("Network.AuthChallengeResponseResponse", {Default: "Default", CancelAuth: "CancelAuth", ProvideCredentials: "ProvideCredentials"});
@@ -865,7 +865,7 @@ inspectorBackend.registerCommand("Network.searchInResponseBody", [{"name": "requ
 inspectorBackend.registerCommand("Network.setBlockedURLs", [{"name": "urlPatterns", "type": "array", "optional": true, "description": "Patterns to match in the order in which they are given. These patterns also take precedence over any wildcard patterns defined in `urls`.", "typeRef": "Network.BlockPattern"}, {"name": "urls", "type": "array", "optional": true, "description": "URL patterns to block. Wildcards ('*') are allowed.", "typeRef": "string"}], [], "Blocks URLs from loading.");
 inspectorBackend.registerCommand("Network.setBypassServiceWorker", [{"name": "bypass", "type": "boolean", "optional": false, "description": "Bypass service worker and load from network.", "typeRef": null}], [], "Toggles ignoring of service worker for each request.");
 inspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false, "description": "Cache disabled state.", "typeRef": null}], [], "Toggles ignoring cache for each request. If `true`, cache will not be used.");
-inspectorBackend.registerCommand("Network.setCookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority type.", "typeRef": "Network.CookiePriority"}, {"name": "sameParty", "type": "boolean", "optional": true, "description": "True if cookie is SameParty.", "typeRef": null}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}], ["success"], "Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist.");
+inspectorBackend.registerCommand("Network.setCookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority type.", "typeRef": "Network.CookiePriority"}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}], ["success"], "Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist.");
 inspectorBackend.registerCommand("Network.setCookies", [{"name": "cookies", "type": "array", "optional": false, "description": "Cookies to be set.", "typeRef": "Network.CookieParam"}], [], "Sets given cookies.");
 inspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false, "description": "Map with extra HTTP headers.", "typeRef": "Network.Headers"}], [], "Specifies whether to always send extra HTTP headers with the requests from this page.");
 inspectorBackend.registerCommand("Network.setAttachDebugStack", [{"name": "enabled", "type": "boolean", "optional": false, "description": "Whether to attach a page script stack for debugging purpose.", "typeRef": null}], [], "Specifies whether to attach a page script stack id in requests");
@@ -893,11 +893,11 @@ inspectorBackend.registerType("Network.WebSocketFrame", [{"name": "opcode", "typ
 inspectorBackend.registerType("Network.CachedResource", [{"name": "url", "type": "string", "optional": false, "description": "Resource URL. This is the url of the original network request.", "typeRef": null}, {"name": "type", "type": "string", "optional": false, "description": "Type of this resource.", "typeRef": "Network.ResourceType"}, {"name": "response", "type": "object", "optional": true, "description": "Cached response data.", "typeRef": "Network.Response"}, {"name": "bodySize", "type": "number", "optional": false, "description": "Cached response body size.", "typeRef": null}]);
 inspectorBackend.registerType("Network.Initiator", [{"name": "type", "type": "string", "optional": false, "description": "Type of this initiator.", "typeRef": null}, {"name": "stack", "type": "object", "optional": true, "description": "Initiator JavaScript stack trace, set for Script only. Requires the Debugger domain to be enabled.", "typeRef": "Runtime.StackTrace"}, {"name": "url", "type": "string", "optional": true, "description": "Initiator URL, set for Parser type or for Script type (when script is importing module) or for SignedExchange type.", "typeRef": null}, {"name": "lineNumber", "type": "number", "optional": true, "description": "Initiator line number, set for Parser type or for Script type (when script is importing module) (0-based).", "typeRef": null}, {"name": "columnNumber", "type": "number", "optional": true, "description": "Initiator column number, set for Parser type or for Script type (when script is importing module) (0-based).", "typeRef": null}, {"name": "requestId", "type": "string", "optional": true, "description": "Set if another request triggered this request (e.g. preflight).", "typeRef": "Network.RequestId"}]);
 inspectorBackend.registerType("Network.CookiePartitionKey", [{"name": "topLevelSite", "type": "string", "optional": false, "description": "The site of the top-level URL the browser was visiting at the start of the request to the endpoint that set the cookie.", "typeRef": null}, {"name": "hasCrossSiteAncestor", "type": "boolean", "optional": false, "description": "Indicates if the cookie has any ancestors that are cross-site to the topLevelSite.", "typeRef": null}]);
-inspectorBackend.registerType("Network.Cookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "domain", "type": "string", "optional": false, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": false, "description": "Cookie path.", "typeRef": null}, {"name": "expires", "type": "number", "optional": false, "description": "Cookie expiration date as the number of seconds since the UNIX epoch. The value is set to -1 if the expiry date is not set. The value can be null for values that cannot be represented in JSON (\u00b1Inf).", "typeRef": null}, {"name": "size", "type": "number", "optional": false, "description": "Cookie size.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": false, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": false, "description": "True if cookie is secure.", "typeRef": null}, {"name": "session", "type": "boolean", "optional": false, "description": "True in case of session cookie.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "priority", "type": "string", "optional": false, "description": "Cookie Priority", "typeRef": "Network.CookiePriority"}, {"name": "sameParty", "type": "boolean", "optional": false, "description": "True if cookie is SameParty.", "typeRef": null}, {"name": "sourceScheme", "type": "string", "optional": false, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": false, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key.", "typeRef": "Network.CookiePartitionKey"}, {"name": "partitionKeyOpaque", "type": "boolean", "optional": true, "description": "True if cookie partition key is opaque.", "typeRef": null}]);
+inspectorBackend.registerType("Network.Cookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "domain", "type": "string", "optional": false, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": false, "description": "Cookie path.", "typeRef": null}, {"name": "expires", "type": "number", "optional": false, "description": "Cookie expiration date as the number of seconds since the UNIX epoch. The value is set to -1 if the expiry date is not set. The value can be null for values that cannot be represented in JSON (\u00b1Inf).", "typeRef": null}, {"name": "size", "type": "number", "optional": false, "description": "Cookie size.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": false, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": false, "description": "True if cookie is secure.", "typeRef": null}, {"name": "session", "type": "boolean", "optional": false, "description": "True in case of session cookie.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "priority", "type": "string", "optional": false, "description": "Cookie Priority", "typeRef": "Network.CookiePriority"}, {"name": "sourceScheme", "type": "string", "optional": false, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": false, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key.", "typeRef": "Network.CookiePartitionKey"}, {"name": "partitionKeyOpaque", "type": "boolean", "optional": true, "description": "True if cookie partition key is opaque.", "typeRef": null}]);
 inspectorBackend.registerType("Network.BlockedSetCookieWithReason", [{"name": "blockedReasons", "type": "array", "optional": false, "description": "The reason(s) this cookie was blocked.", "typeRef": "Network.SetCookieBlockedReason"}, {"name": "cookieLine", "type": "string", "optional": false, "description": "The string representing this individual cookie as it would appear in the header. This is not the entire \\\"cookie\\\" or \\\"set-cookie\\\" header which could have multiple cookies.", "typeRef": null}, {"name": "cookie", "type": "object", "optional": true, "description": "The cookie object which represents the cookie which was not stored. It is optional because sometimes complete cookie information is not available, such as in the case of parsing errors.", "typeRef": "Network.Cookie"}]);
 inspectorBackend.registerType("Network.ExemptedSetCookieWithReason", [{"name": "exemptionReason", "type": "string", "optional": false, "description": "The reason the cookie was exempted.", "typeRef": "Network.CookieExemptionReason"}, {"name": "cookieLine", "type": "string", "optional": false, "description": "The string representing this individual cookie as it would appear in the header.", "typeRef": null}, {"name": "cookie", "type": "object", "optional": false, "description": "The cookie object representing the cookie.", "typeRef": "Network.Cookie"}]);
 inspectorBackend.registerType("Network.AssociatedCookie", [{"name": "cookie", "type": "object", "optional": false, "description": "The cookie object representing the cookie which was not sent.", "typeRef": "Network.Cookie"}, {"name": "blockedReasons", "type": "array", "optional": false, "description": "The reason(s) the cookie was blocked. If empty means the cookie is included.", "typeRef": "Network.CookieBlockedReason"}, {"name": "exemptionReason", "type": "string", "optional": true, "description": "The reason the cookie should have been blocked by 3PCD but is exempted. A cookie could only have at most one exemption reason.", "typeRef": "Network.CookieExemptionReason"}]);
-inspectorBackend.registerType("Network.CookieParam", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority.", "typeRef": "Network.CookiePriority"}, {"name": "sameParty", "type": "boolean", "optional": true, "description": "True if cookie is SameParty.", "typeRef": null}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}]);
+inspectorBackend.registerType("Network.CookieParam", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority.", "typeRef": "Network.CookiePriority"}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}]);
 inspectorBackend.registerType("Network.AuthChallenge", [{"name": "source", "type": "string", "optional": true, "description": "Source of the authentication challenge.", "typeRef": null}, {"name": "origin", "type": "string", "optional": false, "description": "Origin of the challenger.", "typeRef": null}, {"name": "scheme", "type": "string", "optional": false, "description": "The authentication scheme used, such as basic or digest", "typeRef": null}, {"name": "realm", "type": "string", "optional": false, "description": "The realm of the challenge. May be empty.", "typeRef": null}]);
 inspectorBackend.registerType("Network.AuthChallengeResponse", [{"name": "response", "type": "string", "optional": false, "description": "The decision on what to do in response to the authorization challenge.  Default means deferring to the default behavior of the net stack, which will likely either the Cancel authentication or display a popup dialog box.", "typeRef": null}, {"name": "username", "type": "string", "optional": true, "description": "The username to provide, possibly empty. Should only be set if response is ProvideCredentials.", "typeRef": null}, {"name": "password", "type": "string", "optional": true, "description": "The password to provide, possibly empty. Should only be set if response is ProvideCredentials.", "typeRef": null}]);
 inspectorBackend.registerType("Network.RequestPattern", [{"name": "urlPattern", "type": "string", "optional": true, "description": "Wildcards (`'*'` -> zero or more, `'?'` -> exactly one) are allowed. Escape character is backslash. Omitting is equivalent to `\\\"*\\\"`.", "typeRef": null}, {"name": "resourceType", "type": "string", "optional": true, "description": "If set, only requests for matching resource types will be intercepted.", "typeRef": "Network.ResourceType"}, {"name": "interceptionStage", "type": "string", "optional": true, "description": "Stage at which to begin intercepting requests. Default is Request.", "typeRef": "Network.InterceptionStage"}]);

package/front_end/generated/protocol.ts

@@ -771,8 +771,6 @@ export namespace Audits {
     ExcludeSameSiteNoneInsecure = 'ExcludeSameSiteNoneInsecure',
     ExcludeSameSiteLax = 'ExcludeSameSiteLax',
     ExcludeSameSiteStrict = 'ExcludeSameSiteStrict',
-    ExcludeInvalidSameParty = 'ExcludeInvalidSameParty',
-    ExcludeSamePartyCrossPartyContext = 'ExcludeSamePartyCrossPartyContext',
     ExcludeDomainNonASCII = 'ExcludeDomainNonASCII',
     ExcludeThirdPartyCookieBlockedInFirstPartySet = 'ExcludeThirdPartyCookieBlockedInFirstPartySet',
     ExcludeThirdPartyPhaseout = 'ExcludeThirdPartyPhaseout',
@@ -10673,11 +10671,6 @@ export namespace Network {
      * Cookie Priority
      */
     priority: CookiePriority;
-    /**
-     * True if cookie is SameParty.
-     * @deprecated
-     */
-    sameParty: boolean;
     /**
      * Cookie source scheme type.
      */
@@ -10719,8 +10712,6 @@ export namespace Network {
     SchemefulSameSiteStrict = 'SchemefulSameSiteStrict',
     SchemefulSameSiteLax = 'SchemefulSameSiteLax',
     SchemefulSameSiteUnspecifiedTreatedAsLax = 'SchemefulSameSiteUnspecifiedTreatedAsLax',
-    SamePartyFromCrossPartyContext = 'SamePartyFromCrossPartyContext',
-    SamePartyConflictsWithOtherAttributes = 'SamePartyConflictsWithOtherAttributes',
     NameValuePairExceedsMaxSize = 'NameValuePairExceedsMaxSize',
     DisallowedCharacter = 'DisallowedCharacter',
     NoCookieContent = 'NoCookieContent',
@@ -10744,7 +10735,6 @@ export namespace Network {
     SchemefulSameSiteStrict = 'SchemefulSameSiteStrict',
     SchemefulSameSiteLax = 'SchemefulSameSiteLax',
     SchemefulSameSiteUnspecifiedTreatedAsLax = 'SchemefulSameSiteUnspecifiedTreatedAsLax',
-    SamePartyFromCrossPartyContext = 'SamePartyFromCrossPartyContext',
     NameValuePairExceedsMaxSize = 'NameValuePairExceedsMaxSize',
     PortMismatch = 'PortMismatch',
     SchemeMismatch = 'SchemeMismatch',
@@ -10873,10 +10863,6 @@ export namespace Network {
      * Cookie Priority.
      */
     priority?: CookiePriority;
-    /**
-     * True if cookie is SameParty.
-     */
-    sameParty?: boolean;
     /**
      * Cookie source scheme type.
      */
@@ -12088,10 +12074,6 @@ export namespace Network {
      * Cookie Priority type.
      */
     priority?: CookiePriority;
-    /**
-     * True if cookie is SameParty.
-     */
-    sameParty?: boolean;
     /**
      * Cookie source scheme type.
      */

package/front_end/models/ai_assistance/injected.ts

@@ -9,10 +9,6 @@
  * They need remain isolated for importing other function so
  * bundling them for production does not create issues.
  */
-/* eslint-disable @devtools/no-adopted-style-sheets --
- * The scripts in this file aren't executed as part of DevTools front-end,
- * but are injected into the page.
- **/
 
 export const AI_ASSISTANCE_CSS_CLASS_NAME = 'ai-style-change';
 export const FREESTYLER_WORLD_NAME = 'DevTools AI Assistance';
@@ -100,19 +96,9 @@ export const PAGE_EXPOSED_FUNCTIONS = ['setElementStyles'];
 /**
  * Please see fileoverview
  */
-function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): void {
-  // Executed in another world
-  const global = globalThis as unknown as {
-    freestyler: FreestylerBinding,
-    setElementStyles: unknown,
-  };
-  async function setElementStyles(
-      el: HTMLElement&{
-        // eslint-disable-next-line
-        __freestylerClassName?: `${typeof AI_ASSISTANCE_CSS_CLASS_NAME}-${number}`,
-      },
-      styles: Record<string, string>,
-      ): Promise<void> {
+const setupSetElementStyles = `function setupSetElementStyles(prefix) {
+  const global = globalThis;
+  async function setElementStyles(el, styles) {
     let selector = el.tagName.toLowerCase();
     if (el.id) {
       selector = '#' + el.id;
@@ -131,7 +117,7 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
 
     // __freestylerClassName is not exposed to the page due to this being
     // run in the isolated world.
-    const className = el.__freestylerClassName ?? `${prefix}-${global.freestyler.id}`;
+    const className = el.__freestylerClassName ?? \`\${prefix}-\${global.freestyler.id}\`;
     el.__freestylerClassName = className;
     el.classList.add(className);
 
@@ -140,7 +126,6 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
       // if it's kebab case.
       el.style.removeProperty(key);
       // If it's camel case.
-      // @ts-expect-error this won't throw if wrong
       el.style[key] = '';
     }
 
@@ -168,7 +153,7 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
             continue;
           }
 
-          hasAiStyleChange = rule.selectorText.startsWith(`.${prefix}`);
+          hasAiStyleChange = rule.selectorText.startsWith(\`.\${prefix}\`);
           if (hasAiStyleChange) {
             stylesheet = sheet;
             break;
@@ -183,6 +168,6 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
   }
 
   global.setElementStyles = setElementStyles;
-}
+}`;
 
-export const injectedFunctions = `(${String(setupSetElementStyles)})('${AI_ASSISTANCE_CSS_CLASS_NAME}')`;
+export const injectedFunctions = `(${setupSetElementStyles})('${AI_ASSISTANCE_CSS_CLASS_NAME}')`;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7400,6 +7400,18 @@ export const NativeFunctions = [
     name: "queryFeatureSupport",
     signatures: [["feature"]]
   },
+  {
+    name: "LanguageModelToolCall",
+    signatures: [["init"]]
+  },
+  {
+    name: "LanguageModelToolSuccess",
+    signatures: [["init"]]
+  },
+  {
+    name: "LanguageModelToolError",
+    signatures: [["init"]]
+  },
   {
     name: "registerAnimator",
     signatures: [["name","animatorCtor"]]

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -564,9 +564,7 @@ export class PreloadingSummaryView extends UI.Widget.VBox {
     this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
     this.warningsView.show(this.warningsContainer);
 
-    const usedPreloadingContainer = new UI.Widget.VBox();
-    usedPreloadingContainer.contentElement.appendChild(this.usedPreloading);
-    usedPreloadingContainer.show(this.contentElement);
+    this.usedPreloading.show(this.contentElement);
   }
 
   override wasShown(): void {

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -1,7 +1,6 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../../ui/kit/kit.js';
 import '../../../../ui/components/report_view/report_view.js';
@@ -13,8 +12,6 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
-import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -399,18 +396,17 @@ function renderBadge(config: Badge): LitTemplate {
 
 type View = (input: ViewInput, output: undefined, target: HTMLElement|ShadowRoot) => void;
 
-const DEFAULT_VIEW: View =
-    ({speculativeLoadingStatusData, speculationsInitiatedSummaryData}: ViewInput, output, target): void => {
-      // Disabled until https://crbug.com/1079231 is fixed.
-      // clang-format off
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
   render(html`
     <style>${usedPreloadingStyles}</style>
     <devtools-report>
-      ${renderSpeculativeLoadingStatusForThisPageSections(speculativeLoadingStatusData)}
+      ${renderSpeculativeLoadingStatusForThisPageSections(input.speculativeLoadingStatusData)}
 
       <devtools-report-divider></devtools-report-divider>
 
-      ${renderSpeculationsInitiatedByThisPageSummarySections(speculationsInitiatedSummaryData)}
+      ${renderSpeculationsInitiatedByThisPageSummarySections(input.speculationsInitiatedSummaryData)}
 
       <devtools-report-divider></devtools-report-divider>
 
@@ -423,20 +419,19 @@ const DEFAULT_VIEW: View =
                   .context('learn-more')}
         >${i18nString(UIStrings.learnMore)}</x-link>
       </devtools-report-section>
-    </devtools-report>`, target, {host: target instanceof ShadowRoot ? target.host : undefined});
-      // clang-format on
-    };
+    </devtools-report>`, target);
+  // clang-format on
+};
 
 /**
  * TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
  * This also shows summary of speculations initiated by this page.
  **/
-export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class UsedPreloadingView extends UI.Widget.VBox {
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
-    super();
+    super({useShadowDom: true});
     this.#view = view;
   }
 
@@ -448,17 +443,15 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
   set data(data: UsedPreloadingViewData) {
     this.#data = data;
-    void this.#render();
+    this.requestUpdate();
   }
 
-  async #render(): Promise<void> {
+  override performUpdate(): void {
     const viewInput: ViewInput = {
       speculativeLoadingStatusData: this.#getSpeculativeLoadingStatusForThisPageData(),
       speculationsInitiatedSummaryData: this.#getSpeculationsInitiatedByThisPageSummaryData(),
     };
-    await RenderCoordinator.write('UsedPreloadingView render', () => {
-      this.#view(viewInput, undefined, this.#shadow);
-    });
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #isPrerenderLike(speculationAction: Protocol.Preload.SpeculationAction): boolean {
@@ -583,11 +576,3 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     return {badges, revealRuleSetView, revealAttemptViewWithFilter};
   }
 }
-
-customElements.define('devtools-resources-used-preloading-view', UsedPreloadingView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-used-preloading-view': UsedPreloadingView;
-  }
-}

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -6,9 +6,10 @@ 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 Root from '../../core/root/root.js';
+import * as AiCodeGeneration from '../../models/ai_code_generation/ai_code_generation.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import styles from './aiCodeCompletionTeaser.css.js';
@@ -61,17 +62,32 @@ const UIStringsNotTranslate = {
    */
   freDisclaimerTextAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
   /**
-   * @description Second disclaimer item text for the fre dialog.
+   * @description Code completion disclaimer item text for the fre dialog.
+   */
+  freDisclaimerTextAsYouType:
+      'As you type, relevant data is being send to Google to generate code suggestions. Press Tab to accept.',
+  /**
+   * @description Code generation disclaimer item text for the fre dialog.
+   */
+  freDisclaimerDescribeCodeInComment:
+      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+  /**
+   * @description Code generation disclaimer item text for the fre dialog.
+   */
+  freDisclaimerDescribeCodeInCommentForMacOs:
+      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
+  /**
+   * @description Privacy disclaimer item text for the fre dialog.
    */
   freDisclaimerTextPrivacy:
       'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
   /**
-   * @description Second disclaimer item text for the fre dialog when enterprise logging is off.
+   * @description Privacy disclaimer item text for the fre dialog when enterprise logging is off.
    */
   freDisclaimerTextPrivacyNoLogging:
       'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
-   * @description Third disclaimer item text for the fre dialog.
+   * @description Last disclaimer item text for the fre dialog.
    */
   freDisclaimerTextUseWithCaution: 'Use generated code snippets with caution',
   /**
@@ -192,15 +208,34 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
     }
   }
 
-  onAction = async(event: Event): Promise<void> => {
-    event.preventDefault();
-    const result = await FreDialog.show({
-      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
-      reminderItems: [
-        {
-          iconName: 'psychiatry',
-          content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
-        },
+  #createReminderItems(): Array<{
+    iconName: string,
+    content: Common.UIString.LocalizedString|LitTemplate,
+  }> {
+    const reminderItems: Array<{
+      iconName: string,
+      content: Common.UIString.LocalizedString | LitTemplate,
+    }> = [{
+      iconName: 'psychiatry',
+      content: lockedString(UIStringsNotTranslate.freDisclaimerTextAiWontAlwaysGetItRight),
+    }];
+
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale)) {
+      reminderItems.push(
+          {
+            iconName: 'code',
+            content: lockedString(UIStringsNotTranslate.freDisclaimerTextAsYouType),
+          },
+          {
+            iconName: 'text-analysis',
+            content: Host.Platform.isMac() ?
+                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInCommentForMacOs) :
+                lockedString(UIStringsNotTranslate.freDisclaimerDescribeCodeInComment),
+          });
+    }
+
+    reminderItems.push(
         {
           iconName: 'google',
           content: this.#noLogging ? lockedString(UIStringsNotTranslate.freDisclaimerTextPrivacyNoLogging) :
@@ -217,8 +252,16 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
             })}
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
           // clang-format on
-        }
-      ],
+        });
+    return reminderItems;
+  }
+
+  onAction = async(event: Event): Promise<void> => {
+    event.preventDefault();
+
+    const result = await FreDialog.show({
+      header: {iconName: 'smart-assistant', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: this.#createReminderItems(),
       onLearnMoreClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -10,16 +10,11 @@ import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './Comp
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
-  private readonly updateThrottler: Common.Throttler.Throttler;
-  private updateWhenVisible: boolean;
   constructor(computedStyleModel: ComputedStyleModel, delegatesFocus?: boolean) {
     super({useShadowDom: true, delegatesFocus, classes: ['flex-none']});
     this.computedStyleModelInternal = computedStyleModel;
     this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
     this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);
-
-    this.updateThrottler = new Common.Throttler.Throttler(100);
-    this.updateWhenVisible = false;
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -34,29 +29,10 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     return;
   }
 
-  update(): void {
-    this.updateWhenVisible = !this.isShowing();
-    if (this.updateWhenVisible) {
-      return;
-    }
-    void this.updateThrottler.schedule(innerUpdate.bind(this));
-
-    function innerUpdate(this: ElementsSidebarPane): Promise<void> {
-      return this.isShowing() ? this.doUpdate() : Promise.resolve();
-    }
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    if (this.updateWhenVisible) {
-      this.update();
-    }
-  }
-
   onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
   }
 

package/front_end/panels/elements/MetricsSidebarPane.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.
 /* eslint-disable @devtools/no-imperative-dom-api */
+/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
@@ -35,22 +36,21 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
+const {live} = Directives;
+
 export class MetricsSidebarPane extends ElementsSidebarPane {
   originalPropertyData: SDK.CSSProperty.CSSProperty|null;
   previousPropertyDataCandidate: SDK.CSSProperty.CSSProperty|null;
   private inlineStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration|null;
   private highlightMode: string;
-  private boxElements: Array<{
-    element: HTMLElement,
-    name: string,
-    backgroundColor: string,
-  }>;
+  private computedStyle: Map<string, string>|null;
   private isEditingMetrics?: boolean;
 
   constructor(computedStyleModel: ComputedStyleModel) {
@@ -61,15 +61,15 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     this.previousPropertyDataCandidate = null;
     this.inlineStyle = null;
     this.highlightMode = '';
-    this.boxElements = [];
+    this.computedStyle = null;
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('styles-metrics')}`);
   }
 
-  override doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     // "style" attribute might have changed. Update metrics unless they are being edited
     // (if a CSS property is added, a StyleSheetChanged event is dispatched).
     if (this.isEditingMetrics) {
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     // FIXME: avoid updates of a collapsed pane.
@@ -78,18 +78,20 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     if (!node || node.nodeType() !== Node.ELEMENT_NODE || !cssModel) {
       this.contentElement.removeChildren();
       this.element.classList.add('collapsed');
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     function callback(this: MetricsSidebarPane, style: Map<string, string>|null): void {
       if (!style || this.node() !== node) {
+        this.computedStyle = null;
         return;
       }
+      this.computedStyle = style;
       this.updateMetrics(style);
     }
 
     if (!node.id) {
-      return Promise.resolve();
+      return await Promise.resolve();
     }
 
     const promises = [
@@ -100,11 +102,11 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
         }
       }),
     ];
-    return Promise.all(promises) as unknown as Promise<void>;
+    return await (Promise.all(promises) as unknown as Promise<void>);
   }
 
   override onCSSModelChanged(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   /**
@@ -153,47 +155,35 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     }
 
-    for (const {element, name, backgroundColor} of this.boxElements) {
-      const shouldHighlight = !node || mode === 'all' || name === mode;
-      element.style.backgroundColor = shouldHighlight ? backgroundColor : '';
-      element.classList.toggle('highlighted', shouldHighlight);
+    if (this.computedStyle) {
+      this.updateMetrics(this.computedStyle, mode);
     }
   }
 
-  private updateMetrics(style: Map<string, string>): void {
+  private updateMetrics(style: Map<string, string>, highlightedMode = 'all'): void {
     // Updating with computed style.
-    const metricsElement = document.createElement('div');
-    metricsElement.className = 'metrics';
     const self = this;
 
     function createBoxPartElement(
-        this: MetricsSidebarPane, style: Map<string, string>, name: string, side: string,
-        suffix: string): HTMLDivElement {
-      const element = document.createElement('div');
-      element.className = side;
-
+        this: MetricsSidebarPane, style: Map<string, string>, name: string, side: string, suffix: string): LitTemplate {
       const propertyName = (name !== 'position' ? name + '-' : '') + side + suffix;
       let value = style.get(propertyName);
-      if (value === undefined) {
-        return element;
-      }
 
       if (value === '' || (name !== 'position' && value === 'unset')) {
         value = '\u2012';
       } else if (name === 'position' && value === 'auto') {
         value = '\u2012';
       }
-      value = value.replace(/px$/, '');
-      value = Platform.NumberUtilities.toFixedIfFloating(value);
-
-      element.textContent = value;
-      element.setAttribute('jslog', `${VisualLogging.value(propertyName).track({
-                             dblclick: true,
-                             keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                             change: true,
-                           })}`);
-      element.addEventListener('dblclick', this.startEditing.bind(this, element, name, propertyName, style), false);
-      return element;
+      value = value?.replace(/px$/, '');
+      value = value ? Platform.NumberUtilities.toFixedIfFloating(value) : value;
+      // clang-format off
+      return html`<div class=${side} jslog=${VisualLogging.value(propertyName).track({
+          dblclick: true, keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown', change: true,
+          })}
+          @dblclick=${(e: Event) => this.startEditing(e.currentTarget, name, propertyName, style)}
+          .innerText=${live(value ?? '')}>
+      </div>`;
+      // clang-format on
     }
 
     function getContentAreaWidthPx(style: Map<string, string>): string {
@@ -263,8 +253,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       Common.Color.Legacy.fromRGBA([0, 0, 0, 0]),
     ];
     const boxLabels = ['content', 'padding', 'border', 'margin', 'position'];
-    let previousBox: HTMLDivElement|null = null;
-    this.boxElements = [];
+    let previousBox: LitTemplate = nothing;
     for (let i = 0; i < boxes.length; ++i) {
       const name = boxes[i];
       const display = style.get('display');
@@ -282,76 +271,64 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
         continue;
       }
 
-      const boxElement = document.createElement('div');
-      boxElement.className = `${name} highlighted`;
+      const node = this.node();
+      const shouldHighlight = !node || highlightedMode === 'all' || name === highlightedMode;
       const backgroundColor = boxColors[i].asString(Common.Color.Format.RGBA) || '';
-      boxElement.style.backgroundColor = backgroundColor;
-      boxElement.setAttribute('jslog', `${VisualLogging.metricsBox().context(name).track({hover: true})}`);
-      boxElement.addEventListener(
-          'mouseover', this.highlightDOMNode.bind(this, true, name === 'position' ? 'all' : name), false);
-      this.boxElements.push({element: boxElement, name, backgroundColor});
-
-      if (name === 'content') {
-        const widthElement = document.createElement('span');
-        widthElement.textContent = getContentAreaWidthPx(style);
-        widthElement.addEventListener(
-            'dblclick', this.startEditing.bind(this, widthElement, 'width', 'width', style), false);
-        widthElement.setAttribute('jslog', `${VisualLogging.value('width').track({
-                                    dblclick: true,
-                                    keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                                    change: true,
-                                  })}`);
-
-        const heightElement = document.createElement('span');
-        heightElement.textContent = getContentAreaHeightPx(style);
-        heightElement.addEventListener(
-            'dblclick', this.startEditing.bind(this, heightElement, 'height', 'height', style), false);
-        heightElement.setAttribute('jslog', `${VisualLogging.value('height').track({
-                                     dblclick: true,
-                                     keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
-                                     change: true,
-                                   })}`);
-
-        const timesElement = document.createElement('span');
-        timesElement.textContent = ' × ';
-
-        boxElement.appendChild(widthElement);
-        boxElement.appendChild(timesElement);
-        boxElement.appendChild(heightElement);
-      } else {
-        const suffix = (name === 'border' ? '-width' : '');
 
-        const labelElement = document.createElement('div');
-        labelElement.className = 'label';
-        labelElement.textContent = boxLabels[i];
-        boxElement.appendChild(labelElement);
-
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'top', suffix));
-        boxElement.appendChild(document.createElement('br'));
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'left', suffix));
-
-        if (previousBox) {
-          boxElement.appendChild(previousBox);
-        }
-
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'right', suffix));
-        boxElement.appendChild(document.createElement('br'));
-        boxElement.appendChild(createBoxPartElement.call(this, style, name, 'bottom', suffix));
-      }
-
-      previousBox = boxElement;
+      const suffix = (name === 'border' ? '-width' : '');
+      // clang-format off
+      const box: LitTemplate = html`
+        <div
+            class="${name} ${shouldHighlight ? 'highlighted' : ''}"
+            style="background-color: ${shouldHighlight ? backgroundColor : ''}"
+            jslog=${VisualLogging.metricsBox().context(name).track({hover: true})}
+            @mouseover=${this.highlightDOMNode.bind(this, true, name === 'position' ? 'all' : name)}>
+        ${name === 'content' ? html`
+          <span jslog=${VisualLogging.value('width').track({
+                dblclick: true,
+                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+                change: true,
+              })}
+              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'width', 'width', style)}
+              .innerText=${live(getContentAreaWidthPx(style))}>
+          </span>
+          <span> × </span>
+          <span jslog=${VisualLogging.value('height').track({
+                dblclick: true,
+                keydown: 'Enter|Escape|ArrowUp|ArrowDown|PageUp|PageDown',
+                change: true,
+              })}
+              @dblclick=${(e: Event) => this.startEditing(e.currentTarget, 'height', 'height', style)}
+              .innerText=${live(getContentAreaHeightPx(style))}>
+          </span>` : html`
+          <div class="label">${boxLabels[i]}</div>
+            ${createBoxPartElement.call(this, style, name, 'top', suffix)}
+            <br>
+            ${createBoxPartElement.call(this, style, name, 'left', suffix)}
+            ${previousBox}
+            ${createBoxPartElement.call(this, style, name, 'right', suffix)}
+            <br>
+            ${createBoxPartElement.call(this, style, name, 'bottom', suffix)}`}
+          </div>`;
+      // clang-format on
+
+      previousBox = box;
     }
-    if (previousBox) {
-      metricsElement.appendChild(previousBox);
-    }
-    metricsElement.addEventListener('mouseover', this.highlightDOMNode.bind(this, false, 'all'), false);
-    metricsElement.addEventListener('mouseleave', this.highlightDOMNode.bind(this, false, 'all'), false);
-    this.contentElement.removeChildren();
-    this.contentElement.appendChild(metricsElement);
+    // clang-format off
+    render(html`
+      <div class="metrics" @mouseover=${this.highlightDOMNode.bind(this, false, 'all')}
+          @mouseleave=${this.highlightDOMNode.bind(this, false, 'all')}>
+        ${previousBox}
+      </div>`, this.contentElement);
+    // clang-format on
     this.element.classList.remove('collapsed');
   }
 
-  startEditing(targetElement: Element, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
+  startEditing(target: EventTarget|null, box: string, styleProperty: string, computedStyle: Map<string, string>): void {
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const targetElement = target as Element;
     if (UI.UIUtils.isBeingEdited(targetElement)) {
       return;
     }
@@ -429,7 +406,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       }
     }
     this.editingEnded(element, context);
-    this.update();
+    this.requestUpdate();
   }
 
   private applyUserInput(
@@ -519,7 +496,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
       }
 
       if (commitEditor) {
-        this.update();
+        this.requestUpdate();
       }
     }
   }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -208,7 +208,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     super(computedStyleModel, true /* delegatesFocus */);
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
-    Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.update.bind(this));
+    Common.Settings.Settings.instance().moduleSetting('text-editor-indent').addChangeListener(this.requestUpdate, this);
     this.toolbarPaneElement = this.createStylesSidebarToolbar();
     this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingSelectorOrStyle);
@@ -330,7 +330,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   revealProperty(cssProperty: SDK.CSSProperty.CSSProperty): void {
     void this.decorator.highlightProperty(cssProperty);
     this.lastRevealedProperty = cssProperty;
-    this.update();
+    this.requestUpdate();
   }
 
   jumpToProperty(propertyName: string, sectionName?: string, blockName?: string): boolean {
@@ -366,7 +366,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.#swatchPopoverHelper.hide();
     this.#updateAbortController?.abort();
     this.resetCache();
-    this.update();
+    this.requestUpdate();
   }
 
   private sectionsContainerKeyDown(event: Event): void {
@@ -534,7 +534,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.nodeStylesUpdatedForTest(node, false);
   }
 
-  override async doUpdate(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     this.#updateAbortController?.abort();
     this.#updateAbortController = new AbortController();
     await this.#innerDoUpdate(this.#updateAbortController.signal);
@@ -745,7 +745,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     this.resetCache();
-    this.update();
+    this.requestUpdate();
   }
 
   #scheduleResetUpdateIfNotEditing(): void {

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

@@ -108,6 +108,41 @@ export function rotateFlexDirectionIcon(direction: PhysicalDirection): IconInfo
   };
 }
 
+/**
+ * Rotates the grid direction icon in such way that it indicates
+ * the desired `direction` and the arrow in the icon is always at the bottom
+ * or at the right.
+ *
+ * By default, the icon is pointing top-down with the arrow on the right-hand side.
+ */
+export function rotateGridDirectionIcon(direction: PhysicalDirection): IconInfo {
+  // Default to LTR.
+  let flipX = true;
+  let flipY = false;
+  let rotate = -90;
+
+  if (direction === PhysicalDirection.RIGHT_TO_LEFT) {
+    rotate = 90;
+    flipY = false;
+    flipX = false;
+  } else if (direction === PhysicalDirection.TOP_TO_BOTTOM) {
+    rotate = 0;
+    flipX = false;
+    flipY = false;
+  } else if (direction === PhysicalDirection.BOTTOM_TO_TOP) {
+    rotate = 0;
+    flipX = false;
+    flipY = true;
+  }
+
+  return {
+    iconName: 'grid-direction',
+    rotate,
+    scaleX: flipX ? -1 : 1,
+    scaleY: flipY ? -1 : 1,
+  };
+}
+
 export function rotateAlignContentIcon(iconName: string, direction: PhysicalDirection): IconInfo {
   return {
     iconName,
@@ -156,6 +191,14 @@ function flexDirectionIcon(value: string): (styles: ComputedStyles) => IconInfo
   return getIcon;
 }
 
+function gridDirectionIcon(value: string): (styles: ComputedStyles) => IconInfo {
+  function getIcon(computedStyles: ComputedStyles): IconInfo {
+    const directions = getPhysicalDirections(computedStyles);
+    return rotateGridDirectionIcon(directions[value]);
+  }
+  return getIcon;
+}
+
 function flexAlignContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
@@ -178,7 +221,9 @@ function flexAlignContentIcon(iconName: string): (styles: ComputedStyles) => Ico
 function gridAlignContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateAlignContentIcon(iconName, directions.column);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.row : directions.column;
+    return rotateAlignContentIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -194,7 +239,9 @@ function flexJustifyContentIcon(iconName: string): (styles: ComputedStyles) => I
 function gridJustifyContentIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateJustifyContentIcon(iconName, directions.row);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.column : directions.row;
+    return rotateJustifyContentIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -202,7 +249,9 @@ function gridJustifyContentIcon(iconName: string): (styles: ComputedStyles) => I
 function gridJustifyItemsIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateJustifyItemsIcon(iconName, directions.row);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.column : directions.row;
+    return rotateJustifyItemsIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -229,7 +278,9 @@ function flexAlignItemsIcon(iconName: string): (styles: ComputedStyles) => IconI
 function gridAlignItemsIcon(iconName: string): (styles: ComputedStyles) => IconInfo {
   function getIcon(computedStyles: ComputedStyles): IconInfo {
     const directions = getPhysicalDirections(computedStyles);
-    return rotateAlignItemsIcon(iconName, directions.column);
+    const gridAutoFlow = computedStyles.get('grid-auto-flow') || 'row';
+    const direction = gridAutoFlow.includes('column') ? directions.row : directions.column;
+    return rotateAlignItemsIcon(iconName, direction);
   }
   return getIcon;
 }
@@ -338,6 +389,8 @@ const flexItemIcons = new Map([
 ]);
 
 const gridContainerIcons = new Map([
+  ['grid-auto-flow: row', gridDirectionIcon('row')],
+  ['grid-auto-flow: column', gridDirectionIcon('column')],
   ['align-content: center', gridAlignContentIcon('align-content-center')],
   ['align-content: space-around', gridAlignContentIcon('align-content-space-around')],
   ['align-content: space-between', gridAlignContentIcon('align-content-space-between')],

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

@@ -4,8 +4,10 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Input from '../../../ui/components/input/input.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -25,6 +27,10 @@ const UIStrings = {
    * @example {row} propertyValue
    */
   deselectButton: 'Remove {propertyName}: {propertyValue}',
+  /**
+   * @description Label for the dense checkbox in the grid-auto-flow editor.
+   */
+  denseLabel: 'Dense',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/StylePropertyEditor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -89,6 +95,7 @@ export class StylePropertyEditor extends HTMLElement {
     // clang-format off
     render(html`
       <style>${stylePropertyEditorStyles}</style>
+      <style>${Input.checkboxStyles}</style>
       <div class="container">
         ${this.editableProperties.map(prop => this.#renderProperty(prop))}
       </div>
@@ -106,6 +113,12 @@ export class StylePropertyEditor extends HTMLElement {
       'property-value': true,
       'not-authored': notAuthored,
     });
+
+    // Special handling for grid-auto-flow with dense checkbox
+    if (prop.propertyName === 'grid-auto-flow') {
+      return this.#renderGridAutoFlowProperty(prop, shownValue, classes);
+    }
+
     return html`<div class="row">
       <div class="property">
         <span class="property-name">${prop.propertyName}</span>: <span class=${classes}>${shownValue}</span>
@@ -116,6 +129,55 @@ export class StylePropertyEditor extends HTMLElement {
     </div>`;
   }
 
+  #renderGridAutoFlowProperty(
+      prop: EditableProperty, shownValue: string|undefined,
+      classes: ReturnType<typeof Directives.classMap>): Lit.TemplateResult {
+    const authoredValue = this.#authoredProperties.get(prop.propertyName);
+
+    const isDense = authoredValue === 'dense' || authoredValue === 'row dense' || authoredValue === 'column dense';
+    const isRow = authoredValue === 'row' || authoredValue === 'row dense';
+    const isColumn = authoredValue === 'column' || authoredValue === 'column dense';
+
+    return html`<div class="row">
+      <div class="property">
+        <span class="property-name">${prop.propertyName}</span>: <span class=${classes}>${shownValue}</span>
+      </div>
+      <div class="buttons">
+        ${this.#renderButton('row', prop.propertyName, isRow)}
+        ${this.#renderButton('column', prop.propertyName, isColumn)}
+        <devtools-checkbox
+          .checked=${isDense}
+          @change=${(e: Event) => this.#onDenseCheckboxChange(e, isRow, isColumn)}
+        >
+          ${i18nString(UIStrings.denseLabel)}
+        </devtools-checkbox>
+      </div>
+    </div>`;
+  }
+
+  #onDenseCheckboxChange(e: Event, isRow: boolean, isColumn: boolean): void {
+    const checked = (e.target as HTMLInputElement).checked;
+    const propertyName = 'grid-auto-flow';
+    const currentValue = this.#authoredProperties.get(propertyName);
+
+    let newValue = '';
+    if (isRow) {
+      newValue = checked ? 'row dense' : 'row';
+    } else if (isColumn) {
+      newValue = checked ? 'column dense' : 'column';
+    } else {
+      newValue = checked ? 'dense' : '';
+    }
+
+    if (currentValue) {
+      this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+    }
+
+    if (newValue) {
+      this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+    }
+  }
+
   #renderButton(propertyValue: string, propertyName: string, selected = false): Lit.TemplateResult {
     const query = `${propertyName}: ${propertyValue}`;
     const iconInfo = this.findIcon(query, this.#computedProperties);
@@ -141,7 +203,30 @@ export class StylePropertyEditor extends HTMLElement {
   }
 
   #onButtonClick(propertyName: string, propertyValue: string, selected: boolean): void {
-    if (selected) {
+    if (propertyName === 'grid-auto-flow') {
+      const currentValue = this.#authoredProperties.get(propertyName);
+      const isDense = currentValue?.includes('dense') || false;
+
+      if (selected) {
+        const newValue = isDense ? 'dense' : '';
+
+        if (currentValue) {
+          this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+        }
+
+        if (newValue) {
+          this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+        }
+      } else {
+        const newValue = isDense ? `${propertyValue} dense` : propertyValue;
+
+        if (currentValue) {
+          this.dispatchEvent(new PropertyDeselectedEvent(propertyName, currentValue));
+        }
+
+        this.dispatchEvent(new PropertySelectedEvent(propertyName, newValue));
+      }
+    } else if (selected) {
       this.dispatchEvent(new PropertyDeselectedEvent(propertyName, propertyValue));
     } else {
       this.dispatchEvent(new PropertySelectedEvent(propertyName, propertyValue));
@@ -256,6 +341,13 @@ export const FlexboxEditableProperties = [
 ];
 
 export const GridEditableProperties = [
+  {
+    propertyName: 'grid-auto-flow',
+    propertyValues: [
+      'row',
+      'column',
+    ],
+  },
   {
     propertyName: 'align-content',
     propertyValues: [

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 5dd7406e2cf875f110274e22c3bd287d32086055
+Revision: cd78b67fa4902cc7cdd3a0aa6dfedf054e4b43d1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1766,6 +1766,8 @@ export const knownContextValues = new Set([
   'grid-area',
   'grid-auto-columns',
   'grid-auto-flow',
+  'grid-auto-flow-column',
+  'grid-auto-flow-row',
   'grid-auto-rows',
   'grid-column',
   'grid-column-end',

package/mcp/mcp.ts

@@ -35,6 +35,7 @@ export {
 export {AgentFocus} from '../front_end/models/ai_assistance/performance/AIContext.js';
 export {DebuggerWorkspaceBinding} from '../front_end/models/bindings/DebuggerWorkspaceBinding.js';
 export {CrUXManager} from '../front_end/models/crux-manager/CrUXManager.js';
+export * as Formatter from '../front_end/models/formatter/formatter.js';
 export {Issue} from '../front_end/models/issues_manager/Issue.js';
 export {
   AggregatedIssue,

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1568190"
+  "version": "1.0.1568864"
 }