Developing WebKitGTK Made Easy: wkdev-sdk

A new SDK has been created to improve the developer experience working on
WebKitGTK. This talk is aimed at current and potential contributors covering
the problems it solves and the workflow of using the SDK.


(c) GUADEC 2024
The GNOME Conference
Denver, US
July 19-24, 2024
https://events.gnome.org/event/209/
https://www.youtube.com/watch?v=LP-ycQRUFEI

1. We b K i t C o n t a i n e r S D KWe b K i t C o n t a i n e r S D K
Pa t r i c k G r i f f i s - I g a l i a
Slides - https:/ / notes.igalia.com/ p/ 9 LO f5le3Y
1

2. Age ndaAge nda
• Pa i n - p o i n t s o f We b K i t G T K d e v e l o p m e n t
• The many ways to build WebKit
• Wo r k f l o w s u s i n g t h e n e w S D K
2

3. What Makes WebKitGTK Unique?What Makes WebKitGTK Unique?
• Relati vely modern C+ + usage
◦ clang, gcc, li bstdc+ + , li bc+ +
• Complex CMake usage
• A lot of dependencies
◦ GNOME platform libraries, GStreamer, Decoders
◦ Build scripts using Perl, Python, and Ruby
3

4. How to Build WebKitG TKHow to Build WebKitG TK
4 . 1

5. Building Against the HostBuilding Against the Host
Tools/gtk/install-dependencies
• Only supports a few distros (Ubuntu, Fedora, Arch)
• Installs a large amount of packages
• A few dependencies aren’t packaged in distros (libbacktrace,
sparkle- cdm)
4 . 2

6. Building with JHBuildBuilding with JHBuild
Tools/jhbuild/
• Distro support still limited, just in other ways
• Builds a large amount of projects
• Moduleset requires regular maintainance
• Built results are not very reproducable or robust
4 . 3

7. Building with FlatpakBuilding with Flatpak
Tools/flatpak/
• Finally reproducable and portable!
• Runti me requi res regular mai ntai nance
◦ Uses buildstream, layered on freedesktop-sdk
• Everything is ran in flatpak
◦ Limited tooling
◦ Read-only runti me
◦ Sandbox gets in the way
4 . 4

8. Goals for a Better Solution?Goals for a Better Solution?
• All traditional development tools work
• Minimal maintainance and custom tooling
• Reproducable, even for old versi ons
• Easy to develop other libraries/ applications
5 . 1

9. New C ontainer SDKNew C ontainer SDK
Combine all of the strengths of each approach!
• Use podman for a reproducable container
• Rely on U buntu for base dependenci es
• Use JHBuild for custom dependencies and developer tooling
5 . 2

10. Basic UsageBasic Usage
git clone https://github.com/Igalia/webkit-container-sdk.git
source ./webkit-container-sdk/register-sdk-on-host.sh
# Requires podman 4.0
wkdev-create --create-home
wkdev-enter
> $YOUR_WEBKIT_CHECKOUT/Tools/Scripts/build-webkit --gtk
> $YOUR_WEBKIT_CHECKOUT/Tools/Scripts/run-minibrowser --gtk
More details: https:/ /github.com/ Igalia/ webkit-container-sdk
6 . 1

11. Host ScriptsHost Scripts
• wkdev-create - D o w n l o a d i m a g e s a n d c re a te c o n t a i n e r
• wkdev-enter - S t a r t a n d o p e n s h e l l i n c o n t a i n e r s
• wkdev-update - R e c re a te e x i s t i n g c o n t a i n e r s
• wkdev-sdk-bakery - B u i l d i m a g e s l o c a l l y
• wkdev-setup-nvidia-gpu-for-container
• wkdev-start-profiling
6 . 2

12. Container ScriptsContainer Scripts
• wkdev-test-host-integration
Sanity check container features
• wkdev-setup-devhelp
Add build directories to Devhelp’s path
• wkdev-setup-vscode
Install VSC ode and extensions
6 . 3

