chrome-devtools-frontend 1.0.1649421 → 1.0.1650100

package/front_end/models/ai_assistance/AiConversation.ts

@@ -11,7 +11,7 @@ import type * as Trace from '../../models/trace/trace.js';
 import * as Greendev from '../greendev/greendev.js';
 import type * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
-import {AccessibilityAgent, AccessibilityContext} from './agents/AccessibilityAgent.js';
+import {AccessibilityAgent} from './agents/AccessibilityAgent.js';
 import {
   type AgentOptions,
   type AiAgent,
@@ -33,6 +33,7 @@ import {StylingAgent} from './agents/StylingAgent.js';
 import {AiAgent2} from './AiAgent2.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
 import type {ChangeManager} from './ChangeManager.js';
+import {AccessibilityContext} from './contexts/AccessibilityContext.js';
 import {DOMNodeContext} from './contexts/DOMNodeContext.js';
 import {FileContext} from './contexts/FileContext.js';
 import {RequestContext} from './contexts/RequestContext.js';

package/front_end/models/ai_assistance/agents/AccessibilityAgent.ts

@@ -19,9 +19,8 @@ import {ToolRegistry} from '../tools/ToolRegistry.js';
 import {
   AiAgent,
   type AiWidget,
-  type ContextDetail,
   type ContextResponse,
-  ConversationContext,
+  type ConversationContext,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -81,31 +80,6 @@ If the user asks a question that requires an investigation of a problem, use thi
     - [Suggestion 2]
 `;
 
-export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
-  #lh: LHModel.ReporterTypes.ReportJSON;
-
-  constructor(report: LHModel.ReporterTypes.ReportJSON) {
-    super();
-    this.#lh = report;
-  }
-
-  #url(): string {
-    return this.#lh.finalUrl ?? this.#lh.finalDisplayedUrl;
-  }
-
-  override getURL(): string {
-    return this.#url();
-  }
-
-  override getItem(): LHModel.ReporterTypes.ReportJSON {
-    return this.#lh;
-  }
-
-  override getTitle(): string {
-    return `Lighthouse report: ${this.#url()}`;
-  }
-}
-
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
@@ -184,10 +158,13 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
       return;
     }
 
-    yield {
-      type: ResponseType.CONTEXT,
-      details: this.#createContextDetails(lhr),
-    };
+    const details = await lhr.getUserFacingDetails();
+    if (details) {
+      yield {
+        type: ResponseType.CONTEXT,
+        details,
+      };
+    }
   }
 
   async #resolvePathToNode(path: string): Promise<SDK.DOMModel.DOMNode|null> {
@@ -517,38 +494,14 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
     });
   }
 
-  /**
-   * This is the initial payload we send at the start of a conversation.
-   * Because the agent is focused on Accessibility, we include the
-   * Accessibility Audits summary in the payload to avoid an extra round step of
-   * the AI querying them.
-   */
-  #getInitialPayload(context: ConversationContext<LHModel.ReporterTypes.ReportJSON>): string {
-    const report = context.getItem();
-    const formatter = new LighthouseFormatter();
-    const summary = formatter.summary(report);
-    const audits = formatter.audits(report, 'accessibility');
-    const allFailed = Object.values(report.categories).every(category => category.score === null);
-    if (allFailed) {
-      return '**CRITICAL**: The Lighthouse report failed to record or all category scores are error/unavailable (n/a). This indicates a failed run or missing data.';
-    }
-    return `# Lighthouse Report:\n${summary}\n${audits}`;
-  }
-
   override async enhanceQuery(query: string, lhr: ConversationContext<LHModel.ReporterTypes.ReportJSON>|null):
       Promise<string> {
     this.clearDeclaredFunctions();
     if (lhr) {
       this.#declareFunctions();
     }
-    const enhancedQuery = lhr ? `${this.#getInitialPayload(lhr)}\n# User request:\n\n` : '';
+    const promptDetails = lhr ? await lhr.getPromptDetails() : null;
+    const enhancedQuery = promptDetails ? `${promptDetails}\n# User request:\n\n` : '';
     return `${enhancedQuery}${query}`;
   }
-
-  #createContextDetails(lhr: ConversationContext<LHModel.ReporterTypes.ReportJSON>):
-      [ContextDetail, ...ContextDetail[]] {
-    return [
-      {title: 'Lighthouse report', text: this.#getInitialPayload(lhr)},
-    ];
-  }
 }

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -14,13 +14,13 @@ import * as NetworkTimeCalculator from '../../network_time_calculator/network_ti
 import type * as Trace from '../../trace/trace.js';
 import * as Workspace from '../../workspace/workspace.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
