diff --git a/Elements with ID lister.user.js b/Elements with ID lister.user.js index 2e56edc..557bcc5 100644 --- a/Elements with ID lister.user.js +++ b/Elements with ID lister.user.js @@ -3,7 +3,10 @@ // @namespace blankie-scripts // @match *://*/* // @grant GM_registerMenuCommand -// @version 1.0 +// @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.1 // @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 @@ -15,6 +18,36 @@ const DIALOG_WRAPPER_ID = "element_lister-dialog_wrapper"; const ACCENT_COLOR = "#962AC3"; const BRIGHT_ACCENT_COLOR = "#DE6DE6"; +const CSS = ` +dialog { + position: fixed; + min-width: 25em; + color: white; + background-color: black; +} +dialog.polyfilled { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +dialog::backdrop, dialog + .backdrop { + background-color: rgba(0, 0, 0, .5); +} + +.align-right { + text-align: right; +} + +a { + color: ${ACCENT_COLOR}; + text-decoration: none; +} +a:hover { + color: ${BRIGHT_ACCENT_COLOR}; + text-decoration: underline; +} +`; + function showElementList() { if (document.getElementById(DIALOG_WRAPPER_ID)) { return; @@ -24,15 +57,20 @@ function showElementList() { dialogWrapper.id = DIALOG_WRAPPER_ID; let shadowRoot = dialogWrapper.attachShadow({mode: "closed"}); + let link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = GM_getResourceURL("dialogPolyfillCSS"); + shadowRoot.append(link); + let style = document.createElement("style"); - style.innerText = `dialog::backdrop { background-color: rgba(0, 0, 0, .5); }\n`; - style.innerText = `a:hover { color: ${BRIGHT_ACCENT_COLOR} !important; text-decoration: underline !important; }`; + style.textContent = CSS; shadowRoot.append(style); let dialog = document.createElement("dialog"); - dialog.style.color = "white"; - dialog.style.backgroundColor = "black"; - dialog.style.minWidth = "25em"; + if (!dialog.showModal) { + dialog.classList.add("polyfilled"); + } + dialogPolyfill.registerDialog(dialog); dialog.addEventListener("close", hideElementList, {once: true, passive: true}); dialog.addEventListener("click", function(e) { let rect = dialog.getBoundingClientRect(); @@ -43,9 +81,9 @@ function showElementList() { }, {passive: true}); let buttonWrapper = document.createElement("div"); - buttonWrapper.style.textAlign = "right"; + buttonWrapper.classList.add("align-right"); let button = document.createElement("button"); - button.innerText = "Close"; + button.textContent = "Close"; button.addEventListener("click", hideElementList, {once: true, passive: true}); buttonWrapper.append(button); dialog.append(buttonWrapper); @@ -99,8 +137,6 @@ function getElementListItem(element) { let a = document.createElement("a"); a.href = a.innerText = "#" + element.id; - a.style.color = ACCENT_COLOR; - a.style.textDecoration = "none"; a.addEventListener("click", hideElementList, {once: true, passive: true}); li.append(a);