RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 18:17:44 +00:00
Code Issues Activity Actions

LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML

Browse source 
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%).
This commit is contained in:
Timothy Flynn 2024-02-18 13:59:28 -05:00 • committed by Andreas Kling
parent 939779cad3
commit f07f5a2622
13 changed files with 60 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

21
Base/res/ladybird/inspector.js
View file

@ -288,8 +288,10 @@ const editDOMNode = domNode => {
const element = document.createElement(value);
inspector.setDOMNodeTag(domNodeID, value);
} else if (type === "attribute") {
const attributeIndex = domNode.dataset.attributeIndex;
const attributes = parseDOMAttributes(value);
inspector.replaceDOMNodeAttribute(domNodeID, domNode.dataset.attributeName, attributes);
inspector.replaceDOMNodeAttribute(domNodeID, attributeIndex, attributes);
}
};
@ -354,28 +356,17 @@ const requestContextMenu = (clientX, clientY, domNode) => {
}
let tag = null;
let attributeName = null;
let attributeValue = null;
let attributeIndex = null;
if (type === "tag") {
tag = domNode.dataset.tag;
} else if (type === "attribute") {
tag = domNode.dataset.tag;
attributeName = domNode.dataset.attributeName;
attributeValue = domNode.dataset.attributeValue;
attributeIndex = domNode.dataset.attributeIndex;
}
pendingEditDOMNode = domNode;
inspector.requestDOMTreeContextMenu(
domNodeID,
clientX,
clientY,
type,
tag,
attributeName,
attributeValue
);
inspector.requestDOMTreeContextMenu(domNodeID, clientX, clientY, type, tag, attributeIndex);
};
const executeConsoleScript = consoleInput => {