chrome-devtools-frontend 1.0.1701636 → 1.0.1703574

package/front_end/panels/common/CommentsStatusBarPill.ts

@@ -4,16 +4,24 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.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 VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import commentsStatusBarPillStyles from './commentsStatusBarPill.css.js';
+
 const UIStrings = {
   /**
    * @description Button text for the comments status bar pill showing the number of open comments.
    * @example {2} PH1
    */
   commentsCount: 'Comments ({PH1})',
+  /**
+   * @description Button text for sending all draft comments to the agent in the comments status bar pill.
+   * @example {2} PH1
+   */
+  sendToAgentCount: 'Send to agent ({PH1})',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/common/CommentsStatusBarPill.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -23,22 +31,38 @@ const {html, render} = Lit;
 export interface ViewInput {
   threads: CommentManager.CommentManager.CommentThread[];
   onPillClick: () => void;
+  onSendToAgentClick?: () => void;
   disabled?: boolean;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const unsentCount = input.threads.filter(thread => thread.status === 'ACTIVE').length;
+  const tooltip = input.threads.flatMap(thread => thread.comments.map(comment => comment.text)).join('\n');
   // clang-format off
   render(html`
+    <style>${commentsStatusBarPillStyles}</style>
     ${input.threads.length <= 0 ? Lit.nothing : html`
-      <button
-        class="devtools-pill"
-        ?disabled=${input.disabled}
-        @click=${input.onPillClick}
-        jslog=${VisualLogging.action('comments-status-bar-pill').track({click: true})}>
-        ${i18nString(UIStrings.commentsCount, {PH1: input.threads.length})}
-      </button>
+      <div class="pill-container">
+        <button
+          class="devtools-pill"
+          title=${tooltip}
+          ?disabled=${input.disabled}
+          @click=${input.onPillClick}
+          jslog=${VisualLogging.action('comments-status-bar-pill').track({click: true})}>
+          ${i18nString(UIStrings.commentsCount, {PH1: input.threads.length})}
+        </button>
+        ${unsentCount > 0 ? html`
+          <devtools-button
+            .variant=${Buttons.Button.Variant.PRIMARY}
+            .disabled=${Boolean(input.disabled)}
+            .jslogContext=${'comments-send-to-agent'}
+            @click=${input.onSendToAgentClick}>
+            ${i18nString(UIStrings.sendToAgentCount, {PH1: unsentCount})}
+          </devtools-button>
+        ` : Lit.nothing}
+      </div>
     `}
   `, target);
   // clang-format on
@@ -100,9 +124,18 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
           this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT') :
           [],
       onPillClick: this.#handlePillClick,
+      onSendToAgentClick: this.#handleSendToAgentClick,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
 
   #handlePillClick = (): void => {};
+
+  #handleSendToAgentClick = (): void => {
+    for (const thread of this.#commentManager.getCommentThreads()) {
+      if (thread.status === 'ACTIVE') {
+        thread.sendToAgent();
+      }
+    }
+  };
 }

package/front_end/panels/common/commentThreadWidget.css

