chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -33,6 +33,10 @@ const UIStringsNotTranslate = {
    */
   tooltipDisclaimerTextForAiCodeCompletionNoLogging:
       'To generate code suggestions, your console input and the history of your current console session are shared with Google. This data will not be used to improve Google’s AI models.',
+  /**
+   * Text for tooltip shown on hovering over spinner.
+   */
+  tooltipTextForSpinner: 'Shows when data is being sent to Google to generate code suggestions',
   /**
    * @description Text for tooltip button which redirects to AI settings
    */
@@ -47,6 +51,7 @@ const lockedString = i18n.i18n.lockedString;
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   noLogging: boolean;
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   onManageInSettingsTooltipClick: () => void;
@@ -59,12 +64,14 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
-  if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId) {
-    render(nothing, target);
-    return;
-  }
-  // clang-format off
+export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
+    (input, output, target) => {
+      if (input.aidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE || !input.disclaimerTooltipId ||
+          !input.spinnerTooltipId) {
+        render(nothing, target);
+        return;
+      }
+      // clang-format off
   render(
     html`
         <style>${styles}</style>
@@ -76,7 +83,16 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 el.toggleAttribute('active', isLoading);
               };
             }
-          })}></devtools-spinner>
+          })}
+          aria-details=${input.spinnerTooltipId}
+          aria-describedby=${input.spinnerTooltipId}></devtools-spinner>
+          <devtools-tooltip
+              id=${input.spinnerTooltipId}
+              variant=${'rich'}
+              jslogContext=${'ai-code-completion-spinner-tooltip'}>
+          <div class="disclaimer-tooltip-container"><div class="tooltip-text">
+            ${lockedString(UIStringsNotTranslate.tooltipTextForSpinner)}
+          </div></div></devtools-tooltip>
           <span
               tabIndex="0"
               class="link"
@@ -115,8 +131,8 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, output, target) => {
                 >${lockedString(UIStringsNotTranslate.manageInSettings)}</span></div></devtools-tooltip>
           </div>
         `, target);
-  // clang-format on
-};
+      // clang-format on
+    };
 
 const MINIMUM_LOADING_STATE_TIMEOUT = 1000;
 
@@ -124,6 +140,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   readonly #view: View;
   #viewOutput: ViewOutput = {};
 
+  #spinnerTooltipId?: string;
   #disclaimerTooltipId?: string;
   #noLogging: boolean;  // Whether the enterprise setting is `ALLOW_WITHOUT_LOGGING` or not.
   #loading = false;
