chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -157,7 +157,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </span>
             ${newBadgeTemplate}
           </div>
-        `, target
+        `, target,
       );
   // clang-format on
 };

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -35,11 +35,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Aria label for teaser to generate code.
    */
-  pressCtrlPeriodToLearnHowYourDataIsBeingUsed: 'Press ctrl . (“period”) to learn how your data is being used.',
+  pressCtrlPeriodToLearnHowYourDataIsBeingUsed: 'Press ctrl . (period) to learn how your data is being used.',
   /**
    * @description Aria label for teaser to generate code in Mac.
    */
-  pressCmdPeriodToLearnHowYourDataIsBeingUsed: 'Press cmd . (“period”) to learn how your data is being used.',
+  pressCmdPeriodToLearnHowYourDataIsBeingUsed: 'Press cmd . (period) to learn how your data is being used.',
   /**
    * @description Text for teaser when generating suggestion.
    */
@@ -314,7 +314,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           <div class="ai-code-generation-teaser">
             &nbsp;${teaserLabel}
           </div>
-        `, target
+        `, target,
       );
   // clang-format on
 };

package/front_end/panels/common/BadgeNotification.ts

@@ -206,7 +206,7 @@ export class BadgeNotification extends UI.Widget.Widget {
         PH1: badge.title,
         PH2:
             html`<devtools-link class="badge-link" href="https://developers.google.com/program" jslogcontext="program-link">${
-                lockedString('Google Developer Program')}</devtools-link>`
+                lockedString('Google Developer Program')}</devtools-link>`,
       }),
       jslogContext: badge.jslogContext,
       actions: [
@@ -223,8 +223,8 @@ export class BadgeNotification extends UI.Widget.Widget {
           onClick: () => {
             this.detach();
             revealBadgeSettings();
-          }
-        }
+          },
+        },
       ],
       imageUri: badge.imageUri,
       isStarterBadge: true,
@@ -236,7 +236,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: i18nFormatStringTemplate(UIStrings.starterBadgeAwardMessageNoGdpProfile, {
         PH1: badge.title,
         PH2: html`<devtools-link class="badge-link" href="https://developers.google.com/program" .jslogContext=${
-                 'program-link'}>${lockedString('Google Developer Program')}</devtools-link>`
+                 'program-link'}>${lockedString('Google Developer Program')}</devtools-link>`,
       }),
       jslogContext: badge.jslogContext,
       actions: [
@@ -256,8 +256,8 @@ export class BadgeNotification extends UI.Widget.Widget {
               // We want to consider cancelling from the starter badge as a "snooze" for starter badge.
               onCancel: () => Badges.UserBadges.instance().snoozeStarterBadge(),
             });
-          }
-        }
+          },
+        },
       ],
       imageUri: badge.imageUri,
       isStarterBadge: true,
@@ -282,8 +282,8 @@ export class BadgeNotification extends UI.Widget.Widget {
           jslogContext: 'view-profile',
           onClick: () => {
             UIHelpers.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
-          }
-        }
+          },
+        },
       ],
       imageUri: badge.imageUri,
       isStarterBadge: badge.isStarterBadge,

package/front_end/panels/common/DOMLinkifier.ts

@@ -61,7 +61,7 @@ const DEFAULT_VIEW: View = (input, _output, target: HTMLElement) => {
     <span class="monospace">
       <button class="node-link text-button link-style ${classMap({
             'dynamic-link': Boolean(input.dynamic),
-            disabled: Boolean(input.disabled)
+            disabled: Boolean(input.disabled),
           })}"
           aria-description=${ifDefined(input.ariaDescription)}
           jslog=${VisualLogging.link('node').track({click: true, keydown: 'Enter'})}

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -90,7 +90,7 @@ const UIStrings = {
   /**
    * @description Error message shown in a snackbar when GDP sign up fails.
    */
-  signUpFailed: 'Your Google Developer Program profile couldn’t be created. Please try again later.'
+  signUpFailed: 'Your Google Developer Program profile couldn’t be created. Please try again later.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/GdpSignUpDialog.ts', UIStrings);
@@ -183,7 +183,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
         </div>
       </div>
     `,
-    target
+    target,
   );
   // clang-format on
 };

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -121,7 +121,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           @click=${input.onGetStartedClick}>${i18nString(UIStrings.getStarted)}</devtools-button>
       </div>
     `,
-    target
+    target,
   );
   // clang-format on
 };

package/front_end/panels/common/aiCodeCompletionDisclaimer.css

