From fd0c945552650c436c99752c20211f2fe42b924e Mon Sep 17 00:00:00 2001
From: blankie <blankie@nixnetmail.com>
Date: Sun, 21 May 2023 18:53:25 +0700
Subject: [PATCH] Update Elements with ID lister to 1.0.6

- CTRL+Clicking links no longer closes the dialog box
- Tapping on the background on older browsers will now close the dialog box
- Fix the dialog box from clipping out of the screen on older browsers
---
 Elements with ID lister.user.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/Elements with ID lister.user.js b/Elements with ID lister.user.js
index 40aec31..4619c5a 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.5
+// @version     1.0.6
 // @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
@@ -18,12 +18,22 @@ const DIALOG_WRAPPER_ID = "element_lister-dialog_wrapper";
 const ACCENT_COLOR = "#962AC3";
 const BRIGHT_ACCENT_COLOR = "#DE6DE6";
 
+const DIALOG_WRAPPER_CSS = `
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+`;
 const CSS = `
 dialog {
     position: fixed;
     min-width: 25em;
+    max-height: 90%;
     font-size: 11pt;
     color-scheme: dark;
+    overflow-y: auto;
+}
+dialog, dialog.polyfilled button {
     color: white;
     background-color: black;
 }
@@ -57,6 +67,7 @@ function showElementList() {
 
     let dialogWrapper = document.createElement("div");
     dialogWrapper.id = DIALOG_WRAPPER_ID;
+    dialogWrapper.style = DIALOG_WRAPPER_CSS;
     let shadowRoot = dialogWrapper.attachShadow({mode: "closed"});
 
     let link = document.createElement("link");
@@ -74,7 +85,7 @@ function showElementList() {
     }
     dialogPolyfill.registerDialog(dialog);
     dialog.addEventListener("close", hideElementList, {once: true, passive: true});
-    dialog.addEventListener("click", function(e) {
+    dialogWrapper.addEventListener("click", function(e) {
         let rect = dialog.getBoundingClientRect();
         if (rect.top <= e.clientY && rect.left <= e.clientX && rect.bottom >= e.clientY && rect.right >= e.clientX) {
             return;
@@ -157,7 +168,12 @@ function getElementListItem(element) {
 
     let a = document.createElement("a");
     a.href = a.innerText = "#" + element.id;
-    a.addEventListener("click", hideElementList, {once: true, passive: true});
+    a.addEventListener("click", function(e) {
+        if (e.ctrlKey) {
+            return;
+        }
+        hideElementList();
+    }, {passive: true});
     li.append(a);
 
     let description = getElementDescription(element);