@@ -147,6 +164,11 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  set spinnerTooltipId(spinnerTooltipId: string) {
+    this.#spinnerTooltipId = spinnerTooltipId;
+    this.requestUpdate();
+  }
+
   set loading(loading: boolean) {
     if (!loading && !this.#loading) {
       return;
@@ -191,6 +213,7 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.#view(
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
+          spinnerTooltipId: this.#spinnerTooltipId,
           noLogging: this.#noLogging,
           aidaAvailability: this.#aidaAvailability,
           onManageInSettingsTooltipClick: this.#onManageInSettingsTooltipClick.bind(this),

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -30,11 +30,13 @@ const lockedString = i18n.i18n.lockedString;
 export interface AiCodeCompletionSummaryToolbarProps {
   citationsTooltipId: string;
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   hasTopBorder?: boolean;
 }
 
 export interface ViewInput {
   disclaimerTooltipId?: string;
+  spinnerTooltipId?: string;
   citations?: Set<string>;
   citationsTooltipId: string;
   loading: boolean;
@@ -57,10 +59,11 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
   });
 
   // clang-format off
-  const disclaimer = input.disclaimerTooltipId ?
+  const disclaimer = input.disclaimerTooltipId && input.spinnerTooltipId ?
     html`<devtools-widget
             .widgetConfig=${UI.Widget.widgetConfig(AiCodeCompletionDisclaimer, {
       disclaimerTooltipId: input.disclaimerTooltipId,
+      spinnerTooltipId: input.spinnerTooltipId,
       loading: input.loading,
     })} class="disclaimer-widget"></devtools-widget>` : nothing;
 
@@ -102,6 +105,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   readonly #view: View;
 
   #disclaimerTooltipId?: string;
+  #spinnerTooltipId?: string;
   #citationsTooltipId: string;
   #citations = new Set<string>();
   #loading = false;
@@ -113,6 +117,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   constructor(props: AiCodeCompletionSummaryToolbarProps, view?: View) {
     super();
     this.#disclaimerTooltipId = props.disclaimerTooltipId;
+    this.#spinnerTooltipId = props.spinnerTooltipId;
     this.#citationsTooltipId = props.citationsTooltipId;
     this.#hasTopBorder = props.hasTopBorder ?? false;
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
@@ -147,6 +152,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
     this.#view(
         {
           disclaimerTooltipId: this.#disclaimerTooltipId,
+          spinnerTooltipId: this.#spinnerTooltipId,
           citations: this.#citations,
           citationsTooltipId: this.#citationsTooltipId,
           loading: this.#loading,

package/front_end/panels/common/BadgeNotification.ts

@@ -73,13 +73,14 @@ const AUTO_CLOSE_TIME_IN_MS = 30000;
 
 export interface BadgeNotificationAction {
   label: string;
-  jslogContext?: string;
+  jslogContext: string;
   title?: string;
   onClick: () => void;
 }
 
 export interface BadgeNotificationProperties {
   message: HTMLElement|string;
+  jslogContext: string;
   imageUri: string;
   actions: BadgeNotificationAction[];
   isStarterBadge: boolean;
@@ -115,8 +116,8 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 
   render(html`
     <style>${badgeNotificationStyles}</style>
-    <div class="container">
-      <div class="badge-container">
+    <div class="container" jslog=${VisualLogging.dialog('badge-notification')}>
+      <div class="badge-container" jslog=${VisualLogging.item(input.jslogContext)}>
         <img class="badge-image" role="presentation" src=${input.imageUri}>
       </div>
       <div class="action-and-text-container">
@@ -138,6 +139,7 @@ function revealBadgeSettings(): void {
 }
 
 export class BadgeNotification extends UI.Widget.Widget {
+  jslogContext = '';
   message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
@@ -175,6 +177,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
     this.isStarterBadge = properties.isStarterBadge;
+    this.jslogContext = properties.jslogContext;
     this.requestUpdate();
     this.show(document.body);
 
@@ -193,7 +196,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     const receiveBadgesSettingEnabled = Badges.UserBadges.instance().isReceiveBadgesSettingEnabled();
     const googleDeveloperProgramLink = UI.XLink.XLink.create(
         'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
-        'gdp.program-link');
+        'program-link');
 
     // If the user already has a GDP profile and the receive badges setting enabled,
     // starter badge behaves as if it's an activity based badge.
@@ -208,9 +211,11 @@ export class BadgeNotification extends UI.Widget.Widget {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        jslogContext: badge.jslogContext,
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
+            jslogContext: 'remind-me-later',
             onClick: () => {
               this.detach();
               Badges.UserBadges.instance().snoozeStarterBadge();
@@ -218,6 +223,7 @@ export class BadgeNotification extends UI.Widget.Widget {
           },
           {
             label: i18nString(UIStrings.receiveBadges),
+            jslogContext: 'receive-badges',
             onClick: () => {
               this.detach();
               revealBadgeSettings();
@@ -234,9 +240,11 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
+          jslogContext: 'remind-me-later',
           onClick: () => {
             this.detach();
             Badges.UserBadges.instance().snoozeStarterBadge();
@@ -244,9 +252,13 @@ export class BadgeNotification extends UI.Widget.Widget {
         },
         {
           label: i18nString(UIStrings.createProfile),
+          jslogContext: 'create-profile',
           onClick: () => {
             this.detach();
-            GdpSignUpDialog.GdpSignUpDialog.show();
+            GdpSignUpDialog.GdpSignUpDialog.show({
+              // We want to consider cancelling from the starter badge as a "snooze" for starter badge.
+              onCancel: () => Badges.UserBadges.instance().snoozeStarterBadge(),
+            });
           }
         }
       ],
@@ -258,9 +270,11 @@ export class BadgeNotification extends UI.Widget.Widget {
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.manageSettings),
+          jslogContext: 'manage-settings',
           onClick: () => {
             this.detach();
             revealBadgeSettings();
@@ -268,6 +282,7 @@ export class BadgeNotification extends UI.Widget.Widget {
         },
         {
           label: i18nString(UIStrings.viewProfile),
+          jslogContext: 'view-profile',
           onClick: () => {
             UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
@@ -310,6 +325,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       actions: this.actions,
       isStarterBadge: this.isStarterBadge,
       onDismissClick: this.#onDismissClick,
+      jslogContext: this.jslogContext,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -14,7 +14,6 @@ import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * as Switch from '../../ui/components/switch/switch.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import styles from './gdpSignUpDialog.css.js';
 
@@ -114,7 +113,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
   render(
     html`
       <style>${styles}</style>
-      <div class="gdp-sign-up-dialog-header" role="img" tabindex="0" aria-label="Google Developer Program"></div>
+      <div class="gdp-sign-up-dialog-header" role="img" aria-label="Google Developer Program"></div>
       <div class="main-content">
         <div class="section">
           <div class="icon-container">
@@ -136,9 +135,9 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           <div class="switch-container">
             <devtools-switch
             .checked=${input.keepMeUpdated}
+            .jslogContext=${'keep-me-updated'}
+            .label=${i18nString(UIStrings.keepUpdated)}
             @switchchange=${(e: Switch.Switch.SwitchChangeEvent) => input.onKeepMeUpdatedChange(e.checked)}
-            jslog=${VisualLogging.toggle('gdp.signup.keep-me-updated').track({ click: true })}
-            aria-label=${i18nString(UIStrings.keepUpdated)}
           >
             </devtools-switch>
           </div>
@@ -152,11 +151,11 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <div class="section-text">
               <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
               <div>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
-      PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'gdp.content-policy'),
+      PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'content-policy'),
       PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
-        undefined, 'gdp.terms-of-service'),
+        undefined, 'terms-of-service'),
       PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
-        undefined, 'gdp.privacy-policy'),
+        undefined, 'privacy-policy'),
     })}</div>
             </div>
           </div>
