chrome-devtools-frontend 1.0.1717709 → 1.0.1721762

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -362,26 +362,23 @@ async function buildLayoutShiftsClusters(): Promise<void> {
         navigationId = Types.Events.NO_NAVIGATION;
       }
 
-      clusters.push(Helpers.SyntheticEvents.SyntheticEventsManager
-                        .registerSyntheticEvent<Types.Events.SyntheticLayoutShiftCluster>({
-                          name: 'SyntheticLayoutShiftCluster',
-                          // Will be replaced by the worst layout shift in the next for loop.
-                          rawSourceEvent: event,
-                          events: [],
-                          clusterWindow: traceWindowFromTime(clusterStartTime),
-                          clusterCumulativeScore: 0,
-                          scoreWindows: {
-                            good: traceWindowFromTime(clusterStartTime),
-                          },
-                          navigationId,
-                          // Set default Event so that this event is treated accordingly for the track appender.
-                          ts: event.ts,
-                          pid: event.pid,
-                          tid: event.tid,
-                          ph: Types.Events.Phase.COMPLETE,
-                          cat: '',
-                          dur: Types.Timing.Micro(-1),  // This `cluster.dur` is updated below.
-                        }));
+      clusters.push({
+        name: 'SyntheticLayoutShiftCluster',
+        events: [],
+        clusterWindow: traceWindowFromTime(clusterStartTime),
+        clusterCumulativeScore: 0,
+        scoreWindows: {
+          good: traceWindowFromTime(clusterStartTime),
+        },
+        navigationId,
+        // Set default Event so that this event is treated accordingly for the track appender.
+        ts: event.ts,
+        pid: event.pid,
+        tid: event.tid,
+        ph: Types.Events.Phase.COMPLETE,
+        cat: '',
+        dur: Types.Timing.Micro(-1),  // This `cluster.dur` is updated below.
+      });
 
       firstShiftTime = clusterStartTime;
     }
