chrome-devtools-frontend 1.0.1665921 → 1.0.1666631

package/front_end/models/issues_manager/descriptions/selectivePermissionsIntervention.md

@@ -1,7 +1,7 @@
-# Selective Permissions Intervention
+# Selective permissions intervention
 
-The Selective Permissions Intervention blocks calls to privacy-sensitive APIs when they are called from ad scripts in order to align the permission grant with the user's intent. The particular API that was blocked, the call-stack that triggered the intervention, and why the script that called the API is considered ad-related is shown below.
+The Selective Permissions Intervention blocks calls to privacy-sensitive APIs when they are called from ad scripts to align the permission grant with the user’s intent. The particular API that was blocked, the call-stack that triggered the intervention, and why the script that called the API is considered ad-related is shown below.
 
 Note that Chrome considers any script with a URL that matches a rule in the [filterlist](ChromeFilterlistRepository) as ad script, and the matching rule is shown in the Ad Ancestry section. In addition, any script loaded while an ad script is in the JavaScript stack will also be considered an ad script by Chrome and is also shown in Ad Ancestry.
 
-If you believe this intervention  was in error (e.g., this call would occur even when loading the page with an ad blocker enabled), then please [file a bug](SelectivePermissionsInterventionIssue).
+If you believe this intervention was in error (e.g., this call would occur even when loading the page with an ad blocker enabled), then [file a bug](SelectivePermissionsInterventionIssue).

package/front_end/models/issues_manager/descriptions/sharedArrayBuffer.md

@@ -2,6 +2,6 @@
 
 SharedArrayBuffers (SABs) can be used to construct high-resolution timers. High-resolution timers simplify Spectre attacks on cross-origin resources.
 
-To mitigate security risks across browsers, SharedArrayBuffers are gated behind cross-origin isolated contexts starting with Chrome 92 (July 2021). To continue using SharedArrayBuffers, please ensure that this page opts-into cross-origin isolation by setting Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy appropriately.
+To mitigate security risks across browsers, SharedArrayBuffers are gated behind cross-origin isolated contexts starting with Chrome 92 (July 2021). To continue using SharedArrayBuffers, ensure that this page opts-into cross-origin isolation by setting Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy appropriately.
 
 Note that for each iframe, only the first issue is reported for performance reasons.

package/front_end/models/issues_manager/descriptions/sharedDictionaryUseErrorCrossOriginNoCorsRequest.md

@@ -1 +1 @@
-# Found a matching dictionary, but the dictionary can't be used for the cross origin no-cors request
+# Found a matching dictionary, but the dictionary can’t be used for the cross origin no-cors request

package/front_end/models/issues_manager/descriptions/sharedDictionaryUseErrorMatchingDictionaryNotUsed.md

@@ -1,3 +1,3 @@
-# Found a matching dictionary, but the dictionary is not used for the response
+# Found a matching dictionary, but the dictionary isn’t used for the response
 
 Consider revisiting the `match` pattern or `match-dest` of the dictionary.

package/front_end/models/issues_manager/descriptions/sharedDictionaryUseErrorUnexpectedContentDictionaryHeader.md

@@ -1 +1 @@
-# Can't decode the response because the header of dictionary compressed stream was not set correctly
+# Can’t decode the response because the header of dictionary compressed stream wasn’t set correctly

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorCossOriginNoCorsRequest.md

@@ -1 +1 @@
-# Can't register the cross origin response fetched by a no-cors request as as a dictionary
+# Can’t register the cross origin response fetched by a no-cors request as as a dictionary

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorDisallowedBySettings.md

@@ -1 +1 @@
-# Compression Dictionary is disabled by settings
+# compression dictionary is disabled by settings

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorExpiredResponse.md

@@ -1,3 +1,3 @@
-# The response can't be used as a dictionary because its freshness is expired
+# The response can’t be used as a dictionary because its freshness is expired
 
 Check `Cache-Control` and `Expires` headers.

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorFeatureDisabled.md

