chrome-devtools-frontend 1.0.1585538 → 1.0.1585664

package/front_end/generated/SupportedCSSProperties.js

@@ -4426,7 +4426,8 @@ export const generatedProperties = [
   "inherited": true,
   "keywords": [
    "none",
-   "auto"
+   "auto",
+   "all"
   ],
   "name": "text-decoration-skip-ink"
  },
@@ -6976,7 +6977,8 @@ export const generatedPropertyValues = {
  "text-decoration-skip-ink": {
   "values": [
    "none",
-   "auto"
+   "auto",
+   "all"
   ]
  },
  "text-decoration-style": {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -346,6 +346,18 @@ export class AiCodeCompletion {
     }
     return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
+
+  static isAiCodeCompletionStylesEnabled(locale: string): boolean {
+    if (!locale.startsWith('en-')) {
+      return false;
+    }
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletionStyles?.enabled);
+  }
 }
 
 export const enum ContextFlavor {

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

@@ -183,6 +183,19 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     `, target);
   // clang-format on
 };
+
+/**
+ * ChatView is a web component for historical reasons and generally should not
+ * exist because it barely has any presenter logic and it is definitely not
+ * re-usable as a custom element. Instead, the template from ChatView should be
+ * embdedded into the AiAssistancePanel (the sole host of chat interfaces) and
+ * the scroll handling logic should be implemented in view functions using refs
+ * or re-usable custom elements. Currently, the ChatView just combines the
+ * interfaces of ChatMessage and ChatInput presenters and passes most of the
+ * properties down to those presenters as-is.
+ *
+ * @deprecated
+ */
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;

package/front_end/panels/application/FrameDetailsView.ts

@@ -272,7 +272,6 @@ interface FrameDetailsViewInput {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
   target: SDK.Target.Target|null;
   creationStackTrace: StackTrace.StackTrace.StackTrace|null;
-  creationTarget: SDK.Target.Target|null;
   adScriptAncestry: Protocol.Page.AdScriptAncestry|null;
   linkTargetDOMNode: SDK.DOMModel.DOMNode|null;
   permissionsPolicies: Protocol.Page.PermissionsPolicyFeatureState[]|null;
@@ -354,7 +353,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
       ${maybeRenderOrigin(input.frame?.securityOrigin)}
       ${renderOwnerElement(input.linkTargetDOMNode)}
-      ${maybeRenderCreationStacktrace(input.creationStackTrace, input.creationTarget)}
+      ${maybeRenderCreationStacktrace(input.creationStackTrace)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
       ${maybeRenderCreatorAdScriptAncestry(input.frame?.adFrameType(), input.target, input.adScriptAncestry)}
       <devtools-report-divider></devtools-report-divider>`;
@@ -447,9 +446,8 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
   return nothing;
 }
 
