chrome-devtools-frontend 1.0.1519267 → 1.0.1520535

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

@@ -214,8 +214,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
-const TOOLTIP_POPOVER_OFFSET = 4;
-const RELEVANT_DATA_LINK_ID = 'relevant-data-link';
+const RELEVANT_DATA_LINK_FOOTER_ID = 'relevant-data-link-footer';
+const RELEVANT_DATA_LINK_CHAT_ID = 'relevant-data-link-chat';
 
 export interface Step {
   isLoading: boolean;
@@ -313,7 +313,6 @@ export class ChatView extends HTMLElement {
   #messagesContainerElement?: Element;
   #mainElementRef?: Lit.Directives.Ref<Element> = Lit.Directives.createRef();
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
-  #popoverHelper: UI.PopoverHelper.PopoverHelper|null = null;
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
    *
@@ -391,63 +390,6 @@ export class ChatView extends HTMLElement {
     this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
   }
 
-  #handleChatUiRef(el: Element|undefined): void {
-    if (!el || this.#popoverHelper) {
-      return;
-    }
-
-    // TODO: Update here when b/409965560 is fixed.
-    this.#popoverHelper = new UI.PopoverHelper.PopoverHelper((el as HTMLElement), event => {
-      const popoverShownNode =
-          event.target instanceof HTMLElement && event.target.id === RELEVANT_DATA_LINK_ID ? event.target : null;
-      if (!popoverShownNode) {
-        return null;
-      }
-
-      // We move the glass pane to be a bit lower so
-      // that it does not disappear when moving the cursor
-      // over to link.
-      const nodeBox = popoverShownNode.boxInWindow();
-      nodeBox.y = nodeBox.y + TOOLTIP_POPOVER_OFFSET;
-      return {
-        box: nodeBox,
-        show: async (popover: UI.GlassPane.GlassPane) => {
-          // clang-format off
-          Lit.render(html`
-            <style>
-              .info-tooltip-container {
-                max-width: var(--sys-size-28);
-                padding: var(--sys-size-4) var(--sys-size-5);
-
-                .tooltip-link {
-                  display: block;
-                  margin-top: var(--sys-size-4);
-                  color: var(--sys-color-primary);
-                  padding-left: 0;
-                }
-              }
-            </style>
-            <div class="info-tooltip-container">
-              ${this.#props.disclaimerText}
-              <button
-                class="link tooltip-link"
-                role="link"
-                jslog=${VisualLogging.link('open-ai-settings').track({
-                  click: true,
-                })}
-                @click=${() => {
-                  void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-                }}
-              >${i18nString(UIStrings.learnAbout)}</button>
-            </div>`, popover.contentElement, {host: this});
-          // clang-format on
-          return true;
-        },
-      };
-    });
-    this.#popoverHelper.setTimeout(0);
-  }
-
   #handleMessagesContainerResize(): void {
     if (!this.#pinScrollToBottom) {
       return;
@@ -583,9 +525,11 @@ export class ChatView extends HTMLElement {
       // clang-format off
       const footerContents = this.#props.conversationType
         ? renderRelevantDataDisclaimer({
-            isLoading: this.#props.isLoading,
-            blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
-          })
+          isLoading: this.#props.isLoading,
+          blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
+          tooltipId: RELEVANT_DATA_LINK_FOOTER_ID,
+          disclaimerText: this.#props.disclaimerText,
+        })
         : html`<p>
             ${lockedString(UIStringsNotTranslate.inputDisclaimerForEmptyState)}
             <button
@@ -611,7 +555,7 @@ export class ChatView extends HTMLElement {
     // clang-format off
     Lit.render(html`
       <style>${chatViewStyles}</style>