@@ -1,3 +1,3 @@
-# Compression Dictionary Transport feature is disabled
+# compression dictionary transport feature is disabled
 
-Please enable chrome://flags/#enable-compression-dictionary-transport
+enable chrome://flags/#enable-compression-dictionary-transport

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorInvalidStructuredHeader.md

@@ -1 +1 @@
-# `Use-As-Dictionary` HTTP response header is not a valid Structured Field value
+# `Use-As-Dictionary` HTTP response header isn’t a valid Structured Field Value

package/front_end/models/issues_manager/descriptions/sharedDictionaryWriteErrorNavigationRequest.md

@@ -1,3 +1,3 @@
-# Can't register the response of the navigation request as a dictionary
+# Can’t register the response of the navigation request as a dictionary
 
-Navigation responses are not usable as compression dictionaries.
+Navigation responses aren’t usable as compression dictionaries.

package/front_end/models/issues_manager/descriptions/sriInvalidSignatureHeader.md

@@ -1,9 +1,9 @@
-# A `signature` header is not formatted as a Structured Field Dictionary.
+# A `signature` header isn’t formatted as a Structured Field Dictionary
 
-Responses' [`signature`](signatureHeader) header should be formatted as a
-[Dictionary](sfDictionary) containing one or more signatures. Each member's key
+Responses’ [`signature`](signatureHeader) header should be formatted as a
+[Dictionary](sfDictionary) containing one or more signatures. Each member’s key
 is a label for the signature which maps it to the relevant metadata defined in
-a [`signature-input`](signatureInputHeader) header. Each member's value is a
+a [`signature-input`](signatureInputHeader) header. Each member’s value is a
 [Byte Sequence](sfByteSequence) containing the signature itself.
 
 For example, the following header contains a single Ed25519 signature labeled

package/front_end/models/issues_manager/descriptions/sriInvalidSignatureInputHeader.md

@@ -1,10 +1,10 @@
-# A `signature-input` header is not formatted as a Structured Field Dictionary.
+# A `signature-input` header isn’t formatted as a Structured Field Dictionary
 
-Responses' [`signature-input`](signatureInputHeader) header should be formatted
+Responses’ [`signature-input`](signatureInputHeader) header should be formatted
 as a [Dictionary](sfDictionary) containing metadata regarding one or more
-signatures. Each member's key is a label for the metadata which maps it to the
+signatures. Each member’s key is a label for the metadata which maps it to the
 relevant signature defined in a [`signature`](signatureHeader) header. Each
-member's value is an [Inner List](sfInnerList) containing a set of components
+member’s value is an [Inner List](sfInnerList) containing a set of components
 over which a signature is generated. The list may have one or more parameters.
 
 For example, the following header contains metadata for a signature labeled

package/front_end/models/issues_manager/descriptions/sriMissingSignatureHeader.md

@@ -1,4 +1,4 @@
-# A `signature-input` header was specified without an accompanying `signature` header.
+# A `signature-input` header was specified without an accompanying `signature` header
 
 [`signature-input`](signatureInputHeader) headers specify metadata that allows
 verification of signatures delivered with a response. If no

package/front_end/models/issues_manager/descriptions/sriMissingSignatureInputHeader.md

@@ -1,7 +1,7 @@
-# A `signature` header was specified without an accompanying `signature-input` header.
+# A `signature` header was specified without an accompanying `signature-input` header
 
 [`signature`](signatureHeader) headers specify signatures which can be verified
-against a given response. Verification cannot proceed, however, in the absence of a
+against a given response. Verification can’t proceed, however, in the absence of a
 [`signature-input`](signatureInputHeader) header which defines relevant metadata
 which allows servers and clients to agree on the exact message which is being
 signed. Both headers must be present for verification to proceed.

package/front_end/models/issues_manager/descriptions/sriSignatureHeaderValueIsIncorrectLength.md

