Files
brave-core/docs/devtools_frontend_patching.md
T
cdesouza-chromium 78129286ae [docs] Include docs/ to md auto-format (#36521)
This is in conformance with the guidelines that `.md` files under
`docs/` must use 80-columns.
2026-05-19 20:02:22 +01:00

42 lines
1.7 KiB
Markdown

# DevTools Frontend Patching
## Adding a New File
1. Add your file in
`//brave/third_party/devtools-frontend/src/front_end/{path to your file}`
2. Create (if it doesn't exist) `sources.gni` with
`//brave/third_party/devtools-frontend/src/front_end/{path to your file}`
3. Create a patch in the corresponding `BUILD.gn` in
`//third_party/devtools-frontend/src`
4. Add a reference to the compiled file in
`//brave/third_party/devtools-frontend/src/config/gni/sources.gni`
### How It Works
When
`chromium_src/third_party/devtools-frontend/src/scripts/build/typescript/ts_library.py`
detects a file starting with `//brave`, it copies this file to the corresponding
upstream directory. When the compilation of the corresponding target is done,
`ts_library.py` removes the copied file to preserve the upstream sources in
their original state.
## Patching an Existing File
1. Create a patch file in
`//brave/chromium_src/third_party/devtools-frontend/src/front_end/{path to the file you want to patch}.ts`
2. Apply the patch after `SomeClass` declaration in the original file:
```javascript
import { PatchSomeClass } from './SomeFile.patch.js'; (SomeClass as any) = PatchSomeClass(SomeClass);
```
### How It Works
When
`chromium_src/third_party/devtools-frontend/src/scripts/build/typescript/ts_library.py`
detects a `chromium_src` counterpart, it copies the file to the corresponding
upstream directory (replacing `.ts` with `.patch.ts`). You don't need to add
this file in `sources.gni` or `BUILD.gn`. Instead, you should import the
`{filename}.patch.js` file (See step #2 above).
`chromium_src/third_party/devtools-frontend/src/scripts/build/generate_devtools_grd.py`
will automatically add the `.patch.js` file into the resource bundle.