-function maybeRenderCreationStacktrace(
-    stackTrace: StackTrace.StackTrace.StackTrace|null, target: SDK.Target.Target|null): LitTemplate {
-  if (stackTrace && target) {
+function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTrace|null): LitTemplate {
+  if (stackTrace) {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
       return html`
@@ -457,7 +455,7 @@ function maybeRenderCreationStacktrace(
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
           <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
-              Components.JSPresentationUtils.StackTracePreviewContent, {target, stackTrace, options: {expandable: true}})}>
+              Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
           </devtools-widget>
         </devtools-report-value>
       `;
@@ -844,7 +842,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
   #creationStackTrace: StackTrace.StackTrace.StackTrace|null = null;
-  #creationTarget: SDK.Target.Target|null = null;
   #securityIsolationInfo: Protocol.Network.SecurityIsolationStatus|null = null;
   #linkTargetDOMNode: SDK.DOMModel.DOMNode|null = null;
   #trials: Protocol.Page.OriginTrial[]|null = null;
@@ -869,7 +866,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
     });
     const {creationStackTrace: rawCreationStackTrace, creationStackTraceTarget: creationTarget} =
         frame.getCreationStackTraceData();
-    this.#creationTarget = creationTarget;
     if (rawCreationStackTrace) {
       void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
           .createStackTraceFromProtocolRuntime(rawCreationStackTrace, creationTarget)
@@ -924,7 +920,6 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
       frame,
       target: this.#target,
       creationStackTrace: this.#creationStackTrace,
-      creationTarget: this.#creationTarget,
       protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
       permissionsPolicies: this.#permissionsPolicies,
       adScriptAncestry: this.#adScriptAncestry,

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -705,8 +705,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const stackTraceElement = contentElement.createChild('div', 'hidden-stack-trace');
     const targetManager = SDK.TargetManager.TargetManager.instance();
     const stackTraceTarget = target ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
-    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, stackTraceTarget ?? undefined, this.linkifier, {widthConstrained: true});
+    const stackTracePreview = new Components.JSPresentationUtils.StackTracePreviewContent();
+    stackTracePreview.options = {widthConstrained: true};
     if (stackTraceTarget && stackTrace) {
       const selectableChildIndex = this.selectableChildren.length;
       void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()

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,7 @@ 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 = {
@@ -634,124 +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,
+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;
+    }
+  })}`;
+}
+
+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;
+    }
+    additionalHighlightOffset += 1;
+    return match + '\u200B';
   });
 
-  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);
-        }
-      }
+  while (highlightIndex < highlightCount) {
+    result.entityRanges[highlightIndex].offset += additionalHighlightOffset;
+    ++highlightIndex;
+  }
+  element.setTextContentTruncatedIfNeeded(newValue);
+  Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+}
 
-      if (url) {
-        if (url.endsWith(',')) {
-          fragment.appendChild(linkifyValue(url.substring(0, url.length - 1)));
-          UI.UIUtils.createTextChild(fragment, ',');
-        } else {
-          fragment.appendChild(linkifyValue(url));
-        }
+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> =>
@@ -804,14 +818,41 @@ function renderAttribute(
     }
   }
 
+  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)} ${setAttrValue} ${valueRelationRefDirective}></span>"` :
+                        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(

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(UI.UIUtils.MaxLengthForDisplayedURLsInConsole);
   readonly #view: View;
 
   constructor(view = DEFAULT_VIEW) {
@@ -73,11 +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);
   }
 }

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/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/network/RequestInitiatorView.ts

@@ -39,8 +39,6 @@ export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
   request: SDK.NetworkRequest.NetworkRequest;
-  linkifier: Components.Linkifier.Linkifier;
-  target?: SDK.Target.Target;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -68,8 +66,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         <ul role="group">
           <li role="treeitem">
             <devtools-widget .widgetConfig=${widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
-      target: input.target,
-      linkifier: input.linkifier,
       options: {tabStops: true},
       stackTrace: input.stackTrace,
     })}></devtools-widget>
@@ -165,7 +161,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
 type View = typeof DEFAULT_VIEW;
 
 export class RequestInitiatorView extends UI.Widget.VBox {
-  private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly request: SDK.NetworkRequest.NetworkRequest;
   #view: View;
 
@@ -173,7 +168,6 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     super({jslog: `${VisualLogging.pane('initiator').track({resize: true})}`});
 
     this.element.classList.add('request-initiator-view');
-    this.linkifier = new Components.Linkifier.Linkifier();
     this.request = request;
     this.#view = view;
   }
@@ -192,8 +186,8 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager?.target() ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
     let stackTrace: StackTrace.StackTrace.StackTrace|null = null;