@@ -1,7 +1,7 @@
-# A `signature` header contains a signature which cannot be verified.
+# A `signature` header contains a signature which can’t be verified
 
 This browser can only verify Ed25519 signatures, which are 512 bits long. The
-signature delivered with this response does not match that length.
+signature delivered with this response doesn’t match that length.
 
 For example, the following header contains a valid Ed25519 signature labeled
 "label":

package/front_end/models/issues_manager/descriptions/sriSignatureHeaderValueIsNotByteSequence.md

@@ -1,9 +1,9 @@
-# A `signature` header member's value is not a Byte Sequence.
+# A `signature` header member’s value isn’t a Byte Sequence
 
-Responses' [`signature`](signatureHeader) header should be formatted as a
-[Dictionary](sfDictionary) containing one or more signatures. Each member's key
+Responses’ [`signature`](signatureHeader) header should be formatted as a
+[Dictionary](sfDictionary) containing one or more signatures. Each member’s key
 is a label for the signature which maps it to the relevant metadata defined in
-a [`signature-input`](signatureInputHeader) header. Each member's value is a
+a [`signature-input`](signatureInputHeader) header. Each member’s value is a
 [Byte Sequence](sfByteSequence) containing the signature itself.
 
 For example, the following header contains a single Ed25519 signature labeled

package/front_end/models/issues_manager/descriptions/sriSignatureHeaderValueIsParameterized.md

@@ -1,9 +1,9 @@
-# A `signature` header member's value is parameterized.
+# A `signature` header member’s value is parameterized
 
-Responses' [`signature`](signatureHeader) header should be formatted as a
-[Dictionary](sfDictionary) containing one or more signatures. Each member's key
+Responses’ [`signature`](signatureHeader) header should be formatted as a
+[Dictionary](sfDictionary) containing one or more signatures. Each member’s key
 is a label for the signature which maps it to the relevant metadata defined in a
-[`signature-input`](signatureInputHeader) header. Each member's value is a
+[`signature-input`](signatureInputHeader) header. Each member’s value is a
 [Byte Sequence](sfByteSequence) containing the signature itself, with no
 additional parameters specified.
 

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidComponentName.md

@@ -1,4 +1,4 @@
-# A `signature-input` header member's value contains an unknown component.
+# A `signature-input` header member’s value contains an unknown component
 
 The metadata delivered via [`signature-input`](signatureInputHeader) can only
 contain a limited set of components in the list it specifies. The known

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidComponentType.md

@@ -1,6 +1,6 @@
-# A `signature-input` header's component is not a string.
+# A `signature-input` header’s component isn’t a string
 
-Responses' [`signature-input`](signatureInputHeader) header's members' values
+Responses’ [`signature-input`](signatureInputHeader) header’s members’ values
 are [Inner Lists](sfInnerList) whose contents are each strings. Perhaps you
 forgot double-quotes around a component?
 

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidDerivedComponentParameter.md

@@ -1,4 +1,4 @@
-# Invalid parameter on a derived component in a `signature-input` header.
+# Invalid parameter on a derived component in a `signature-input` header
 
 Derived components must be specified as deriving from the request, using the
 [`req` parameter](componentParameterReq). No other parameter may be specified.

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidHeaderComponentParameter.md

@@ -1,4 +1,4 @@
-# Invalid parameter on a header component in a `signature-input` header.
+# Invalid parameter on a header component in a `signature-input` header
 
 The header [`unencoded-digest`](unencodedDigestHeader) must be specified as
 being strictly serialized in the signature base, using the

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderInvalidParameter.md

@@ -1,6 +1,6 @@
-# Invalid parameter on the list of components in a `signature-input` header.
+# Invalid parameter on the list of components in a `signature-input` header
 
-The `signature-input` header's [Inner Lists](sfInnerList) must be specified with the
+The `signature-input` header’s [Inner Lists](sfInnerList) must be specified with the
 [`keyid` and `type` parameters](signatureParameters). The following parameters may
 also be specified:
 

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderKeyIdLength.md

