// 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. /* eslint-disable @devtools/no-underscored-properties, @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */ import {html, nothing, render} from 'lit-html'; import { DEFAULT_MODULE_CONFIGURATIONS, type ModuleConfiguration, type ModuleConfigurations, type PathSubstitution, } from './ModuleConfiguration.js'; export interface ModuleConfigurationListData { moduleConfigurations: ModuleConfigurations; } export class ModuleConfigurationsChangedEvent extends CustomEvent { constructor(detail: ModuleConfigurationListData) { super('module-configurations-changed', {detail}); } } export class ModuleConfigurationList extends HTMLElement { private readonly _shadow = this.attachShadow({mode: 'open'}); private _moduleConfigurations: ModuleConfigurations = DEFAULT_MODULE_CONFIGURATIONS; constructor() { super(); this._render(); } get data(): ModuleConfigurationListData { return {moduleConfigurations: this._moduleConfigurations}; } set data({moduleConfigurations}: ModuleConfigurationListData) { this._moduleConfigurations = moduleConfigurations; this._render(); } private _setModuleConfigurations(moduleConfigurations: ModuleConfigurations) { this._moduleConfigurations = moduleConfigurations; this._render(); this.dispatchEvent(new ModuleConfigurationsChangedEvent({moduleConfigurations})); } private _addModuleConfiguration(event: Event) { this._setModuleConfigurations(this._moduleConfigurations.concat([{name: '', pathSubstitutions: []}])); const {target} = event; if (target instanceof HTMLButtonElement) { const moduleInputs = target.parentElement?.querySelectorAll('input'); const element = moduleInputs ? moduleInputs[moduleInputs.length - 1] : undefined; if (element instanceof HTMLInputElement) { element.focus(); } } } private _removeModuleConfiguration(moduleConfiguration: ModuleConfiguration, event: Event) { this._setModuleConfigurations(this._moduleConfigurations.filter(m => m !== moduleConfiguration)); } private _updateModuleConfiguration(mc: ModuleConfiguration, fn: (mc: ModuleConfiguration) => ModuleConfiguration) { this._setModuleConfigurations(this._moduleConfigurations.map( moduleConfiguration => moduleConfiguration === mc ? fn(moduleConfiguration) : moduleConfiguration)); } private _updateModuleConfigurationName(mc: ModuleConfiguration, event: Event) { const name = (event.target as HTMLInputElement).value; this._updateModuleConfiguration(mc, mc => ({...mc, name})); } private _addPathSubstitution(mc: ModuleConfiguration, event: Event) { this._updateModuleConfiguration( mc, mc => ({...mc, pathSubstitutions: mc.pathSubstitutions.concat([{from: '', to: ''}])})); const {target} = event; if (target instanceof HTMLButtonElement) { const prev = target.parentElement?.previousElementSibling?.firstElementChild; if (prev instanceof HTMLInputElement) { prev.focus(); } } } private _removePathSubstitution(mc: ModuleConfiguration, sm: PathSubstitution, event: Event) { this._updateModuleConfiguration(mc, mc => ({...mc, pathSubstitutions: mc.pathSubstitutions.filter(s => s !== sm)})); } private _updatePathSubstitutionFrom(mc: ModuleConfiguration, sm: PathSubstitution, event: Event) { const from = (event.target as HTMLInputElement).value; this._updateModuleConfiguration( mc, mc => ({...mc, pathSubstitutions: mc.pathSubstitutions.map(s => s === sm ? {...sm, from} : s)})); } private _updatePathSubstitutionTo(mc: ModuleConfiguration, sm: PathSubstitution, event: Event) { const to = (event.target as HTMLInputElement).value; this._updateModuleConfiguration( mc, mc => ({...mc, pathSubstitutions: mc.pathSubstitutions.map(s => s === sm ? {...sm, to} : s)})); } private _render() { const output = html`

The debug information encoded in the .wasm binaries references source files via paths that usually only make sense on the build machine, but you might need to debug them on different machine (i.e. build was created by CI bot). If that's the case, you can specify path substitutions below that replace certain parts of the paths and tell Chrome DevTools to look somewhere else for the source file in question. This is the equivalent to GDB's set substitute-path and LLDB's set target.source-map old new feature, which you might already be familiar with.

Below you can specify path substitutions on a per .wasm module level (or just specify default settings that will be used when no module matches the name). The following wildcard patterns are supported for the module name:

A * in the pattern matches any sequence of characters, except for slashes (/).
A **/ in the pattern matches any sequence of characters, including slashes (/).

If the pattern contains a slash (/) the full URL will be tested against the pattern, while if the pattern doesn't contain any slashes, only the basename of the URL's path will be tested. For example, say you specify foo*.wasm as pattern, then it will successfully match http://localhost/foo1.wasm, but not http://foo.wasm/file.wasm.

${ this._moduleConfigurations.map( mc => html` ${ mc.name !== undefined ? html`Module ` : html`Default settings`}

Path substitutions ${ mc.pathSubstitutions.map( sm => html`

`)}

${ mc.name === undefined ? nothing : html``}

`)}

`; render(output, this._shadow, {eventContext: this}); } } declare global { interface HTMLElementTagNameMap { 'devtools-cxx-debugging-module-configuration-list': ModuleConfigurationList; } } customElements.define('devtools-cxx-debugging-module-configuration-list', ModuleConfigurationList);