13. Development WorkflowDevelopment Workflow
All expected tools work, however a reasonable recommendation:
• VSC ode with extensions:
◦ clangd (llvm- vs- code- extensi ons.vscode- clangd)
◦ lldb (vadimcn.vscode-lldb)
◦ cmake (ms- vscode.cmake- tools)
7 . 1

14. Why clangdWhy clangd
We b K i t u s e s “Unified S ources” .
• Generated .clangd
◦ Filters out any flags GC C uses and C lang doesn’t support
◦ Ignores generated sources
• Generated compile_commands.json
◦ Expands UnifiedSources back into source files
https:/ /docs.webkit.org/ Deep Dive/ Build/ UnifiedBuilds.html
7 . 2

15. Why lldbWhy lldb
We b K i t u s e s a l o t o f c u s t o m t y p e s a s w e l l a s t h e s t a n d a rd l i b r a r y.
Provi des a scri pt for lldb whi ch adds type i nformati on/ formatti ng for
Strings, HashMaps, BitMasks, etc.
.vscode/launch.json
"configurations": [
...
"type": "lldb",
"initCommands": [
"command script import Tools/lldb/lldb_webkit.py"
],
...
]
7 . 3

16. 7 . 4

17. We b K i t i s M u l t i - p r o c e s sWe b K i t i s M u l t i - p r o c e s s
7 . 5

18. .vscode/launch.json
"configurations": [
{
"name": "MiniBrowser",
"program": "WebKitBuild/GTK/Debug/bin/MiniBrowser",
"request": "launch",
"env": {
"LD_LIBRARY_PATH": "${workspaceFolder}/WebKitBuild/GTK/Debug/lib:${env:LD_LIBRARY_PATH}",
"WEBKIT_EXEC_PATH": "${workspaceFolder}/WebKitBuild/GTK/Debug/bin",
"WEBKIT_INJECTED_BUNDLE_PATH": "${workspaceFolder}/WebKitBuild/GTK/Debug/lib"
},
...
},
{
"name": "NetworkProcess",
"request": "attach",
"program": "WebKitBuild/GTK/Debug/bin/WebKitNetworkProcess",
...
}
]
7 . 6

19. In-tree Scripts/ ToolsIn-tree Scripts/ Tools
Scripts (in Tools/Scripts ) help wi th development such as
build-webkit --gtk --debug .
However this obscures details and tools like run-webkit-tests
re l y o n a s s u m p t i o n s a b o u t d i re c t o r y l a y o u t .
Instead you can directly use C Make with Presets:
cmake --list-presets cmake --preset=gtk-debug
7 . 7

20. CMake PresetsCMake Presets
7 . 8

21. JHBuild IntegrationJHBuild Integration
7 . 9

22. Bundled moduleset with projects such as glib , libsoup ,
epiphany , gstreamer .
jhbuild list --all
Building a module is simple and can be modified easily:
jhbuild build glib
cd ~/checkout/glib
# Make changes
jhbuild make
https:/ /gnome.pages.gitlab.gnome.org/ jhbuild/ index.html
7 . 10

23. Running EpiphanyRunning Epiphany
To d e v e l o p E p i p h a n y o n t o p o f W e b K i t y o u c a n i n s t a l l i t
into the JHBuild prefix.
.vscode/settings.json :
"cmake.installPrefix": "/jhbuild/install"
jhbuild sysdeps --install epiphany
jhbuild build epiphany
7 . 11

24. Adde ndumsAdde ndums
clangd worki ng out of the box depends on
https:/ /github.com/ WebKit/ WebKit/ pull/ 307 84
8 . 1

25. Questions?Questions?
Slides -
https:/ /github.com/ Igalia/ webkit-container-sdk
https:/ / notes.igalia.com/ p/ 9 LO f5le3Y
8 . 2