From cdf5808b2f96c09421a53af537edfbb5edeada88 Mon Sep 17 00:00:00 2001
From: blankie <blankie@nixnetmail.com>
Date: Sat, 20 May 2023 22:34:28 +0700
Subject: [PATCH] Update Elements with ID lister to 1.0.1

- Work on older browsers using a polyfill, like Firefox for Android 68
---
 Elements with ID lister.user.js | 56 +++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 10 deletions(-)

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