@@ -30,6 +30,17 @@
     gap: var(--sys-size-4);
   }
 
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+    flex-shrink: 0;
+  }
+
+  .close-button {
+    flex-shrink: 0;
+  }
+
   .sent-status {
     display: flex;
     align-items: center;

package/front_end/panels/common/commentsStatusBarPill.css

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .pill-container {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+  }
+}

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -304,6 +304,7 @@ export class StylePropertiesSection {
       closeBrace.createChild('span').textContent = '}';
     } else {
       this.titleElement.classList.add('hidden');
+      this.updateAncestorRuleList();
     }
 
     if (rule) {
@@ -425,6 +426,7 @@ export class StylePropertiesSection {
     this.computedStyleExtraFields = computedStyleExtraFields;
     this.#lastInheritedNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
     this.update(true);
+    this.updateCollapsedState();
   }
 
   inheritedNode(): SDK.DOMModel.DOMNode|null {
@@ -1250,6 +1252,14 @@ export class StylePropertiesSection {
     this.#ancestorClosingBracesElement.removeChildren();
     this.maybeCreateAncestorRules(this.styleInternal);
     this.#styleRuleElement.style.paddingLeft = `${this.nestingLevel}ch`;
+    if (this.headerText().length === 0 && (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule)) {
+      const lastAncestor = this.#ancestorRuleListElement.lastElementChild;
+      if (lastAncestor && this.#collapseIcon && this.#statusElement) {
+        this.#collapseIcon.slot = 'indent';
+        lastAncestor.append(this.#collapseIcon, this.#statusElement);
+      }
+      this.#ancestorClosingBracesElement.firstElementChild?.classList.add('sidebar-pane-closing-brace');
+    }
   }
 
   isPropertyInherited(propertyName: string): boolean {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2044,7 +2044,7 @@ export class AnchorFunctionRenderer extends AnchorFunctionRendererBase {
 
   override render(match: SDK.CSSPropertyParserMatchers.AnchorFunctionMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
-    if (match.node.name !== 'CallExpression') {
+    if (match.node.name === 'VariableName') {
       // Link an anchor double-dashed ident to its matching anchor element.
       void AnchorFunctionRenderer.decorateAnchorForAnchorLink(this.#stylesContainer, content, {identifier: match.text});
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1126,27 +1126,39 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
     }
   }
 
-  private getStyleId(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): string {
+  private getStyleId(section: StylePropertiesSection): string {
+    const style = section.styleInternal;
+    const node = section.matchedStyles.isInherited(style) ? section.matchedStyles.nodeForStyle(style) :
+                                                            section.matchedStyles.node();
+    const nodeId = node?.id ?? '';
     if (style.range) {
-      return `${style.styleSheetId || ''}:${style.range.toString()}`;
+      return `${nodeId}:${style.styleSheetId || ''}:${style.range.toString()}`;
     }
     if (style.type === SDK.CSSStyleDeclaration.Type.Inline || style.type === SDK.CSSStyleDeclaration.Type.Attributes) {
-      return style.type;
+      return `${nodeId}:${style.type}`;
     }
     if (style.type === SDK.CSSStyleDeclaration.Type.Animation) {
-      return `${style.type}:${style.animationName() || ''}:${style.cssText}`;
+      return `${nodeId}:${style.type}:${style.animationName() || ''}:${style.cssText}`;
     }
     const parentRule = style.parentRule;
     if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      return `${style.type}:${parentRule.selectorText()}`;
+      const ruleTypes = parentRule.ruleTypes.join(',');
+      const nesting = parentRule.nestingSelectors?.join(',') ?? '';
+      const media = parentRule.media.map(m => m.text).join(',');
+      const containers = parentRule.containerQueries.map(c => c.text).join(',');
+      const supports = parentRule.supports.map(s => s.text).join(',');
+      const scopes = parentRule.scopes.map(s => s.text).join(',');
+      const layers = parentRule.layers.map(l => l.text).join(',');
+      return `${nodeId}:${style.type}:${parentRule.selectorText()}:${ruleTypes}:${nesting}:${media}:${containers}:${
+          supports}:${scopes}:${layers}`;
     }
     if (parentRule instanceof SDK.CSSRule.CSSKeyframeRule) {
-      return `${style.type}:${parentRule.parentRuleName()}:${parentRule.key().text}`;
+      return `${nodeId}:${style.type}:${parentRule.parentRuleName()}:${parentRule.key().text}`;
     }
     if (parentRule instanceof SDK.CSSRule.CSSPropertyRule) {
-      return `${style.type}:${parentRule.propertyName().text}`;
+      return `${nodeId}:${style.type}:${parentRule.propertyName().text}`;
     }
-    return `${style.type}:${style.cssText}`;
+    return `${nodeId}:${style.type}:${style.cssText}`;
   }
 
   rebuildSectionsForMatchedStyleRulesForTest(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -1170,7 +1182,7 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
 
     this.idleCallbackManager = new IdleCallbackManager();
 
-    const blocks = [new SectionBlock(null)];
+    const blocks = [new SectionBlock(null, undefined, undefined, 'main')];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
 
@@ -1183,7 +1195,7 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
         if ((layers.length || lastLayers) && lastLayers !== layers) {
-          const block = SectionBlock.createLayerBlock(parentRule);
+          const block = SectionBlock.createLayerBlock(parentRule, lastLayerParent?.id);
           blocks.push(block);
           lastLayerParent?.childBlocks.push(block);
           sawLayers = true;
@@ -1409,37 +1421,36 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       return blocks;
     }
 
-    return this.mergeInactiveStyles(blocks);
+    return this.mergeInactiveStyles(blocks, matchedStyles, computedStyles, parentsComputedStyles,
+                                    computedStyleExtraFields);
   }
 
-  private computeBlockIds(blocks: SectionBlock[]): Map<SectionBlock, string> {
-    let nullBlockCounter = 0;
-    const blockIds = new Map<SectionBlock, string>();
-    for (const block of blocks) {
-      blockIds.set(block, block.titleElement()?.textContent || `MAIN_BLOCK_NULL_${nullBlockCounter++}`);
-    }
-    return blockIds;
-  }
-
-  private mergeInactiveStyles(blocks: SectionBlock[]): SectionBlock[] {
-    const blockIds = this.computeBlockIds(blocks);
-    for (const [id, block] of this.#allKnownBlocks) {
-      if (!blockIds.has(block)) {
-        blockIds.set(block, id);
-      }
-    }
-    const getBlockId = (block: SectionBlock): string => blockIds.get(block) || 'UNKNOWN_BLOCK';
+  private mergeInactiveStyles(
+      blocks: SectionBlock[],
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      ): SectionBlock[] {
+    const getBlockId = (block: SectionBlock): string => block.id;
 
     for (const block of blocks) {
       const bid = getBlockId(block);
       const knownBlock = this.#allKnownBlocks.get(bid);
       if (knownBlock) {
-        block.sections = mergeOrderedItems(
+        knownBlock.sections = mergeOrderedItems(
             knownBlock.sections,
             block.sections,
-            section => this.getStyleId(section.styleInternal),
-            section => section.setInactive(true),
+            section => this.getStyleId(section),
+            (section, active, newSection) => {
+              if (active && newSection) {
+                section.rebuildWithPayload(matchedStyles, newSection.style(), computedStyles, parentsComputedStyles,
+                                           computedStyleExtraFields);
+              }
+              section.setInactive(!active);
+            },
         );
+        block.sections = knownBlock.sections;
       }
     }
 
@@ -1448,7 +1459,11 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
         oldBlocks,
         blocks,
         getBlockId,
-        block => block.sections.forEach(section => section.setInactive(true)),
+        (block, active) => {
+          if (!active) {
+            block.sections.forEach(section => section.setInactive(true));
+          }
+        },
     );
 
     this.#allKnownBlocks.clear();
@@ -1456,6 +1471,19 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       this.#allKnownBlocks.set(getBlockId(block), block);
     }
 
+    // Restore child relationships using the new tree structure,
+    // but pointing to the final instances.
+    for (const newBlock of blocks) {
+      const finalBlock = this.#allKnownBlocks.get(getBlockId(newBlock));
+      if (finalBlock) {
+        const newChildBlocks =
+            newBlock.childBlocks.map(child => this.#allKnownBlocks.get(getBlockId(child))).filter(b => b !== undefined);
+        finalBlock.childBlocks = finalBlock === newBlock ?
+            newChildBlocks :
+            mergeOrderedItems(finalBlock.childBlocks, newChildBlocks, getBlockId, () => {});
+      }
+    }
+
     return finalBlocks;
   }
 
@@ -1871,7 +1899,7 @@ export class SectionBlock {
   childBlocks: SectionBlock[] = [];
   #expanded = false;
   #icon: Icon|undefined;
-  constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
+  constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean, readonly id = 'main') {
     this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
@@ -1905,7 +1933,7 @@ export class SectionBlock {
     const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
     const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
     separatorElement.textContent = i18nString(UIStrings.pseudoSElement, {PH1: pseudoTypeString});
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `pseudo:${pseudoType}:${pseudoArgument ?? ''}`);
   }
 
   static async createInheritedPseudoTypeBlock(pseudoType: Protocol.DOM.PseudoType, pseudoArgument: string|null,
@@ -1918,12 +1946,13 @@ export class SectionBlock {
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {preventKeyboardFocus: true});
     render(link, separatorElement);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false,
+                            `inherited-pseudo:${pseudoType}:${pseudoArgument ?? ''}:${node.id}`);
   }
 
   static createRegisteredPropertiesBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'registered-properties');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(REGISTERED_PROPERTY_SECTION_NAME));
     return block;
@@ -1931,7 +1960,7 @@ export class SectionBlock {
 
   static createFunctionBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'functions');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(FUNCTION_SECTION_NAME));
     return block;
@@ -1942,12 +1971,12 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('keyframes')}`);
     separatorElement.textContent = `@keyframes ${keyframesName}`;
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `keyframes:${keyframesName}`);
   }
 
   static createAtRuleBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'at-rules');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(i18nString(UIStrings.atRuleSection)));
     return block;
@@ -1958,7 +1987,7 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('position-try')}`);
     separatorElement.textContent = `@position-try ${positionTryName}`;
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `position-try:${positionTryName}`);
   }
 
   static async createInheritedNodeBlock(node: SDK.DOMModel.DOMNode): Promise<SectionBlock> {
@@ -1970,10 +1999,10 @@ export class SectionBlock {
       preventKeyboardFocus: true,
     });
     render(link, separatorElement);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `inherited-node:${node.id}`);
   }
 