@@ -510,7 +507,6 @@ async function buildLayoutShiftsClusters(): Promise<void> {
     // Update the cluster's worst layout shift.
     if (worstShiftEvent) {
       cluster.worstShiftEvent = worstShiftEvent;
-      cluster.rawSourceEvent = worstShiftEvent.rawSourceEvent;
     }
 
     // layout shifts are already sorted by time ascending.

package/front_end/models/trace/helpers/SyntheticEvents.ts

@@ -8,8 +8,10 @@ let activeManager: SyntheticEventsManager|null = null;
 
 export class SyntheticEventsManager {
   /**
-   * All synthetic entries created in a trace from a corresponding trace events.
-   * (ProfileCalls are excluded because they are not based on a real trace event)
+   * All synthetic entries created in a trace from
+   * corresponding trace events.
+   * (ProfileCalls and layout shift clusters are excluded
+   * because they are not based on a real trace event.)
    */
   #syntheticTraces: Types.Events.SyntheticBased[] = [];
   /**

package/front_end/models/trace/lantern/core/NetworkAnalyzer.ts

@@ -589,16 +589,20 @@ class NetworkAnalyzer {
       return exactMatch;
     }
 
-    // Cross-origin redirects in renderer trace events have their pre-redirect URL path scrubbed to the origin.
-    try {
-      const originUrl = `${new URL(resourceUrl).origin}/`;
-      return records.find(
-          request => Boolean(request.redirectDestination) && originUrl.startsWith(request.url) &&
-              UrlUtils.equalWithExcludedFragments(request.url, originUrl),
-      );
-    } catch {
+    // Cross-origin document redirects in renderer trace events have their pre-redirect URL scrubbed to the origin.
+    const origin = URL.parse(resourceUrl)?.origin;
+    if (!origin) {
       return undefined;
     }
+
+    return records.find(request => {
+      if (!request.redirectDestination || request.url !== `${origin}/`) {
+        return false;
+      }
+      const finalRequest = NetworkAnalyzer.resolveRedirects(request);
+      return finalRequest.resourceType === 'Document' && !finalRequest.failed &&
+          URL.parse(finalRequest.url)?.origin !== origin;
+    });
   }
 
   static findLastDocumentForUrl<T extends Lantern.NetworkRequest>(records: T[], resourceUrl: string): T|undefined {

package/front_end/models/trace/types/File.ts

@@ -48,6 +48,7 @@ export enum EventKeyType {
   SYNTHETIC_EVENT = 's',
   PROFILE_CALL = 'p',
   LEGACY_TIMELINE_FRAME = 'l',
+  LAYOUT_SHIFT_CLUSTER = 'c',
 }
 
 /**
@@ -141,7 +142,8 @@ export type RawEventKey = `${EventKeyType.RAW_EVENT}-${number}`;
 export type SyntheticEventKey = `${EventKeyType.SYNTHETIC_EVENT}-${number}`;
 export type ProfileCallKey = `${EventKeyType.PROFILE_CALL}-${ProcessID}-${ThreadID}-${SampleIndex}-${Protocol.integer}`;
 export type LegacyTimelineFrameKey = `${EventKeyType.LEGACY_TIMELINE_FRAME}-${number}`;
-export type SerializableKey = RawEventKey|ProfileCallKey|SyntheticEventKey|LegacyTimelineFrameKey;
+export type LayoutShiftClusterKey = `${EventKeyType.LAYOUT_SHIFT_CLUSTER}-${number}`;
+export type SerializableKey = RawEventKey|ProfileCallKey|SyntheticEventKey|LegacyTimelineFrameKey|LayoutShiftClusterKey;
 
 /** Serializable keys values objects contain data that maps the keys to original Trace Events **/
 export interface RawEventKeyValues {
@@ -167,8 +169,14 @@ export interface LegacyTimelineFrameKeyValues {
   rawIndex: number;
 }
 
-export type SerializableKeyValues =
-    RawEventKeyValues|ProfileCallKeyValues|SyntheticEventKeyValues|LegacyTimelineFrameKeyValues;
+export interface LayoutShiftClusterKeyValues {
+  type: EventKeyType.LAYOUT_SHIFT_CLUSTER;
+  // The raw event index of the first layout shift in the cluster.
+  rawIndex: number;
+}
+
+export type SerializableKeyValues = RawEventKeyValues|ProfileCallKeyValues|SyntheticEventKeyValues|
+    LegacyTimelineFrameKeyValues|LayoutShiftClusterKeyValues;
 
 export interface Modifications {
   entriesModifications: {
@@ -291,6 +299,15 @@ export function traceEventKeyToValues(key: SerializableKey): SerializableKeyValu
         rawIndex: parseInt(parts[1], 10),
       };
     }
+    case EventKeyType.LAYOUT_SHIFT_CLUSTER: {
+      if (parts.length !== 2 || Number.isNaN(parseInt(parts[1], 10))) {
+        throw new Error(`Invalid LayoutShiftCluster Key: ${key}`);
+      }
+      return {
+        type,
+        rawIndex: parseInt(parts[1], 10),
+      };
+    }
 
     default:
       throw new Error(`Unknown trace event key: ${key}`);

package/front_end/models/trace/types/TraceEvents.ts

@@ -1080,10 +1080,15 @@ export const NO_NAVIGATION = 'NO_NAVIGATION';
 export type NavigationId = string;
 
 /**
- * This is a synthetic Layout shift cluster. The rawSourceEvent is the worst layout shift event
- * in the cluster.
+ * This is a synthetic Layout shift cluster: a session window of layout shifts.
+ *
+ * Do not extend the SyntheticBased interface because a cluster is built from
+ * many layout shifts and doesn't have a raw trace event of its own. For the
+ * same reason, clusters are not registered with SyntheticEventsManager. Use
+ * `worstShiftEvent` to find the layout shift with the highest score in the
+ * cluster.
  */
-export interface SyntheticLayoutShiftCluster extends SyntheticBased<Phase.COMPLETE> {
+export interface SyntheticLayoutShiftCluster extends Event {
   name: 'SyntheticLayoutShiftCluster';
   clusterWindow: TraceWindowMicro;
   clusterCumulativeScore: number;

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -62,6 +62,10 @@ const AI_ASSISTANCE_HELP =
     'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
 const WALKTHROUGH_SIDEBAR_BREAKPOINT = 700;
 const WALKTHROUGH_SIDEBAR_INITIAL_WIDTH = 400;
+// Ignores approvals that arrive within this window after a permission prompt appears, so input meant for something
+// else (such as the second click of a double-click on the previous prompt) cannot approve it. The value matches the
+// 500 ms double-click interval that Chromium's InputEventActivationProtector uses for dialog buttons.
+const PERMISSION_PROMPT_INPUT_PROTECTION_MS = 500;
 
 const UIStrings = {
   /**
@@ -594,6 +598,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #serverSideLoggingEnabled = isAiAssistanceServerSideLoggingEnabled();
   #aiAssistanceEnabledSetting: AiAssistanceModel.AiSetting.AiSetting<boolean>;
   #changeManager = new AiAssistanceModel.ChangeManager.ChangeManager();
+  #alwaysAllowedTools =
+      new AiAssistanceModel.AlwaysAllowedTools.AlwaysAllowedTools(Common.Settings.Settings.instance());
   #mutex = new Common.Mutex.Mutex();
 
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
@@ -982,6 +988,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       isReadOnly: false,
       aidaClient: this.#aidaClient,
       changeManager: this.#changeManager,
+      alwaysAllowedTools: this.#alwaysAllowedTools,
       performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
       onInspectElement: this.#handleInspectElement.bind(this),
       networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
@@ -1012,6 +1019,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             isReadOnly: false,
             aidaClient: this.#aidaClient,
             changeManager: this.#changeManager,
+            alwaysAllowedTools: this.#alwaysAllowedTools,
             performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
             onInspectElement: this.#handleInspectElement.bind(this),
             networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
@@ -1519,6 +1527,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         isReadOnly: false,
         aidaClient: this.#aidaClient,
         changeManager: this.#changeManager,
+        alwaysAllowedTools: this.#alwaysAllowedTools,
         performanceRecordAndReload: this.#handlePerformanceRecordAndReload.bind(this),
         onInspectElement: this.#handleInspectElement.bind(this),
         networkTimeCalculator: NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator(),
@@ -1914,6 +1923,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
             step = stepForCall(data.callId);
             const approvalStep = step;
             approvalStep.code ??= data.code;
+            const promptShownAt = performance.now();
             approvalStep.state = {
               type: 'needs_approval',
               sideEffectDialog: {
@@ -1921,6 +1931,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
                 permissionPrompt: data.permissionPrompt,
                 permissionTitle: data.permissionTitle,
                 onAnswer: (decision: AiAssistanceModel.Tool.PermissionDecision) => {
+                  if (decision !== AiAssistanceModel.Tool.PermissionDecision.REJECT &&
+                      performance.now() - promptShownAt < PERMISSION_PROMPT_INPUT_PROTECTION_MS) {
+                    return;
+                  }
                   data.confirm(decision);
                   approvalStep.state = {type: 'completed'};
                   this.requestUpdate();

package/front_end/panels/ai_assistance/README.md

@@ -117,7 +117,7 @@ Each `Step` has a `state` (`StepState` in `components/ChatMessage.ts`):
 | State | Set when | Badge |
 | :--- | :--- | :--- |
 | `in_progress` | `QUERYING` creates the step. | A spinner if the step is the last step. Otherwise, a checkmark. |
-| `needs_approval` | A `SIDE_EFFECT` event asks the user to approve a tool call. The state holds the approval dialog. | A pause icon, with the approval prompt in the step. Only the last step can be in this state. |
+| `needs_approval` | A `SIDE_EFFECT` event asks the user to approve a tool call. The state holds the approval dialog. The panel ignores allow decisions that arrive within 500 ms of the prompt appearing; rejections always go through. | A pause icon, with the approval prompt in the step. Only the last step can be in this state. |
 | `canceled` | An `ACTION` with `canceled: true` arrives because the user denied the tool call, or the user aborts the run while this is the last step. | A cross. |
 | `completed` | A `CONTEXT`, `THOUGHT`, `ACTION`, `CONTEXT_CHANGE` or `ANSWER` event arrives, or the user answers the approval prompt. | A checkmark. |
 

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
-import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as AiAssistanceModel from '../../models/ai-utils/ai-utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as SettingUIRegistration from '../../ui/settings/settings.js';
 

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -12,6 +12,8 @@ export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as ExportForAgentsDialog from './components/ExportForAgentsDialog.js';
 export * as OptInChangeDialog from './components/OptInChangeDialog.js';
+export * as PermissionPrompt from './components/PermissionPrompt.js';
+export * as RelevantDataDisclaimer from './components/RelevantDataDisclaimer.js';
 export * as DisabledWidget from './components/DisabledWidget.js';
 export * as WalkthroughUtils from './components/WalkthroughUtils.js';
 export * as WalkthroughView from './components/WalkthroughView.js';

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/tooltips/tooltips.js';
-
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
@@ -21,6 +19,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatInputStyles from './chatInput.css.js';
 import * as ImageResize from './ImageResize.js';
+import {renderRelevantDataDisclaimer} from './RelevantDataDisclaimer.js';
 
 const {html, Directives: {createRef, ref}} = Lit;
 const {widget} = UI.Widget;
@@ -34,10 +33,6 @@ const UIStrings = {
    * @description Label added to the button that reveals the selected context item in DevTools.
    */
   revealContextDescription: 'Reveal the selected context item in DevTools',
-  /**
-   * @description The footer disclaimer that links to more information about the AI feature.
-   */
-  learnAbout: 'Learn about AI in DevTools',
 } as const;
 
 /*
@@ -207,45 +202,12 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     disabled: input.isTextInputDisabled,
   });
 
-  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+  const renderDisclaimer = (tooltipId: string): Lit.LitTemplate => {
     const classes = Lit.Directives.classMap({
       'chat-input-disclaimer': true,
       'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
     });
-    // clang-format off
-    return html`
-      <div class=${classes}>
-        <button
-          class="link"
-          role="link"
-          aria-details=${tooltipId}
-          jslog=${VisualLogging.link('open-ai-settings').track({
-            click: true,
-          })}
-          @click=${(ev: Event) => {
-            ev.preventDefault();
-            void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-          }}
-        >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
-        <devtools-tooltip
-          id=${tooltipId}
-          variant="rich"
-        ><div class="info-tooltip-container">
-          ${input.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>
-      </div>
-    `;
-    // clang-format on
+    return html`<div class=${classes}>${renderRelevantDataDisclaimer(tooltipId, input.disclaimerText)}</div>`;
   };
 
   // clang-format off
@@ -413,7 +375,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               </div>
               <div class="chat-input-actions-right">
                 <div class="chat-input-disclaimer-container">
-                  ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_CHAT_ID)}
+                  ${renderDisclaimer(RELEVANT_DATA_LINK_CHAT_ID)}
                 </div>
                 ${(input.multimodalInputEnabled && !input.blockedByCrossOrigin) ?
                   html`
@@ -503,7 +465,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
       })}
       jslog=${VisualLogging.section('footer')}
     >
-      ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
+      ${renderDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
   `, target);
   // clang-format on

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

@@ -47,7 +47,6 @@ const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
 const {widget} = UI.Widget;
 
-const REPORT_URL = 'https://crbug.com/508304827' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
 
 /*
@@ -131,26 +130,6 @@ const UIStringsNotTranslate = {
    * @description Button text that cancels code execution that may affect the page.
    */
   declineActionRequestApproval: 'Cancel',
-  /**
-   * @description Button text in the permission prompt that skips the tool call.
-   */
-  skipToolCall: 'Skip',
-  /**
-   * @description Button text in the permission prompt that allows the tool call once.
-   */
-  allowThisTime: 'Yes, allow this time',
-  /**
-   * @description Button text in the permission prompt that allows the tool call now and in the future.
-   */
-  allowAlways: 'Yes, always allow',
-  /**
-   * @description Fallback title of the permission prompt when the tool has no title.
-   */
-  allowThisAction: 'Allow this action?',
-  /**
-   * @description Footer of the permission prompt.
-   */
-  relevantDataIsSentToGoogle: 'Relevant data is sent to Google. Change permissions in settings at any time.',
   /**
    * @description The fallback text when a step has no title yet
    */
@@ -895,105 +874,32 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 }
 
 function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
-  const sideEffectSteps = steps.filter(s => s.state.type === 'needs_approval');
+  // With the natural language interface a step that needs approval is
+  // rendered by ChatView as a permission prompt in place of the chat input
+  // (see `renderPermissionPrompt`), so it is skipped here.
+  const sideEffectSteps = steps.filter(
+      s => (s.state.type === 'needs_approval' && !AiAssistanceModel.AiUtils.isNaturalLanguageInterfaceEnabled()));
   if (sideEffectSteps.length === 0) {
     return Lit.nothing;
   }
-  // With the natural language interface the approval is rendered as a
-  // dedicated permission prompt instead of the side-effect confirmation UI.
-  const showPermissionPrompt = AiAssistanceModel.AiUtils.isNaturalLanguageInterfaceEnabled();
+  // Key each prompt by its step so that a new prompt always gets new DOM.
+  // Without the key, Lit reuses the previous prompt's buttons when one prompt
+  // replaces another in a single render, and keyboard focus on the previous
+  // approve button would carry over to the new prompt.
   // clang-format off
   return html`
-    ${sideEffectSteps.map(step => html`
+    ${Lit.Directives.repeat(sideEffectSteps, step => step, step => html`
       <div class="side-effect-container">
-        ${showPermissionPrompt ?
-          renderPermissionPrompt(step) :
-          renderStep({
-            step,
-            markdownRenderer: input.markdownRenderer,
-            isLast: true,
-          })}
+        ${renderStep({
+          step,
+          markdownRenderer: input.markdownRenderer,
+          isLast: true,
+        })}
       </div> `)}
   `;
   // clang-format on
 }
 
-/**
- * Renders the permission prompt for a step that needs approval. Used when
- * `AiUtils.isNaturalLanguageInterfaceEnabled()` is on; otherwise
- * `renderSideEffectStepsUI` falls back to `renderStep`, which shows the
- * legacy Allow / Deny buttons inside the `renderSideEffectConfirmationUi`.
- *
- * A separate UI is needed because the natural language interface runs tools
- * that need richer consent than "run this code?": a tool-specific title and
- * description, and an "Allow always" option (`sideEffectDialog.permissionPrompt`).
- * It is a standalone card rather than a collapsible step so the user sees the
- * question without expanding anything.
- *
- * TODO(b/516828269): Remove `renderSideEffectConfirmationUi` once the natural
- * language interface launches.
- */
-function renderPermissionPrompt(step: Step): Lit.LitTemplate {
-  if (step.state.type !== 'needs_approval') {
-    return Lit.nothing;
-  }
-  const dialog = step.state.sideEffectDialog;
-  const title = dialog.permissionTitle ?? lockedString(UIStringsNotTranslate.allowThisAction);
-
-  const description =
-      dialog.description ? html`<p class="permission-prompt-description">${dialog.description}</p>` : Lit.nothing;
-
-  const code = step.code ? html`<devtools-code-block
-      class="permission-prompt-code"
-      .code=${step.code.trim()}
-      .codeLang=${'js'}
-      .displayNotice=${true}
-      .header=${lockedString(UIStringsNotTranslate.codeToExecute)}
-    ></devtools-code-block>` :
-                           Lit.nothing;
-
-  const allowAlwaysButton = dialog.permissionPrompt === AiAssistanceModel.Tool.PermissionPrompt.ALLOW_ONCE_OR_ALWAYS ?
-      html`<devtools-button
-      .data=${{
-        variant: Buttons.Button.Variant.OUTLINED,
-        jslogContext: 'always-allow-execute-code',
-      } as Buttons.Button.ButtonData}
-      @click=${() => dialog.onAnswer(AiAssistanceModel.Tool.PermissionDecision.ALLOW_ALWAYS)}
-    >${lockedString(UIStringsNotTranslate.allowAlways)}</devtools-button>` :
-      Lit.nothing;
-
-  // clang-format off
-  return html`
-  <div class="permission-prompt"
-    jslog=${VisualLogging.section('side-effect-confirmation')}>
-    <div class="permission-prompt-header">
-      <devtools-icon name="lock"></devtools-icon>
-      <h3 class="permission-prompt-title">${title}</h3>
-    </div>
-    ${description}
-    ${code}
-    <p class="permission-prompt-footer">${lockedString(UIStringsNotTranslate.relevantDataIsSentToGoogle)}</p>
-    <div class="permission-prompt-buttons">
-      <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.TEXT,
-          jslogContext: 'decline-execute-code',
-        } as Buttons.Button.ButtonData}
-        @click=${() => dialog.onAnswer(AiAssistanceModel.Tool.PermissionDecision.REJECT)}
-      >${lockedString(UIStringsNotTranslate.skipToolCall)}</devtools-button>
-      ${allowAlwaysButton}
-      <devtools-button
-        .data=${{
-          variant: Buttons.Button.Variant.PRIMARY,
-          jslogContext: 'accept-execute-code',
-        } as Buttons.Button.ButtonData}
-        @click=${() => dialog.onAnswer(AiAssistanceModel.Tool.PermissionDecision.ALLOW_ONCE)}
-      >${lockedString(UIStringsNotTranslate.allowThisTime)}</devtools-button>
-    </div>
-  </div>`;
-  // clang-format on
-}
-
 function renderStepBadge({step, isLast}: {
   step: Step,
   isLast: boolean,
@@ -2251,44 +2157,43 @@ export class ChatMessage extends UI.Widget.Widget {
   override performUpdate(): Promise<void>|void {
     const message =
         this.message.entity === ChatMessageEntity.MODEL ? getDeduplicatedWidgetsMessage(this.message) : this.message;
-    this.#view(
-        {
-          message,
-          isLoading: this.isLoading,
-          isReadOnly: this.isReadOnly,
-          canShowFeedbackForm: this.canShowFeedbackForm,
-          markdownRenderer: this.markdownRenderer,
-          isLastMessage: this.isLastMessage,
-          isFirstMessage: this.isFirstMessage,
-          prompt: this.prompt,
-          onSuggestionClick: this.onSuggestionClick,
-          onRatingClick: this.#handleRateClick.bind(this),
-          onReportClick: () => UIHelpers.openInNewTab(REPORT_URL),
-          onCopyResponseClick: () => {
-            if (this.message.entity === ChatMessageEntity.MODEL) {
-              this.onCopyResponseClick(this.message);
-            }
-          },
-          onExportClick: this.onExportClick,
-          scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
-          onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
-          onSubmit: this.#handleSubmit.bind(this),
-          onClose: this.#handleClose.bind(this),
-          onInputChange: this.#handleInputChange.bind(this),
-          isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
-          // Props for actions logic
-          showActions: !(this.isLastMessage && this.isLoading),
-          showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
-          suggestions: (this.isLastMessage && this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
-                        this.message.parts.at(-1)?.type === 'answer') ?
-              (this.message.parts.at(-1) as AnswerPart).suggestions :
-              undefined,
-          currentRating: this.#currentRating,
-          isShowingFeedbackForm: this.#isShowingFeedbackForm,
-          onFeedbackSubmit: this.onFeedbackSubmit,
-          walkthrough: this.walkthrough,
-        },
-        this.#viewOutput, this.contentElement);
+    this.#view({
+      message,
+      isLoading: this.isLoading,
+      isReadOnly: this.isReadOnly,
+      canShowFeedbackForm: this.canShowFeedbackForm,
+      markdownRenderer: this.markdownRenderer,
+      isLastMessage: this.isLastMessage,
+      isFirstMessage: this.isFirstMessage,
+      prompt: this.prompt,
+      onSuggestionClick: this.onSuggestionClick,
+      onRatingClick: this.#handleRateClick.bind(this),
+      onReportClick: () => UIHelpers.openInNewTab(AiAssistanceModel.AiUtils.REPORT_LEGAL_ISSUE_URL),
+      onCopyResponseClick: () => {
+        if (this.message.entity === ChatMessageEntity.MODEL) {
+          this.onCopyResponseClick(this.message);
+        }
+      },
+      onExportClick: this.onExportClick,
+      scrollSuggestionsScrollContainer: this.#scrollSuggestionsScrollContainer.bind(this),
+      onSuggestionsScrollOrResize: this.#handleSuggestionsScrollOrResize.bind(this),
+      onSubmit: this.#handleSubmit.bind(this),
+      onClose: this.#handleClose.bind(this),
+      onInputChange: this.#handleInputChange.bind(this),
+      isSubmitButtonDisabled: this.#isSubmitButtonDisabled,
+      // Props for actions logic
+      showActions: !(this.isLastMessage && this.isLoading),
+      showRateButtons: this.message.entity === ChatMessageEntity.MODEL && !!this.message.rpcId,
+      suggestions: (this.isLastMessage && this.message.entity === ChatMessageEntity.MODEL && !this.isReadOnly &&
+                    this.message.parts.at(-1)?.type === 'answer') ?
+          (this.message.parts.at(-1) as AnswerPart).suggestions :
+          undefined,
+      currentRating: this.#currentRating,
+      isShowingFeedbackForm: this.#isShowingFeedbackForm,
+      onFeedbackSubmit: this.onFeedbackSubmit,
+      walkthrough: this.walkthrough,
+    },
+               this.#viewOutput, this.contentElement);
 
     if (this.#viewOutput.suggestionsScrollContainer && !this.#isObservingSuggestions) {
       this.#suggestionsResizeObserver.observe(this.#viewOutput.suggestionsScrollContainer);