-      <div class="chat-ui" ${Lit.Directives.ref(this.#handleChatUiRef)}>
+      <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
           ${renderMainContents({
             state: this.#props.state,
@@ -643,6 +587,7 @@ export class ChatView extends HTMLElement {
                 isTextInputDisabled: this.#props.isTextInputDisabled,
                 inputPlaceholder: this.#props.inputPlaceholder,
                 state: this.#props.state,
+                disclaimerText: this.#props.disclaimerText,
                 selectedContext: this.#props.selectedContext,
                 inspectElementToggled: this.#props.inspectElementToggled,
                 multimodalInputEnabled: this.#props.multimodalInputEnabled,
@@ -1433,8 +1378,12 @@ function renderImageInput({
   // clang-format on
 }
 
-function renderRelevantDataDisclaimer(
-    {isLoading, blockedByCrossOrigin}: {isLoading: boolean, blockedByCrossOrigin: boolean}): Lit.LitTemplate {
+function renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin, tooltipId, disclaimerText}: {
+  isLoading: boolean,
+  blockedByCrossOrigin: boolean,
+  tooltipId: string,
+  disclaimerText: string,
+}): Lit.LitTemplate {
   const classes =
       Lit.Directives.classMap({'chat-input-disclaimer': true, 'hide-divider': !isLoading && blockedByCrossOrigin});
   // clang-format off
@@ -1443,7 +1392,7 @@ function renderRelevantDataDisclaimer(
       <button
         class="link"
         role="link"
-        id=${RELEVANT_DATA_LINK_ID}
+        aria-details=${tooltipId}
         jslog=${VisualLogging.link('open-ai-settings').track({
           click: true,
         })}
@@ -1451,6 +1400,7 @@ function renderRelevantDataDisclaimer(
           void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
         }}
       >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
+      ${renderDisclamerTooltip(tooltipId, disclaimerText)}
     </p>
   `;
   // clang-format on
@@ -1470,6 +1420,7 @@ function renderChatInput({
   isTextInputEmpty,
   uploadImageInputEnabled,
   aidaAvailability,
+  disclaimerText,
   onContextClick,
   onInspectElementClick,
   onSubmit,
@@ -1490,6 +1441,7 @@ function renderChatInput({
   inspectElementToggled: boolean,
   isTextInputEmpty: boolean,
   aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
+  disclaimerText: string,
   onContextClick: () => void,
   onInspectElementClick: () => void,
   onSubmit: (ev: SubmitEvent) => void,
@@ -1547,7 +1499,7 @@ function renderChatInput({
         </div>
         <div class="chat-input-actions-right">
           <div class="chat-input-disclaimer-container">
-            ${renderRelevantDataDisclaimer({isLoading, blockedByCrossOrigin})}
+            ${renderRelevantDataDisclaimer({ isLoading, blockedByCrossOrigin, tooltipId: RELEVANT_DATA_LINK_CHAT_ID, disclaimerText})}
           </div>
           ${renderMultimodalInputButtons({
             multimodalInputEnabled, blockedByCrossOrigin, isTextInputDisabled, imageInput, uploadImageInputEnabled, onTakeScreenshot, onImageUpload
@@ -1578,7 +1530,7 @@ function renderAidaUnavailableContents(
 }
 
 function renderConsentViewContents(): Lit.TemplateResult {
-  const settingsLink = document.createElement('button');
+  const settingsLink = document.createElement('span');
   settingsLink.textContent = i18nString(UIStrings.settingsLink);
   settingsLink.classList.add('link');
   UI.ARIAUtils.markAsLink(settingsLink);
@@ -1697,6 +1649,30 @@ function renderMainContents({
   return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
 }
 
+function renderDisclamerTooltip(id: string, disclaimerText: string): Lit.TemplateResult {
+  // clang-format off
+  return html`
+    <devtools-tooltip
+      id=${id}
+      variant=${'rich'}
+    >
+      <div class="info-tooltip-container">
+        ${disclaimerText}
+        <button
+          class="link tooltip-link"
+          role="link"
+          jslog=${VisualLogging.link('open-ai-settings').track({
+            click: true,
+          })}
+          @click=${() => {
+            void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+          }}>${i18nString(UIStrings.learnAbout)}
+        </button>
+      </div>
+    </devtools-tooltip>`;
+  // clang-format on
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;

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

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import type * as Marked from '../../../third_party/marked/marked.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -11,14 +12,32 @@ import * as Lit from '../../../ui/lit/lit.js';
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 
 const {html} = Lit;
+const {ref, createRef} = Lit.Directives;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
-  constructor(private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null) {
+  constructor(
+      private mainFrameId = '',
+      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
     super();
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.TemplateResult|null {
     if (token.type === 'link' && token.href.startsWith('#')) {
+      if (token.href.startsWith('#node-')) {
+        const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
+
+        const templateRef = createRef();
+        void this.#linkifyNode(nodeId, token.text).then(node => {
+          if (!templateRef.value || !node) {
+            return;
+          }
+
+          templateRef.value.textContent = '';
+          templateRef.value.append(node);
+        });
+        return html`<span ${ref(templateRef)}>${token.text}</span>`;
+      }
+
       const event = this.lookupEvent(token.href.slice(1) as Trace.Types.File.SerializableKey);
       if (!event) {
         return html`${token.text}`;
@@ -41,4 +60,31 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
 
     return super.templateForToken(token);
   }
+
+  // Taken from front_end/panels/timeline/components/insights/NodeLink.ts
+  // Would be nice to move the above component to somewhere that allows the AI
+  // Assistance panel to also use it.
+  async #linkifyNode(backendNodeId: Protocol.DOM.BackendNodeId, label: string): Promise<Node|undefined> {
+    if (backendNodeId === undefined) {
+      return;
+    }
+
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const domNodesMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = domNodesMap?.get(backendNodeId);
+    if (!node) {
+      return;
+    }
+
+    if (node.frameId() !== this.mainFrameId) {
+      return;
+    }
+
+    const linkedNode = await Common.Linkifier.Linkifier.linkify(node, {textContent: label});
+    return linkedNode;
+  }
 }

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

@@ -89,6 +89,18 @@
   color: var(--sys-color-on-surface-subtle);
 }
 
+.info-tooltip-container {
+  max-width: var(--sys-size-28);
+  padding: var(--sys-size-4) var(--sys-size-5);
+}
+
+.tooltip-link {
+  display: block;
+  margin-top: var(--sys-size-4);
+  color: var(--sys-color-primary);
+  padding-left: 0;
+}
+
 .chat-input-container {
   width: 100%;
   display: flex;
@@ -662,7 +674,7 @@ main {
   justify-content: center;
   font: var(--sys-typescale-headline4);
   gap: var(--sys-size-8);
-  padding: var(--sys-size-3);
+  padding: var(--sys-size-4);
   max-width: var(--sys-size-33);
 
   /* Prevents the container from jumping when the scrollbar is shown */

package/front_end/panels/animation/AnimationTimeline.ts

@@ -282,7 +282,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.#playbackRate = 1;
     this.#allPaused = false;
     this.#animationGroupPausedBeforeScrub = false;
-    this.#toolbarViewContainer = this.contentElement.createChild('div');
+    this.#toolbarViewContainer = this.contentElement.createChild('div', 'toolbar-view-container');
     this.createHeader();
     this.#animationsContainer = this.contentElement.createChild('div', 'animation-timeline-rows');
     this.#animationsContainer.setAttribute('jslog', `${VisualLogging.section('animations')}`);

package/front_end/panels/animation/animationTimeline.css

@@ -10,6 +10,10 @@
   --timeline-controls-width: 150px;
 }
 
+.toolbar-view-container {
+  min-height: fit-content;
+}
+
 .animation-node-row {
   width: 100%;
   display: flex;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -723,11 +723,8 @@ export function ruleSetLocationShort(
 
 export function ruleSetTagOrLocationShort(
     ruleSet: Protocol.Preload.RuleSet, pageURL: Platform.DevToolsPath.UrlString): string {
-  if (!ruleSet.errorMessage) {
-    const parsedRuleset = JSON.parse(ruleSet['sourceText']);
-    if ('tag' in parsedRuleset) {
-      return '"' + parsedRuleset['tag'] + '"';
-    }
+  if (!ruleSet.errorMessage && ruleSet.tag) {
+    return '"' + ruleSet.tag + '"';
   }
   return ruleSetLocationShort(ruleSet, pageURL);
 }

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -86,6 +86,7 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/13505487';
+const PROMOTION_ID = 'ai-code-completion';
 
 export interface ViewInput {
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
@@ -106,10 +107,13 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       lockedString(UIStringsNotTranslate.i) + ' ' + lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions) + ' ' +
       lockedString(UIStringsNotTranslate.press) + ' ' + cmdOrCtrl + ' ' + lockedString(UIStringsNotTranslate.x) + ' ' +
       lockedString(UIStringsNotTranslate.toDisableCodeSuggestions);
+  const newBadge = UI.UIUtils.maybeCreateNewBadge(PROMOTION_ID);
+  const newBadgeTemplate = newBadge ? html` ${newBadge}` : nothing;
   // clang-format off
   render(
         html`
           <style>${styles}</style>
+          <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
           <div class="ai-code-completion-teaser-screen-reader-only">${teaserAriaLabel}</div>
           <div class="ai-code-completion-teaser" aria-hidden="true">
             <span class="ai-code-completion-teaser-action">
@@ -121,6 +125,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               jslog=${VisualLogging.action('ai-code-completion-teaser.dismiss').track({click: true})}>
                 ${lockedString(UIStringsNotTranslate.dontShowAgain)}
             </span>
+            ${newBadgeTemplate}
           </div>
         `, target
       );

package/front_end/panels/common/aiCodeCompletionTeaser.css

@@ -18,7 +18,7 @@
 
     .ai-code-completion-teaser {
         padding-left: var(--sys-size-3);
-        line-height: normal;
+        line-height: var(--sys-size-7);
         pointer-events: all;
         align-items: center;
         font-style: italic;
@@ -38,5 +38,10 @@
                 padding: 0 var(--sys-size-3);
             }
         }
+
+        .new-badge {
+            font-style: normal;
+            display: inline-block;
+        }
     }
 }

package/front_end/panels/console/ConsolePrompt.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -317,6 +318,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     CodeMirror.closeCompletion(this.editor.editor);
   }
 
+  clearAiCodeCompletionCache(): void {
+    this.aiCodeCompletion?.clearCachedRequest();
+  }
+
   moveCaretToEndOfPrompt(): void {
     this.editor.dispatch({
       selection: CodeMirror.EditorSelection.cursor(this.editor.state.doc.length),
@@ -474,6 +479,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         void this.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
         if (ConsolePanel.instance().isShowing()) {
           Host.userMetrics.actionTaken(Host.UserMetrics.Action.CommandEvaluatedInConsolePanel);
+          Badges.UserBadges.instance().recordAction(Badges.BadgeAction.CONSOLE_PROMPT_EXECUTED);
         }
       }
     }

package/front_end/panels/console/ConsoleView.ts

@@ -657,8 +657,9 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.aiCodeCompletionSummaryToolbar?.setLoading(false);
   }
 
-  static clearConsole(): void {
+  clearConsole(): void {
     SDK.ConsoleModel.ConsoleModel.requestClearMessages();
+    this.prompt.clearAiCodeCompletionCache();
   }
 
   #onIssuesCountUpdate(): void {
@@ -704,6 +705,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   clearHistory(): void {
     this.prompt.history().clear();
+    this.prompt.clearAiCodeCompletionCache();
   }
 
   private consoleHistoryAutocompleteChanged(): void {
@@ -1922,7 +1924,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         ConsoleView.instance().focusPrompt();
         return true;
       case 'console.clear':
-        ConsoleView.clearConsole();
+        ConsoleView.instance().clearConsole();
         return true;
       case 'console.clear.history':
         ConsoleView.instance().clearHistory();