chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

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,32 +12,79 @@ 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) {
-        let label = token.text;
-        let title = '';
-        if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
-          title = event.args.data.url;
-        } else {
-          label += ` (${event.name})`;
-        }
-
-        // eslint-disable-next-line rulesdir/no-a-tags-in-lit
-        return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
-          e.stopPropagation();
-          void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
-        }}>${label}</a>`;
+      if (!event) {
+        return html`${token.text}`;
       }
+
+      let label = token.text;
+      let title = '';
+      if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+        title = event.args.data.url;
+      } else {
+        label += ` (${event.name})`;
+      }
+
+      // eslint-disable-next-line rulesdir/no-a-tags-in-lit
+      return html`<a href="#" draggable=false .title=${title} @click=${(e: Event) => {
+        e.stopPropagation();
+        void Common.Revealer.reveal(new SDK.TraceObject.RevealableEvent(event));
+      }}>${label}</a>`;
     }
 
     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;

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/components/BounceTrackingMitigationsView.ts

@@ -146,9 +146,9 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     // clang-format on
   }
 
-  #renderDeletedSitesOrNoSitesMessage(): Lit.TemplateResult {
+  #renderDeletedSitesOrNoSitesMessage(): Lit.LitTemplate {
     if (!this.#seenButtonClick) {
-      return html``;
+      return Lit.nothing;
     }
 
     if (this.#trackingSites.length === 0) {

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

@@ -211,7 +211,7 @@ export class BadgeNotification extends UI.Widget.Widget {
       this.#show({
         message: i18nFormatString(
             UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-        jslogContext: badge.name,
+        jslogContext: badge.jslogContext,
         actions: [
           {
             label: i18nString(UIStrings.remindMeLater),
@@ -240,7 +240,7 @@ export class BadgeNotification extends UI.Widget.Widget {
     this.#show({
       message: i18nFormatString(
           UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
-      jslogContext: badge.name,
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.remindMeLater),
@@ -270,7 +270,7 @@ export class BadgeNotification extends UI.Widget.Widget {
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
       message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
-      jslogContext: badge.name,
+      jslogContext: badge.jslogContext,
       actions: [
         {
           label: i18nString(UIStrings.manageSettings),

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('keep-me-updated').track({ click: true })}
-            aria-label=${i18nString(UIStrings.keepUpdated)}
           >
             </devtools-switch>
           </div>

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();