Commit graph

30 commits

Author SHA1 Message Date
Andreas Kling
770811e343 LibDevTools: Only send network response bodies when DevTools connected
To avoid unnecessary IPC traffic, we now only send network response
bodies when a DevTools client is connected.

This requires tracking DevTools connection state in ViewImplementation
so we can propagate it to new WebContent processes created during
cross-site navigation.
2026-01-15 20:10:19 +01:00
Andreas Kling
681d00c218 LibDevTools: Pass request initiator type to network panel
Propagate the request initiator type (e.g., "xmlhttprequest", "fetch",
"script", "stylesheet") from LibWeb through the IPC layer to DevTools.

This enables Firefox DevTools to correctly identify XHR/fetch requests
and display appropriate cause types in the Network panel's "Initiator"
column.
2026-01-15 20:10:19 +01:00
Andreas Kling
31ffd2e8e5 LibDevTools: Add request and response body viewing to network panel
This adds support for viewing request payloads (POST data) and response
bodies in the Firefox DevTools network panel.

Request bodies are captured when network requests start and passed
through IPC to the NetworkEventActor, which returns them via the
getRequestPostData protocol method.

Response bodies are streamed via a new IPC message as data is received,
accumulated in NetworkEventActor (with a 10MB size limit to prevent
memory issues), and returned via getResponseContent. Text content is
returned as UTF-8, while binary content (images, etc.) is base64.
2026-01-15 20:10:19 +01:00
Andreas Kling
cd8778f662 LibDevTools: Stream console messages instead of polling by index
Previously, console messages were sent using an index-based system where
DevTools would be notified of new message indices and then request them
in batches. This created synchronization issues during page navigation
when the WebContent process resets while DevTools still has stale index
state.

This changes to a push-based model where console messages are sent
immediately as resources when they are logged, matching how Firefox
DevTools handles console messages. Each message is pushed through IPC
and forwarded to DevTools as a "console-message" or "error-message"
resource.

This eliminates the need for index tracking in FrameActor and simplifies
the entire console message pipeline from WebContent through to DevTools.
2026-01-15 20:10:19 +01:00
Andreas Kling
9b8e822390 LibDevTools: Send navigation events to Firefox DevTools
When a page navigates, send document-event resources with
"will-navigate" and tabNavigated messages so Firefox DevTools
can follow along and clear the Network panel appropriately.
2026-01-15 20:10:19 +01:00
Andreas Kling
cf010885d5 LibDevTools: Add Firefox DevTools network monitoring support
Hook ResourceLoader to emit network request lifecycle events through
IPC to the UI process, where FrameActor creates NetworkEventActor
instances that serialize requests using Firefox's Remote Debug Protocol.

The Network panel now shows requests with method, URL, status, MIME
type, size, and timing information. Several features remain stubbed
(POST data, response content, cause detection) marked with FIXMEs.
2026-01-15 20:10:19 +01:00
Sam Atkins
41b4292447 LibDevTools+LibWebView: Implement initial accessibility tree view
This is enough for Firefox to display the Accessibility tab, containing
our accessibility tree which can be inspected. Most information is
blank for now.

There's quite a bit of duplication between AccessibilityWalkerActor and
WalkerActor - it might be worth trying to make a base class once the
details are figured out. Frustratingly, the two don't work quite the
same: for a lot of messages that would be sent to WalkerActor, the
accessibility equivalent is sent to the AccessibilityNodeActor instead.

Co-authored-by: Tim Flynn <trflynn89@pm.me>
2025-10-20 10:51:19 +01:00
ayeteadoe
f58298132b LibDevTools: Enable EXPLICIT_SYMBOL_EXPORT 2025-08-23 16:04:36 -06:00
Sam Atkins
0ed2e71801 LibWeb/CSS: Move and rename PseudoElement types to prep for code gen
The upcoming generated types will match those for pseudo-classes: A
PseudoElementSelector type, that then holds a PseudoElement enum
defining what it is. That enum will be at the top level in the Web::CSS
namespace.

