chrome-devtools-frontend 1.0.1596535 → 1.0.1597448

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

@@ -25,6 +25,7 @@ const {
   repeat,
   classMap,
 } = Directives;
+const {widget} = UI.Widget;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -67,9 +68,8 @@ export interface Props {
   messages: Message[];
   context: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   isContextSelected: boolean;
-  isLoading: boolean;
   canShowFeedbackForm: boolean;
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountGivenName'>;
+  isLoading: boolean;
   conversationType: AiAssistanceModel.AiHistoryStorage.ConversationType;
   isReadOnly: boolean;
   blockedByCrossOrigin: boolean;
@@ -91,7 +91,6 @@ export interface Props {
 }
 
 interface ChatWidgetInput extends Props {
-  accountGivenName: string;
   handleScroll: (ev: Event) => void;
   handleSuggestionClick: (title: string) => void;
   handleMessageContainerRef: (el: Element|undefined) => void;
@@ -116,12 +115,11 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
               ${repeat(input.messages, message =>
-                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                widget(ChatMessage, {
                   message,
                   isLoading: input.isLoading && input.messages.at(-1) === message,
                   isReadOnly: input.isReadOnly,
                   canShowFeedbackForm: input.canShowFeedbackForm,
-                  userInfo: input.userInfo,
                   markdownRenderer: input.markdownRenderer,
                   isLastMessage: input.messages.at(-1) === message,
                   onSuggestionClick: input.handleSuggestionClick,
@@ -130,14 +128,12 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   walkthrough: {
                     ...input.walkthrough,
                   }
-                })}></devtools-widget>`
+                })
               )}
-              ${input.isLoading ? nothing : html`<devtools-widget
-                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+              ${input.isLoading ? nothing : widget(PatchWidget, {
                   changeSummary: input.changeSummary ?? '',
                   changeManager: input.changeManager,
                 })}
-              ></devtools-widget>`}
             </div>
           ` : html`
             <div class="empty-state-container">
@@ -149,7 +145,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                 </div>
                 ${AiAssistanceModel.AiUtils.isGeminiBranding() ?
                   html`
-                    <h1 class='greeting'>Hello${input.accountGivenName ? `, ${input.accountGivenName}` : ''}</h1>
+                    <h1 class='greeting'>Hello</h1>
                     <p class='cta'>${lockedString(UIStringsNotTranslate.emptyStateTextGemini)}</p>
                   ` : html`<h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>`
                 }
@@ -354,7 +350,6 @@ export class ChatView extends HTMLElement {
     this.#view(
         {
           ...this.#props,
-          accountGivenName: this.#props.userInfo.accountGivenName ?? '',
           handleScroll: this.#handleScroll,
           handleSuggestionClick: this.#handleSuggestionClick,
           handleMessageContainerRef: this.#handleMessageContainerRef,

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

@@ -0,0 +1,200 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as Marked from '../../../third_party/marked/marked.js';
+import type * as MarkdownView from '../../../ui/components/markdown_view/MarkdownView.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as PanelsCommon from '../../common/common.js';
+
+import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
+
+const {html} = Lit.StaticHtml;
+const {ref, createRef} = Lit.Directives;
+
+export class StylingAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
+  constructor(
+      private mainFrameId = '',
+  ) {
+    super();
+  }
+
+  #renderTableFromJson(data: Array<Record<string, string>>): Lit.LitTemplate|null {
+    if (!Array.isArray(data) || data.length === 0 || typeof data[0] !== 'object' || data[0] === null) {
+      return null;
+    }
+
+    const headers = Object.keys(data[0]);
+    const requiredKeys = ['Problem', 'Element', 'NodeId', 'Details'];
+    if (!requiredKeys.every(key => headers.includes(key))) {
+      return null;  // Not the expected JSON structure
+    }
+
+    const problemIndex = headers.indexOf('Problem');
+    if (problemIndex > -1) {
+      const problemHeader = headers.splice(problemIndex, 1);
+      headers.unshift(...problemHeader);
+    }
+
+    return html`
+      <table style="width: 100%;">
+        <thead>
+          <tr>
+            ${headers.map(header => html`<th style="text-align: left;">${header === 'NodeId' ? '' : header}</th>`)}
+          </tr>
+        </thead>
+        <tbody>
+          ${data.flatMap(row => {
+      return html`
+            <tr>
+              ${headers.map(header => {
+        if (header === 'NodeId') {
+          return html`<td>${this.#renderLinkifiedText(row[header])}</td>`;
+        }
+        if (header === 'Details') {
+          // eslint-disable-next-line @devtools/no-a-tags-in-lit
+          return html`<td><a href="#" @click=${this.#toggleDetailsRow}>Details</a></td>`;
+        }
+        return html`<td>${row[header]}</td>`;
+      })}
+            </tr>
+            <tr class="details-row" style="display: none;">
+              <td colspan=${headers.length} style="background-color: #f0f0f0; padding: 1em;">
+                <devtools-markdown-view .data=${{
+        tokens: Marked.Marked.lexer(row['Details']),
+        renderer: new StylingAgentMarkdownRenderer(this.mainFrameId),
+      } as MarkdownView.MarkdownViewData}></devtools-markdown-view>
+              </td>
+            </tr>
+          `;
+    })}
+        </tbody>
+      </table>
+      <br><div>To investigate these problems, please click one of the provided links (above), to set as context, and ask me further questions about the problem.</div>
+    `;
+  }
+
+  override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
+    if (token.type === 'code') {
+      try {
+        const data = JSON.parse(token.text);
+        const table = this.#renderTableFromJson(data);
+        if (table) {
+          return table;
+        }
+      } catch {
+        // Not a JSON object, fallback to default rendering.
+      }
+    }
+
+    if (token.type === 'link' && token.href.startsWith('#')) {
+      let nodeId = undefined;
+      if (token.href.startsWith('#node-')) {
+        nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;
+      } else if (token.href.startsWith('#')) {
+        // So often does it ignore requests to prepend nodes with node-, frustratingly.
+        nodeId = Number(token.href.replace('#', '')) as Protocol.DOM.BackendNodeId;
+      }
+
+      if (nodeId) {
+        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>`;
+      }
+    }
+
+    return super.templateForToken(token);
+  }
+
+  #toggleDetailsRow(e: Event): void {
+    e.preventDefault();
+    const link = e.target as HTMLAnchorElement;
+    const currentRow = link.closest('tr');
+    if (!currentRow) {
+      return;
+    }
+    const detailsRow = currentRow.nextElementSibling as HTMLTableRowElement | null;
+    if (detailsRow?.classList.contains('details-row')) {
+      if (detailsRow.style.display === 'none') {
+        detailsRow.style.display = 'table-row';
+        link.textContent = 'Hide';
+      } else {
+        detailsRow.style.display = 'none';
+        link.textContent = 'Details';
+      }
+    }
+  }
+
+  #renderLinkifiedText(text: string): Lit.LitTemplate {
+    if (text.indexOf(',') === -1) {
+      const nodeId = Number(text) as Protocol.DOM.BackendNodeId;
+      if (isNaN(nodeId)) {
+        // Not a number, return as is.
+        return html`${text}`;
+      }
+      return this.#renderSingleLink(nodeId);
+    }
+
+    // Check for comma separated list.
+    const nodeIdsStr = text.split(',').map(s => s.trim()).filter(Boolean);
+    return html`${nodeIdsStr.map(idStr => {
+      const nodeId = Number(idStr) as Protocol.DOM.BackendNodeId;
+      if (isNaN(nodeId)) {
+        return html`<div>${idStr}</div>`;
+      }
+      return html`<div>${this.#renderSingleLink(nodeId)}</div>`;
+    })}`;
+  }
+
+  #renderSingleLink(nodeId: Protocol.DOM.BackendNodeId): Lit.LitTemplate {
+    const label = `link`;
+    const templateRef = createRef();
+    void this.#linkifyNode(nodeId, label).then(node => {
+      if (!templateRef.value) {
+        return;
+      }
+      templateRef.value.textContent = '';
+      if (node) {
+        templateRef.value.append(node);
+      } else {
+        // Fallback to plain text if linkification fails
+        templateRef.value.append(document.createTextNode(label));
+      }
+    });
+    // Placeholder for async link
+    return html`<span ${ref(templateRef)}>${label}</span>`;
+  }
+
+  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 = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {textContent: label});
+    return linkedNode;
+  }
+}

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

@@ -143,14 +143,6 @@
       gap: var(--sys-size-4);
       font: var(--sys-typescale-body4-bold);
 
-      img {
-        border: 0;
-        border-radius: var(--sys-shape-corner-full);
-        display: block;
-        height: var(--sys-size-9);
-        width: var(--sys-size-9);
-      }
-
       h2 {
         font: var(--sys-typescale-body4-bold);
       }

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -178,7 +178,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     this.dataGrid = this.createDataGrid();
     const dataGridWidget = this.dataGrid.asWidget();
     this.splitWidget.setSidebarWidget(dataGridWidget);
-    dataGridWidget.setMinimumSize(0, 250);
+    dataGridWidget.setMinimumSize(0, 100);
   }
 
   override wasShown(): void {

package/front_end/panels/common/ExtensionServer.ts

@@ -1574,6 +1574,21 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_FAILED('Permission denied');
     }
 
+    try {
+      const parsedUrl = new URL(frame.url);
+      let targetType = Host.UserMetrics.ExtensionEvalTarget.WEB_PAGE;
+      if (parsedUrl.protocol === 'chrome-extension:') {
+        if (parsedUrl.origin === securityOrigin) {
+          targetType = Host.UserMetrics.ExtensionEvalTarget.SAME_EXTENSION;
+        } else {
+          targetType = Host.UserMetrics.ExtensionEvalTarget.OTHER_EXTENSION;
+        }
+      }
+      Host.userMetrics.extensionEvalTarget(targetType);
+    } catch {
+      // Ignore invalid URLs.
+    }
+
     void context
         .evaluate(
             {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -284,8 +284,8 @@ const UIStrings = {
    */
   startAChat: 'Start a chat',
   /**
-   * @description Label of an adorner next to the html node in the Elements panel.
-   */
+   * @description Label of an adorner next to the html node in the Elements panel.
+   */
   viewSourceCode: 'View source code',
   /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
@@ -436,7 +436,6 @@ export interface ViewInput {
   showAiButton: boolean;
   aiButtonTitle?: string;
   onAiButtonClick: (e: Event) => void;
-
   decorations: Decoration[];
   descendantDecorations: Decoration[];
   decorationsTooltip: string;
@@ -806,16 +805,13 @@ function renderAttribute(
 
   // clang-format off
   return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
-      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
-      relationRefDirective}>${name}</span>${
-      hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${
-                    animateOn(
-                        Boolean(updateRecord?.isAttributeModified(name) && hasText),
-                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
+      ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${relationRefDirective}>${name}</span>${hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${animateOn(
+    Boolean(updateRecord?.isAttributeModified(name) && hasText),
+    DOM_UPDATE_ANIMATION_CLASS_NAME)} ${valueRelationRefDirective} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
                         ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
                 </span>"` :
-                nothing}</span>`;
+      nothing}</span>`;
   // clang-format on
 }
 
@@ -868,15 +864,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
       ${input.node ? html`<span class="highlight">${renderTitle(
-          input.node,
-          input.isClosingTag,
-          input.expanded,
-          input.isExpandable,
-          input.isXMLMimeType,
-          input.updateRecord,
-          input.onHighlightSearchResults,
-          input.onExpand,
-      )}</span>` : nothing}
+    input.node,
+    input.isClosingTag,
+    input.expanded,
+    input.isExpandable,
+    input.isXMLMimeType,
+    input.updateRecord,
+    input.onHighlightSearchResults,
+    input.onExpand,
+  )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
         <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
@@ -913,7 +909,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER).track({ click: true })}
           active=${input.containerAdornerActive}
           aria-label=${input.containerAdornerActive ? i18nString(UIStrings.enableContainer) : i18nString(UIStrings.disableContainer)}
           @click=${input.onContainerAdornerClick}