@@ -1,10 +1,10 @@
-# Invalid `keyid` value in a `signature-input` header.
+# Invalid `keyid` value in a `signature-input` header
 
-The key specified in a [`signature-input`](signatureInputHeader) header's
-[`keyid` parameter](signatureParameters) is not a base64-encoded
-256 bit sequence, and therefore cannot be decoded as an Ed25519 public key.
+The key specified in a [`signature-input`](signatureInputHeader) header’s
+[`keyid` parameter](signatureParameters) isn’t a base64-encoded
+256 bit sequence, and therefore can’t be decoded as an Ed25519 public key.
 
-Note that the `keyid` parameter's value is a string, not a
+Note that the `keyid` parameter’s value is a string, not a
 [Byte Sequence](sfByteSequence). For example:
 
 ```

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderMissingLabel.md

@@ -1,6 +1,6 @@
-# Label mismatch between `signature` and `signature-input` headers.
+# Label mismatch between `signature` and `signature-input` headers
 
 A [`signature`](signatureHeader) header specifies a signature whose label does
 not appear in a corresponding [`signature-input`](signatureInputHeader) header.
-Without a `signature-input` header's definition of the signature's metadata,
-the signature cannot be verified.
+Without a `signature-input` header’s definition of the signature’s metadata,
+the signature can’t be verified.

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderMissingRequiredParameters.md

@@ -1,6 +1,6 @@
-# Missing a required parameter on the list of components in a `signature-input` header.
+# Missing a required parameter on the list of components in a `signature-input` header
 
-The [`signature-input`][signatureInputHeader] header's [Inner Lists](sfInnerList)
+The [`signature-input`][signatureInputHeader] header’s [Inner Lists](sfInnerList)
 must be specified with both the [`keyid` and `type` parameters](signatureParameters).
 
 ```

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderValueMissingComponents.md

@@ -1,6 +1,6 @@
-# Missing a required component in a `signature-input` header.
+# Missing a required component in a `signature-input` header
 
-The [`signature-input`](signatureInputHeader) header's
+The [`signature-input`](signatureInputHeader) header’s
 [Inner Lists](sfInnerList) must contain the string "`unencoded-digest`" with an
 `sf` parameter:
 

package/front_end/models/issues_manager/descriptions/sriSignatureInputHeaderValueNotInnerList.md

@@ -1,6 +1,6 @@
-# A `signature-input` header has a member whose value is not an Inner List.
+# A `signature-input` header has a member whose value isn’t an Inner List
 
-The value of each member of a [`signature-input`](signatureInputHeader) header's
+The value of each member of a [`signature-input`](signatureInputHeader) header’s
 [Dictionary][sfDictionary] must be an [Inner List](sfInnerList) containing the
 set of components over which a signature is generated.
 

package/front_end/models/issues_manager/descriptions/sriValidationFailedIntegrityMismatch.md

@@ -1,10 +1,10 @@
-# Integrity verification failed.
+# Integrity verification failed
 
 The signature associated with a response could be successfully verified, but the
 public keys asserted in the [`signature-input`](signatureInputHeader)
-header's [`keyid` parameter](signatureParameters) do not match the integrity
-assertions made by the request's initiator. Verificiation failed.
+header’s [`keyid` parameter](signatureParameters) don’t match the integrity
+assertions made by the request’s initiator. Verification failed.
 
-The following are the keys specified by the request's initiator:
+The following are the keys specified by the request’s initiator:
 
 {PLACEHOLDER_integrityAssertions}

package/front_end/models/issues_manager/descriptions/sriValidationFailedInvalidLength.md

@@ -1,5 +1,5 @@
-# Signature verification failed: the signature provided is not an Ed25519 signature.
+# Signature verification failed: the signature provided isn’t an Ed25519 signature
 