-  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
+  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule, parentBlockId = 'main'): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator layer-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('layer')}`);
@@ -1983,7 +2012,7 @@ export class SectionBlock {
       const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
                                                                              '\xa0implicit\xa0outer\xa0layer';
       UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
-      return new SectionBlock(separatorElement);
+      return new SectionBlock(separatorElement, false, false, `layer:${parentBlockId}:${name}`);
     }
     const layerLink = separatorElement.createChild('button');
     layerLink.className = 'link';
@@ -1991,7 +2020,7 @@ export class SectionBlock {
     const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
     layerLink.textContent = name;
     layerLink.onclick = () => LayersWidget.LayersWidget.instance().revealLayer(name);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `layer:${parentBlockId}:${name}`);
   }
 
   updateFilter(): number {
@@ -2701,30 +2730,53 @@ export function mergeOrderedItems<T>(
     oldItems: T[],
     newItems: T[],
     getId: (item: T) => string,
-    markInactive: (item: T) => void,
+    toggleActive: (item: T, active: boolean, newItem?: T) => void,
     ): T[] {
   const newIds = new Set(newItems.map(getId));
+  const oldItemById = new Map(oldItems.map(item => [getId(item), item]));
+  const handledIds = new Set<string>();
   const merged: T[] = [];
   let newIdx = 0;
 
   for (const oldItem of oldItems) {
     const oldId = getId(oldItem);
+    if (handledIds.has(oldId)) {
+      continue;
+    }
     if (newIds.has(oldId)) {
       while (newIdx < newItems.length) {
         const newItem = newItems[newIdx++];
-        merged.push(newItem);
-        if (getId(newItem) === oldId) {
+        const newId = getId(newItem);
+        const existingItem = oldItemById.get(newId);
+        if (existingItem) {
+          toggleActive(existingItem, true, newItem);
+          merged.push(existingItem);
+          handledIds.add(newId);
+        } else {
+          merged.push(newItem);
+        }
+        if (newId === oldId) {
           break;
         }
       }
     } else {
-      markInactive(oldItem);
+      toggleActive(oldItem, false);
       merged.push(oldItem);
+      handledIds.add(oldId);
     }
   }
 
   while (newIdx < newItems.length) {
-    merged.push(newItems[newIdx++]);
+    const newItem = newItems[newIdx++];
+    const newId = getId(newItem);
+    const existingItem = oldItemById.get(newId);
+    if (existingItem && !handledIds.has(newId)) {
+      toggleActive(existingItem, true, newItem);
+      merged.push(existingItem);
+      handledIds.add(newId);
+    } else if (!handledIds.has(newId)) {
+      merged.push(newItem);
+    }
   }
 
   return merged;

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

@@ -171,7 +171,7 @@ export class CSSQuery extends HTMLElement {
           <slot name="indent"></slot>
           ${this.#queryPrefix ? html`<span>${this.#queryPrefix + ' '}</span>` : Lit.nothing}
           ${this.#queryName ? html`<span>${this.#queryName + ' '}</span>` : Lit.nothing}
-          ${queryText} {
+          ${queryText}<slot></slot> <span class="sidebar-pane-open-brace">{</span>
         </div>`,
         this.#shadow, {host: this});
     // clang-format on

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

@@ -16,3 +16,7 @@
   text-decoration: var(--override-styles-section-text-hover-text-decoration);
   cursor: var(--override-styles-section-text-hover-cursor);
 }
+
+:host-context(.collapsed):host(:has(devtools-icon)) .sidebar-pane-open-brace::after {
+  content: "}";
+}

package/front_end/panels/elements/elements.ts

@@ -81,7 +81,6 @@ export {
   DOMPath,
   DOMTreeContextMenu,
   DOMTreeWidget,
-  DOMTreeWidget as ElementsTreeOutline,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,

package/front_end/panels/elements/stylesSidebarPane.css

@@ -115,6 +115,7 @@
   & .section-collapse-icon {
     width: var(--sys-size-6);
     height: var(--sys-size-6);
+    margin-block: calc(-1 * var(--sys-size-3));
     margin-right: var(--sys-size-2);
     margin-left: calc(-1 * var(--sys-size-2));
     vertical-align: middle;
@@ -122,6 +123,11 @@
     display: none;
   }
 
+  & .styles-section-status {
+    margin-block: calc(-1 * var(--sys-size-4));
+    vertical-align: middle;
+  }
+
   &.collapsible .section-collapse-icon {
     display: inline-block;
   }

package/front_end/panels/issues/IssueView.ts

@@ -435,7 +435,11 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     messageElement.setCollapsible(false);
     messageElement.selectable = false;
     const markdownComponent = new MarkdownView.MarkdownView.MarkdownView();
-    markdownComponent.data = {tokens: this.#description.markdown};
+    markdownComponent.data = {
+      tokens: this.#description.markdown,
+      renderer: new MarkdownView.MarkdownPlaceholderLitRenderer.MarkdownPlaceholderLitRenderer(
+          this.#description.substitutions),
+    };
     messageElement.listItemElement.appendChild(markdownComponent);
     UI.ARIAUtils.setPositionInSet(messageElement.listItemElement, 1);
     UI.ARIAUtils.setSetSize(messageElement.listItemElement, this.#description.links.length === 0 ? 2 : 3);

package/front_end/panels/sources/ResourceOriginPlugin.ts

@@ -49,11 +49,15 @@ export class ResourceOriginPlugin extends Plugin {
         const url = uiSourceCode.url();
         const text = Bindings.ResourceUtils.displayNameForURL(url);
         const title = i18nString(UIStrings.sourceMappedFromS, {PH1: text});
-        links.push(Components.Linkifier.Linkifier.linkifyRevealable(
-            uiSourceCode, text, url, title, undefined, 'original-script-location'));
+        const link = Components.Linkifier.Linkifier.linkifyRevealable(uiSourceCode, text, url, title, undefined,
+                                                                      'original-script-location');
+        link.tabIndex = 0;
+        links.push(link);
       }
       for (const originURL of Bindings.SASSSourceMapping.SASSSourceMapping.uiSourceOrigin(this.uiSourceCode)) {
-        links.push(Components.Linkifier.Linkifier.linkifyURL(originURL));
+        const link = Components.Linkifier.Linkifier.linkifyURL(originURL);
+        link.tabIndex = 0;
+        links.push(link);
       }
       if (links.length === 0) {
         return [];
@@ -72,6 +76,7 @@ export class ResourceOriginPlugin extends Plugin {
     for (const script of debuggerWorkspaceBinding.scriptsForUISourceCode(this.uiSourceCode)) {
       if (script.originStackTrace?.callFrames.length) {
         const link = this.#linkifier.linkifyStackTraceTopFrame(script.debuggerModel.target(), script.originStackTrace);
+        link.tabIndex = 0;
         return [new UI.Toolbar.ToolbarItem(uiI18n.getFormatLocalizedString(str_, UIStrings.fromS, {PH1: link}))];
       }
     }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -28,7 +28,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -38,7 +37,7 @@ import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import scopeChainSidebarPaneStyles from './scopeChainSidebarPane.css.js';
@@ -89,9 +88,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }): TemplateResult => {
-    let emptyPlaceholder: Common.UIString.LocalizedString|undefined;
+    let emptyPlaceholder: LitTemplate|undefined;
     if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
-      emptyPlaceholder = i18nString(UIStrings.noVariables);
+      emptyPlaceholder = html`${i18nString(UIStrings.noVariables)}`;
     }
     const icon = scope.icon();
     const {title, subtitle} = scopeTitle(scope);