-    const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target ?? undefined, linkifier, {tabStops: focusableLink});
+    const preview = new Components.JSPresentationUtils.StackTracePreviewContent();
+    preview.options = {tabStops: focusableLink};
     if (target) {
       stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
                        .createStackTraceFromProtocolRuntime(initiator.stack, target);
@@ -219,8 +213,6 @@ export class RequestInitiatorView extends UI.Widget.VBox {
       initiatorGraph,
       stackTrace,
       request: this.request,
-      linkifier: this.linkifier,
-      target: target || undefined,
     };
 
     this.#view(viewInput, undefined, this.contentElement);

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -2498,10 +2498,6 @@ export class TimelineDetailsContentHelper {
    * contains any entries, and discards it if it's empty.
    */
   async createChildStackTraceElement(runtimeStackTrace: Protocol.Runtime.StackTrace): Promise<HTMLElement|null> {
-    if (!this.#linkifier) {
-      return null;
-    }
-
     // Fallback to the main page/root target. Maybe the main page has a source map we need.
     // Worst case the stack is identity mapped.
     const targetManager = SDK.TargetManager.TargetManager.instance();
@@ -2513,8 +2509,8 @@ export class TimelineDetailsContentHelper {
     const stackTrace =
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createStackTraceFromProtocolRuntime(
             runtimeStackTrace, target);
-    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, this.#linkifier, {tabStops: true, showColumnNumber: true});
+    const callFrameContents = new LegacyComponents.JSPresentationUtils.StackTracePreviewContent();
+    callFrameContents.options = {tabStops: true, showColumnNumber: true};
     callFrameContents.stackTrace = stackTrace;
 
     await callFrameContents.updateComplete;

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 1b64dcefe38cd6a1d49f95075bd448eae1c3cd57
+Revision: ccc41bdd9ec5ebd001ba6ac080db5aa20d8b96a9
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/components/utils/JSPresentationUtils.ts

@@ -34,17 +34,15 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
-import type * as Protocol from '../../../../generated/protocol.js';
 import * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import jsUtilsStyles from './jsUtils.css.js';
-import {Events as LinkifierEvents, Linkifier} from './Linkifier.js';
+import {Linkifier} from './Linkifier.js';
 
 const UIStrings = {
   /**
@@ -63,10 +61,6 @@ const UIStrings = {
    * @description A link to rehide frames that are by default hidden.
    */
   showLess: 'Show less',
-  /**
-   * @description Text indicating that source url of a link is currently unknown
-   */
-  unknownSource: 'unknown',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/utils/JSPresentationUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -95,74 +89,8 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-// TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-function buildStackTraceRowsForLegacyRuntimeStackTrace(
-    stackTrace: Protocol.Runtime.StackTrace,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
-    tabStops: boolean|undefined,
-    updateCallback?: (arg0: Array<StackTraceRegularRow|StackTraceAsyncRow>) => void,
-    showColumnNumber?: boolean,
-    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
-  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
-
-  if (updateCallback) {
-    const throttler = new Common.Throttler.Throttler(100);
-    linkifier.addEventListener(LinkifierEvents.LIVE_LOCATION_UPDATED, () => {
-      void throttler.schedule(async () => updateCallback(stackTraceRows));
-    });
-  }
-
-  function buildStackTraceRowsHelper(
-      stackTrace: Protocol.Runtime.StackTrace,
-      previousCallFrames: Protocol.Runtime.CallFrame[]|undefined = undefined): void {
-    let asyncRow: StackTraceAsyncRow|null = null;
-    if (previousCallFrames) {
-      asyncRow = {
-        asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description, previousCallFrames),
-      };
-      stackTraceRows.push(asyncRow);
-    }
-    let previousStackFrameWasBreakpointCondition = false;
-    for (const stackFrame of stackTrace.callFrames) {
-      const functionName = UI.UIUtils.beautifyFunctionName(stackFrame.functionName);
-      const link = linkifier.maybeLinkifyConsoleCallFrame(target, stackFrame, {
-        showColumnNumber,
-        tabStop: Boolean(tabStops),
-        inlineFrameIndex: 0,
-        revealBreakpoint: previousStackFrameWasBreakpointCondition,
-      });
-      if (link) {
-        link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
-        link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
-
-        if (!link.textContent) {
-          link.textContent = i18nString(UIStrings.unknownSource);
-        }
-      }
-      stackTraceRows.push({functionName, link});
-      previousStackFrameWasBreakpointCondition = [
-        SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
-        SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
-      ].includes(stackFrame.url);
-    }
-  }
-
-  buildStackTraceRowsHelper(stackTrace);
-  let previousCallFrames = stackTrace.callFrames;
-  for (let asyncStackTrace = stackTrace.parent; asyncStackTrace; asyncStackTrace = asyncStackTrace.parent) {
-    if (asyncStackTrace.callFrames.length) {
-      buildStackTraceRowsHelper(asyncStackTrace, previousCallFrames);
-    }
-    previousCallFrames = asyncStackTrace.callFrames;
-  }
-  return stackTraceRows;
-}
-
 function buildStackTraceRows(
     stackTrace: StackTrace.StackTrace.StackTrace,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
     tabStops: boolean|undefined,
     showColumnNumber?: boolean,
     ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
@@ -214,9 +142,8 @@ function buildStackTraceRows(
 
 function renderStackTraceTable(
     container: Element, parent: Element, expandable: boolean,
-    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): HTMLElement[] {
+    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): void {
   container.removeChildren();
-  const links: HTMLElement[] = [];
 
   // The tableSection groups one or more synchronous call frames together.
   // Wherever there is an asynchronous call, a new section is created.
@@ -250,10 +177,7 @@ function renderStackTraceTable(
     } else {
       row.createChild('td', 'function-name').textContent = item.functionName;
       row.createChild('td').textContent = ' @ ';
-      if (item.link) {
-        row.createChild('td', 'link').appendChild(item.link);
-        links.push(item.link);
-      }
+      row.createChild('td', 'link').appendChild(item.link);
     }
   }
 
@@ -286,13 +210,9 @@ function renderStackTraceTable(
     // If we are in a popup, this will trigger a re-layout
     UI.GlassPane.GlassPane.containerMoved(container);
   }, false);
-
-  return links;
 }
 
 export interface Options {
-  // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-  runtimeStackTrace?: Protocol.Runtime.StackTrace;
   tabStops?: boolean;
   // Whether the width of stack trace preview
   // is constrained to its container or whether
@@ -304,7 +224,7 @@ export interface Options {
 
 interface StackTraceRegularRow {
   functionName: string;
-  link: HTMLElement|null;
+  link: HTMLElement;
 }
 
 interface StackTraceAsyncRow {
@@ -313,92 +233,43 @@ interface StackTraceAsyncRow {
 
 export class StackTracePreviewContent extends UI.Widget.Widget {
   #stackTrace?: StackTrace.StackTrace.StackTrace;
-  #target?: SDK.Target.Target;
-  #linkifier?: Linkifier;
-  #ownedLinkifier?: Linkifier;
-  #options: Options;
-  #links: HTMLElement[] = [];
+  #options: Options = {};
 
   readonly #table: HTMLElement;
-  /**
-   * Updated when we update to define if we have any rows for the StackTrace;
-   * allowing the caller to know if this element is empty or not.
-   */
-  #hasRows = false;
 
-  constructor(element?: HTMLElement, target?: SDK.Target.Target, linkifier?: Linkifier, options?: Options) {
-    super(element, {useShadowDom: true});
-
-    this.#target = target;
-    this.#linkifier = linkifier;
-    if (!this.#linkifier) {
-      this.#ownedLinkifier = new Linkifier();
-      this.#linkifier = this.#ownedLinkifier;
-    }
-    this.#options = options || {
-      widthConstrained: false,
-    };
-
-    this.element.classList.add('monospace');
-    this.element.classList.add('stack-preview-container');
-    this.element.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
-    this.element.style.display = 'inline-block';
+  constructor(element?: HTMLElement) {
+    super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
 
     UI.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
 
     this.#table = this.contentElement.createChild('table', 'stack-preview-container');
-    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
-
-    this.performUpdate();
   }
 
   hasContent(): boolean {
-    return this.#hasRows;
+    if (!this.#stackTrace) {
+      return false;
+    }
+    const {syncFragment, asyncFragments} = this.#stackTrace;
+    return syncFragment.frames.length > 0 || asyncFragments.some(f => f.frames.length > 0);
   }
 
   override performUpdate(): void {
-    if (!this.#linkifier) {
+    if (!this.#stackTrace) {
       return;
     }
 
-    const {runtimeStackTrace, tabStops} = this.#options;
-
-    if (this.#stackTrace) {
-      const stackTraceRows = buildStackTraceRows(
-          this.#stackTrace, this.#target ?? null, this.#linkifier, tabStops, this.#options.showColumnNumber);
-      this.#hasRows = stackTraceRows.length > 0;
-      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
-      return;
-    }
-
-    if (runtimeStackTrace) {
-      // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-      const updateCallback =
-          renderStackTraceTable.bind(null, this.#table, this.element, this.#options.expandable ?? false);
-      const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
-          runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
-          this.#options.showColumnNumber);
-      this.#hasRows = stackTraceRows.length > 0;
-      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
-    }
+    const stackTraceRows =
+        buildStackTraceRows(this.#stackTrace, this.#options.tabStops, this.#options.showColumnNumber);
+    renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
   }
 
   get linkElements(): readonly HTMLElement[] {
-    return this.#links;
-  }
-
-  set target(target: SDK.Target.Target|undefined) {
-    this.#target = target;
-    this.requestUpdate();
-  }
-
-  set linkifier(linkifier: Linkifier) {
-    this.#linkifier = linkifier;
-    this.requestUpdate();
+    return [...this.contentElement.querySelectorAll<HTMLElement>('td.link > .devtools-link')];
   }
 
   set options(options: Options) {
     this.#options = options;
+    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
     this.requestUpdate();
   }
 
@@ -410,8 +281,4 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
-
-  override onDetach(): void {
-    this.#ownedLinkifier?.dispose();
-  }
 }

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -17,7 +17,7 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
-import {Directives, html, type LitTemplate, render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, render, type TemplateResult} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
@@ -562,7 +562,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     info.icon = icon;
   }
 
-  static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): LitTemplate {
+  static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): TemplateResult {
     options = options || {
       showColumnNumber: false,
       inlineFrameIndex: 0,
@@ -639,7 +639,8 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     return link;
   }
 
-  private static renderLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}): LitTemplate {
+  private static renderLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}):
+      TemplateResult {
     const {maxLength, title, href, preventClick, tabStop, bypassURLTrimming, jslogContext} = options;
     const classes: Record<string, boolean> = {
       'devtools-link': true,
@@ -666,6 +667,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         if (!link) {
           return;
         }
+        options.onRef?.(link as HTMLElement);
         if (text instanceof HTMLElement) {
           link.appendChild(text);
         } else if (bypassURLTrimming) {
@@ -1153,6 +1155,7 @@ export interface LinkifyURLOptions {
   userMetric?: Host.UserMetrics.Action;
   jslogContext?: string;
   omitOrigin?: boolean;
+  onRef?: (el: HTMLElement) => void;
 }
 
 export interface LinkifyOptions {
@@ -1183,6 +1186,7 @@ interface CreateLinkOptions {
   lineNumber?: number;
   columnNumber?: number;
   userMetric?: Host.UserMetrics.Action;
+  onRef?: (el: HTMLElement) => void;
 }
 
 interface LinkDisplayOptions {

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -4,15 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: inline;
-}
-
-:host(.width-constrained) {
-  display: inline-block;
-  width: 100%;
-}
-
 .stack-preview-async-description {
   padding: 3px 0 1px;
   font-weight: bold;

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1585538"
+  "version": "1.0.1585664"
 }