@@ -930,7 +926,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.FLEX}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX).track({ click: true })}
           active=${input.flexAdornerActive}
           aria-label=${input.flexAdornerActive ? i18nString(UIStrings.disableFlexMode) : i18nString(UIStrings.enableFlexMode)}
           @click=${input.onFlexAdornerClick}
@@ -944,7 +940,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID}
-          jslog=${VisualLogging.adorner(input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID).track({click: true})}
+          jslog=${VisualLogging.adorner(input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID).track({ click: true })}
           active=${input.gridAdornerActive}
           aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridMode) : i18nString(UIStrings.enableGridMode)}
           @click=${input.onGridAdornerClick}
@@ -958,7 +954,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES).track({ click: true })}
           active=${input.gridAdornerActive}
           aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridLanesMode) : i18nString(UIStrings.enableGridLanesMode)}
           @click=${input.onGridAdornerClick}
@@ -971,7 +967,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA).track({ click: true })}
           aria-label=${i18nString(UIStrings.openMediaPanel)}
           @click=${input.onMediaAdornerClick}
           @keydown=${handleAdornerKeydown(input.onMediaAdornerClick)}
@@ -986,7 +982,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           toggleable=true
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER).track({ click: true })}
           active=${input.popoverAdornerActive}
           aria-label=${input.popoverAdornerActive ? i18nString(UIStrings.stopForceOpenPopover) : i18nString(UIStrings.forceOpenPopover)}
           @click=${input.onPopoverAdornerClick}