@@ -5,7 +5,6 @@
  */
 
 @scope to (devtools-widget > *) {
-    /* stylelint-disable-next-line no-invalid-position-declaration */
     display: flex;
 
     .ai-code-completion-disclaimer {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -518,7 +518,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
             jslogcontext="explain.teaser.code-snippets-explainer"
           >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
-        }
+        },
       ],
       onLearnMoreClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');

package/front_end/panels/console/ConsolePinPane.ts

@@ -67,7 +67,7 @@ const UIStrings = {
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don’t paste code you don’t understand or haven’t reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Type “{PH1}” below to allow pasting.',
+      'Don’t paste code you don’t understand or haven’t reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Type "{PH1}" below to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools Console.
    */
@@ -76,7 +76,7 @@ const UIStrings = {
    * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
    * @example {allow pasting} PH1
    */
-  typeAllowPasting: 'Type “{PH1}”',
+  typeAllowPasting: 'Type "{PH1}"',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePinPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -97,7 +97,7 @@ export const DEFAULT_PANE_VIEW = (input: PaneViewInput, _output: object, target:
           pin,
           focusOut: input.focusOut,
           onRemove: () => input.onRemove(pin),
-      })
+      }),
     )}
     </div>`, target);
   // clang-format on

package/front_end/panels/console/ConsolePrompt.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Badges from '../../models/badges/badges.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -33,7 +34,7 @@ const UIStrings = {
    * @example {allow pasting} PH1
    */
   selfXssWarning:
-      'Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Type “{PH1}” below and press Enter to allow pasting.',
+      'Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. This could allow attackers to steal your identity or take control of your computer. Type "{PH1}" below and press Enter to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools Console.
    */
@@ -170,7 +171,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.aiCodeCompletionProvider.editorInitialized(this.editor);
       this.editor.editor.dispatch({
         effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
-            TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY)
+            TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.ONLY_SHOW_ON_EMPTY),
       });
     }
 
@@ -390,7 +391,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         if (teaserMode !== TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.OFF) {
           this.editor.editor.dispatch({
             effects: TextEditor.AiCodeCompletionProvider.setAiCodeCompletionTeaserMode.of(
-                TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.OFF)
+                TextEditor.AiCodeCompletionProvider.AiCodeCompletionTeaserMode.OFF),
           });
         }
       }
@@ -429,7 +430,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       useCommandLineAPI: boolean): Promise<void> {
     const callFrame = executionContext.debuggerModel.selectedCallFrame();
     if (callFrame?.script.isJavaScript()) {
-      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(callFrame);
+      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
+          callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
       expression = await this.substituteNames(expression, nameMap);
     }
 

package/front_end/panels/console/ConsoleSidebar.ts

@@ -78,16 +78,14 @@ interface ViewInput {
 
 export type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  render(
-      html`<devtools-tree
+  render(html`<devtools-tree
         navigation-variant
         hide-overflow
         .template=${
-          html`
+             html`
           <ul role="tree">
             ${
-              input.groups.map(
-                  group => html`
+                 input.groups.map(group => html`
               <li
                 role="treeitem"
                 @select=${() => input.onSelectionChanged(group.filter)}
@@ -95,11 +93,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <style>${consoleSidebarStyles}</style>
                   <devtools-icon name=${GROUP_ICONS[group.name].icon}></devtools-icon>
                   ${
-                      /* eslint-disable-next-line @devtools/l10n-i18nString-call-only-with-uistrings */
-                      i18nString(GROUP_ICONS[group.name].label, {
+                                      /* eslint-disable-next-line @devtools/l10n-i18nString-call-only-with-uistrings */
+                                      i18nString(GROUP_ICONS[group.name].label, {
 
-                        n: group.messageCount
-                      })}
+                                        n: group.messageCount,
+                                      })}
                   ${group.messageCount === 0 ? nothing : html`
                   <ul role="group">
                     ${group.urlGroups.values().map(urlGroup => html`
@@ -115,7 +113,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               </li>`)}
         </ul>`}
         ></devtools-tree>`,
-      target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
+         target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
 };
 
 export class ConsoleFilterGroup {

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -89,28 +89,27 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     displayMode: IssueCounter.IssueCounter.DisplayMode.ONLY_MOST_IMPORTANT,
   };
 
-  render(
-      html`<div class="status-buttons"
+  render(html`<div class="status-buttons"
          >${
-          errors + warnings ? html`<icon-button
+             errors + warnings ? html`<icon-button
             .data=${iconData}
             title=${consoleTitle}
             class=${'small'}
             jslog=${VisualLogging.counter('console').track({
-            click: true
-          })}
+               click: true,
+             })}
          ></icon-button>` :
-                              nothing}${
-          issues ? html`<devtools-issue-counter
+                                 nothing}${
+             issues ? html`<devtools-issue-counter
             class=${'main-toolbar'}
             title=${issuesTitle}
             .data=${issueCounterData}
             jslog=${VisualLogging.counter('issue').track({
-            click: true
-          })}
+               click: true,
+             })}
          ></devtools-issue-counter>` :
-                   nothing}</div>`,
-      target);
+                      nothing}</div>`,
+         target);
 };
 
 export class WarningErrorCounterWidget extends UI.Widget.Widget {

package/front_end/panels/coverage/CoverageView.ts

@@ -87,12 +87,12 @@ const UIStrings = {
    * @description Message in Coverage View of the Coverage tab.
    * @example {Reload page} PH1
    */
-  clickTheReloadButtonSToReloadAnd: 'Click the “{PH1}” button to reload and start capturing coverage.',
+  clickTheReloadButtonSToReloadAnd: 'Click the "{PH1}" button to reload and start capturing coverage.',
   /**
    * @description Message in Coverage View of the Coverage tab.
    * @example {Start recording} PH1
    */
-  clickTheRecordButtonSToStart: 'Click the “{PH1}” button to start capturing coverage.',
+  clickTheRecordButtonSToStart: 'Click the "{PH1}" button to start capturing coverage.',
   /**
    * @description Message in the Coverage View explaining that DevTools could not capture coverage.
    */

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -287,7 +287,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             {name: i18nString(UIStrings.colors), id: 'colors'},
             {name: i18nString(UIStrings.fontInfo), id: 'font-info'},
             {name: i18nString(UIStrings.unusedDeclarations), id: 'unused-declarations'},
-            {name: i18nString(UIStrings.mediaQueries), id: 'media-queries'}
+            {name: i18nString(UIStrings.mediaQueries), id: 'media-queries'},
           ],
           selectedId: input.selectedSection,
           onItemSelected: input.onSectionSelected,
@@ -575,7 +575,7 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
   #viewOutput: ViewOutput = {
     revealSection: new Map(),
     closeAllTabs: () => {},
-    addTab: (_id, _tabTitle, _view, _jslogContext) => {}
+    addTab: (_id, _tabTitle, _view, _jslogContext) => {},
   };
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
@@ -852,7 +852,7 @@ export class CSSOverviewCompletedView extends UI.Widget.VBox {
         font,
         fontMetrics: fontMetricInfo.map(([label, values]) => {
           return {label, values: this.#sortGroupBySize(values)};
-        })
+        }),
       };
     });
   }

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -105,7 +105,7 @@ export class CSSOverviewSidebarPanel extends UI.Widget.VBox {
       selectedId: this.#selectedId,
       onReset: this.#onReset,
       onItemClick: this.#onItemClick.bind(this),
-      onItemKeyDown: this.#onItemKeyDown.bind(this)
+      onItemKeyDown: this.#onItemKeyDown.bind(this),
     };
     this.#view(viewInput, {}, this.contentElement);
   }

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -100,7 +100,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             items: input.items,
             selectedItem: input.selectedItem,
             onSelect: input.onSelect,
