chrome-devtools-frontend 1.0.1545096 → 1.0.1547147

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -368,7 +368,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   announceSelectedGridNode(): void {
     // Only alert if the datagrid has focus
-    if (this.element === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) &&
+    if (this.element === UI.DOMUtilities.deepActiveElement(this.element.ownerDocument) &&
         this.selectedNode?.existingElement()) {
       // Update the expand/collapse state for the current selected node
       let expandText;
@@ -1237,7 +1237,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       nextSelectedNode.select();
     }
 
-    const activeElement = (Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
+    const activeElement = (UI.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
     if (handled && this.element !== activeElement && !this.element.contains(activeElement)) {
       // crbug.com/1005449, crbug.com/1329956
       // navigational or delete keys pressed but current DataGrid panel has lost focus;

package/front_end/ui/legacy/components/perf_ui/LineLevelProfile.ts

@@ -8,7 +8,6 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import type * as CPUProfile from '../../../../models/cpu_profile/cpu_profile.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
-import * as SourceFrame from '../source_frame/source_frame.js';
 
 let performanceInstance: Performance;
 
@@ -16,7 +15,7 @@ export class Performance {
   private readonly helper: Helper;
 
   private constructor() {
-    this.helper = new Helper(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
+    this.helper = new Helper(Workspace.UISourceCode.DecoratorType.PERFORMANCE);
   }
 
   static instance(opts: {
@@ -50,7 +49,8 @@ export class Performance {
           const lineInfo = node.positionTicks[j];
           const line = lineInfo.line;
           const time = lineInfo.ticks * sampleDuration;
-          this.helper.addLineData(target, node.url, line, time);
+          // Since no column number is provided by legacy profile, default to 1 (beginning of line).
+          this.helper.addLocationData(target, node.url, {line, column: 1}, time);
         }
       }
     }
@@ -62,13 +62,14 @@ export class Performance {
       this.helper.scheduleUpdate();
       return;
     }
-    if (!profile.samples) {
+    if (!profile.samples || !profile.columns) {
       return;
     }
 
     for (let i = 1; i < profile.samples.length; ++i) {
       const line = profile.lines[i];
-      if (!line) {
+      const column = profile.columns?.[i];
+      if (!line || !column) {
         continue;
       }
       const node = profile.nodeByIndex(i);
@@ -80,7 +81,7 @@ export class Performance {
         continue;
       }
       const time = profile.timestamps[i] - profile.timestamps[i - 1];
-      this.helper.addLineData(target, scriptIdOrUrl, line, time);
+      this.helper.addLocationData(target, scriptIdOrUrl, {line, column}, time);
     }
     this.helper.scheduleUpdate();
   }
@@ -91,7 +92,7 @@ let memoryInstance: Memory;
 export class Memory {
   private readonly helper: Helper;
   private constructor() {
-    this.helper = new Helper(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+    this.helper = new Helper(Workspace.UISourceCode.DecoratorType.MEMORY);
   }
 
   static instance(opts: {
@@ -124,43 +125,55 @@ export class Memory {
         return;
       }
       const line = node.callFrame.lineNumber + 1;
-      helper.addLineData(target, script, line, node.selfSize);
+      // Since no column number is provided by the heap profile, default to 1 (beginning of line).
+      helper.addLocationData(target, script, {line, column: 1}, node.selfSize);
     }
   }
 }
 
 export class Helper {
-  private readonly type: string;
+  private readonly type: Workspace.UISourceCode.DecoratorType;
   private readonly locationPool = new Bindings.LiveLocation.LiveLocationPool();
   private updateTimer: number|null = null;
-  private lineData =
-      new Map<SDK.Target.Target|null, Map<Platform.DevToolsPath.UrlString|number, Map<number, number>>>();
-
-  constructor(type: string) {
+  /**
+   * Given a location in a script (with line and column numbers being 1-based) stores
+   * the time spent at that location in a performance profile.
+   */
+  private locationData =
+      new Map<SDK.Target.Target|null, Map<Platform.DevToolsPath.UrlString|number, Map<number, Map<number, number>>>>();
+  constructor(type: Workspace.UISourceCode.DecoratorType) {
     this.type = type;
     this.reset();
   }
 
   reset(): void {
     // The second map uses string keys for script URLs and numbers for scriptId.
-    this.lineData = new Map();
+    this.locationData = new Map();
     this.scheduleUpdate();
   }
 
-  addLineData(
-      target: SDK.Target.Target|null, scriptIdOrUrl: Platform.DevToolsPath.UrlString|number, line: number,
-      data: number): void {
-    let targetData = this.lineData.get(target);
+  /**
+   * Stores the time taken running a given script location (line and column)
+   */
+  addLocationData(
+      target: SDK.Target.Target|null, scriptIdOrUrl: Platform.DevToolsPath.UrlString|number,
+      {line, column}: {line: number, column: number}, data: number): void {
+    let targetData = this.locationData.get(target);
     if (!targetData) {
       targetData = new Map();
-      this.lineData.set(target, targetData);
+      this.locationData.set(target, targetData);
     }
     let scriptData = targetData.get(scriptIdOrUrl);
     if (!scriptData) {
       scriptData = new Map();
       targetData.set(scriptIdOrUrl, scriptData);
     }
-    scriptData.set(line, (scriptData.get(line) || 0) + data);
+    let lineData = scriptData.get(line);
+    if (!lineData) {
+      lineData = new Map();
+      scriptData.set(line, lineData);
+    }
+    lineData.set(column, (lineData.get(column) || 0) + data);
   }
 
   scheduleUpdate(): void {
@@ -176,10 +189,9 @@ export class Helper {
   private async doUpdate(): Promise<void> {
     this.locationPool.disposeAll();
     // Map from sources to line->value profile maps.
-    const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, number>>();
+    const decorationsBySource = new Map<Workspace.UISourceCode.UISourceCode, Map<number, Map<number, number>>>();
     const pending: Array<Promise<void>> = [];
-
-    for (const [target, scriptToLineMap] of this.lineData) {
+    for (const [target, scriptToLineMap] of this.locationData) {
       const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
       for (const [scriptIdOrUrl, lineToDataMap] of scriptToLineMap) {
         // debuggerModel is null when the profile is loaded from file.
@@ -187,23 +199,34 @@ export class Helper {
         const workspace = Workspace.Workspace.WorkspaceImpl.instance();
         if (debuggerModel) {
           const workspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
-          for (const lineToData of lineToDataMap) {
-            const line = lineToData[0] - 1;
-            const data = lineToData[1];
-            const rawLocation = typeof scriptIdOrUrl === 'string' ?
-                debuggerModel.createRawLocationByURL(scriptIdOrUrl, line, 0) :
-                debuggerModel.createRawLocationByScriptId(String(scriptIdOrUrl) as Protocol.Runtime.ScriptId, line, 0);
-            if (rawLocation) {
-              pending.push(workspaceBinding.rawLocationToUILocation(rawLocation).then(uiLocation => {
-                if (uiLocation) {
-                  let lineMap = decorationsBySource.get(uiLocation.uiSourceCode);
-                  if (!lineMap) {
-                    lineMap = new Map<number, number>();
-                    decorationsBySource.set(uiLocation.uiSourceCode, lineMap);
-                  }
-                  lineMap.set(uiLocation.lineNumber + 1, data);
+          for (const [lineNumber, lineData] of lineToDataMap) {
+            // lineData contains profiling data by column.
+            for (const [columnNumber, data] of lineData) {
+              const zeroBasedLine = lineNumber - 1;
+              const zeroBasedColumn = columnNumber - 1;
+              if (target) {
+                const rawLocation = typeof scriptIdOrUrl === 'string' ?
+                    debuggerModel.createRawLocationByURL(scriptIdOrUrl, zeroBasedLine, zeroBasedColumn || 0) :
+                    debuggerModel.createRawLocationByScriptId(
+                        String(scriptIdOrUrl) as Protocol.Runtime.ScriptId, zeroBasedLine, zeroBasedColumn || 0);
+                if (rawLocation) {
+                  pending.push(workspaceBinding.rawLocationToUILocation(rawLocation).then(uiLocation => {
+                    if (uiLocation) {
+                      let lineMap = decorationsBySource.get(uiLocation.uiSourceCode);
+                      if (!lineMap) {
+                        lineMap = new Map<number, Map<number, number>>();
+                        decorationsBySource.set(uiLocation.uiSourceCode, lineMap);
+                      }
+                      let columnMap = lineMap.get(lineNumber);
+                      if (!columnMap) {
+                        columnMap = new Map<number, number>();
+                        lineMap.set(lineNumber, columnMap);
+                      }
+                      columnMap.set((zeroBasedColumn || 0) + 1, data);
+                    }
+                  }));
                 }
-              }));
+              }
             }
           }
         } else if (typeof scriptIdOrUrl === 'string') {

package/front_end/ui/legacy/components/perf_ui/OverviewGrid.ts

@@ -176,7 +176,7 @@ export class Window extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
 
     this.parentElement.addEventListener('wheel', this.onMouseWheel.bind(this), true);
     this.parentElement.addEventListener('dblclick', this.resizeWindowMaximum.bind(this), true);
-    Platform.DOMUtilities.appendStyle(this.parentElement, overviewGridStyles);
+    UI.DOMUtilities.appendStyle(this.parentElement, overviewGridStyles);
 
     this.leftResizeElement = parentElement.createChild('div', 'overview-grid-window-resizer');
     UI.UIUtils.installDragHandle(

package/front_end/ui/legacy/components/perf_ui/TimelineGrid.ts

@@ -33,8 +33,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Platform from '../../../../core/platform/platform.js';
 import type * as NetworkTimeCalculator from '../../../../models/network_time_calculator/network_time_calculator.js';
+import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import {DEFAULT_FONT_SIZE, getFontFamilyForCanvas} from './Font.js';
@@ -51,7 +51,7 @@ export class TimelineGrid {
 
   constructor() {
     this.element = document.createElement('div');
-    Platform.DOMUtilities.appendStyle(this.element, timelineGridStyles);
+    UI.DOMUtilities.appendStyle(this.element, timelineGridStyles);
 
     this.#dividersElement = this.element.createChild('div', 'resources-dividers');
 

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

@@ -121,7 +121,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly lazyContent: () => Promise<TextUtils.ContentData.ContentDataOrError>;
   private prettyInternal: boolean;
   private rawContent: string|CodeMirror.Text|null;
-  private formattedMap: Formatter.ScriptFormatter.FormatterSourceMapping|null;
+  protected formattedMap: Formatter.ScriptFormatter.FormatterSourceMapping|null;
   private readonly prettyToggle: UI.Toolbar.ToolbarToggle;
   private shouldAutoPrettyPrint: boolean;
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
@@ -400,6 +400,7 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
       newSelection = textEditor.createSelection(
           {lineNumber: start[0], columnNumber: start[1]}, {lineNumber: end[0], columnNumber: end[1]});
     } else {
+      this.formattedMap = null;
       await this.setContent(this.rawContent || '');
       this.baseDoc = textEditor.state.doc;
       const start = this.prettyToRawLocation(startPos.lineNumber, startPos.columnNumber);
@@ -1051,12 +1052,6 @@ export interface Transformer {
   };
 }
 
-export const enum DecoratorType {
-  PERFORMANCE = 'performance',
-  MEMORY = 'memory',
-  COVERAGE = 'coverage',
-}
-
 const config = {
   editable: new CodeMirror.Compartment(),
   language: new CodeMirror.Compartment(),

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

@@ -36,7 +36,6 @@
 
 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 SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
@@ -325,7 +324,7 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.element.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
     this.element.style.display = 'inline-block';
 
-    Platform.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
+    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);

package/front_end/ui/legacy/inspectorCommon.css

@@ -141,7 +141,7 @@ iframe.widget {
   display: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.highlighted-search-result,::highlight(highlighted-search-result) {
+.highlighted-search-result,:host::highlight(highlighted-search-result) {
   border-radius: 1px;
   background-color: var(--sys-color-yellow-container);
   outline: 1px solid var(--sys-color-yellow-container);
@@ -326,7 +326,7 @@ input[type='range']:disabled::-webkit-slider-thumb {
   }
 }
 
-.highlighted-search-result.current-search-result,::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%);
 

package/front_end/ui/legacy/legacy.ts

@@ -10,6 +10,7 @@ import * as ContextFlavorListener from './ContextFlavorListener.js';
 import * as ContextMenu from './ContextMenu.js';
 import * as Dialog from './Dialog.js';
 import * as DockController from './DockController.js';
+import * as DOMUtilities from './DOMUtilities.js';
 import * as DropTarget from './DropTarget.js';
 import * as EmptyWidget from './EmptyWidget.js';
 import * as FilterBar from './FilterBar.js';
@@ -61,6 +62,7 @@ export {
   ContextMenu,
   Dialog,
   DockController,
+  DOMUtilities,
   DropTarget,
   EmptyWidget,
   FilterBar,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3218,6 +3218,7 @@ export const knownContextValues = new Set([
   'save-image',
   'save-name',
   'save-player-info',
+  'save-trace-explanation',
   'scale',
   'scheme',
   'sci',

package/package.json

@@ -103,5 +103,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1545096"
+  "version": "1.0.1547147"
 }

package/front_end/panels/explain/components/consoleInsightSourcesList.css

@@ -1,51 +0,0 @@
-/*
- * Copyright 2023 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-:host {
-  display: block;
-}
-
-ul {
-  color: var(--sys-color-primary);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  margin-top: 8px;
-  padding-left: var(--sys-size-6);
-}
-
-li {
-  list-style-type: none;
-}
-
-ul .link {
-  color: var(--sys-color-primary);
-  display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
-  align-items: center;
-  gap: 4px;
-  text-decoration-line: underline;
-}
-
-devtools-icon {
-  height: 16px;
-  width: 16px;
-  margin-right: var(--sys-size-1);
-}
-
-devtools-icon[name="open-externally"] {
-  color: var(--icon-link);
-}
-
-.source-disclaimer {
-  color: var(--sys-color-on-surface-subtle);
-}

package/front_end/ui/components/docs/README.md

@@ -1,6 +0,0 @@
-# Component Docs
-
-This is the home of all the component server examples in the DevTools Frontend.
-For information on how to add your own and how to run the server, please see the
-[component server `README.md`](../../../../scripts/component_server/README.md).
-

package/front_end/ui/components/docs/building-ui-documentation/ComponentEvents.md

@@ -1,54 +0,0 @@
-# Listening to and dispatching events
-
-Within your component it is likely that you will need to listen to user events, or dispatch custom events to enable other components to be notified of some event or user action.
-
-## Listening to events
-
-To bind event listeners, we can use Lit-Html's event binding syntax in our template. Take the event you want to listen to, and prefix it with a `@`:
-
-```ts
-LitHtml.render(LitHtml.html`
-  <button @click=${this.#onButtonClick}>Click me!</button>
-`, this.#shadow, {host: this});
-```
-
-Event listeners are defined as private class methods that will be called with an `Event`:
-
-```ts
-#onButtonClick(event: Event): void {
-  // ...
-}
-```
-
-You do not need to worry about the event listener not being bound to the component's scope - Lit-Html takes care of this when we pass `{host: this}` into the `LitHtml.render` call. This tells Lit to bind event listeners on our behalf. In DevTools we have an ESLint rule which ensures that we use this option, so you cannot forget it!
-
-## Dispatching events
-
-Sometimes you may need to dispatch an event from your component that another element higher in the DOM tree can listen to.
-
-The first step is to define the custom event. You do this by extending the built in `Event` class:
-
-```ts
-export class AddBreakpointEvent extends Event {
-  static readonly eventName = 'addbreakpoint';
-
-  constructor(public index: number) {
-    super(AddBreakpointEvent.eventName, {bubbles: true, composed: true});
-  }
-}
-```
-
-Custom events must have a `static readonly eventName` property (this is also enforced by an ESLint rule). We try to mimic the conventions of built in DOM events - event names should be lowercase and contain no spaces or dashes.
-
-They must also define a `constructor` which takes in any data that you want to be available on this event. This is how you can attach information to the events you dispatch for listeners to have access to. By declaring a `public node: DOMNode` above, we are declaring that this event must be initialised with a `node`, and that listeners will be able to access it via `event.node`.
-
-Within the constructor, we call `super` with our custom event name. We then pass two options in which are recommended (but not required if you know you do not need them):
-
-1. `bubbles`: setting this to `true` means that when this event is emitted it will bubble up through the DOM tree. You usually want this because it is how built in browser events behave and it means that any listeners can be anywhere "above" the element that is dispatching the event and still be able to listen for it.
-2. `composed`: this setting declares if the event will propogate through the shadow boundary and into the standard DOM. Setting this to `false` means that all event listeners must be within the shadow DOM to be able to listen to the event.
-
-MDN has some useful articles on these concepts if you want to learn more:
-
-1. [Introduction to Events: Event bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
-2. [Event: composed property](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed)
-3. [Using shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)

package/front_end/ui/components/docs/building-ui-documentation/ComponentPerformance.md

@@ -1,136 +0,0 @@
-# Performance of Components
-
-Because we call the `#render()` method of a component frequently whenever any data changes, it is possible to create very inefficient component render calls that can lead to a poor experience for users.
-
-If the `#render()` method is expensive to run, and the component's data frequently changes, we will deliver a janky experience to users. This document lists some common causes of issues and ways to mitigate or avoid them. Most of these come from real world instances on DevTools; please feel free to add any that you come across!
-
-## Manually creating component instances
-
-When you re-render a component, Lit is smart and does the minimal amount of work. For example, given a `#render()` method that looks like this:
-
-```
-return html`<devtools-foo .name=${name}></devtools-foo>`
-```
-
-Lit knows that the only dynamic part of that template is the `name` property, and as such on each re-render it only updates that part (and only if it has changed). It will not recreate `devtools-foo`.
-
-> You can read more about this in the [Lit templates documentation](https://lit.dev/docs/templates/overview/).
-
-However, if we change the `#render()` method to:
-
-```
-const foo = new DevToolsFoo();
-foo.name = name;
-return html`${foo}`
-```
-
-Now, we wil recreate `foo` on each re-render. This is not only wasted effort, but can mess with the user's experience if they had focused the node, only to have it destroyed and recreated.
-
-You should always let Lit manage instances of components. If you cannot do this, you should ensure some layer of caching to make sure instnaces are re-used whenver possible. However, **be careful!** It is very hard to implement a reliable cache for elements, and should be done only as a last resort.
-
-## Integrating DevTools widgets & Lit and causing re-renders
-
-This issue is similar to the one above; often we can hit performance issues when using Lit to render a DevTools widget that we want to use. In a perfect world we would always re-build these widgets into Lit components, but that is often a huge undertaking and one that is not justifiable. The design of the widgets system is that they are only expected to be created once, and not re-evaluated. They expect to have their `update()` method called to trigger an update.
-
-In this instance, you will need to:
-
-1. Manage the instance(s) of the widget, and ensure that we are not destroying and recreating the widget on each render.
-2. Ensure the `update()` method of the widget is called when the relevant data changes (or on each `#render()` call).
-
-For example, this is likely to cause issues:
-
-```ts
-// within #render()
-const someWidget = new SomeWidget();
-return html`<div>${someWidget.element}</div>`
-```
-
-Because the widget will be created on each render. Instead, store the widget and `update()` it:
-
-```ts
-// within the component
-#widgetInstance = new SomeWidget();
-
-// within #render()
-this.#widgetInstance.update();
-return html`<div>${this.#widgetInstance.element}</div>`;
-```
-
-## Swap from `set data` to individual properties
-
-When introducing lit-html into the DevTools codebase we made the decision to prefer:
-
-```ts
-set data(data: FooData) {
-  this.#x = data.x;
-  this.#y = data.y;
-  // And so on
-}
-```
-
-Rather than:
-
-```ts
-set x(x: number) {
-  this.#x = x;
-}
-
-set y(y: number) {
-  this.#y = y;
-}
-```
-
-We did this to avoid having to immediately implement batched rendering.
-
-However, this decision came with a performance penalty. Lit will only trigger a re-render of a component if one of its properties changes. But when we pass in a new object on each render, we are effectively triggering a re-render every time. Normally this impact isn't noticable, and most components don't re-render with the frequency required to cause performance issues. When a component that takes an object via `set data()` is frequently re-rendered, that causes a non-negligible amount of garbage collection to tidy up the one-use objects we create.
-
-Therefore, if a component is re-rendered often and you are seeing issues, you can switch it to:
-
-```
-<devtools-foo .x=${x} .y=${y}></devtools-foo>
-```
-
-If you take this approach, ensure each property setter uses the render scheduler to batch updates. Otherwise we trigger N renders, one per property, rather than 1.
-
-```ts
-set x(x: number) {
-  this.#x = x;
-  void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-}
-```
-
-## Passing callback functions that are recreated on each render
-
-A general theme of performance in frontend is to avoid re-renders whenever possible. When a property passed into a component changes, that will trigger a re-render (as in our components we schedule renders in any setters). One pattern that can cause many re-renders is passing functions into components.
-
-For example, imagine this `#render()` method:
-
-```ts
-const onClick = function(event: Event) {
-  // do something
-}
-
-return html`<devtools-foo .onClick=${onClick}></devtools-foo>`
-```
-
-And within `devtools-foo`, we have:
-
-```
-set onClick(func: (event: Event) => void) {
-  if (this.#onClick === func) {
-    return;
-  }
-  this.#onClick = func;
-  void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-}
-```
-
-On each `#render()` call, `onClick` is recreated, so it is considered to be a new function, and thus we trigger a re-render. We could fix this by making `onClick` stable, and not re-creating it on each render, but a better way is to lean into the browser and use events.
-
-In this example, we would update `devtools-foo` to dispatch an event when the user performs an action. We could then update our `#render()` method to:
-
-```ts
-return html`<devtools-foo @click=${this.#onClick}></devtools-foo>`
-```
-
-Lit will manage this event listener and ensure that it is not needlessly unbound and rebound. Now, we don't cause `devtools-foo` to re-render when really nothing is changing.