We were previously embedding the original text to handle the special
case where the text is empty. We generate an extra span to hold the
string "#text" as a placeholder, so that we don't generate a 0px-wide,
unclickable (and therefore uneditable) node. Instead, we can just detect
when this is the case in the Inspector JS.
This further reduces the generated HTML for the Inspector on
https://github.com/SerenityOS/serenity from 1.9MB to 1.8MB (about 94KB,
or 4.7%).
Attribute values may contain HTML, and may contain invalid HTML at that.
If the latter occurs, let's not generate invalid Inspector HTML when we
embed the attribute values as data attributes. Instead, cache the values
in the InspectorClient, and embed just a lookup index into the HTML.
This also nicely reduces the size of the generated HTML. The Inspector
on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB
(about 318KB, or 13.8%).
In the UI process, we encode generated HTML as Base64 to avoid having to
deal with things like arbitrarily nested quotes. The HTML is encoded as
UTF-8, and the raw bytes of that encoding are transcoded to Base64.
In the Inspector process, we are decoding the Base64 string using atob,
which has awkward non-Unicode limitations. The resulting string is only
a byte string. We must further decode the bytes as UTF-8, which we do
using TextDecoder.
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.
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 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.
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.