-            filters: input.filters
+            filters: input.filters,
         })}
       </div>
       <div class="developer-resource-view-toolbar-summary">

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -72,7 +72,7 @@ const UIStrings = {
    * @example {Arial} PH5
    */
   fontVariationSettingsWarning:
-      'Value for setting “{PH1}” {PH2} is outside the supported range [{PH3}, {PH4}] for font-family “{PH5}”.',
+      'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',
   /**
    * @description The message shown in the Style pane when the user hovers over a property declaration that has no effect on flex or grid child items.
    * @example {flex} CONTAINER_DISPLAY_NAME

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -95,8 +95,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 function matchProperty(name: string, value: string): SDK.CSSPropertyParser.BottomUpTreeMatching|null {
   return SDK.CSSPropertyParser.matchDeclaration(name, value, [
-    new SDK.CSSPropertyParserMatchers.ColorMatcher(), new SDK.CSSPropertyParserMatchers.URLMatcher(),
-    new SDK.CSSPropertyParserMatchers.StringMatcher()
+    new SDK.CSSPropertyParserMatchers.ColorMatcher(),
+    new SDK.CSSPropertyParserMatchers.URLMatcher(),
+    new SDK.CSSPropertyParserMatchers.StringMatcher(),
   ]);
 }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -626,7 +626,7 @@ function renderTitle(
       });
       return html`"<span class="webkit-html-text-node" jslog=${VisualLogging.value('text-node').track({
         change: true,
-        dblclick: true
+        dblclick: true,
       })} ${animateOn(Boolean(updateRecord?.isCharDataModified()), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
           renderTextNode}></span>"`;
     }
@@ -752,7 +752,7 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
     showColumnNumber: false,
     onRef: link => {
       ImagePreviewPopover.setImageUrl(link, rewrittenHref);
-    }
+    },
   });
 }
 
@@ -1293,7 +1293,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
       this.setLeadingIcons([
-        html`<devtools-icon class="extra-small" name="small-status-dot" style="color:var(--icon-error); vertical-align:middle"></devtools-icon>`
+        html`<devtools-icon class="extra-small" name="small-status-dot" style="color:var(--icon-error); vertical-align:middle"></devtools-icon>`,
       ]);
       this.listItemNode.classList.add('detached-elements-detached-node');
       this.listItemNode.style.setProperty('display', '-webkit-box');

package/front_end/panels/elements/EventListenersWidget.ts

@@ -151,9 +151,7 @@ export class EventListenersWidget extends UI.Widget.VBox {
         Common.Settings.Settings.instance().createSetting('event-listener-dispatch-filter-type', DispatchFilterBy.All);
     this.dispatchFilterBySetting.addChangeListener(this.requestUpdate.bind(this));
 
-    this.showFrameworkListenersSetting =
-        Common.Settings.Settings.instance().createSetting('show-frameowkr-listeners', true);
-    this.showFrameworkListenersSetting.setTitle(i18nString(UIStrings.frameworkListeners));
+    this.showFrameworkListenersSetting = Common.Settings.Settings.instance().moduleSetting('show-frameowkr-listeners');
     this.showFrameworkListenersSetting.addChangeListener(this.requestUpdate.bind(this));
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate.bind(this));

package/front_end/panels/elements/LayoutPane.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import layoutPaneStyles from './layoutPane.css.js';
@@ -246,7 +247,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             <devtools-node-text .data=${{
                 nodeId: element.domId,
                 nodeTitle: element.name,
-                nodeClasses: element.domClasses
+                nodeClasses: element.domClasses,
               }}>
             </devtools-node-text>
           </span>
@@ -259,7 +260,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             jslog=${
       VisualLogging.showStyleEditor('color')
           .track({
-            click: true
+            click: true,
           })}>
           <input
               @change=${(e: Event) => input.onColorChange(element, e)}
@@ -359,8 +360,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           </details>`
         : ''}
       </div>`,
-      // clang-format on
-      target);
+                  // clang-format on
+                  target);
 };
 
 type View = (input: ViewInput, output: object, element: HTMLElement) => void;
@@ -456,28 +457,37 @@ export class LayoutPane extends UI.Widget.Widget {
       if (settingType !== Common.Settings.SettingType.BOOLEAN && settingType !== Common.Settings.SettingType.ENUM) {
         throw new Error('A setting provided to LayoutSidebarPane does not have a supported setting type');
       }
+      const uiDescriptor = SettingUIRegistration.SettingUIRegistration.maybeResolve(setting.descriptor());
       const mappedSetting = {
         type: settingType,
         name: setting.name,
-        title: setting.title(),
+        title: uiDescriptor?.title?.() ?? setting.title(),
       };
+      const options = uiDescriptor?.options?.map(opt => ({
+                                                   value: opt.value,
+                                                   title: opt.title(),
+                                                   text: typeof opt.text === 'function' ? opt.text() : opt.text,
+                                                   raw: opt.raw,
+                                                 })) ??
+          setting.options();
+
       if (typeof settingValue === 'boolean') {
         settings.push({
           ...mappedSetting,
           value: settingValue,
-          options: setting.options().map(opt => ({
-                                           ...opt,
-                                           value: (opt.value as boolean),
-                                         })),
+          options: options.map(opt => ({
+                                 ...opt,
+                                 value: (opt.value as boolean),
+                               })),
         });
       } else if (typeof settingValue === 'string') {
         settings.push({
           ...mappedSetting,
           value: settingValue,
-          options: setting.options().map(opt => ({
-                                           ...opt,
-                                           value: (opt.value as string),
-                                         })),
+          options: options.map(opt => ({
+                                 ...opt,
+                                 value: (opt.value as string),
+                               })),
         });
       }
     }

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -26,18 +26,17 @@ interface ViewInput {
 type View = (input: ViewInput, output_: undefined, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  render(
-      html`
+  render(html`
     <style>${stylesSidebarPaneStyles}</style>
     <div class="style-panes-wrapper" jslog=${VisualLogging.section('standalone-styles').track({
-        resize: true
-      })}>
+           resize: true,
+         })}>
       <div class="styles-pane">
         ${input.sections.map(section => section.element)}
       </div>
     </div>
   `,
-      target);
+         target);
 };
 
 export const enum Events {
@@ -130,8 +129,9 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     const parentNodeId = matchedStyles?.getParentLayoutNodeId();
 
     const [parentStyles, computedStyles, extraStyles] = await Promise.all([
-      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null, cssModel.getComputedStyle(node.id),
-      cssModel.getComputedStyleExtraFields(node.id)
+      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null,
+      cssModel.getComputedStyle(node.id),
+      cssModel.getComputedStyleExtraFields(node.id),
     ]);
 
     if (signal?.aborted) {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -908,7 +908,7 @@ export class StylePropertiesSection {
           ancestorRuleElement = this.createSupportsElement(rule.supports[supportsIndex++]);
           break;
         case Protocol.CSS.CSSRuleType.StyleRule:
-          ancestorRuleElement = this.createNestingElement(rule.nestingSelectors?.[nestingIndex++]);
+          ancestorRuleElement = this.createNestingElement(rule, nestingIndex++);
           break;
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
           ancestorRuleElement = this.createStartingStyleElement();
@@ -1124,10 +1124,31 @@ export class StylePropertiesSection {
     return navigationElement;
   }
 
-  protected createNestingElement(nestingSelector?: string): HTMLElement|undefined {
+  protected createNestingElement(rule: SDK.CSSRule.CSSStyleRule, nestingIndex: number): HTMLElement|undefined {
+    const nestingSelector = rule.nestingSelectors?.[nestingIndex];
     if (!nestingSelector) {
       return;
     }
+
+    const parentRule = this.matchedStyles.findParentRule(rule, nestingIndex);
+    if (parentRule) {
+      const container = document.createElement('div');
+      const matchingSelectorIndexes = this.matchedStyles.getMatchingSelectors(parentRule);
+      const matchingSelectors = new Array(parentRule.selectors.length).fill(false) as boolean[];
+      for (const matchingIndex of matchingSelectorIndexes) {
+        matchingSelectors[matchingIndex] = true;
+      }
+
+      const selectorElement = container.createChild('span', 'selector');
+      const specificityContainer = container.createChild('span');
+      this.renderSelectorsToElement(parentRule.selectors, matchingSelectors, this.elementToSelectorIndex,
+                                    selectorElement, specificityContainer);
+
+      const openBrace = container.createChild('span', 'sidebar-pane-open-brace');
+      openBrace.textContent = ' {';
+      return container;
+    }
+
     const nestingElement = document.createElement('div');
     nestingElement.textContent = `${nestingSelector} {`;
     return nestingElement;
@@ -1438,18 +1459,25 @@ export class StylePropertiesSection {
       elementToSelectorIndex: WeakMap<Element, number>): void {
     this.selectorElement.removeChildren();
     this.#specificityTooltips.removeChildren();
+    this.renderSelectorsToElement(selectors, matchingSelectors, elementToSelectorIndex, this.selectorElement,
+                                  this.#specificityTooltips);
+  }
+
+  private renderSelectorsToElement(selectors: Array<{text: string, specificity?: Protocol.CSS.Specificity}>,
+                                   matchingSelectors: boolean[], elementToSelectorIndex: WeakMap<Element, number>,
+                                   targetElement: Element, tooltipContainer: Element): void {
     for (const [i, selector] of selectors.entries()) {
       if (i > 0) {
-        this.selectorElement.append(', ');
+        targetElement.append(', ');
       }
       const specificityTooltipId = selector.specificity ? StylePropertiesSection.getNextSpecificityTooltipId() : null;
-      const span = this.selectorElement.createChild('span', 'simple-selector');
+      const span = targetElement.createChild('span', 'simple-selector');
       span.classList.toggle('selector-matches', matchingSelectors[i]);
       elementToSelectorIndex.set(span, i);
       span.textContent = selectors[i].text;
       if (specificityTooltipId && selector.specificity) {
         span.setAttribute('aria-details', specificityTooltipId);
-        const tooltip = this.#specificityTooltips.appendChild(new Tooltips.Tooltip.Tooltip({
+        const tooltip = tooltipContainer.appendChild(new Tooltips.Tooltip.Tooltip({
           id: specificityTooltipId,
           anchor: span,
           variant: 'rich',