chrome-devtools-frontend 1.0.1574367 → 1.0.1575635

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -151,7 +151,7 @@ const UIStringsNotTranslate = {
    */
   accountAvatar: 'Account avatar',
   /**
-   * @description Title for the x-link which wraps the image input rendered in chat messages.
+   * @description Title for the link which wraps the image input rendered in chat messages.
    */
   openImageInNewTab: 'Open image in a new tab',
   /**
@@ -250,7 +250,7 @@ export interface MessageInput {
   isReadOnly: boolean;
   isLastMessage: boolean;
   canShowFeedbackForm: boolean;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'|'accountGivenName'>;
   markdownRenderer: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void;
   onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void;
@@ -260,7 +260,8 @@ export interface MessageInput {
 export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
   const message = input.message;
   if (message.entity === ChatMessageEntity.USER) {
-    const name = input.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
+    const givenName = AiAssistanceModel.AiUtils.isGeminiBranding() ? input.userInfo.accountGivenName : '';
+    const name = givenName || input.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
     const image = input.userInfo.accountImage ?
         html`<img src="data:image/png;base64, ${input.userInfo.accountImage}" alt=${
             UIStringsNotTranslate.accountAvatar} />` :
@@ -748,7 +749,8 @@ export class ChatMessage extends UI.Widget.Widget {
   isReadOnly = false;
   canShowFeedbackForm = false;
   isLastMessage = false;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'> = {};
+  userInfo:
+      Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'|'accountGivenName'> = {};
   markdownRenderer!: MarkdownLitRenderer;
   onSuggestionClick: (suggestion: string) => void = () => {};
   onFeedbackSubmit:

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -62,7 +62,7 @@ export interface Props {
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>;
+  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountGivenName'>;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
@@ -78,7 +78,7 @@ export interface Props {
 }
 
 interface ChatWidgetInput extends Props {
-  accountName: string;
+  accountGivenName: string;
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
@@ -133,8 +133,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 </div>
                 ${AiAssistanceModel.AiUtils.isGeminiBranding() ?
                   html`
-                    <h1 class='greeting'>Hello, ${input.accountName}</h1>
-                    <h1>${lockedString(UIStringsNotTranslate.emptyStateTextGemini)}</h1>
+                    <h1 class='greeting'>Hello${input.accountGivenName ? `, ${input.accountGivenName}` : ''}</h1>
+                    <p class='cta'>${lockedString(UIStringsNotTranslate.emptyStateTextGemini)}</p>
                   ` : html`<h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>`
                 }
               </div>
@@ -323,8 +323,7 @@ export class ChatView extends HTMLElement {
     this.#view(
         {
           ...this.#props,
-          // TODO(b/468206227): This needs to be a first name.
-          accountName: this.#props.userInfo.accountFullName ?? '',
+          accountGivenName: this.#props.userInfo.accountGivenName ?? '',
           handleScroll: this.#handleScroll,
           handleSuggestionClick: this.#handleSuggestionClick,
           handleMessageContainerRef: this.#handleMessageContainerRef,

package/front_end/panels/ai_assistance/components/chatView.css

@@ -166,12 +166,17 @@ main {
 }
 
 .gemini {
+  .empty-state-container {
+    padding: var(--sys-size-8);
+  }
+
   .empty-state-container .icon {
     display: none;
   }
 
   .empty-state-container .header {
     align-items: flex-start;
+    line-height: var(--sys-size-4);
   }
 
   .empty-state-content {
@@ -179,9 +184,14 @@ main {
   }
 
   .empty-state-container .greeting {
+    font-size: var(--sys-size-10);
     color: var(--sys-color-primary);
   }
 
+  .empty-state-container .cta {
+    font-size: var(--sys-size-10);
+  }
+
   main {
     align-items: flex-start;
   }

package/front_end/panels/application/StorageView.ts

@@ -10,7 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import type * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Icon} from '../../ui/kit/kit.js';
+import {Icon, Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -218,9 +218,9 @@ export class StorageView extends UI.Widget.VBox {
     this.quotaRow = quota.appendSelectableRow();
     this.quotaRow.classList.add('quota-usage-row');
     const learnMoreRow = quota.appendRow();
-    const learnMore = UI.XLink.XLink.create(
+    const learnMore = Link.create(
         'https://developer.chrome.com/docs/devtools/progressive-web-apps#opaque-responses',
-        i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+        i18nString(UIStrings.learnMore), undefined, 'learn-more');
     learnMoreRow.appendChild(learnMore);
     this.quotaUsage = null;
     this.pieChart = new PerfUI.PieChart.PieChart();

package/front_end/panels/application/preloading/components/preloadingDisabledInfobar.css

@@ -30,7 +30,7 @@
   grid-column-start: span 2;
 }
 
-x-link {
+devtools-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
 }

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -19,33 +19,43 @@ const UIStringsNotTranslate = {
    */
   codeCompletionJustGotBetter: 'Code completion just got better',
   /**
-   * @description First item in the description
-   */
-  asYouType: 'As you type, DevTools generates code suggestions to help you code faster.',
-  /**
-   * @description Second item in the description
+   * @description First item in the description.
    */
   describeCodeInComment:
-      'In Console and Sources, you can now describe the code you need in a comment, then press Ctrl+I to generate it.',
+      'Pressing Ctrl+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
   /**
-   * @description Second item in the description
+   * @description First item in the description.
    */
   describeCodeInCommentForMacOs:
-      'In Console and Sources, you can now describe the code you need in a comment, then press Cmd+I to generate it.',
+      'Pressing Cmd+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+  /**
+   * @description Second item in the description.
+   */
+  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster.',
+  /**
+   * @description Third item in the description.
+   */
+  disclaimerTextPrivacy:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Third item in the description.
+   */
+  disclaimerTextPrivacyNoLogging:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * @description Text for the manage in settings button in the upgrade notice dialog.
    */
   manageInSettings: 'Manage in settings',
   /**
-   * @description Text for the got it button in the upgrade notice dialog.
+   * @description Text for the generate code button in the upgrade notice dialog.
    */
-  gotIt: 'Got it',
+  generateCode: 'Generate code',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
 
 export class AiCodeGenerationUpgradeDialog {
-  static show(): void {
+  static show({noLogging}: {noLogging: boolean}): void {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(lockedString(UIStringsNotTranslate.codeCompletionJustGotBetter));
     // clang-format off
@@ -63,10 +73,6 @@ export class AiCodeGenerationUpgradeDialog {
           </h2>
         </header>
         <main class="reminder-container">
-          <div class="reminder-item">
-            <devtools-icon class="reminder-icon" name="code"></devtools-icon>
-            <span>${lockedString(UIStringsNotTranslate.asYouType)}</span>
-          </div>
           <div class="reminder-item">
             <devtools-icon class="reminder-icon" name="text-analysis"></devtools-icon>
             <span>
@@ -75,6 +81,16 @@ export class AiCodeGenerationUpgradeDialog {
                   lockedString(UIStringsNotTranslate.describeCodeInComment)}
             </span>
           </div>
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="code"></devtools-icon>
+            <span>${lockedString(UIStringsNotTranslate.asYouType)}</span>
+          </div>
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="google"></devtools-icon>
+            <span>${noLogging ? lockedString(UIStringsNotTranslate.disclaimerTextPrivacyNoLogging) :
+                                lockedString(UIStringsNotTranslate.disclaimerTextPrivacy)}
+            </span>
+          </div>
         </main>
         <footer>
           <div class="right-buttons">
@@ -93,7 +109,7 @@ export class AiCodeGenerationUpgradeDialog {
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.continue"
               .variant=${Buttons.Button.Variant.PRIMARY}>
-              ${lockedString(UIStringsNotTranslate.gotIt)}
+              ${lockedString(UIStringsNotTranslate.generateCode)}
             </devtools-button>
           </div>
         </footer>

package/front_end/panels/common/aiCodeCompletionSummaryToolbar.css

@@ -85,7 +85,7 @@
             gap: var(--sys-size-2);
             white-space: normal;
 
-            x-link {
+            devtools-link {
                 color: var(--sys-color-primary);
                 text-decoration: underline;
 

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
@@ -63,7 +64,7 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
     UI.Context.Context.instance().addFlavorChangeListener(
         SDK.RuntimeModel.ExecutionContext, this.executionContextChangedExternally, this);
     UI.Context.Context.instance().addFlavorChangeListener(
-        SDK.DebuggerModel.CallFrame, this.callFrameSelectedInUI, this);
+        StackTrace.StackTrace.DebuggableFrameFlavor, this.callFrameSelectedInUI, this);
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.RuntimeModel.RuntimeModel, this, {scoped: true});
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.CallFrameSelected, this.callFrameSelectedInModel,
@@ -263,8 +264,8 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
   }
 
   private callFrameSelectedInUI(): void {
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-    const callFrameContext = callFrame?.script.executionContext();
+    const callFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    const callFrameContext = callFrame?.sdkFrame.script.executionContext();
     if (callFrameContext) {
       UI.Context.Context.instance().setFlavor(SDK.RuntimeModel.ExecutionContext, callFrameContext);
     }

package/front_end/panels/console/ConsoleFormat.ts

@@ -199,11 +199,34 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   return {tokens, args: args.slice(argIndex)};
 };
 
+/**
+ * This function converts a string into a partial regex string that
+ * case-insensitively matches it in CSS, even if CSS escapes are used.
+ *
+ * @param cssString the target string.
+ * @returns a partial regex matching the string in CSS.
+ */
+const cssEscapeRegex = (cssString: string): string => {
+  return [...cssString]
+      .map(char => {
+        const charCodes = new Set([char.toLowerCase(), char.toUpperCase()].map(c => c.charCodeAt(0).toString(16)));
+        const charCodeRegex =
+            [...charCodes].map(charCode => `\\\\0{0,${6 - charCode.length}}${charCode}[ \\n\\t]?`).join('|');
+        return `\\\\?(?:${charCodeRegex}|${char})`;
+      })
+      .join('');
+};
+
 export const updateStyle = (currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void => {
   const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
   // We only allow data URLs with the `url()` CSS function.
   // The capture group is not intended to grab the whole URL exactly, just enough so we can check the scheme.
-  const URL_REGEX = /url\([\'\"]?([^\)]*)/g;
+  // The regex also covers CSS hex-escaped variations of `url()`.
+  const URL_REGEX = new RegExp(`(?=${cssEscapeRegex('url')}\\(['"]?([^\\)]*))`, 'gi');
+  // We greedily capture all `image-set()`s to make sure that all of
+  // them properly use `url()`s to enforce the data URL check later.
+  const IMAGESET_REGEX = new RegExp(`(?=(${cssEscapeRegex('image-set')}\\(.*))`, 'gi');
+  const GOOD_IMAGESET_REGEX = /^image-set\((?:(?:(?:url|type)\("[^\\"]*"\)|[\d.]+(?:x|dpi|dpcm|dppx)),?\s*)+\)/i;
 
   currentStyle.clear();
   /* eslint-disable-next-line @devtools/no-imperative-dom-api --
@@ -218,9 +241,15 @@ export const updateStyle = (currentStyle: Map<string, {value: string, priority:
       continue;
     }
 
+    const value = buffer.style.getPropertyValue(property);
+    // We make sure every `image-set()` only uses `url()`s for its images.
+    // If any of them seem malformed, we skip the whole property.
+    const imageSets = [...value.matchAll(IMAGESET_REGEX)];
+    if (imageSets.some(match => !GOOD_IMAGESET_REGEX.test(match[1]))) {
+      continue;
+    }
     // There could be multiple `url()` functions, so we check them all.
     // If any of them is not a `data` URL, we skip the whole property.
-    const value = buffer.style.getPropertyValue(property);
     const potentialUrls = [...value.matchAll(URL_REGEX)].map(match => match[1]);
     if (potentialUrls.some(
             potentialUrl => !Common.ParsedURL.schemeIs(potentialUrl as Platform.DevToolsPath.UrlString, 'data:'))) {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -626,6 +626,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#startTime = performance.now();
     let teaserText = '';
     let firstChunkReceived = false;
+    let firstChunkTime = 0;
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
         teaserText += chunk;
@@ -634,7 +635,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         this.requestUpdate();
         if (!firstChunkReceived) {
           firstChunkReceived = true;
-          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(performance.now() - this.#startTime);
+          firstChunkTime = performance.now();
+          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(firstChunkTime - this.#startTime);
+          Host.userMetrics.consoleInsightTeaserFirstChunkGeneratedMedium(firstChunkTime - this.#startTime);
         }
       }
     } catch (err) {
@@ -654,6 +657,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     clearTimeout(this.#timeoutId);
     const duration = performance.now() - this.#startTime;
     Host.userMetrics.consoleInsightTeaserGenerated(duration);
+    Host.userMetrics.consoleInsightTeaserGeneratedMedium(duration);
+    Host.userMetrics.consoleInsightTeaserChunkToEndMedium(performance.now() - firstChunkTime);
     if (teaserText.length > 300) {
       Host.userMetrics.consoleInsightLongTeaserGenerated(duration);
     } else {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -54,7 +54,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {Icon} from '../../ui/kit/kit.js';
+import {Icon, Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -1092,6 +1092,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onbind(): void {
+    this.performUpdate();
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
       this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
@@ -1115,6 +1116,49 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       this.editing.cancel();
     }
+    // Update the element to clean up adorner registrations with the
+    // ElementsPanel.
+    // We do not change the ElementsTreeElement state in case the
+    // element is bound again.
+    DEFAULT_VIEW(
+        {
+          containerAdornerActive: false,
+          showAdAdorner: false,
+          showContainerAdorner: false,
+          containerType: this.#layout?.containerType,
+          showFlexAdorner: false,
+          flexAdornerActive: false,
+          showGridAdorner: false,
+          showGridLanesAdorner: false,
+          showMediaAdorner: false,
+          showPopoverAdorner: false,
+          showTopLayerAdorner: false,
+          gridAdornerActive: false,
+          popoverAdornerActive: false,
+          isSubgrid: false,
+          showViewSourceAdorner: false,
+          showScrollAdorner: false,
+          showScrollSnapAdorner: false,
+          scrollSnapAdornerActive: false,
+          showSlotAdorner: false,
+          showStartingStyleAdorner: false,
+          startingStyleAdornerActive: false,
+          nodeInfo: this.#nodeInfo,
+          onStartingStyleAdornerClick: () => {},
+          onSlotAdornerClick: () => {},
+          topLayerIndex: -1,
+          onViewSourceAdornerClick: () => {},
+          onGutterClick: () => {},
+          onContainerAdornerClick: () => {},
+          onFlexAdornerClick: () => {},
+          onGridAdornerClick: () => {},
+          onMediaAdornerClick: () => {},
+          onPopoverAdornerClick: () => {},
+          onScrollSnapAdornerClick: () => {},
+          onTopLayerAdornerClick: () => {},
+        },
+        this, this.listItemElement);
+
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
@@ -2414,7 +2458,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         value = Platform.StringUtilities.trimMiddle(value, 60);
       }
       const link = node && node.nodeName().toLowerCase() === 'a' ?
-          UI.XLink.XLink.create(rewrittenHref, value, '', true /* preventClick */, 'image-url') :
+          Link.create(rewrittenHref, value, undefined, 'image-url') :
           Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
             text: value,
             preventClick: true,

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -80,7 +80,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, ElementsTreeOutline>();
 
-const populatedTreeElements = new Set<ElementsTreeElement>();
+const populatedTreeElements = new WeakSet<ElementsTreeElement>();
 
 export type View = typeof DEFAULT_VIEW;
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -101,6 +101,14 @@ const UIStrings = {
    * @description A context menu item in Styles panel to view the computed CSS property value.
    */
   viewComputedValue: 'View computed value',
+  /**
+   * @description Tooltip text for a style property overridden by an animation.
+   */
+  overriddenByAnimation: 'Overridden by animation styles.',
+  /**
+   * @description Link text in the tooltip to open the Animations panel.
+   */
+  openAnimationsPanel: 'Open Animations panel',
   /**
    * @description Title of the button that opens the flexbox editor in the Styles panel.
    */
@@ -2465,6 +2473,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     if (this.property.parsedOk) {
       this.updateAuthoringHint();
+      this.updateAnimationOverrideHint();
     } else {
       // Avoid having longhands under an invalid shorthand.
       this.listItemElement.classList.add('not-parsed-ok');
@@ -2695,6 +2704,60 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  updateAnimationOverrideHint(): void {
+    const existingElement = this.listItemElement.querySelector('.animation-override-hint-wrapper');
+    if (existingElement) {
+      existingElement?.remove();
+    }
+
+    if (!this.overriddenByAnimation() || UI.ViewManager.ViewManager.instance().isViewVisible('animations')) {
+      return;
+    }
+
+    const wrapper = document.createElement('span');
+    wrapper.classList.add('animation-override-hint-wrapper', 'hint-wrapper');
+    const hintIcon = new Icon();
+    hintIcon.name = 'info';
+    hintIcon.classList.add('hint', 'small');
+    hintIcon.tabIndex = -1;
+
+    wrapper.append(hintIcon);
+    this.listItemElement.append(wrapper);
+
+    const tooltipId = this.getTooltipId('animation-override-hint');
+    hintIcon.setAttribute('aria-details', tooltipId);
+
+    const tooltip = new Tooltips.Tooltip.Tooltip({
+      anchor: hintIcon,
+      variant: 'rich',
+      padding: 'large',
+      id: tooltipId,
+      jslogContext: 'elements.css-animation-hint'
+    });
+    const message = i18nString(UIStrings.overriddenByAnimation);
+    const content = document.createElement('div');
+    content.classList.add('animation-override-hint');
+    content.textContent = message;
+
+    const link = document.createElement('devtools-link');
+    link.textContent = i18nString(UIStrings.openAnimationsPanel);
+    link.jslogContext = 'open-in-animations-panel';
+    link.addEventListener('click', event => {
+      event.preventDefault();
+      void UI.ViewManager.ViewManager.instance().showView('animations');
+    });
+
+    content.appendChild(document.createTextNode(' '));
+    content.appendChild(link);
+    tooltip.appendChild(content);
+
+    this.listItemElement.appendChild(tooltip);
+  }
+
+  private overriddenByAnimation(): boolean {
+    return this.#matchedStyles.isPropertyOverriddenByAnimation(this.property);
+  }
+
   private mouseUp(event: MouseEvent): void {
     const activeTreeElement = parentMap.get(this.#parentPane);
     parentMap.delete(this.#parentPane);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -237,6 +237,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
       return null;
     }, () => this.node());
+
+    UI.ViewManager.ViewManager.instance().addEventListener(UI.ViewManager.Events.VIEW_VISIBILITY_CHANGED, event => {
+      if (event.data.revealedViewId === 'animations' || event.data.hiddenViewId === 'animations') {
+        this.#scheduleResetUpdateIfNotEditing();
+      }
+    });
   }
 
   get webCustomData(): WebCustomData|undefined {
@@ -741,6 +747,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
+    if (!UI.ViewManager.ViewManager.instance().isViewVisible('animations')) {
+      return;
+    }
+
     void this.computedStyleUpdateThrottler.schedule(async () => {
       await this.#updateAnimatedStyles();
       this.handledComputedStyleChangedForTest();
@@ -1078,7 +1088,14 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // We disable the layer widget initially. If we see a layer in
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
+    const animationsPanelVisible = UI.ViewManager.ViewManager.instance().isViewVisible('animations');
     for (const style of matchedStyles.nodeStyles()) {
+      const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
+          style.type === SDK.CSSStyleDeclaration.Type.Animation;
+      if (isTransitionOrAnimationStyle && !animationsPanelVisible) {
+        continue;
+      }
+
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
@@ -1090,8 +1107,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       addLayerSeparator(style);
 
       const lastBlock = blocks[blocks.length - 1];
-      const isTransitionOrAnimationStyle = style.type === SDK.CSSStyleDeclaration.Type.Transition ||
-          style.type === SDK.CSSStyleDeclaration.Type.Animation;
       if (lastBlock && (!isTransitionOrAnimationStyle || style.allProperties().length > 0)) {
         this.idleCallbackManager.schedule(() => {
           const section = new StylePropertiesSection(

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -165,6 +165,10 @@ devtools-icon.icon-link {
   opacity: 50%;
 }
 
+.animation-override-hint {
+  max-width: 232px;
+}
+
 .hint-wrapper {
   align-items: center;
   display: inline-block;

package/front_end/panels/issues/AffectedMetadataAllowedSitesView.ts

@@ -5,7 +5,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {Link} from '../../ui/kit/kit.js';
 
 import {AffectedResourcesView} from './AffectedResourcesView.js';
 
@@ -46,8 +46,8 @@ export class AffectedMetadataAllowedSitesView extends AffectedResourcesView {
         optOutTextElement.textContent = ' (opt-out: ' + issueData.details().optOutPercentage + '% - ';
         textContentElement.appendChild(optOutTextElement);
 
-        const linkElement = UI.XLink.XLink.create(
-            'https://developers.google.com/privacy-sandbox/blog/grace-period-opt-out', 'learn more');
+        const linkElement =
+            Link.create('https://developers.google.com/privacy-sandbox/blog/grace-period-opt-out', 'learn more');
         textContentElement.appendChild(linkElement);
 
         const endTextElement = document.createElement('span');

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -9,6 +9,7 @@ import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Link} from '../../ui/kit/kit.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';
@@ -118,7 +119,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         uiI18n.getFormatLocalizedString(
           str_, UIStrings.checkSForPossibleReasons,
           {
-            PH1: UI.XLink.XLink.create('about:gpu', undefined, undefined, undefined, 'about-gpu')
+            PH1: Link.create('about:gpu', undefined, undefined, 'about-gpu')
           }
         )
       ],