-The signature specified in a [`signature`](signatureHeader) header is not a
-base64-encoded 512 bit byte sequence, and can therefore not be verified as an
+The signature specified in a [`signature`](signatureHeader) header isn’t a
+base64-encoded 512 bit Byte Sequence, and can therefore not be verified as an
 Ed25519 signature.

package/front_end/models/issues_manager/descriptions/sriValidationFailedSignatureExpired.md

@@ -1,6 +1,6 @@
-# Signature verification failed: the signature is expired.
+# Signature verification failed: the signature is expired
 
 The [`expires` parameter](signatureParameters) specified in a
 [`signature-input`](signatureInputHeader) header is a UNIX timestamp
 representing a time in the past. The signature has therefore expired, and
-verification is not possible.
+verification isn’t possible.

package/front_end/models/issues_manager/descriptions/sriValidationFailedSignatureMismatch.md

@@ -1,7 +1,7 @@
-# Signature verification failed.
+# Signature verification failed
 
 The public key specified in the [`signature-input`](signatureInputHeader)
-header's [`keyid` parameter](signatureParameters) does not match the signature
+header’s [`keyid` parameter](signatureParameters) doesn’t match the signature
 specified in the [`signature`](signatureHeader) header. Verification failed.
 
 The following is the signature base over which the verification attempt was made:

package/front_end/models/issues_manager/descriptions/stylesheetLateImport.md

@@ -1,4 +1,4 @@
 # Define @import rules at the top of the stylesheet
 
-An @import rule was ignored because it wasn't defined at the top of the stylesheet. Such rules must appear at the top,
+An @import rule was ignored because it wasn’t defined at the top of the stylesheet. Such rules must appear at the top,
 before any style declaration and any other at-rule with the exception of @charset and @layer.

package/front_end/models/issues_manager/descriptions/summaryElementAccessibilityInteractiveContentSummaryDescendant.md

@@ -1,3 +1,3 @@
 # Interactive element inside of a <summary> element
 
-An interactive element was found within a `<summary>` element. These elements will not consistently be accessible to people navigating by keyboard or using assistive technology.
+An interactive element was found within a `<summary>` element. These elements won’t consistently be accessible to people navigating by keyboard or using assistive technology.

package/front_end/models/issues_manager/descriptions/unencodedDigestIncorrectDigestLength.md

@@ -1,7 +1,7 @@
-# An `unencoded-digest` header contains a digest with an incorrect length.
+# An `unencoded-digest` header contains a digest with an incorrect length
 
 [`unencoded-digest`](unencodedDigestHeader) headers contain SHA2 digests of a
-response's body. The digest delivered with this response is not the correct
+response’s body. The digest delivered with this response isn’t the correct
 length for the algorithm specified. SHA-256 digests should be 256 bits long,
 SHA-512 digests 512 bits long. For example, if the body was "Hello, world.", the
 following might be an appropriate header:

package/front_end/models/issues_manager/descriptions/unencodedDigestIncorrectDigestType.md

@@ -1,10 +1,10 @@
-# An `unencoded-digest` header contains a digest with an invalid type.
+# An `unencoded-digest` header contains a digest with an invalid type
 
 [`unencoded-digest`](unencodedDigestHeader) headers must be formatted as a
-[Dictionary](sfDictionary), wherein each member's label specifies the hashing
+[Dictionary](sfDictionary), wherein each member’s label specifies the hashing
 algorithm, and the value is a [Byte Sequence](sfByteSequence) containing the
 digest. The digest delivered with this response did not deliver the digest as a
-byte sequence.
+Byte Sequence.
 
 For example, if the body was "Hello, world.":
 

package/front_end/models/issues_manager/descriptions/unencodedDigestMalformedDictionary.md

@@ -1,7 +1,7 @@
-# An `unencoded-digest` header cannot be parsed.
+# An `unencoded-digest` header can’t be parsed
 
 [`unencoded-digest`](unencodedDigestHeader) headers must be formatted as a
