fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inspector: Add "Fonts" tab

Browse Source 
This adds another tab to the bottom tabs providing information
regarding the fonts computed for the currently selected DOM node.
This commit is contained in:
Tobias Christiansen
2024-08-09 17:09:10 +02:00
committed by Sam Atkins
parent 5621f34062
commit c3e69f2fc6
3 changed files with 84 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Base/res/ladybird/inspector.css
View File

@@ -245,3 +245,29 @@ details > :not(:first-child) {
.property-table th {
background-color: var(--property-table-head);
}
#fonts {
display: flex;
flex-direction: row;
}
#fonts-list {
display: flex;
flex-direction: column;
}
#fonts-list .font {
display: flex;
flex-direction: row;
}
#fonts-list .font div {
padding: 4px;
}
#fonts-list .font div.name {
background-color: var(--property-table-head);
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
}

41
Base/res/ladybird/inspector.js
View File

@@ -227,6 +227,47 @@ inspector.createPropertyTables = (computedStyle, resolvedStyle, customProperties
createPropertyTable("custom-properties-table", JSON.parse(customProperties));
};
inspector.createFontList = fonts => {
let fontsJSON = JSON.parse(fonts);
if (!Array.isArray(fontsJSON)) return;
const listId = "fonts-list";
let oldList = document.getElementById(listId);
let newList = document.createElement("div");
newList.setAttribute("id", listId);
const createFontEntry = (listContainer, font) => {
let fontEntry = document.createElement("div");
fontEntry.classList.add("font");
let fontName = document.createElement("div");
fontName.classList.add("name");
fontName.innerText = font.name;
fontEntry.appendChild(fontName);
let fontSize = document.createElement("div");
fontSize.classList.add("size");
fontSize.innerText = font.size;
fontEntry.appendChild(fontSize);
let fontWeight = document.createElement("div");
fontWeight.classList.add("Weight");
fontWeight.innerText = font.weight;
fontEntry.appendChild(fontWeight);
let fontVariant = document.createElement("div");
fontVariant.classList.add("Variant");
fontVariant.innerText = font.variant;
fontEntry.appendChild(fontVariant);
listContainer.appendChild(fontEntry);
};
for (let font of fontsJSON) createFontEntry(newList, font);
oldList.parentNode.replaceChild(newList, oldList);
};
const inspectDOMNode = domNode => {
if (selectedDOMNode === domNode) {
return;