diff --git a/Elements with ID lister.user.js b/Elements with ID lister.user.js index c940663..9e942fc 100644 --- a/Elements with ID lister.user.js +++ b/Elements with ID lister.user.js @@ -6,7 +6,7 @@ // @grant GM_getResourceURL // @require https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.js#sha256-cec1a2e320aab77e28bad4ad6bc5e532a6ef5757345c19bb5158aa880b7162a6 // @resource dialogPolyfillCSS https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.css#sha256-4dcb3ab62e545f30bf06a4824c253641ee889ca85ca28d5447590557922496ab -// @version 1.0.11 +// @version 1.0.12 // @author blankie // @description A userscript that adds a "Show elements popup" option to the Monkey Menu which lists all elements with an ID // @inject-into content @@ -19,7 +19,9 @@ const ACCENT_COLOR = "#962AC3"; const BRIGHT_ACCENT_COLOR = "#DE6DE6"; const DIALOG_WRAPPER_CSS = ` - all: unset; + /* https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ */ + all: initial; + position: fixed; top: 0; width: 100%; @@ -32,7 +34,6 @@ dialog { max-height: 90%; max-width: 90%; font-size: 11pt; - text-align: left; font-family: sans-serif; color-scheme: dark; overflow-y: auto; @@ -143,7 +144,7 @@ function hideElementList() { function getElementList() { let elements = []; - for (let element of document.body.querySelectorAll("[id]")) { + for (let element of document.body.querySelectorAll("[id], a[name]")) { if (shouldIgnoreElement(element)) { continue; } @@ -155,9 +156,12 @@ function getElementList() { function shouldIgnoreElement(element) { // Check if the element is not visible - let rect = element.getBoundingClientRect(); - if (rect.height === 0 || rect.width === 0) { - return true; + // https://wayland.freedesktop.org/docs/html/apb.html has elements with no size + if (element.localName !== "a") { + let rect = element.getBoundingClientRect(); + if (rect.height === 0 || rect.width === 0) { + return true; + } } // Check if the element is a svg or a part of one @@ -174,11 +178,15 @@ function shouldIgnoreElement(element) { function getElementListItem(element) { let newLocation = new URL(location.href); + let id = element.id; + if (!id && element.localName === "a") { + id = element.name; + } let li = document.createElement("li"); let a = document.createElement("a"); - newLocation.hash = a.innerText = "#" + element.id; + newLocation.hash = a.innerText = "#" + id; a.href = newLocation.href; a.addEventListener("click", function(e) { if (e.ctrlKey) { @@ -198,7 +206,12 @@ function getElementListItem(element) { function getElementDescription(element) { let addEilipses = false; - let text = (element.innerText || "").trim(); + // Attempt to get text by going up the DOM, as https://wayland.freedesktop.org/docs/html/apb.html has elements with no content + let text = ""; + while (!text && element) { + text = (element.innerText || "").trim(); + element = element.parentElement; + } let newlineIndex = text.indexOf("\n"); if (newlineIndex !== -1) {