+import {AccessibilityContext} from '../contexts/AccessibilityContext.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {FileContext} from '../contexts/FileContext.js';
 import {getRequestContextOrigin, RequestContext} from '../contexts/RequestContext.js';
 import {debugLog} from '../debug.js';
 import {StorageItem} from '../StorageItem.js';
 
-import {AccessibilityContext} from './AccessibilityAgent.js';
 import {
   type AgentOptions,
   AiAgent,

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -22,6 +22,7 @@ import * as AiOrigins from './AiOrigins.js';
 import * as AiUtils from './AiUtils.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
+import * as AccessibilityContext from './contexts/AccessibilityContext.js';
 import * as DOMNodeContext from './contexts/DOMNodeContext.js';
 import * as FileContext from './contexts/FileContext.js';
 import * as RequestContext from './contexts/RequestContext.js';
@@ -50,6 +51,7 @@ import * as ToolRegistry from './tools/ToolRegistry.js';
 
 export {
   AccessibilityAgent,
+  AccessibilityContext,
   AgentProject,
   AiAgent,
   AiAgent2,

package/front_end/models/ai_assistance/contexts/AccessibilityContext.snapshot.txt

@@ -0,0 +1,26 @@
+Title: AccessibilityContext should return prompt details correctly
+Content:
+# Lighthouse Report:
+# Lighthouse Report Summary
+URL: https://example.com
+Fetch Time: 2026-03-12
+Lighthouse Version: 1.0.0
+
+## Category Scores
+- Accessibility: 50
+# Audits for Accessibility
+
+The following audits in this category have a score below 90 and may need attention:
+- **Accessibility Audit**: 50 (Fail)
+  * Description of accessibility audit
+=== end content
+
+Title: AccessibilityContext should return user facing details correctly
+Content:
+[
+  {
+    "title": "Lighthouse report",
+    "text": "# Lighthouse Report:\n# Lighthouse Report Summary\nURL: https://example.com\nFetch Time: 2026-03-12\nLighthouse Version: 1.0.0\n\n## Category Scores\n- Accessibility: 50\n# Audits for Accessibility\n\nThe following audits in this category have a score below 90 and may need attention:\n- **Accessibility Audit**: 50 (Fail)\n  * Description of accessibility audit"
+  }
+]
+=== end content

package/front_end/models/ai_assistance/contexts/AccessibilityContext.ts

@@ -0,0 +1,63 @@
+// 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 type * as LHModel from '../../lighthouse/lighthouse.js';
+import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
+import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
+
+export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
+  readonly #lh: LHModel.ReporterTypes.ReportJSON;
+  #cachedPayload: string|null = null;
+
+  constructor(report: LHModel.ReporterTypes.ReportJSON) {
+    super();
+    this.#lh = report;
+  }
+
+  #url(): string {
+    return this.#lh.finalUrl ?? this.#lh.finalDisplayedUrl;
+  }
+
+  override getURL(): string {
+    return this.#url();
+  }
+
+  override getItem(): LHModel.ReporterTypes.ReportJSON {
+    return this.#lh;
+  }
+
+  override getTitle(): string {
+    return `Lighthouse report: ${this.#url()}`;
+  }
+
+  #getInitialPayload(): string {
+    if (this.#cachedPayload !== null) {
+      return this.#cachedPayload;
+    }
+    const formatter = new LighthouseFormatter();
+    const summary = formatter.summary(this.#lh);
+    const audits = formatter.audits(this.#lh, 'accessibility');
+    const allFailed = Object.values(this.#lh.categories).every(category => category.score === null);
+    if (allFailed) {
+      this.#cachedPayload =
+          '**CRITICAL**: The Lighthouse report failed to record or all category scores are error/unavailable (n/a). This indicates a failed run or missing data.';
+    } else {
+      this.#cachedPayload = `# Lighthouse Report:\n${summary}\n${audits}`;
+    }
+    return this.#cachedPayload;
+  }
+
+  override async getPromptDetails(): Promise<string|null> {
+    return this.#getInitialPayload();
+  }
+
+  override async getUserFacingDetails(): Promise<[ContextDetail, ...ContextDetail[]]|null> {
+    return [
+      {
+        title: 'Lighthouse report',
+        text: this.#getInitialPayload(),
+      },
+    ];
+  }
+}

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -7,7 +7,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as StackTrace from '../stack_trace/stack_trace.js';
+import type * as StackTrace from '../stack_trace/stack_trace.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import type * as TextUtils from '../text_utils/text_utils.js';
@@ -254,7 +254,8 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
 
     const issueSummary = fetchedExceptionDetails?.exceptionMetaData?.issueSummary;
     if (typeof issueSummary === 'string') {
-      errorStack = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(errorStack, issueSummary);
+      errorStack =
+          StackTraceImpl.DetailedErrorStackParser.concatErrorDescriptionAndIssueSummary(errorStack, issueSummary);
     }
 
     if (!stackTrace) {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1430,7 +1430,7 @@ export const NativeFunctions = [
   },
   {
     name: "add",
-    signatures: [["sub_apps_to_add"]],
+    signatures: [["install_paths"]],
     receivers: ["SubApps"]
   },
   {
@@ -2005,7 +2005,7 @@ export const NativeFunctions = [
   },
   {
     name: "remove",
-    signatures: [["app_ids"]],
+    signatures: [["manifest_ids"]],
     receivers: ["SubApps"]
   },
   {

package/front_end/models/stack_trace/DetailedErrorStackParser.ts

@@ -212,3 +212,21 @@ export function augmentRawFramesWithScriptIds(
     augmentFrame(rawFrame);
   }
 }
+
+/**
+ * Combines the error description (essentially the `Error#stack` property value)
+ * with the `issueSummary`.
+ *
+ * @param description the `description` property of the `Error` remote object.
+ * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
+ * @returns the enriched description.
+ * @see https://goo.gle/devtools-reduce-network-noise-design
+ */
+export function concatErrorDescriptionAndIssueSummary(description: string, issueSummary: string): string {
+  // Insert the issue summary right after the error message.
+  const pos = description.indexOf('\n');
+  const prefix = pos === -1 ? description : description.substring(0, pos);
+  const suffix = pos === -1 ? '' : description.substring(pos);
+  description = `${prefix}. ${issueSummary}${suffix}`;
+  return description;
+}

package/front_end/models/stack_trace/stack_trace.ts

@@ -2,12 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ErrorStackParser from './ErrorStackParser.js';
 import * as StackTrace from './StackTrace.js';
 
 export {
-  // TODO(crbug.com/485142682): Move to stack_trace_impl.js once all usage
-  // goes through createStackTraceFromErrorObject.
-  ErrorStackParser,
   StackTrace,
 };

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -79,6 +79,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <devtools-prompt
                     completions=completions
                     class="monospace"
+                    value=${attribute.value}
                     @mousedown=${onStartEditing.bind(null, attribute)}
                     .completionTimeout=${0}
                     ?editing=${input.attributeBeingEdited === attribute}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -623,12 +623,12 @@ function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAs
   return new AiAssistanceModel.FileContext.FileContext(file);
 }
 
-function createAccessibilityContext(report: LighthousePanel.LighthousePanel.ActiveLighthouseReport|null):
-    AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null {
+function createAccessibilityContext(report: LighthousePanel.LighthousePanel.ActiveLighthouseReport|
+                                    null): AiAssistanceModel.AccessibilityContext.AccessibilityContext|null {
   if (!report) {
     return null;
   }
-  return new AiAssistanceModel.AccessibilityAgent.AccessibilityContext(report.report);
+  return new AiAssistanceModel.AccessibilityContext.AccessibilityContext(report.report);
 }
 
 function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|
@@ -710,7 +710,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
-  #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
+  #selectedAccessibility: AiAssistanceModel.AccessibilityContext.AccessibilityContext|null = null;
   #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
 
   // Messages displayed in the `ChatView` component.
@@ -1781,7 +1781,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;
 
-    } else if (data instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext) {
+    } else if (data instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext) {
       this.#selectedAccessibility = data;
     } else if (data instanceof AiAssistanceModel.StorageAgent.StorageContext) {
       this.#selectedStorage = data;

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

@@ -355,7 +355,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.FileContext.FileContext ?
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
-                            input.context instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext ?
+                            input.context instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext ?
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :

package/front_end/panels/console/ConsolePinPane.ts

@@ -403,6 +403,7 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
       CodeMirror.EditorView.domEventHandlers({
         blur: (_e, view) => this.#onBlur(view),
         paste: () => this.#onPaste(),
+        drop: event => event.preventDefault(),
       }),
       TextEditor.Config.baseConfiguration(doc),
       TextEditor.Config.closeBrackets.instance(),

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -738,65 +738,86 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
   });
 }
 
+const relationPromisesCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, Promise<string|Lit.LitTemplate>>>();
+const relatedElementsCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, SDK.DOMModel.DOMNode|null>>();
+
 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 isRelation = name === 'popovertarget' || name === 'interesttarget' || name === 'commandfor';
   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> =>
-          ref((el): void => {
-            if (!el) {
-              return;
-            }
-            void (async(): Promise<void> => {
-              const relatedElementId = await node.domModel().getElementByRelation(node.id, relation);
-              const relatedElement = node.domModel().nodeForId(relatedElementId);
-              if (!relatedElement) {
-                return;
-              }
-              const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
-                preventKeyboardFocus: true,
-                tooltip,
-                textContent: el.textContent || undefined,
-                isDynamicLink: true,
-              });
-              render(link, el as HTMLElement);
-            })();
-          });
+  const linkifyName = isRelation && value.length === 0;
+  const linkifyValue = isRelation && value.length > 0;
 
