blankie
/
userscripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Elements with ID lister to 1.0.1 

- Work on older browsers using a polyfill, like Firefox for Android 68
This commit is contained in:
blankie 2023-05-20 22:34:28 +07:00
parent eb5cac51bf
commit cdf5808b2f
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
1 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
Elements with ID lister.user.js
View File

@ -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);