@@ -176,7 +175,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             @click=${input.onCancelClick}>${i18nString(UIStrings.cancel)}</devtools-button>
           <devtools-button
             .variant=${Buttons.Button.Variant.PRIMARY}
-            .jslogContext=${'gdp.sign-up'}
+            .jslogContext=${'sign-up'}
             .spinner=${input.isSigningUp}
             .disabled=${input.isSigningUp}
             @click=${input.onSignUpClick}>${i18nString(UIStrings.signUp)}</devtools-button>
@@ -194,11 +193,19 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
   #keepMeUpdated = false;
   #isSigningUp = false;
   #onSuccess?: () => void;
+  #onCancel?: () => void;
 
-  constructor(options: {dialog: UI.Dialog.Dialog, onSuccess?: () => void}, view?: View) {
+  constructor(
+      options: {
+        dialog: UI.Dialog.Dialog,
+        onSuccess?: () => void,
+        onCancel?: () => void,
+      },
+      view?: View) {
     super();
     this.#dialog = options.dialog;
     this.#onSuccess = options.onSuccess;
+    this.#onCancel = options.onCancel;
     this.#view = view ?? DEFAULT_VIEW;
     this.requestUpdate();
   }
@@ -231,6 +238,7 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
       onSignUpClick: this.#onSignUpClick.bind(this),
       onCancelClick: () => {
         this.#dialog.hide();
+        this.#onCancel?.();
       },
       keepMeUpdated: this.#keepMeUpdated,
       onKeepMeUpdatedChange: (value: boolean) => {
@@ -243,14 +251,14 @@ export class GdpSignUpDialog extends UI.Widget.VBox {
     this.#view(viewInput, undefined, this.contentElement);
   }
 
-  static show({onSuccess}: {onSuccess?: () => void} = {}): void {
-    const dialog = new UI.Dialog.Dialog();
+  static show({onSuccess, onCancel}: {onSuccess?: () => void, onCancel?: () => void} = {}): void {
+    const dialog = new UI.Dialog.Dialog('gdp-sign-up-dialog');
     dialog.setAriaLabel(i18nString(UIStrings.gdpDialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 
-    new GdpSignUpDialog({dialog, onSuccess}).show(dialog.contentElement);
+    new GdpSignUpDialog({dialog, onSuccess, onCancel}).show(dialog.contentElement);
     dialog.show(undefined, /* stack */ true);
   }
 }

package/front_end/panels/console/ConsolePrompt.ts

@@ -529,7 +529,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.teaser = undefined;
     }
     this.aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.Panel.CONSOLE, ['\n\n']);
+        {aidaClient: this.aidaClient}, this.editor, AiCodeCompletion.AiCodeCompletion.ContextFlavor.CONSOLE, ['\n\n']);
     this.aiCodeCompletion.addEventListener(AiCodeCompletion.AiCodeCompletion.Events.RESPONSE_RECEIVED, event => {
       this.aiCodeCompletionCitations = event.data.citations;
       this.dispatchEventToListeners(Events.AI_CODE_COMPLETION_RESPONSE_RECEIVED, event.data);

package/front_end/panels/console/ConsoleView.ts

@@ -270,6 +270,7 @@ let consoleViewInstance: ConsoleView;
 
 const MIN_HISTORY_LENGTH_FOR_DISABLING_SELF_XSS_WARNING = 5;
 const DISCLAIMER_TOOLTIP_ID = 'console-ai-code-completion-disclaimer-tooltip';
+const SPINNER_TOOLTIP_ID = 'console-ai-code-completion-spinner-tooltip';
 const CITATIONS_TOOLTIP_ID = 'console-ai-code-completion-citations-tooltip';
 
 export class ConsoleView extends UI.Widget.VBox implements
@@ -624,8 +625,11 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   createAiCodeCompletionSummaryToolbar(): void {
-    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar(
-        {citationsTooltipId: CITATIONS_TOOLTIP_ID, disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID});
+    this.aiCodeCompletionSummaryToolbar = new AiCodeCompletionSummaryToolbar({
+      citationsTooltipId: CITATIONS_TOOLTIP_ID,
+      disclaimerTooltipId: DISCLAIMER_TOOLTIP_ID,
+      spinnerTooltipId: SPINNER_TOOLTIP_ID
+    });
     this.aiCodeCompletionSummaryToolbarContainer = this.element.createChild('div');
     this.aiCodeCompletionSummaryToolbar.show(this.aiCodeCompletionSummaryToolbarContainer, undefined, true);
   }

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -15,7 +15,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
@@ -519,10 +519,10 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   // clang-format on
 }
 
-function renderColor(section: string, color: string): TemplateResult {
+function renderColor(section: string, color: string): LitTemplate {
   const borderColor = Common.Color.parse(color)?.asLegacyColor();
   if (!borderColor) {
-    return html``;
+    return nothing;
   }
   // clang-format off
   return html`<li>
@@ -1006,9 +1006,9 @@ export class ElementDetailsView extends UI.Widget.Widget {
   }
 }
 
-function renderNode(data: PopulateNodesEventNodeTypes, link?: HTMLElement, showNode?: () => void): TemplateResult {
+function renderNode(data: PopulateNodesEventNodeTypes, link?: HTMLElement, showNode?: () => void): LitTemplate {
   if (!link) {
-    return html``;
+    return nothing;
   }
   return html`
     <td>

package/front_end/panels/elements/ElementsPanel.ts

@@ -774,6 +774,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.selectDOMNode(node, focus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    this.#domTreeWidget.highlightNodeAttribute(node, attribute);
+  }
+
   selectAndShowSidebarTab(tabId: SidebarPaneTabId): void {
     if (!this.sidebarPaneView) {
       return;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -488,6 +488,24 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  highlightAttribute(attributeName: string): void {
+    // If the attribute is not found, we highlight the tag name instead.
+    let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;
+
+    if (this.nodeInternal.getAttribute(attributeName) !== undefined) {
+      const tag = this.listItemElement.getElementsByClassName('webkit-html-tag')[0];
+      const attributes = tag.getElementsByClassName('webkit-html-attribute');
+      for (const attribute of attributes) {
+        const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
+        if (attributeElement.textContent === attributeName) {
+          animationElement = attributeElement;
+          break;
+        }
+      }
+    }
+    UI.UIUtils.runCSSAnimationOnce(animationElement, 'dom-update-highlight');
+  }
+
   isClosingTag(): boolean {
     return !isOpeningTag(this.tagTypeContext);
   }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -260,6 +260,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#viewOutput?.elementsTreeOutline?.selectDOMNode(node, focus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    this.#viewOutput?.elementsTreeOutline?.highlightNodeAttribute(node, attribute);
+  }
+
   setWordWrap(wrap: boolean): void {
     this.#wrap = wrap;
     this.performUpdate();
@@ -1006,6 +1010,15 @@ export class ElementsTreeOutline extends
     treeElement.revealAndSelect(omitFocus);
   }
 
+  highlightNodeAttribute(node: SDK.DOMModel.DOMNode, attribute: string): void {
+    const treeElement = this.findTreeElement(node);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.reveal();
+    treeElement.highlightAttribute(attribute);
+  }
+
   treeElementFromEventInternal(event: MouseEvent): UI.TreeOutline.TreeElement|null {
     const scrollContainer = this.element.parentElement;
     if (!scrollContainer) {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -52,7 +52,7 @@ import {
   StylesSidebarPane,
 } from './StylesSidebarPane.js';
 
-const {html, nothing, render, Directives: {classMap, ifDefined}} = Lit;
+const {html, nothing, render, Directives: {classMap}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -446,19 +446,25 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
     const attrCall =
         this.#treeElement?.getTracingTooltip('attr', match.node, this.#matchedStyles, this.#computedStyles, context);
     const tooltipId = attributeMissing ? undefined : this.#treeElement?.getTooltipId('custom-attribute');
+    const tooltip = tooltipId ? {tooltipId} : undefined;
     // clang-format off
     render(html`
         <span data-title=${computedValue || ''}
               jslog=${VisualLogging.link('css-variable').track({click: true, hover: true})}
-        >${attrCall ?? 'attr'}(<span class=${attributeClass} aria-details=${ifDefined(tooltipId)}>${match.name}</span>${
-            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
-        }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
-        })</span>${tooltipId ? html`
+        >${attrCall ?? 'attr'}(<devtools-link-swatch class=${attributeClass} .data=${{
+              tooltip,
+              text: match.name,
+              isDefined: true,
+              onLinkActivate: () => this.#handleAttributeActivate(this.#matchedStyles.originatingNodeForStyle(match.style), match.name),
+            }}></devtools-link-swatch>${tooltipId ? html`
           <devtools-tooltip
             id=${tooltipId}
             variant=rich
             jslogContext=elements.css-var
-          >${JSON.stringify(rawValue)}</devtools-tooltip>` : ''}`, varSwatch);
+          >${JSON.stringify(rawValue)}</devtools-tooltip>` : nothing}${
+            match.type ? html` <span class=${typeClass}>${match.type}</span>` : nothing
+        }${renderedFallback ? html`, <span class=${fallbackClass}>${renderedFallback.nodes}</span>` : nothing
+        })</span>`, varSwatch);
     // clang-format on
 
     const color = computedValue && Common.Color.parse(computedValue);
@@ -478,6 +484,15 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
 
     return [colorSwatch, varSwatch];
   }
+
+  #handleAttributeActivate(node: SDK.DOMModel.DOMNode|null, attribute: string): void {
+    if (!node) {
+      return;
+    }
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AttributeLinkClicked);
+    Host.userMetrics.swatchActivated(Host.UserMetrics.SwatchType.ATTR_LINK);
+    ElementsPanel.instance().highlightNodeAttribute(node, attribute);
+  }
 }
 
 // clang-format off

package/front_end/panels/media/TickingFlameChart.ts

@@ -19,7 +19,7 @@ function getGroupDefaultTextColor(): string {
 const DefaultStyle: () => PerfUI.FlameChart.GroupStyle = () => ({
   height: 20,
   padding: 2,
-  collapsible: false,
+  collapsible: PerfUI.FlameChart.GroupCollapsibleState.NEVER,
   font: defaultFont,
   color: getGroupDefaultTextColor(),
   backgroundColor: 'rgba(100 0 0 / 10%)',