Multi-line, full URL location dialog instead of single-line bar for your web browser

Use this bookmarklet if you like to see the entire URL, instead of maybe only 5 or 10 characters of it, whenever you feel like editing the current webpage URL.

---

---

---

javascript:(() => { _style = `<style>body:has(#mydialog[open]) { overflow: hidden }; #mydialog::backdrop { all: revert }</style>`; document.head.insertAdjacentHTML('beforeend', _style); _element = `<dialog id="mydialog" style="all: revert; width: clamp(300px, 75vw, 600px); height: 250px; padding-bottom: 0px"><textarea id="myinput" autofocus autocapitalize="none" autocomplete="off" spellcheck="false" style="all: revert; font-family: monospace; font-size: 16px; width: -webkit-fill-available; width: -moz-available; width: stretch; height: 208px; resize: none;"></textarea><button id="mycancelbtn" style="all: revert; font-size: 15px; margin-right: 16px">Cancel</button><button id="myokbtn" style="all: revert; font-size: 15px"><b>OK</b></button></dialog>`; document.body.insertAdjacentHTML('afterbegin', _element); _dialog = document.getElementById("mydialog"); _input = document.getElementById("myinput"); _ok = document.getElementById("myokbtn"); _cancel = document.getElementById("mycancelbtn"); _cancel.onclick = function() { _dialog.remove(); }; function _newurl() { if (_input.value == location) { _dialog.remove() } else { location = _input.value } }; _ok.onclick = function() { _newurl() }; _input.onkeypress = function() { if (event.key === 'Enter') _newurl() }; _dialog.showModal(); _input.value = document.location; _input.scrollTop = _input.scrollHeight })() /*www.no-op.co*/

---

---