chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

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

@@ -69,21 +69,25 @@ const lockedString = i18n.i18n.lockedString;
 
 const LEFT_OFFSET = 5;
 const BOTTOM_OFFSET = 5;
+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;
 }
 
 export interface ViewInput extends BadgeNotificationProperties {
-  onCloseClick: () => void;
+  onDismissClick: () => void;
 }
 
 // clang-format off
@@ -101,7 +105,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
 
   const crossButton = html`<devtools-button
         class="dismiss notification-button"
-        @click=${input.onCloseClick}
+        @click=${input.onDismissClick}
         jslog=${VisualLogging.action('badge-notification.dismiss').track({click: true})}
         aria-label=${i18nString(UIStrings.close)}
         .iconName=${'cross'}
@@ -112,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">
@@ -135,12 +139,14 @@ function revealBadgeSettings(): void {
 }
 
 export class BadgeNotification extends UI.Widget.Widget {
+  jslogContext = '';
   message: HTMLElement|string = '';
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
+  isStarterBadge = false;
 
+  #autoCloseTimeout?: number;
   #view: View;
-
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
@@ -170,12 +176,19 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.message = properties.message;
     this.imageUri = properties.imageUri;
     this.actions = properties.actions;
+    this.isStarterBadge = properties.isStarterBadge;
+    this.jslogContext = properties.jslogContext;
     this.requestUpdate();
     this.show(document.body);
 
     void this.updateComplete.then(() => {
       this.#positionNotification();
     });
+
+    if (this.#autoCloseTimeout) {
+      window.clearTimeout(this.#autoCloseTimeout);
+    }
+    this.#autoCloseTimeout = window.setTimeout(this.#onAutoClose, AUTO_CLOSE_TIME_IN_MS);
   }
 
   async #presentStarterBadge(badge: Badges.Badge): Promise<void> {
@@ -183,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.
@@ -198,20 +211,27 @@ export class BadgeNotification extends UI.Widget.Widget {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+        jslogContext: badge.name,
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
-            onClick: () => {/* To implement */},
+            jslogContext: 'remind-me-later',
+            onClick: () => {
+              this.detach();
+              Badges.UserBadges.instance().snoozeStarterBadge();
+            },
           },
           {
             label: i18nString(UIStrings.receiveBadges),
+            jslogContext: 'receive-badges',
             onClick: () => {
-              this.#close();
+              this.detach();
               revealBadgeSettings();
             }
           }
         ],
         imageUri: badge.imageUri,
+        isStarterBadge: true,
       });
       return;
     }
@@ -220,47 +240,77 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      jslogContext: badge.name,
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
-          onClick: () => {/* TODO(ergunsh): Implement */},
+          jslogContext: 'remind-me-later',
+          onClick: () => {
+            this.detach();
+            Badges.UserBadges.instance().snoozeStarterBadge();
+          },
         },
         {
           label: i18nString(UIStrings.createProfile),
+          jslogContext: 'create-profile',
           onClick: () => {
-            this.#close();
-            GdpSignUpDialog.GdpSignUpDialog.show();
+            this.detach();
+            GdpSignUpDialog.GdpSignUpDialog.show({
+              // 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,
     });
   }
 
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      jslogContext: badge.name,
       actions: [
         {
           label: i18nString(UIStrings.manageSettings),
+          jslogContext: 'manage-settings',
           onClick: () => {
-            this.#close();
+            this.detach();
             revealBadgeSettings();
           },
         },
         {
           label: i18nString(UIStrings.viewProfile),
+          jslogContext: 'view-profile',
           onClick: () => {
             UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
         }
       ],
       imageUri: badge.imageUri,
+      isStarterBadge: badge.isStarterBadge,
     });
   }
 
-  #close = (): void => {
+  override onDetach(): void {
+    window.clearTimeout(this.#autoCloseTimeout);
+  }
+
+  #onDismissClick = (): void => {
+    this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().dismissStarterBadge();
+    }
+  };
+
+  #onAutoClose = (): void => {
     this.detach();
+
+    if (this.isStarterBadge) {
+      Badges.UserBadges.instance().snoozeStarterBadge();
+    }
   };
 
   override wasShown(): void {
@@ -273,7 +323,9 @@ export class BadgeNotification extends UI.Widget.Widget {
       message: this.message,
       imageUri: this.imageUri,
       actions: this.actions,
-      onCloseClick: this.#close,
+      isStarterBadge: this.isStarterBadge,
+      onDismissClick: this.#onDismissClick,
+      jslogContext: this.jslogContext,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -137,7 +137,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <devtools-switch
             .checked=${input.keepMeUpdated}
             @switchchange=${(e: Switch.Switch.SwitchChangeEvent) => input.onKeepMeUpdatedChange(e.checked)}
-            jslog=${VisualLogging.toggle('gdp.signup.keep-me-updated').track({ click: true })}
+            jslog=${VisualLogging.toggle('keep-me-updated').track({ click: true })}
             aria-label=${i18nString(UIStrings.keepUpdated)}
           >
             </devtools-switch>
@@ -152,11 +152,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 +176,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 +194,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 +239,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 +252,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/elements/ComputedStyleWidget.ts

@@ -205,7 +205,6 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
     swatch.renderColor(color);
     const valueElement = document.createElement('span');
     valueElement.textContent = match.text;
-    swatch.append(valueElement);
 
     swatch.addEventListener(
         InlineEditor.ColorSwatch.ColorChangedEvent.eventName, (event: InlineEditor.ColorSwatch.ColorChangedEvent) => {
@@ -214,7 +213,7 @@ class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatc
         });
 
     context.addControl('color', swatch);
-    return [swatch];
+    return [swatch, valueElement];
   }
 
   matcher(): SDK.CSSPropertyParserMatchers.ColorMatcher {

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/LayoutPane.ts

@@ -284,7 +284,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
       <div style="min-width: min-content;" jslog=${VisualLogging.pane('layout').track({resize: true})}>
         <style>${layoutPaneStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
+        <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
         <details open>
           <summary class="header"
             @keydown=${input.onSummaryKeyDown}

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%)',

package/front_end/panels/network/NetworkLogView.ts

@@ -2391,6 +2391,10 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
          Lastly we replace new lines with ^ and TWO new lines because the first
          new line is there to enact the escape command the second is the character
          to escape (in this case new line).
+
+         All other whitespace characters are replaced with a single space, as there
+         is no way to enter their literal values in a command line, and they do break
+         the command allowing for injection.
         */
       const encapsChars = '^"';
       return encapsChars +
@@ -2398,7 +2402,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
               .replace(/"/g, '\\"')
               .replace(/[^a-zA-Z0-9\s_\-:=+~'\/.',?;()*`]/g, '^$&')
               .replace(/%(?=[a-zA-Z0-9_])/g, '%^')
-              .replace(/[^\S \r\n]/g, '^$&')
+              .replace(/[^\S \r\n]/g, ' ')
               .replace(/\r?\n|\r/g, '^\n\n') +
           encapsChars;
     }