-  let relationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (!value) {
+  let relation: Protocol.DOM.GetElementByRelationRequestRelation|undefined = undefined;
+  let tooltip = '';
+  if (isRelation) {
     if (name === 'popovertarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget;
+      tooltip = i18nString(UIStrings.showPopoverTarget);
     } else if (name === 'interesttarget') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget;
+      tooltip = i18nString(UIStrings.showInterestTarget);
     } else if (name === 'commandfor') {
-      relationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
-    }
-  }
+      relation = Protocol.DOM.GetElementByRelationRequestRelation.CommandFor;
+      tooltip = i18nString(UIStrings.showCommandForTarget);
+    }
+  }
+
+  let relationPromise: Promise<string|Lit.LitTemplate>|undefined = undefined;
+  if (isRelation && relation) {
+    let nodeCache = relationPromisesCache.get(node);
+    if (!nodeCache) {
+      nodeCache = new Map();
+      relationPromisesCache.set(node, nodeCache);
+    }
+    const cacheKey = `${relation}:${value}`;
+    relationPromise = nodeCache.get(cacheKey);
+    const relationType = relation;
+    if (!relationPromise) {
+      relationPromise = (async () => {
+        try {
+          const relatedElementId = await node.domModel().getElementByRelation(node.id, relationType);
+          const relatedElement = node.domModel().nodeForId(relatedElementId);
+
+          let elemCache = relatedElementsCache.get(node);
+          if (!elemCache) {
+            elemCache = new Map();
+            relatedElementsCache.set(node, elemCache);
+          }
+          elemCache.set(`${name}:${value}`, relatedElement || null);
 
-  let valueRelationRefDirective: ReturnType<typeof relationRef> = ref(() => {});
-  if (value) {
-    if (name === 'popovertarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.PopoverTarget, i18nString(UIStrings.showPopoverTarget));
-    } else if (name === 'interesttarget') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.InterestTarget, i18nString(UIStrings.showInterestTarget));
-    } else if (name === 'commandfor') {
-      valueRelationRefDirective = relationRef(
-          Protocol.DOM.GetElementByRelationRequestRelation.CommandFor, i18nString(UIStrings.showCommandForTarget));
+          const isNameLinking = value.length === 0;
+          const fallback = isNameLinking ? name : value;
+
+          if (!relatedElement) {
+            return fallback;
+          }
+
+          const linkOptions: PanelsCommon.DOMLinkifier.Options = {
+            preventKeyboardFocus: true,
+            tooltip,
+            isDynamicLink: true,
+          };
+
+          if (isNameLinking) {
+            linkOptions.textContent = name;
+          } else {
+            const targetId = relatedElement.getAttribute('id');
+            if (targetId) {
+              linkOptions.textContent = targetId;
+            }
+          }
+
+          return PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, linkOptions);
+        } catch {
+          return value.length === 0 ? name : value;
+        }
+      })();
+      nodeCache.set(cacheKey, relationPromise);
     }
   }
 