@@ -999,7 +995,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER).track({ click: true })}
           aria-label=${i18nString(UIStrings.reveal)}
           @click=${input.onTopLayerAdornerClick}
           @keydown=${handleAdornerKeydown(input.onTopLayerAdornerClick)}
@@ -1011,7 +1007,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showStartingStyleAdorner ? html`<devtools-adorner
           class="starting-style"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({ click: true })}
           active=${input.startingStyleAdornerActive}
           toggleable=true
           aria-label=${input.startingStyleAdornerActive ? i18nString(UIStrings.disableStartingStyle) : i18nString(UIStrings.enableStartingStyle)}
@@ -1023,7 +1019,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showScrollAdorner ? html`<devtools-adorner
           class="scroll"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL).track({ click: true })}
           aria-label=${i18nString(UIStrings.elementHasScrollableOverflow)}
           ${adornerRef()}>
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}</span>
@@ -1033,7 +1029,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           tabindex=0
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SLOT}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT).track({ click: true })}
           @click=${input.onSlotAdornerClick}
           @mousedown=${(e: Event) => e.stopPropagation()}
           ${adornerRef()}>
@@ -1045,7 +1041,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${input.showScrollSnapAdorner ? html`<devtools-adorner
           class="scroll-snap"
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
-          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({click: true})}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({ click: true })}
           active=${input.scrollSnapAdornerActive}
           toggleable=true
           aria-label=${input.scrollSnapAdornerActive ? i18nString(UIStrings.disableScrollSnap) : i18nString(UIStrings.enableScrollSnap)}
@@ -1056,7 +1052,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </devtools-adorner>` : nothing}
       </div>`: nothing}
       ${input.isSelected ? html`
