chrome-devtools-frontend 1.0.1662289 → 1.0.1664496

package/front_end/ui/legacy/components/object_ui/RemoteObjectPreviewFormatter.ts

@@ -313,7 +313,7 @@ export function renderNodeTitle(nodeTitle: string): LitTemplate|null {
       match[3] && html`<span class=webkit-html-attribute-name>${match[3]}</span>`}`;
 }
 
-export function renderTrustedType(description: string, className: string): LitTemplate {
+export function renderTrustedType(description: string, className: string|null): LitTemplate {
   return html`${className} <span class=object-value-string title=${description}>"${
       description.replace(/\n/g, '\u21B5')}"</span>`;
 }

package/front_end/ui/legacy/components/object_ui/objectValue.css

@@ -41,7 +41,7 @@
 .object-value-regexp,
 .object-value-symbol {
   white-space: pre;
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
   color: var(--sys-color-token-property-special);
 }
 
@@ -90,6 +90,7 @@
 .name {
   color: var(--sys-color-token-tag);
   flex-shrink: 0;
+  unicode-bidi: isolate;
 }
 
 .object-properties-preview .name {

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -6,8 +6,8 @@
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Geometry from '../../../../models/geometry/geometry.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
 import * as TextPrompt from '../../../../ui/components/text_prompt/text_prompt.js';
 import {type LitTemplate, nothing, render} from '../../../lit/lit.js';

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

@@ -4,7 +4,7 @@
 
 import type * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
 import {StreamingContentHexView} from './StreamingContentHexView.js';

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

@@ -32,7 +32,7 @@
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';

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

@@ -35,7 +35,7 @@ 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 Platform from '../../../../core/platform/platform.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import {createIcon} from '../../../kit/kit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';

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

@@ -4,9 +4,8 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
-import * as Highlighting from '../../../components/highlighting/highlighting.js';
+import {html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import * as ObjectUI from '../object_ui/object_ui.js';
@@ -22,26 +21,48 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/JSONView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+export interface ViewInput {
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree;
+  parsedJSON: ParsedJSON;
+}
+
+export type ViewOutput = undefined;
+
+const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const obj = SDK.RemoteObject.RemoteObject.fromLocalObject(input.parsedJSON.data);
+  const titleText = input.parsedJSON.prefix + obj.description + input.parsedJSON.suffix;
+  const title = html`<span>${titleText}</span>`;
+  render(html`
+    <style>${jsonViewStyles}</style>
+    ${ObjectUI.ObjectPropertiesSection.renderObjectPropertiesSection(input.objectTree, title)}
+  `,
+         target, {
+
+           container: {
+             classes: ['json-view'],
+             attributes: {
+               jslog: VisualLogging.section('json-view'),
+             },
+           },
+         });
+};
+
+type View = typeof DEFAULT_VIEW;
+
 export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Searchable {
-  private initialized: boolean;
-  private readonly parsedJSON: ParsedJSON;
-  private startCollapsed: boolean;
-  private searchableView!: UI.SearchableView.SearchableView|null;
-  private treeOutline!: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection;
-  private currentSearchFocusIndex: number;
-  private currentSearchTreeElements: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement[];
-  private searchRegex: RegExp|null;
-  constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean) {
-    super();
-    this.initialized = false;
-    this.registerRequiredCSS(jsonViewStyles);
-    this.parsedJSON = parsedJSON;
+  #parsedJSON: ParsedJSON;
+  private readonly startCollapsed: boolean;
+  private searchableView: UI.SearchableView.SearchableView|null = null;
+  private objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
+  private readonly search: UI.TreeOutline.TreeSearch<ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase>;
+  private readonly view: View;
+
+  constructor(parsedJSON: ParsedJSON, startCollapsed?: boolean, element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#parsedJSON = parsedJSON;
     this.startCollapsed = Boolean(startCollapsed);
-    this.element.classList.add('json-view');
-    this.element.setAttribute('jslog', `${VisualLogging.section('json-view')}`);
-    this.currentSearchFocusIndex = 0;
-    this.currentSearchTreeElements = [];
-    this.searchRegex = null;
+    this.search = new UI.TreeOutline.TreeSearch();
+    this.view = view;
   }
 
   static async createView(content: string): Promise<UI.SearchableView.SearchableView|null> {
@@ -69,6 +90,17 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
     return searchableView;
   }
 
+  set parsedJSON(parsedJSON: ParsedJSON) {
+    if (this.objectTree) {
+      this.objectTree.removeEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                          this.#onChildrenChanged, this);
+    }
+    this.#parsedJSON = parsedJSON;
+    this.objectTree = null;
+    this.onSearchCanceled();
+    this.requestUpdate();
+  }
+
   setSearchableView(searchableView: UI.SearchableView.SearchableView): void {
     this.searchableView = searchableView;
   }
@@ -137,129 +169,89 @@ export class JSONView extends UI.Widget.VBox implements UI.SearchableView.Search
   override wasShown(): void {
     super.wasShown();
     this.initialize();
+    this.requestUpdate();
   }
 
   private initialize(): void {
-    if (this.initialized) {
+    if (this.objectTree) {
       return;
     }
-    this.initialized = true;
-
-    const obj = SDK.RemoteObject.RemoteObject.fromLocalObject(this.parsedJSON.data);
-    const title = this.parsedJSON.prefix + obj.description + this.parsedJSON.suffix;
-    this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection(
-        obj, title, undefined, true /* showOverflow */, false /* editable */);
-    this.treeOutline.enableContextMenu();
+    const obj = SDK.RemoteObject.RemoteObject.fromLocalObject(this.#parsedJSON.data);
+    this.objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(obj, {
+      readOnly: true,
+      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      search: this.search,
+    });
     if (!this.startCollapsed) {
-      this.treeOutline.expand();
-    }
-    this.element.appendChild(this.treeOutline.element);
-    const firstChild = this.treeOutline.firstChild();
-    if (firstChild) {
-      firstChild.select(true /* omitFocus */, false /* selectedByUser */);
+      this.objectTree.expanded = true;
     }
+    this.objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED,
+                                     this.#onChildrenChanged, this);
   }
 
-  private jumpToMatch(index: number): void {
-    if (!this.searchRegex) {
-      return;
-    }
-    const previousFocusElement = this.currentSearchTreeElements[this.currentSearchFocusIndex];
-    if (previousFocusElement) {
-      previousFocusElement.setSearchRegex(this.searchRegex);
-    }
-
-    const newFocusElement = this.currentSearchTreeElements[index];
-    if (newFocusElement) {
-      this.updateSearchIndex(index);
-      newFocusElement.setSearchRegex(this.searchRegex, Highlighting.highlightedCurrentSearchResultClassName);
-      newFocusElement.reveal();
-    } else {
-      this.updateSearchIndex(0);
-    }
+  #onChildrenChanged(): void {
+    this.requestUpdate();
   }
 
-  private updateSearchCount(count: number): void {
-    if (!this.searchableView) {
+  override performUpdate(): void {
+    this.initialize();
+    if (!this.objectTree) {
       return;
     }
-    this.searchableView.updateSearchMatchesCount(count);
+    this.view({objectTree: this.objectTree, parsedJSON: this.#parsedJSON}, undefined, this.contentElement);
   }
 
-  private updateSearchIndex(index: number): void {
-    this.currentSearchFocusIndex = index;
-    if (!this.searchableView) {
-      return;
+  private jumpToMatch(): void {
+    if (this.searchableView) {
+      this.search.updateSearchableView(this.searchableView);
+    }
+    const currentMatch = this.search.currentMatch();
+    if (currentMatch) {
+      let current = currentMatch.node.parent;
+      while (current) {
+        current.expanded = true;
+        current = current.parent;
+      }
     }
-    this.searchableView.updateCurrentMatchIndex(index);
   }
 
   onSearchCanceled(): void {
-    this.searchRegex = null;
-    this.currentSearchTreeElements = [];
-
-    let element: UI.TreeOutline.TreeElement|null;
-    for (element = this.treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {
-      if (!(element instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement)) {
-        continue;
-      }
-      element.revertHighlightChanges();
+    this.search.reset();
+    if (this.searchableView) {
+      this.search.updateSearchableView(this.searchableView);
     }
-    this.updateSearchCount(0);
-    this.updateSearchIndex(0);
   }
 
-  performSearch(searchConfig: UI.SearchableView.SearchConfig, _shouldJump: boolean, jumpBackwards?: boolean): void {
-    let newIndex: number = this.currentSearchFocusIndex;
-    const previousSearchFocusElement = this.currentSearchTreeElements[newIndex];
+  performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
+    this.initialize();
     this.onSearchCanceled();
-    this.searchRegex = searchConfig.toSearchRegex(true).regex;
+    const searchRegex = searchConfig.toSearchRegex(true).regex;
+    if (!this.objectTree) {
+      return;
+    }
 
-    let element: UI.TreeOutline.TreeElement|null;
-    for (element = this.treeOutline.rootElement(); element; element = element.traverseNextTreeElement(false)) {
-      if (!(element instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement)) {
-        continue;
-      }
-      const hasMatch = element.setSearchRegex(this.searchRegex);
-      if (hasMatch) {
-        this.currentSearchTreeElements.push(element);
+    this.search.search(this.objectTree, jumpBackwards ?? false, (node, closeTag) => {
+      if (closeTag || !searchRegex) {
+        return [];
       }
-      if (previousSearchFocusElement === element) {
-        const currentIndex = this.currentSearchTreeElements.length - 1;
-        if (hasMatch || jumpBackwards) {
-          newIndex = currentIndex;
-        } else {
-          newIndex = currentIndex + 1;
-        }
-      }
-    }
-    this.updateSearchCount(this.currentSearchTreeElements.length);
+      return node.match(searchRegex);
+    });
 
-    if (!this.currentSearchTreeElements.length) {
-      this.updateSearchIndex(-1);
-      return;
+    if (shouldJump) {
+      this.jumpToMatch();
+    } else if (this.searchableView) {
+      this.search.updateSearchableView(this.searchableView);
     }
-    newIndex = Platform.NumberUtilities.mod(newIndex, this.currentSearchTreeElements.length);
-
-    this.jumpToMatch(newIndex);
   }
 
   jumpToNextSearchResult(): void {
-    if (!this.currentSearchTreeElements.length) {
-      return;
-    }
-    const newIndex =
-        Platform.NumberUtilities.mod(this.currentSearchFocusIndex + 1, this.currentSearchTreeElements.length);
-    this.jumpToMatch(newIndex);
+    this.search.next();
+    this.jumpToMatch();
   }
 
   jumpToPreviousSearchResult(): void {
-    if (!this.currentSearchTreeElements.length) {
-      return;
-    }
-    const newIndex =
-        Platform.NumberUtilities.mod(this.currentSearchFocusIndex - 1, this.currentSearchTreeElements.length);
-    this.jumpToMatch(newIndex);
+    this.search.prev();
+    this.jumpToMatch();
   }
 
   supportsCaseSensitiveSearch(): boolean {
@@ -301,11 +293,9 @@ export class SearchableJsonView extends UI.SearchableView.SearchableView {
   }
 
   set jsonObject(obj: Object|null|undefined) {
-    const jsonView = new JSONView(new ParsedJSON(obj, '', ''));
-    this.#jsonView.detach();
-    this.#jsonView = jsonView;
-    this.searchProvider = jsonView;
-    jsonView.show(this.element);
+    this.#jsonView.parsedJSON = new ParsedJSON(obj, '', '');
+    this.searchProvider = this.#jsonView;
+    this.#jsonView.show(this.element);
     this.requestUpdate();
   }
 }

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

@@ -5,7 +5,7 @@
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as UI from '../../legacy.js';
 
 import {FontView} from './FontView.js';

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

@@ -36,8 +36,8 @@ import '../../legacy.js';
 
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as FormatterActions from '../../../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import {render} from '../../../../ui/lit/lit.js';
 import * as UI from '../../legacy.js';
 

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

@@ -9,8 +9,8 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 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 TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as PanelCommon from '../../../../panels/common/common.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../components/code_highlighter/code_highlighter.js';
@@ -73,7 +73,7 @@ const UIStrings = {
    * @example {allow pasting} PH1
    */
   doNotPaste:
-      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
+      'Don’t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
   /**
    * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
    */
@@ -88,7 +88,7 @@ const UIStrings = {
    * a text editor.
    */
   binaryContentError:
-      'Editor can\'t show binary data. Use the "Response" tab in the "Network" panel to inspect this resource.',
+      'Editor can’t show binary data. Use the "Response" tab in the "Network" panel to inspect this resource.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/SourceFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

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

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import type * as Common from '../../../../core/common/common.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
 import * as UI from '../../legacy.js';
 

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

@@ -5,7 +5,7 @@
 import '../../../components/highlighting/highlighting.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -249,6 +249,10 @@ export class XMLTreeViewNode {
     return this.#children;
   }
 
+  treeNodeChildren(): Iterable<XMLTreeViewNode> {
+    return this.children();
+  }
+
   match(regex: RegExp, closeTag: boolean): RegExpStringIterator<RegExpExecArray> {
     return textView(this, closeTag).matchAll(regex);
   }

package/front_end/ui/legacy/components/source_frame/jsonView.css

@@ -8,3 +8,7 @@
   padding: 2px 6px;
   overflow: auto;
 }
+
+devtools-tree {
+  display: block;
+}

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

@@ -9,11 +9,11 @@ import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import * as TextUtils from '../../../../core/text_utils/text_utils.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Breakpoints from '../../../../models/breakpoints/breakpoints.js';
 import type * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
-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';

package/front_end/ui/legacy/inspectorCommon.css

@@ -141,9 +141,11 @@ iframe.widget {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.highlighted-search-result,:host::highlight(highlighted-search-result) {
+.highlighted-search-result,
+:host::highlight(highlighted-search-result) {
   border-radius: 1px;
   background-color: var(--sys-color-yellow-container);
+  color: var(--sys-color-on-yellow-container);
   outline: 1px solid var(--sys-color-yellow-container);
 }
 
@@ -320,7 +322,8 @@ input[type='range']:disabled::-webkit-slider-thumb {
   }
 }
 
-.highlighted-search-result.current-search-result,:host::highlight(current-search-result) {
+.highlighted-search-result.current-search-result,
+:host::highlight(current-search-result) {
   /* Note: this value is used in light & dark mode */
   --override-current-search-result-background-color: rgb(255 127 0 / 80%);
 
@@ -329,6 +332,7 @@ input[type='range']:disabled::-webkit-slider-thumb {
   padding: 1px;
   margin: -1px;
   background-color: var(--override-current-search-result-background-color);
+  color: var(--sys-color-on-surface);
 }
 
 .dimmed {
@@ -1221,7 +1225,7 @@ devtools-toolbar {
 
 .webkit-html-text-node {
   color: var(--text-primary);
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
 }
 
 .webkit-html-entity-value {
@@ -1229,7 +1233,7 @@ devtools-toolbar {
   /* See: crbug.com/1152736 for color variable migration. */
   /* stylelint-disable-next-line plugin/use_theme_colors */
   background-color: rgb(0 0 0 / 15%);
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
 }
 
 .webkit-html-doctype {
@@ -1242,13 +1246,13 @@ devtools-toolbar {
 .webkit-html-attribute-name {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
   color: var(--sys-color-token-attribute);
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
 }
 
 .webkit-html-attribute-value {
   /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
   color: var(--sys-color-token-attribute-value);
-  unicode-bidi: -webkit-isolate;
+  unicode-bidi: isolate;
   word-break: break-all;
 }
 

package/front_end/ui/lit/lit.ts

@@ -27,6 +27,7 @@ export {
 } from './render.js';
 export {
   html,
+  isLitDirective,
 } from './strip-whitespace.js';
 
 export type LitTemplate = Lit.TemplateResult|typeof Lit.nothing;

package/front_end/ui/lit/render.ts

@@ -15,6 +15,13 @@ export interface RenderOptions extends Lit.RenderOptions {
 
 const renderOptions = new WeakMap<HTMLElement|DocumentFragment, RenderOptions|undefined>();
 
+interface ListenerEntry {
+  listener: EventListenerOrEventListenerObject;
+  wrapper: EventListener;
+}
+
+const containerListeners = new WeakMap<HTMLElement|DocumentFragment, Map<string, ListenerEntry>>();
+
 export function render(template: unknown, container: HTMLElement|DocumentFragment, options?: RenderOptions):
     ReturnType<typeof Lit.render> {
   const host = container instanceof ShadowRoot ? container.host : container;
@@ -62,22 +69,49 @@ export function render(template: unknown, container: HTMLElement|DocumentFragmen
     }
   }
 
-  const oldListeners = renderOptions.get(container)?.container?.listeners;
-  const newListeners = options?.container?.listeners;
-  if (oldListeners) {
-    for (const [name, listener] of Object.entries(oldListeners)) {
-      if (newListeners?.[name] !== listener) {
-        host.removeEventListener(name, listener);
-      }
-    }
+  let listenersMap = containerListeners.get(container);
+  if (!listenersMap) {
+    listenersMap = new Map();
+    containerListeners.set(container, listenersMap);
   }
+
+  const newListeners = options?.container?.listeners;
   if (newListeners) {
     for (const [name, listener] of Object.entries(newListeners)) {
-      if (oldListeners?.[name] !== listener) {
-        host.addEventListener(name, listener);
+      const entry = listenersMap.get(name);
+      if (entry) {
+        entry.listener = listener;
+      } else {
+        let currentListener = listener;
+        const newEntry: ListenerEntry = {
+          get listener() {
+            return currentListener;
+          },
+          set listener(val: EventListenerOrEventListenerObject) {
+            currentListener = val;
+          },
+          wrapper: (event: Event) => {
+            if (typeof currentListener === 'function') {
+              return currentListener.call(host, event);
+            }
+            if (currentListener && 'handleEvent' in currentListener) {
+              return currentListener.handleEvent(event);
+            }
+          }
+        };
+        listenersMap.set(name, newEntry);
+        host.addEventListener(name, newEntry.wrapper);
       }
     }
   }
+
+  // Remove old listeners that are no longer present
+  for (const [name, entry] of listenersMap.entries()) {
+    if (!newListeners || !(name in newListeners)) {
+      host.removeEventListener(name, entry.wrapper);
+      listenersMap.delete(name);
+    }
+  }
   renderOptions.set(container, options);
   return Lit.render(template, container, options);
 }

package/front_end/ui/lit/strip-whitespace.ts

@@ -1,11 +1,16 @@
-// Copyright 2025 The Chromium Authors
+// 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 Platform from '../../core/platform/platform.js';
 import * as Lit from '../../third_party/lit/lit.js';
 
 const templates = new WeakMap<TemplateStringsArray, TemplateStringsArray>();
 
+export function isLitDirective(value: unknown): value is {values: unknown[]} {
+  return Boolean(typeof value === 'object' && value && '_$litDirective$' in value && 'values' in value);
+}
+
 export function html(strings: TemplateStringsArray, ...values: unknown[]): Lit.TemplateResult {
   let stripped = templates.get(strings);
   if (!stripped) {
@@ -16,7 +21,23 @@ export function html(strings: TemplateStringsArray, ...values: unknown[]): Lit.T
     }
   }
   templates.set(strings, stripped);
-  return Lit.html(stripped, ...values);
+
+  const escapeValue = (val: unknown): unknown => {
+    if (typeof val === 'string') {
+      return Platform.StringUtilities.safeEscapeUnicode(val);
+    }
+    if (Array.isArray(val)) {
+      return val.map(escapeValue);
+    }
+    if (isLitDirective(val)) {
+      val.values = val.values.map(escapeValue);
+      return val;
+    }
+    return val;
+  };
+  const escapedValues = values.map(escapeValue);
+
+  return Lit.html(stripped, ...escapedValues);
 }
 
 function strip(strings: TemplateStringsArray): TemplateStringsArray {