chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

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/components/utils/Linkifier.ts

@@ -17,6 +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 type * as IconButton from '../../../components/icon_button/icon_button.js';
+import * as UIHelpers from '../../../helpers/helpers.js';
 import {html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -920,7 +921,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         section: 'reveal',
         title: UI.UIUtils.openLinkExternallyLabel(),
         jslogContext: 'open-in-new-tab',
-        handler: () => UI.UIUtils.openInNewTab(url),
+        handler: () => UIHelpers.openInNewTab(url),
       });
       result.push({
         section: 'clipboard',

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/mcp/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../config/typescript/tsconfig.base.json",
+  "compilerOptions": {
+    "allowUmdGlobalAccess": true,
+    "outDir": "ignored",
+    "target": "ES2023",
+    "lib": [
+      "ES2023",
+      "ES2024.Promise",
+      "ESNext.Iterator",
+      "ESNext.Collection",
+      "ESNext.Array"
+    ]
+  },
+  "references": [{ "path": "../front_end/tsconfig.json" }]
+}

package/package.json

@@ -46,7 +46,7 @@
     "@types/glob": "7.2.0",
     "@types/karma-chai-sinon": "0.1.20",
     "@types/mocha": "10.0.10",
-    "@types/node": "22.10.7",
+    "@types/node": "24.10.0",
     "@types/sinon": "17.0.4",
     "@types/webidl2": "24.4.3",
     "@types/yargs": "17.0.33",
@@ -103,5 +103,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1544076"
+  "version": "1.0.1547147"
 }

package/front_end/core/common/Linkifier.ts

@@ -1,55 +0,0 @@
-// Copyright 2019 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 Platform from '../platform/platform.js';
-
-export abstract class Linkifier {
-  abstract linkify(object: Object, options?: Options): Node;
-
-  static async linkify(object: Object|null, options?: Options): Promise<Node> {
-    if (!object) {
-      throw new Error('Can\'t linkify ' + object);
-    }
-    const linkifierRegistration = getApplicableRegisteredlinkifiers(object)[0];
-    if (!linkifierRegistration) {
-      throw new Error('No linkifiers registered for object ' + object);
-    }
-    const linkifier = await linkifierRegistration.loadLinkifier();
-    return linkifier.linkify(object, options);
-  }
-}
-export interface Options {
-  tooltip?: string;
-  preventKeyboardFocus?: boolean;
-  textContent?: string;
-  // Dynamic links include hyperlinks and anchorlinks -- links that navigate the content.
-  isDynamicLink?: boolean;
-}
-
-const registeredLinkifiers: LinkifierRegistration[] = [];
-
-export function registerLinkifier(registration: LinkifierRegistration): void {
-  registeredLinkifiers.push(registration);
-}
-
-export function getApplicableRegisteredlinkifiers(object: Object): LinkifierRegistration[] {
-  return registeredLinkifiers.filter(isLinkifierApplicableToContextTypes);
-
-  function isLinkifierApplicableToContextTypes(linkifierRegistration: LinkifierRegistration): boolean {
-    if (!linkifierRegistration.contextTypes) {
-      return true;
-    }
-    for (const contextType of linkifierRegistration.contextTypes()) {
-      if (object instanceof contextType) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-
-export interface LinkifierRegistration {
-  loadLinkifier: () => Promise<Linkifier>;
-  contextTypes?: () => Array<Platform.Constructor.Constructor<unknown>>;
-}

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/panels/timeline/CLSLinkifier.ts

@@ -1,58 +0,0 @@
-// Copyright 2018 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-import type * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
-
-interface Color {
-  r: number;
-  g: number;
-  b: number;
-  a: number;
-}
-
-export class CLSRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  color: Color;
-  outlineColor: Color;
-  constructor([x, y, width, height]: [number, number, number, number]) {
-    this.x = x;
-    this.y = y;
-    this.width = width;
-    this.height = height;
-    this.color = {r: 238, g: 111, b: 99, a: 0.4};
-    this.outlineColor = {r: 238, g: 111, b: 99, a: 0.7};
-  }
-}
-
-let linkifierInstance: Linkifier;
-
-export class Linkifier implements Common.Linkifier.Linkifier {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): Linkifier {
-    const {forceNew} = opts;
-    if (!linkifierInstance || forceNew) {
-      linkifierInstance = new Linkifier();
-    }
-
-    return linkifierInstance;
-  }
-
-  linkify(object: Object, _options?: Common.Linkifier.Options): Node {
-    const link = document.createElement('span');
-    const rect = (object as CLSRect);
-    const {x, y, width, height} = rect;
-    link.textContent = `Location: [${x},${y}], Size: [${width}x${height}]`;
-
-    link.addEventListener('mouseover', () => SDK.OverlayModel.OverlayModel.highlightRect(rect));
-    link.addEventListener('mouseleave', () => SDK.OverlayModel.OverlayModel.clearHighlight());
-
-    return link;
-  }
-}

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)