-        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: '$0'})} aria-hidden="true"></span>
+        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: '$0' })} aria-hidden="true"></span>
       ` : nothing}
       ${input.showAiButton ? html`
         <span class="ai-button-container">
@@ -1261,7 +1257,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
           showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
           startingStyleAdornerActive: this.#startingStyleAdornerActive,
-          onStartingStyleAdornerClick: (event: Event) => this.#onStartingStyleAdornerClick(event),
+          onStartingStyleAdornerClick:
+              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onStartingStyleAdornerClick(event),
           onSlotAdornerClick: () => {
             if (this.nodeInternal.assignedSlot) {
               const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
@@ -1271,25 +1268,32 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             }
           },
           topLayerIndex: this.node().topLayerIndex(),
-          onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
+          onViewSourceAdornerClick: this.treeOutline?.disableEdits ? () => {} : this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
-          onContainerAdornerClick: (event: Event) => this.#onContainerAdornerClick(event),
-          onFlexAdornerClick: (event: Event) => this.#onFlexAdornerClick(event),
-          onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
-          onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
-          onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
-          onScrollSnapAdornerClick: (event: Event) => this.#onScrollSnapAdornerClick(event),
-          onTopLayerAdornerClick: () => {
-            if (!this.treeOutline) {
-              return;
-            }
-            this.treeOutline.revealInTopLayer(this.node());
-          },
+          onContainerAdornerClick:
+              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onContainerAdornerClick(event),
+          onFlexAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                               (event: Event) => this.#onFlexAdornerClick(event),
+          onGridAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                               (event: Event) => this.#onGridAdornerClick(event),
+          onMediaAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                                (event: Event) => this.#onMediaAdornerClick(event),
+          onPopoverAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                                  (event: Event) => this.#onPopoverAdornerClick(event),
+          onScrollSnapAdornerClick:
+              this.treeOutline?.disableEdits ? () => {} : (event: Event) => this.#onScrollSnapAdornerClick(event),
+          onTopLayerAdornerClick: this.treeOutline?.disableEdits ? () => {} :
+                                                                   () => {
+                                                                     if (!this.treeOutline) {
+                                                                       return;
+                                                                     }
+                                                                     this.treeOutline.revealInTopLayer(this.node());
+                                                                   },
           isHovered: this.#hovered,
           isSelected: this.selected,
           showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
-              UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button'),
-          aiButtonTitle: UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button') ?
+              this.isAiButtonEnabled() && (this.treeOutline as ElementsTreeOutline)?.showAIButton,
+          aiButtonTitle: this.isAiButtonEnabled() ?
               UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
               undefined,
           onAiButtonClick: (ev: Event) => {
@@ -1893,6 +1897,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         {jslogContext: 'scroll-into-view'});
   }
 
+  private isAiButtonEnabled(): boolean {
+    return UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button');
+  }
+
   async populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): Promise<void> {
     if (!this.editing) {
       contextMenu.editSection().appendItem(