@@ -815,23 +836,31 @@ function renderAttribute(
     valueType = ValueType.SRCSET;
   }
 
-  const withEntitiesRef = valueType === ValueType.UNKNOWN ? ref(el => {
+  const withEntitiesRef = (valueType === ValueType.UNKNOWN && !isRelation) ? ref(el => {
     if (el) {
       setValueWithEntities(el, value);
     }
   }) :
-                                                            nothing;
+                                                                             nothing;
+
+  const jslog = VisualLogging.value(name === 'style' ? 'style-attribute' : 'attribute').track({
+    change: true,
+    dblclick: true,
+  });
 
-  // 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)}>${
+      linkifyName && relationPromise ? Lit.Directives.until(relationPromise, name) : name}</span>${
+      hasText ?
+          html`=\u200B"<span class="webkit-html-attribute-value" ${
+              animateOn(Boolean(updateRecord?.isAttributeModified(name) && hasText),
+                        DOM_UPDATE_ANIMATION_CLASS_NAME)} ${withEntitiesRef}>
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
-                        ${valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${
+              valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
+                        ${linkifyValue && relationPromise ? Lit.Directives.until(relationPromise, value) : nothing}
                 </span>"` :
-      nothing}</span>`;
-  // clang-format on
+          nothing}</span>`;
 }
 
 function renderTag(
@@ -2440,9 +2469,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const attributeValue = attributeName && attributeValueElement ?
+    let attributeValue = attributeName && attributeValueElement ?
         this.nodeInternal.getAttribute(attributeName)?.replaceAll('"', '&quot;') :
         undefined;
+
+    const isRelation =
+        attributeName === 'popovertarget' || attributeName === 'interesttarget' || attributeName === 'commandfor';
+    if (isRelation && attributeName && attributeValueElement) {
+      const rawValue = this.nodeInternal.getAttribute(attributeName) || '';
+      const relatedElement = relatedElementsCache.get(this.nodeInternal)?.get(`${attributeName}:${rawValue}`);
+      if (relatedElement) {
+        attributeValue = relatedElement.getAttribute('id') || '';
+      }
+    }
+
     if (attributeValue !== undefined) {
       attributeValueElement.setTextContentTruncatedIfNeeded(
           attributeValue, i18nString(UIStrings.valueIsTooLargeToEdit));

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -136,6 +136,11 @@ const UIStrings = {
    * detached DOM nodes and other objects kept alive by detached DOM nodes
    */
   objectsRetainedByDetachedDomNodes: 'Objects retained by detached DOM nodes',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects kept alive by contexts
+   */
+  objectsRetainedByContexts: 'Objects retained by contexts',
   /**
    * @description An option which will filter the heap snapshot to show only
    * objects kept alive by the DevTools console
@@ -773,6 +778,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   static readonly ALWAYS_AVAILABLE_FILTERS: ReadonlyArray<{uiName: string, filterName: string}> = [
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
+    {uiName: i18nString(UIStrings.objectsRetainedByContexts), filterName: 'objectsRetainedByContexts'},
     {uiName: i18nString(UIStrings.objectsRetainedByConsole), filterName: 'objectsRetainedByConsole'},
     {uiName: i18nString(UIStrings.objectsRetainedByEventHandlers), filterName: 'objectsRetainedByEventHandlers'},
   ];

package/front_end/third_party/chromium/README.chromium

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

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -257,6 +257,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         focus: () => this.onFocus(),
         blur: () => this.onBlur(),
         paste: () => this.onPaste(),
+        drop: event => event.preventDefault(),
         scroll: () => this.dispatchEventToListeners(Events.EDITOR_SCROLL),
         contextmenu: event => this.onContextMenu(event),
       }),
@@ -264,16 +265,15 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         domEventHandlers:
             {contextmenu: (_view, block, event) => this.onLineGutterContextMenu(block.from, event as MouseEvent)},
       }),
-      CodeMirror.EditorView.updateListener.of(
-          (update):
-              void => {
-                if (update.selectionSet || update.docChanged) {
-                  this.updateSourcePosition();
-                }
-                if (update.docChanged) {
-                  this.onTextChanged();
-                }
-              }),
+      CodeMirror.EditorView.updateListener.of((update):
+                                                  void => {
+                                                    if (update.selectionSet || update.docChanged) {
+                                                      this.updateSourcePosition();
+                                                    }
+                                                    if (update.docChanged) {
+                                                      this.onTextChanged();
+                                                    }
+                                                  }),
       activeSearchState,
       CodeMirror.Prec.lowest(searchHighlighter),
       config.language.of([]),