In order to keep the diffs clearer, this commit renames and moves the
types, and then a following one will replace the handwritten enum with
a generated one.
2025-03-24 09:49:50 +00:00
Timothy Flynn
daca9f5995 LibDevTools+LibWebView+WebContent: Selectively fetch DOM node properties
When we inspect a DOM node, we currently serialize many properties for
that node, including its layout, computed style, used fonts, etc. Now
that we aren't piggy-backing on the Inspector interface, we can instead
only serialize the specific information required by DevTools.
2025-03-20 09:01:26 +01:00
Timothy Flynn
0b86bcfba7 LibDevTools+LibWebView: Implement getting document style sheets 2025-03-13 16:56:28 -04:00
Timothy Flynn
cbefa797d4 LibDevTools+LibWebView+WebContent: Implement moving DOM nodes
This allows for click-and-dragging DOM nodes in DevTools to move them.
2025-03-11 09:50:51 -04:00
Timothy Flynn
01c44a5c66 LibDevTools+LibWebView+WebContent: Implement getting DOM node inner HTML
This is used by DevTools to copy the inner HTML to the clipboard.
2025-03-11 09:50:51 -04:00
Timothy Flynn
d75eadc3c4 LibDevTools+LibWebView+WebContent: Implement editing DOM node HTML
These commands are used for the "Edit As HTML" feature in DevTools. This
renames our existing HTML getter IPC to indicate that it is for outer
HTML. DevTools will need a separate inner HTML getter.
2025-03-11 09:50:51 -04:00
Timothy Flynn
5f76324af5 LibDevTools+LibWebView: Take advantage of IPC encoding improvements 2025-03-09 11:14:20 -04:00
Timothy Flynn
c4b1d2382a LibDevTools+LibWebView: Implement requests to clone DOM nodes 2025-03-08 01:25:55 +01:00
Timothy Flynn
ffd48e1d45 LibDevTools+LibWebView: Implement requests to create DOM nodes
This requires a couple of amendments to the DOM node serialization.
Namely, we need to include the HTML namespace, otherwise the context
menu item to create a new node is disabled.
2025-03-08 01:25:55 +01:00
Timothy Flynn
29122786b9 LibDevTools+LibWebView: Implement requests to delete DOM nodes 2025-03-08 01:25:55 +01:00
Timothy Flynn
bdb31b029a LibDevTools+LibWebView: Implement requests to edit DOM node tags 2025-03-08 01:25:55 +01:00
Timothy Flynn
17fb21169f LibDevTools+LibWebView: Implement requests to edit DOM node attributes 2025-03-08 01:25:55 +01:00
Timothy Flynn
57e0a3f8b5 LibDevTools+LibWebView: Implement requests to edit DOM node text 2025-03-08 01:25:55 +01:00
Timothy Flynn
8bcc3d3797 LibDevTools+LibWebView: Inform the DevTools client about DOM mutations 2025-03-08 01:25:55 +01:00
Timothy Flynn
c5a22a1a97 LibDevTools+LibWebView: Implement basic support for console logging
This implements support for basic usage of console.log and friends. It
does not implement console.assert, console.trace, console.group, etc.
2025-03-04 15:33:39 -05:00
Timothy Flynn
6d33b70e61 LibDevTools: Begin supporting the JavaScript console
This implements enough to execute JavaScript and reply with the result.
We do not yet support autocomplete or eager evaluation.
2025-02-28 13:08:33 +01:00
Timothy Flynn
0d1ce48071 LibDevTools+LibWebView: Avoid dependence on LibWebView from LibDevTools
LibDevTools was implicitly including generated IPC endpoints from
LibWebView. This is not a dependency declared in the CMakeLists.txt. So
updates to the IPC file might not have caused the endpoint header to be
regenerated by the time LibDevTools is compiled, resulting in a build
error.

This patch removes that implicit dependency entirely.
2025-02-26 19:48:24 -05:00
Timothy Flynn
afb0a0a394 LibDevTools: Support inspecting DOM node box models and computed styles 2025-02-24 12:05:29 -05:00
Timothy Flynn
6e8d77ff7f LibDevTools: Support highlighting DOM nodes hovered in the inspector 2025-02-24 12:05:29 -05:00
Timothy Flynn
5ed91dc915 LibDevTools: Implement enough of the protocol to inspect tabs
There is a lot needed all at once to actually inspect a tab's DOM tree.
It begins with requesting a "watcher" from a TabActor. It seems there
can be many types of watchers, but here we implement the "frame" watcher
only. The watcher creates an "inspector", which in turn creates a
"walker", which is the actor ultimately responsible for serializing and
inspecting the DOM tree.

In between all that, the DevTools client will send a handful of other
informational requests. If we do not reply to these, the client will not
move forward with the walker. For example, the CSSPropertiesActor will
be asked for a list of all known CSS properties.
2025-02-19 08:45:51 -05:00
Timothy Flynn
b974e91731 LibDevTools: Implement enough of the protocol to see a tab list
Previously, we could connect to our DevTools server from Firefox, but
could not see any information on Ladybird's opened tabs. This implements
enough of the protocol to see a tab list, but we cannot yet inspect the
tabs.
2025-02-19 08:45:51 -05:00
Timothy Flynn
58bc44ba2a LibDevTools: Introduce a Firefox DevTools server library
To aid with debugging web page issues in Ladybird without needing to
implement a fully fledged inspector, we can implement the Firefox
DevTools protocol and use their DevTools. The protocol is described
here:

https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html

This commit contains just enough to connect to Ladybird from a DevTools
client.
2025-02-19 08:45:51 -05:00