-[Dictionary](sfDictionary), wherein each member's label specifies the hashing
+[Dictionary](sfDictionary), wherein each member’s label specifies the hashing
 algorithm, and the value is a [Byte Sequence](sfByteSequence) containing the
 digest. The digest delivered with this response did not format the response
 correctly.

package/front_end/models/issues_manager/descriptions/unencodedDigestUnknownAlgorithm.md

@@ -1,4 +1,4 @@
-# An `unencoded-digest` header contains a digest with an invalid algorithm.
+# An `unencoded-digest` header contains a digest with an invalid algorithm
 
 [`unencoded-digest`](unencodedDigestHeader) headers support only two hashing
 algorithms, SHA-256, and SHA-512. The digests delivered with this response

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 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-imperative-dom-api */
 
 /*
  * Copyright (C) 2008 Nokia Inc.  All rights reserved.
@@ -104,7 +103,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     Common.EventTarget.removeEventListeners(this.eventListeners);
     this.domStorage = domStorage;
     const storageKind = domStorage.isLocalStorage ? 'local-storage-data' : 'session-storage-data';
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context(storageKind)}`);
+    this.jslog = `${VisualLogging.pane().context(storageKind)}`;
     if (domStorage.storageKey) {
       this.toolbar?.setStorageKey(domStorage.storageKey);
     }

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -436,6 +436,18 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     }
   }
 
+  protected set jslog(jslog: string|undefined) {
+    if (this.#jslog === jslog) {
+      return;
+    }
+    this.#jslog = jslog;
+    this.performUpdate();
+  }
+
+  protected get jslog(): string|undefined {
+    return this.#jslog;
+  }
+
   set editable(editable: boolean) {
     this.#editable = editable;
     this.performUpdate();

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -275,7 +275,7 @@ export class StylePropertiesSection {
     this.selectorElement.classList.add('selector');
     this.selectorElement.textContent = headerText;
     selectorContainer.appendChild(this.selectorElement);
-    this.selectorElement.addEventListener('mouseenter', this.onMouseEnterSelector.bind(this), false);
+    this.selectorElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(), false);
     this.selectorElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     this.#specificityTooltips = selectorContainer.createChild('span');
 
@@ -679,23 +679,35 @@ export class StylePropertiesSection {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
   }
 
-  private onMouseEnterSelector(): void {
+  private onMouseEnterSelector(ruleOrSelector?: SDK.CSSRule.CSSStyleRule|string): void {
     if (this.hoverTimer) {
       clearTimeout(this.hoverTimer);
     }
-    this.hoverTimer = window.setTimeout(this.highlight.bind(this), 300);
+    this.hoverTimer = window.setTimeout(this.highlight.bind(this, undefined, ruleOrSelector), 300);
   }
 
-  highlight(mode: string|undefined = 'all'): void {
+  /**
+   * Highlights the DOM node associated with this style section in the page overlay.
+   * Use `ruleOrSelector` to highlight elements matching a specific parent/ancestor
+   * rule or selector, or omit it to use the selector of the rule displayed in this section.
+   *
+   * @param mode Highlight mode (defaults to `'all'`).
+   * @param ruleOrSelector Parent selector string, parent rule, or `undefined`.
+   */
+  highlight(mode: string|undefined = 'all', ruleOrSelector?: SDK.CSSRule.CSSStyleRule|string): void {
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
     const node = this.stylesContainer.node();
     if (!node) {
       return;
     }
-    const selectorList =
-        this.styleInternal.parentRule && this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule ?
-        this.styleInternal.parentRule.selectorText() :
-        undefined;
+    let selectorList: string|undefined;
+    if (typeof ruleOrSelector === 'string') {
+      selectorList = ruleOrSelector;
+    } else if (ruleOrSelector instanceof SDK.CSSRule.CSSStyleRule) {
+      selectorList = ruleOrSelector.selectorText();
+    } else if (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
+      selectorList = this.styleInternal.parentRule.selectorText();
+    }
     node.domModel().overlayModel().highlightInOverlay({node, selectorList}, mode);
   }
 
