chrome-devtools-frontend 1.0.1583146 → 1.0.1585664

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -54,7 +54,7 @@ import type * as Adorners from '../../ui/components/adorners/adorners.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, Link} from '../../ui/kit/kit.js';
+import {Icon} 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';
@@ -72,7 +72,8 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
-const {html, nothing, render, Directives: {ref}} = Lit;
+const {html, nothing, render, Directives: {ref, repeat}} = Lit;
+const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
   /**
@@ -465,6 +466,8 @@ export interface Decoration {
   color: string;
 }
 
+const DOM_UPDATE_ANIMATION_CLASS_NAME = 'dom-update-highlight';
+
 function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
@@ -525,14 +528,6 @@ function renderTitle(
         const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
         const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
 
-        const highlightAnimation = (updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified()) ?
-            ref(el => {
-              if (el) {
-                UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-              }
-            }) :
-            nothing;
-
         const renderTextNode = ref(el => {
           if (el) {
             el.textContent = textContent;
@@ -541,8 +536,11 @@ function renderTitle(
         });
 
         return html`${openingTag}<span class="webkit-html-text-node" jslog=${
-            VisualLogging.value('text-node').track({change: true, dblclick: true})} ${highlightAnimation} ${
-            renderTextNode}></span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+            VisualLogging.value('text-node').track({change: true, dblclick: true})} ${
+            animateOn(
+                Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
+                DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
+            renderTag(node, tagName, true, expanded, false, updateRecord)}`;
       }
 
       if (isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
@@ -577,12 +575,6 @@ function renderTitle(
 
       const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
       const textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-      const highlightAnimation = updateRecord?.isCharDataModified() ? ref(el => {
-        if (el) {
-          UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-        }
-      }) :
-                                                                      nothing;
       const renderTextNode = ref(el => {
         if (el) {
           el.textContent = textContent;
@@ -592,7 +584,8 @@ function renderTitle(
       return html`"<span class="webkit-html-text-node" jslog=${VisualLogging.value('text-node').track({
         change: true,
         dblclick: true
-      })} ${highlightAnimation} ${renderTextNode}></span>"`;
+      })} ${animateOn(Boolean(updateRecord?.isCharDataModified()), DOM_UPDATE_ANIMATION_CLASS_NAME)} ${
+          renderTextNode}></span>"`;
     }
 
     case Node.COMMENT_NODE: {
@@ -622,18 +615,12 @@ function renderTitle(
 
     case Node.DOCUMENT_NODE: {
       const text = (node as SDK.DOMModel.DOMDocument).documentURL;
-      const linkify = ref(el => {
-        if (el) {
-          el.removeChildren();
-          el.appendChild(Components.Linkifier.Linkifier.linkifyURL(text, {
-            text,
-            preventClick: true,
-            showColumnNumber: false,
-            inlineFrameIndex: 0,
-          }));
-        }
-      });
-      return html`<span>#document (<span ${linkify}></span>)</span>`;
+      return html`<span>#document (<span>${Components.Linkifier.Linkifier.renderLinkifiedUrl(text, {
+        text,
+        preventClick: true,
+        showColumnNumber: false,
+        inlineFrameIndex: 0,
+      })}</span>)</span>`;
     }
 
     case Node.DOCUMENT_FRAGMENT_NODE: {
@@ -647,138 +634,138 @@ function renderTitle(
   }
 }
 
-function renderAttribute(
-    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
-    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
-  const name = attr.name;
-  const value = attr.value || '';
-  const forceValue = isDiff;
-  const closingPunctuationRegex = /[\/;:\)\]\}]/g;
-  let highlightIndex = 0;
-  let highlightCount = 0;
-  let additionalHighlightOffset = 0;
+const enum SrcsetTokenType {
+  LITERAL = 0,
+  LINK = 1
+}
 
-  function setValueWithEntities(element: Element, value: string): void {
-    const result = convertUnicodeCharsToHTMLEntities(value);
-    highlightCount = result.entityRanges.length;
-    const newValue = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
-      while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
-        result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
-        ++highlightIndex;
+interface SrcsetToken {
+  type: SrcsetTokenType;
+  value: string;
+}
+
+// FIXME: find a home for this in SDK.
+function parseSrcset(value: string): SrcsetToken[] {
+  const result: SrcsetToken[] = [];
+  let i = 0;
+  while (value.length) {
+    if (i++ > 0) {
+      result.push({value: ' ', type: SrcsetTokenType.LITERAL});
+    }
+    value = value.trim();
+    let url = '';
+    let descriptor = '';
+    const indexOfSpace = value.search(/\s/);
+    if (indexOfSpace === -1) {
+      url = value;
+    } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
+      url = value.substring(0, indexOfSpace);
+    } else {
+      url = value.substring(0, indexOfSpace);
+      const indexOfComma = value.indexOf(',', indexOfSpace);
+      if (indexOfComma !== -1) {
+        descriptor = value.substring(indexOfSpace, indexOfComma + 1);
+      } else {
+        descriptor = value.substring(indexOfSpace);
       }
-      additionalHighlightOffset += 1;
-      return match + '\u200B';
-    });
+    }
 
-    while (highlightIndex < highlightCount) {
-      result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
-      ++highlightIndex;
+    if (url) {
+      if (url.endsWith(',')) {
+        result.push({value: url.substring(0, url.length - 1), type: SrcsetTokenType.LINK});
+        result.push({type: SrcsetTokenType.LITERAL, value: ','});
+      } else {
+        result.push({value: url, type: SrcsetTokenType.LINK});
+      }
+    }
+    if (descriptor) {
+      result.push({type: SrcsetTokenType.LITERAL, value: descriptor});
     }
-    element.setTextContentTruncatedIfNeeded(newValue);
-    Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+    value = value.substring(url.length + descriptor.length);
   }
+  return result;
+}
 
-  const hasText = (forceValue || value.length > 0);
-  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
-    change: true,
-    dblclick: true,
-  });
-
-  const highlightNameAnimation = updateRecord?.isAttributeModified(name) && !hasText ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+function renderLinkifiedSrcset(tokens: SrcsetToken[], node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
+  return html`${repeat(tokens, token => {
+    switch (token.type) {
+      case SrcsetTokenType.LINK:
+        return renderLinkifiedValue(token.value, node);
+      case SrcsetTokenType.LITERAL:
+        return token.value;
     }
-  }) :
-                                                                                       nothing;
+  })}`;
+}
 
-  const highlightValueAnimation = updateRecord?.isAttributeModified(name) && hasText ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
+const closingPunctuationRegex = /[\/;:\)\]\}]/g;
+
+// FIXME: this should be made declarative next.
+function setValueWithEntities(element: Element, value: string): void {
+  let highlightIndex = 0;
+  let highlightCount = 0;
+  let additionalHighlightOffset = 0;
+  const result = convertUnicodeCharsToHTMLEntities(value);
+  highlightCount = result.entityRanges.length;
+  const newValue = result.text.replace(closingPunctuationRegex, (match, replaceOffset) => {
+    while (highlightIndex < highlightCount && result.entityRanges[highlightIndex].offset < replaceOffset) {
+      result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+      ++highlightIndex;
     }
-  }) :
-                                                                                       nothing;
-
-  function linkifyValue(value: string): Element {
-    const rewrittenHref = node ? node.resolveURL(value) : null;
-    if (rewrittenHref === null) {
-      const span = document.createElement('span');
-      setValueWithEntities(span, value);
-      return span;
-    }
-    value = value.replace(closingPunctuationRegex, '$&\u200B');
-    if (value.startsWith('data:')) {
-      value = Platform.StringUtilities.trimMiddle(value, 60);
-    }
-    const link = node && node.nodeName().toLowerCase() === 'a' ?
-        Link.create(rewrittenHref, value, undefined, 'image-url') :
-        Components.Linkifier.Linkifier.linkifyURL(rewrittenHref, {
-          text: value,
-          preventClick: true,
-          showColumnNumber: false,
-          inlineFrameIndex: 0,
-        });
-    return ImagePreviewPopover.setImageUrl(link, rewrittenHref);
-  }
-
-  function linkifySrcset(value: string): DocumentFragment {
-    // Splitting normally on commas or spaces will break on valid srcsets "foo 1x,bar 2x" and "data:,foo 1x".
-    const fragment = document.createDocumentFragment();
-    let i = 0;
-    while (value.length) {
-      if (i++ > 0) {
-        UI.UIUtils.createTextChild(fragment, ' ');
-      }
-      value = value.trim();
-      let url = '';
-      let descriptor = '';
-      const indexOfSpace = value.search(/\s/);
-      if (indexOfSpace === -1) {
-        url = value;
-      } else if (indexOfSpace > 0 && value[indexOfSpace - 1] === ',') {
-        url = value.substring(0, indexOfSpace);
-      } else {
-        url = value.substring(0, indexOfSpace);
-        const indexOfComma = value.indexOf(',', indexOfSpace);
-        if (indexOfComma !== -1) {
-          descriptor = value.substring(indexOfSpace, indexOfComma + 1);
-        } else {
-          descriptor = value.substring(indexOfSpace);
-        }
-      }
+    additionalHighlightOffset += 1;
+    return match + '\u200B';
+  });
 
-      if (url) {
-        if (url.endsWith(',')) {
-          fragment.appendChild(linkifyValue(url.substring(0, url.length - 1)));
-          UI.UIUtils.createTextChild(fragment, ',');
-        } else {
-          fragment.appendChild(linkifyValue(url));
-        }
+  while (highlightIndex < highlightCount) {
+    result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+    ++highlightIndex;
+  }
+  element.setTextContentTruncatedIfNeeded(newValue);
+  Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+}
+
+function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.TemplateResult {
+  const rewrittenHref = node ? node.resolveURL(value) : null;
+  if (rewrittenHref === null) {
+    return html`<span ${ref(el => {
+      if (el) {
+        setValueWithEntities(el, value);
       }
-      if (descriptor) {
-        UI.UIUtils.createTextChild(fragment, descriptor);
+    })}}></span>`;
+  }
+  value = value.replace(closingPunctuationRegex, '$&\u200B');
+  if (value.startsWith('data:')) {
+    value = Platform.StringUtilities.trimMiddle(value, 60);
+  }
+  const isAnchor = node && node.nodeName().toLowerCase() === 'a';
+  if (isAnchor) {
+    return html`<devtools-link class="devtools-link image-url" href=${rewrittenHref} ${ref(el => {
+      if (el) {
+        ImagePreviewPopover.setImageUrl(el, rewrittenHref);
       }
-      value = value.substring(url.length + descriptor.length);
-    }
-    return fragment;
+    })}>${Platform.StringUtilities.trimMiddle(value, 150)}</devtools-link>`;
   }
-
-  const nodeName = node ? node.nodeName().toLowerCase() : '';
-  const setAttrValue = ref(el => {
-    if (!el) {
-      return;
-    }
-    const valueElement = el as HTMLElement;
-    valueElement.removeChildren();
-    if (nodeName && (name === 'src' || name === 'href') && value) {
-      valueElement.appendChild(linkifyValue(value));
-    } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
-      valueElement.appendChild(linkifySrcset(value));
-    } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
-      valueElement.appendChild(linkifySrcset(value));
-    } else {
-      setValueWithEntities(valueElement, value);
+  return Components.Linkifier.Linkifier.renderLinkifiedUrl(rewrittenHref, {
+    text: value,
+    preventClick: true,
+    showColumnNumber: false,
+    inlineFrameIndex: 0,
+    onRef: link => {
+      ImagePreviewPopover.setImageUrl(link, rewrittenHref);
     }
   });
+}
+
+function renderAttribute(
+    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
+  const name = attr.name;
+  const value = attr.value || '';
+  const forceValue = isDiff;
+  const hasText = (forceValue || value.length > 0);
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
 
   const relationRef =
       (relation: Protocol.DOM.GetElementByRelationRequestRelation, tooltip: string): ReturnType<typeof ref> =>
@@ -831,11 +818,41 @@ function renderAttribute(
     }
   }
 
-  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name" ${
-      highlightNameAnimation} ${relationRefDirective}>${name}</span>${
-      hasText ? html`=\u200B"<span class="webkit-html-attribute-value" ${highlightValueAnimation} ${setAttrValue} ${
-                    valueRelationRefDirective}></span>"` :
+  const nodeName = node ? node.nodeName().toLowerCase() : '';
+  const enum ValueType {
+    UNKNOWN = 0,
+    SRC = 1,
+    SRCSET = 2,
+  }
+  let valueType = ValueType.UNKNOWN;
+  if (nodeName && (name === 'src' || name === 'href') && value) {
+    valueType = ValueType.SRC;
+  } else if ((nodeName === 'img' || nodeName === 'source') && name === 'srcset') {
+    valueType = ValueType.SRCSET;
+  } else if (nodeName === 'image' && (name === 'xlink:href' || name === 'href')) {
+    valueType = ValueType.SRCSET;
+  }
+
+  const withEntitiesRef = valueType === ValueType.UNKNOWN ? ref(el => {
+    if (el) {
+      setValueWithEntities(el, value);
+    }
+  }) :
+                                                            nothing;
+
+  // 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}>
+                        ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
+                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(parseSrcset(value), node) : nothing}
+                </span>"` :
                 nothing}</span>`;
+  // clang-format on
 }
 
 function renderTag(
@@ -855,13 +872,6 @@ function renderTag(
     hasUpdates = hasUpdates || (!expanded && updateRecord.hasChangedChildren());
   }
 
-  const highlightAnimation = hasUpdates ? ref(el => {
-    if (el) {
-      UI.UIUtils.runCSSAnimationOnce(el, 'dom-update-highlight');
-    }
-  }) :
-                                          nothing;
-
   // We are taking full text content of the tag, including attributes and children, to set the aria label.
   // FIXME: we should compute the aria label ourselves if it is event needed.
   const setAriaLabel = ref(el => {
@@ -876,7 +886,8 @@ function renderTag(
 
   return html`<span
       class=${Lit.Directives.classMap(classMap)} ${setAriaLabel}
-      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${highlightAnimation}>${tagString}</span>${
+      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${
+      animateOn(hasUpdates, DOM_UPDATE_ANIMATION_CLASS_NAME)}>${tagString}</span>${
       attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
 }
 
@@ -1189,7 +1200,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
     const tagName = treeElement.listItemElement.querySelector('.webkit-html-tag-name');
-    UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, 'dom-update-highlight');
+    UI.UIUtils.runCSSAnimationOnce(tagName || treeElement.listItemElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
   }
 
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
@@ -1420,7 +1431,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         }
       }
     }
-    UI.UIUtils.runCSSAnimationOnce(animationElement, 'dom-update-highlight');
+    UI.UIUtils.runCSSAnimationOnce(animationElement, DOM_UPDATE_ANIMATION_CLASS_NAME);
   }
 
   isClosingTag(): boolean {
@@ -1726,13 +1737,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       return false;
     }
-    const handledByFloaty = UI.Floaty.onFloatyClick({
-      type: UI.Floaty.FloatyContextTypes.ELEMENT_NODE_ID,
-      data: {nodeId: this.nodeInternal.id},
-    });
-    if (handledByFloaty) {
-      return false;
-    }
     return super.select(omitFocus, selectedByUser);
   }
 

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -22,22 +22,20 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/NodeStackTraceWidget.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface ViewInput {
-  target?: SDK.Target.Target;
-  linkifier: Components.Linkifier.Linkifier;
   stackTrace?: StackTrace.StackTrace.StackTrace;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const {target: sdkTarget, linkifier, stackTrace} = input;
+  const {stackTrace} = input;
   // clang-format off
   render(html`
     <style>${nodeStackTraceWidgetStyles}</style>
     ${target && stackTrace ?
          html`<devtools-widget
                 class="stack-trace"
-                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {target: sdkTarget, linkifier, stackTrace})}>
+                .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace})}>
               </devtools-widget>` :
          html`<div class="gray-info-message">${i18nString(UIStrings.noStackTraceAvailable)}</div>`}`,
     target);
@@ -45,7 +43,6 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class NodeStackTraceWidget extends UI.Widget.VBox {
-  readonly #linkifier = new Components.Linkifier.Linkifier(MaxLengthForLinks);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
@@ -73,13 +70,6 @@ export class NodeStackTraceWidget extends UI.Widget.VBox {
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
             runtimeStackTrace, target) :
         undefined;
-    const input: ViewInput = {
-      target,
-      linkifier: this.#linkifier,
-      stackTrace,
-    };
-    this.#view(input, {}, this.contentElement);
+    this.#view({stackTrace}, {}, this.contentElement);
   }
 }
-
-export const MaxLengthForLinks = 40;

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -0,0 +1,69 @@
+// 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 Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+
+export class StylesAiCodeCompletionProvider {
+  #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
+  #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
+  #aiCodeCompletion?: AiCodeCompletion.AiCodeCompletion.AiCodeCompletion;
+  #aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
+
+  #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
+
+  private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
+      throw new Error('AI code completion feature in Styles is not enabled.');
+    }
+    this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
+    this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
+    void this.#updateAiCodeCompletionState();
+  }
+
+  static createInstance(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig):
+      StylesAiCodeCompletionProvider {
+    return new StylesAiCodeCompletionProvider(aiCodeCompletionConfig);
+  }
+
+  #setupAiCodeCompletion(): void {
+    if (!this.#aiCodeCompletionConfig) {
+      return;
+    }
+    if (this.#aiCodeCompletion) {
+      // early return as this means that code completion was previously setup
+      return;
+    }
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
+        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    this.#aiCodeCompletionConfig.onFeatureEnabled();
+  }
+
+  #cleanupAiCodeCompletion(): void {
+    if (!this.#aiCodeCompletion) {
+      // early return as this means there is no code completion to clean up
+      return;
+    }
+    this.#aiCodeCompletion = undefined;
+    this.#aiCodeCompletionConfig?.onFeatureDisabled();
+  }
+
+  async #updateAiCodeCompletionState(): Promise<void> {
+    const aidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    const isAvailable = aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE;
+    const isEnabled = this.#aiCodeCompletionSetting.get();
+    if (isAvailable && isEnabled) {
+      this.#setupAiCodeCompletion();
+    } else {
+      this.#cleanupAiCodeCompletion();
+    }
+  }
+}

package/front_end/panels/elements/computedStyleWidget.css

@@ -14,12 +14,7 @@
     width: 100%;
   }
 
-  .styles-sidebar-computed-style-widget {
-    min-height: auto;
-  }
-
-  .computed-style-tree-outline-container {
-    flex-grow: 1;
+  devtools-tree-outline {
     flex-shrink: 0;
   }
 

package/front_end/panels/elements/elements.ts

@@ -4,7 +4,6 @@
 
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
-
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
@@ -20,6 +19,7 @@ import './NodeStackTraceWidget.js';
 import './StylePropertiesSection.js';
 import './StylePropertyHighlighter.js';
 import './StylesSidebarPane.js';
+import './StylesAiCodeCompletionProvider.js';
 import './StylePropertyTreeElement.js';
 import './ComputedStyleWidget.js';
 import './CSSRuleValidator.js';
@@ -59,6 +59,7 @@ import * as StylePropertiesSection from './StylePropertiesSection.js';
 import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
 import * as StylePropertyTreeElement from './StylePropertyTreeElement.js';
 import * as StylePropertyUtils from './StylePropertyUtils.js';
+import * as StylesAiCodeCompletionProvider from './StylesAiCodeCompletionProvider.js';
 import * as StylesSidebarPane from './StylesSidebarPane.js';
 import * as TopLayerContainer from './TopLayerContainer.js';
 import * as WebCustomData from './WebCustomData.js';
@@ -94,6 +95,7 @@ export {
   StylePropertyHighlighter,
   StylePropertyTreeElement,
   StylePropertyUtils,
+  StylesAiCodeCompletionProvider,
   StylesSidebarPane,
   TopLayerContainer,
   WebCustomData,

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -253,8 +253,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const sourceCodeLocation = document.createElement('td');
     sourceCodeLocation.classList.add('affected-source-location');
     if (sourceLocation) {
-      const maxLengthForDisplayedURLs = 40;  // Same as console messages.
-      const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
+      const linkifier = new Components.Linkifier.Linkifier(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,
           sourceLocation.lineNumber, {columnNumber: sourceLocation.columnNumber, inlineFrameIndex: 0});

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1185,14 +1185,6 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   override select(suppressSelectedEvent?: boolean): void {
-    const id = this.request()?.requestId();
-    if (id) {
-      const floatyHandled =
-          UI.Floaty.onFloatyClick({type: UI.Floaty.FloatyContextTypes.NETWORK_REQUEST, data: {requestId: id}});
-      if (floatyHandled) {
-        return;
-      }
-    }
     super.select(suppressSelectedEvent);
     this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }