No functional impact intended. This is just a more complicated way of
writing what we have now.
The goal of this commit is so that we are able to store the 'name' of a
pseudo element for use in serializing 'unknown -webkit-
pseudo-elements', see:
https://www.w3.org/TR/selectors-4/#compat
This is quite awkward, as in pretty much all cases just the selector
type enum is enough, but we will need to cache the name for serializing
these unknown selectors. I can't figure out any reason why we would need
this name anywhere else in the engine, so pretty much everywhere is
still just passing around this raw enum. But this change will allow us
to easily store the name inside of this new struct for when it is needed
for serialization, once those webkit unknown elements are supported by
our engine.
If the Inspector widget already exists, be sure to inspect the page when
it is re-opened. However, this should be a no-op if the page was already
inspected (as any existing Inspector will be reset if a new page load
began).
Note this is not an issue in the AppKit chrome.
When a DOM text node is empty, we currently render the node name (which
is "#text") in the Inspector. This is just to prevent displaying nothing
at all, which looks a bit off. However, the patch to allow editing text
fields neglected to allow editing these empty fields.
This patch attaches the original text data as a data attribute, much
like we do for DOM attributes. That is used as the editable text in the
inspector, and the empty text fields are now wrapped in an editable
span.
Currently, when editing a comment, the `<!--` and `-->` start and end
sequences would be included in the generated <input> field. This would
result in including that text in the updated comment text. So, for
example, in a comment such as:
<!-- foo -->
Changing "foo" to "bar" would result in the comment:
<!--<!-- bar -->-->
And this would repeatedly nest for each edit.
It was a bit short-sighted to combine the tag and attribute names into
one string when the Inspector requests a context menu. We will want both
values for some context menu actions. Send both names, as well as the
attribute value, when requesting the context menu.
The FIXME added to ConnectionFromClient::remove_dom_node is copied from
Web::EditEventHandler. The same behavior is observed here, with many
lingering Layout::TextNodes, for example.
The Inspector will have context menu support to manipulate the DOM, e.g.
adding or removing nodes/attributes. This context menu will require some
detailed knowledge about what element in the Inspector has been clicked.
To support this, we intercept the `contextmenu` event and collect the
required information to be sent to the Inspector client over IPC.
Other browsers have a nice little feature where right-clicking on a
`mailto` or `tel` link will let you copy the email address or telephone
number, instead of the full URL. So let's do that!
Pages like the new tab page, error page, etc. all belong solely to
Ladybird, but are scattered across a couple of subfolders in Base. This
moves them all to Base/res/ladybird.
This allows a limited amount of DOM manipulation through the Inspector.
Users may edit node tag names, text content, and attributes. To initiate
an edit, double-click the tag/text/attribute of interest.
To remove an attribute, begin editing the attribute and remove all of
its text. To add an attribute, begin editing an existing attribute and
add the new attribute's text before or after the existing attribute's
text. This isn't going to be the final UX, but works for now just as a
consequence of how attribute changes are implemented. A future patch
will add more explicit add/delete actions.
This adds APIs to allow Ispector clients to:
* Change a DOM text or comment node's text data.
* Add, replace, or remove a DOM element's attribute.
* Change a DOM element's tag.
This adds a JS console to the bottom section of the Inspector WebView.
Much of this code is based on the existing WebView::ConsoleClient, but
ported to fit the inspector model. That is, much of the code from that
class is now handled in the Inspector's JS.
The Inspector will have an <input> element to execute user-provided JS.
This adds an IDL method and IPC to forward that JS from the Inspector
WebView to the Inspector client.
It is currently a bit messy to pass these options along from main() to
where WebContent is actually launched. If a new flag were to be added,
there are a couple dozen files that need to be updated to pass that flag
along. With this change, the flag can just be added to the struct, set
in main(), and handled in launch_web_content_process().
Provides a nicer experience on pages with large trees so that the window
isn't just a large blank screen while it is loading. Instead, send the
trees to the Inspector WebView once they have arrived and have been
transformed to HTML.
We Base64 encode the HTML to avoid needing to deal with all kinds of
nested quotes that may appear in the HTML. We could instead send the
JSON to the WebView, but generating the HTML in C++ feels a bit easier
for now.
The Inspector will have a split view, where the top view is that of the
exisiting DOM and accessibility trees, and the bottom view is that of
the currently inspected node's style properties. This patch generalizes
some of the generated code to support having these 2 views.
When scrolling to the inspected element, if we scroll to its exact
position, it would often be placed behind the fixed header at the top of
the WebView. This patch gives the scroll a bit of an offset to scroll
comfortably beneath the header.
This was used to provided base functionality for model-based chromes for
viewing the DOM and accessibility trees. All chromes now use the WebView
inspector model for those trees, thus this class is unused.
This is modeled after a similar implementation for the JS console.
This client takes over an inspector WebView (created by the chrome) to
create the inspector application. Currently, this application includes
the DOM tree and accessibility tree as a first pass. It can later be
extended to included the style tables, the JS console itself, etc.
This is an internal object that must be explicitly enabled by the chrome
before it is added to the Window. The Inspector object will be used by a
special WebView that will replace all chrome-specific inspector windows.
The IDL defines methods that this WebView will need to inform the chrome
of various events, such as the user clicking a DOM node.