@@ -1140,6 +1152,8 @@ export class StylePropertiesSection {
       }
 
       const selectorElement = container.createChild('span', 'selector');
+      selectorElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(parentRule), false);
+      selectorElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
       const specificityContainer = container.createChild('span');
       this.renderSelectorsToElement(parentRule.selectors, matchingSelectors, this.elementToSelectorIndex,
                                     selectorElement, specificityContainer);
@@ -1150,6 +1164,8 @@ export class StylePropertiesSection {
     }
 
     const nestingElement = document.createElement('div');
+    nestingElement.addEventListener('mouseenter', () => this.onMouseEnterSelector(nestingSelector), false);
+    nestingElement.addEventListener('mouseleave', this.onMouseOutSelector.bind(this), false);
     nestingElement.textContent = `${nestingSelector} {`;
     return nestingElement;
   }
@@ -1502,7 +1518,7 @@ export class StylePropertiesSection {
   }
 
   markSelectorHighlights(): void {
-    const selectors = this.selectorElement.getElementsByClassName('simple-selector');
+    const selectors = this.element.getElementsByClassName('simple-selector');
     const regex = this.stylesContainer.filterRegex();
     for (let i = 0; i < selectors.length; ++i) {
       const selectorMatchesFilter = regex?.test(selectors[i].textContent || '');

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -235,6 +235,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #shouldRenderLazily = false;
   #lazyRenderObserver?: IntersectionObserver;
   #lazyRenderCallbacks = new WeakMap<Element, () => void>();
+  #elementsForSyncViewportCheck: Element[] = [];
   #updateId = 0;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
@@ -990,6 +991,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     const focusedIndex = this.focusedSectionIndex();
 
+    this.#elementsForSyncViewportCheck = [];
     this.linkifier.reset();
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
 
@@ -1047,6 +1049,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
 
     this.sectionsContainer.contentElement.appendChild(fragment);
+    this.#performSyncViewportCheck();
 
     if (elementToFocus) {
       elementToFocus.focus();
@@ -1655,9 +1658,54 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, {rootMargin: '100px'});
     }
     this.#lazyRenderCallbacks.set(element, callback);
+    this.#elementsForSyncViewportCheck.push(element);
     this.#lazyRenderObserver.observe(element);
   }
 
+  #performSyncViewportCheck(): void {
+    if (!this.#shouldRenderLazily || this.#elementsForSyncViewportCheck.length === 0) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    const scrollContainer = this.contentElement.parentElement;
+    if (!scrollContainer) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    const {top, bottom} = scrollContainer.getBoundingClientRect();
+    if (bottom === top) {
+      this.#elementsForSyncViewportCheck = [];
+      return;
+    }
+    // Expand the bounding calculation by ±100px to accurately match the {rootMargin: '100px'}
+    // option configured on the IntersectionObserver in trackForLazyRendering.
+    const viewportTop = top - 100;
+    const viewportBottom = bottom + 100;
+
+    const visibleElements: Element[] = [];
+    for (const element of this.#elementsForSyncViewportCheck) {
+      if (!element.isConnected || !this.#lazyRenderCallbacks.has(element)) {
+        continue;
+      }
+      const rect = element.getBoundingClientRect();
+      if (rect.top > viewportBottom) {
+        break;
+      }
+      if (rect.bottom >= viewportTop) {
+        visibleElements.push(element);
+      }
+    }
+    this.#elementsForSyncViewportCheck = [];
+
+    for (const element of visibleElements) {
+      const callback = this.#lazyRenderCallbacks.get(element);
+      if (callback) {
+        callback();
+        this.untrackForLazyRendering(element);
+      }
+    }
+  }
+
   shouldRenderLazily(): boolean {
     return this.#shouldRenderLazily;
   }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -460,7 +460,6 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     this.showMediaInspectorSetting.addChangeListener(this.requestUpdate, this);
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.requestUpdate, this);
-
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
     this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);