.readme.md

Hover-highlight-selectors

This will script will do a few things

1. It will create a toggle able transparent box around the element you're hovering over.
2. When control is held (with /flamencist/SelectorGenerator included) and an element is clicked a pop-up of the CSS-selector of the element you clicked on will show.
3. This hover outline effect can be toggled using scroll lock on your keyboard.

Running

Simply include:

<script src="outline.css.js"></script>

in your HTML then you're good to go.

If you're after the Ctrl + click pop-up include:

<script src="selector-generator.js"></script>
<script src="outline.css.js"></script>

Bookmarking

In order to run outlining on any site, you can bookmark the script by copying the content of outlines.bookmark.uri into a bookmark, then running it on any page, by opening the bookmark with that page open.

In order to run selector finding and outlining on any site, you can bookmark the script by copying the content of css.outlines.bookmark.uri into a bookmark, then running it on any page, by opening the bookmark with that page open.

Enjoy

css.outlines.bookmark.uri

javascript:%28function%28%29%7b%22use%20strict%22%3bvar%20a%3d%7b%7d%3bfor%28var%20b%20in%22version%22in%20a%7c%7c%28a%2eversion%3d%220%2e3%2e0%22%29%2cfunction%28d%29%7bd%2eSelectorGenerator%3dfunction%28g%29%7bfunction%20h%28E%29%7breturn%20function%28%29%7breturn%20q%2eapply%28E%2carguments%29%7d%7dfunction%20l%28E%29%7bif%28%21E%29return%211%3bvar%20F%3dA%2efind%28B%2cfunction%28G%29%7breturn%20G%2etest%28E%29%7d%29%3breturn%21%21F%7dfunction%20m%28E%29%7bfunction%20F%28S%2cT%29%7bvar%20U%3dS%2egetAttribute%28%22name%22%29%3bif%28%21U%7c%7cl%28U%29%29return%211%3bvar%20V%3dQ%28S%2cE%2etargetNode%3d%3d%3dS%29%7c%7cN%28S%29%3breturn%21%21%28V%26%26U%26%26%21A%2efind%28T%2cfunction%28W%29%7breturn%20W%2egetAttribute%28%22name%22%29%3d%3d%3dU%7d%29%29%7dfunction%20G%28S%2cT%2cU%29%7bfor%28var%20Y%2cV%3d%211%2cW%3dM%28S%29%2cX%3d0%3b%21V%26%26X%3cT%2elength%3b%2b%2bX%29if%28Y%3dT%5bX%5d%2c%21V%29%7bvar%20Z%3dL%28W%29%2c%24%3d0%3bfor%28var%20aa%20in%20Z%29Z%2ehasOwnProperty%28aa%29%26%26%2b%2b%24%3bif%280%3d%3d%24%26%26%21U%29%7bV%3d%210%3bcontinue%7dfor%28var%20da%2cba%3dM%28Y%29%2cca%3d0%3bca%3cba%2elength%3b%2b%2bca%29if%28%28da%3dba%5bca%5d%2c%21%21Z%2ehasOwnProperty%28da%29%29%26%26%28delete%20Z%5bda%5d%2c%21%20%2d%2d%24%26%26%21U%29%29%7bV%3d%210%3bbreak%7d%7dreturn%20V%7dfunction%20H%28S%2cT%29%7breturn%20A%2efilter%28T%2cfunction%28U%29%7breturn%201%3d%3d%3dU%2enodeType%26%26U%21%3d%3dS%26%26U%2enodeName%2etoLowerCase%28%29%3d%3d%3dS%2enodeName%2etoLowerCase%28%29%7d%29%7dfunction%20I%28S%29%7breturn%20S%2egetAttribute%28%22type%22%29%26%26%28Q%28S%2cE%2etargetNode%3d%3d%3dS%29%26%26%21R%28S%29%7c%7cN%28S%29%7c%7cP%28S%29%29%7dfunction%20J%28S%29%7breturn%22%23%22%2bC%2eescape%28S%29%7dfunction%20K%28S%2cT%29%7bvar%20U%3dS%2egetAttribute%28%22id%22%29%3breturn%21%21U%26%26%21l%28U%29%26%260%3d%3d%3dA%2efilter%28T%2cfunction%28V%29%7breturn%20V%2egetAttribute%28%22id%22%29%3d%3d%3dU%7d%29%2elength%7dfunction%20L%28S%29%7bfor%28var%20T%3d%7b%7d%2cU%3d0%3bU%3cS%2elength%3b%2b%2bU%29T%5bS%5bU%5d%5d%3d%210%3breturn%20T%7dfunction%20M%28S%29%7bvar%20T%3dR%28S%29%3bif%28%21T%29return%5b%5d%3bvar%20U%3dT%2esplit%28%2f%5cs%2b%2fg%29%2cV%3dA%2efilter%28U%2cfunction%28W%29%7breturn%20W%26%26%21l%28W%29%7d%29%3breturn%20A%2emap%28V%2cfunction%28W%29%7breturn%22%24%22%2bW%7d%29%7dfunction%20N%28S%29%7breturn%22form%22%3d%3d%3dS%2enodeName%2etoLowerCase%28%29%26%26%21S%2egetAttribute%28%22id%22%29%7dfunction%20P%28S%29%7breturn%22button%22%3d%3d%3dS%2enodeName%2etoLowerCase%28%29%26%26%21S%2egetAttribute%28%22id%22%29%7dfunction%20Q%28S%2cT%29%7breturn%20T%26%26%22input%22%3d%3d%3dS%2enodeName%2etoLowerCase%28%29%7dfunction%20R%28S%29%7breturn%20S%2egetAttribute%28%22class%22%29%7c%7cS%2eclassName%7dE%3dE%7c%7c%7bwithoutNthChild%3a%211%2ctargetNode%3anull%7d%2cthis%2evisit%3dfunction%28S%29%7bif%281%21%3d%3dS%2enodeType%29return%20null%3bvar%20T%3dS%2enodeName%2etoLowerCase%28%29%2cU%3dS%2eparentNode%2cV%3dU%2echildren%7c%7c%5b%5d%2cW%3dH%28S%2cV%29%2cX%3dK%28S%2cW%29%3bif%28X%29%7bvar%20Y%3dS%2egetAttribute%28%22id%22%29%3breturn%20new%20D%28T%2bJ%28Y%29%2c%210%29%7dvar%20Z%3d%21U%7c%7c9%3d%3d%3dU%2enodeType%3bif%28Z%29return%20new%20D%28T%2c%210%29%3bvar%20%24%3dF%28S%2cW%29%2caa%3d0%3cW%2elength%2cba%3dG%28S%2cW%2c%24%29%2cca%3dI%28S%29%2cda%3dT%3bif%28%24%29%7bvar%20ea%3dS%2egetAttribute%28%22name%22%29%3breturn%20da%2b%3d%22%5bname%3d%5c%22%22%2bC%2eescape%28ea%29%2b%22%5c%22%5d%22%2cnew%20D%28da%2c%210%29%7dif%28ca%26%26%28da%2b%3d%22%5btype%3d%5c%22%22%2bS%2egetAttribute%28%22type%22%29%2b%22%5c%22%5d%22%29%2cba%26%26%21E%2ewithoutNthChild%29%7bvar%20fa%3dA%2eindexOf%28V%2cS%29%3bda%2b%3d%22%3anth%2dchild%28%22%2b%28fa%2b1%29%2b%22%29%22%7delse%20if%28aa%29%7bvar%20ga%3dM%28S%29%3bfor%28var%20ha%20in%20L%28ga%29%29da%2b%3d%22%2e%22%2bC%2eescape%28ha%2esubstr%281%29%29%7dreturn%20new%20D%28da%2c%211%29%7d%7dfunction%20o%28E%29%7bfunction%20H%28N%29%7bvar%20P%3d2%3bif%28N%2elength%3c%3dP%29return%20N%3bvar%20Q%3dN%2eslice%28%29%3bI%28Q%29%3bvar%20R%3dQ%5bQ%2elength%2d1%5d%2cS%3d0%3c%3dR%2etoString%28%29%2eindexOf%28%22%23%22%29%2cT%3d0%3c%3dR%2etoString%28%29%2eindexOf%28%22name%3d%22%29%3breturn%20S%7c%7cT%3fJ%28Q%29%3aK%28Q%2cP%29%7dfunction%20I%28N%29%7bfor%28%3b%22html%22%3d%3d%3dN%5bN%2elength%2d1%5d%2etoString%28%29%7c%7c%22body%22%3d%3d%3dN%5bN%2elength%2d1%5d%2etoString%28%29%3b%29N%2epop%28%29%7dfunction%20J%28N%29%7bfor%28var%20R%2cP%3dN%2eslice%28%2d1%29%2cQ%3dN%2eslice%280%2c1%29%3bQ%2elength%3cN%2elength%2d1%26%26%28R%3dL%28%5bQ%2cP%5d%29%2c%21M%28R%29%29%3b%29Q%3dN%2eslice%280%2cQ%2elength%2b1%29%3breturn%5bQ%2cP%5d%7dfunction%20K%28N%2cP%29%7bP%3dP%7c%7c2%3bfor%28var%20R%2cQ%3dN%2eslice%280%2cP%29%3bQ%2elength%3cN%2elength%26%26%28R%3dL%28Q%29%2c%21M%28R%29%29%3b%29Q%3dN%2eslice%280%2cQ%2elength%2b1%29%3breturn%20Q%7dfunction%20L%28N%29%7bvar%20P%3dN%2eslice%28%29%3breturn%20P%2ereverse%28%29%2c%22undefined%22%3d%3dtypeof%20P%5b0%5d%2evalue%3fA%2ereduce%28P%2cfunction%28Q%2cR%29%7bvar%20S%3dL%28R%29%3breturn%20Q%3fQ%2b%22%20%22%2bS%3aS%7d%2c%22%22%29%3aP%2ejoin%28%22%20%3e%20%22%29%7dfunction%20M%28N%29%7breturn%21E%2equerySelectorAll%7c%7c2%3eE%2equerySelectorAll%28N%29%2elength%7dE%3dE%7c%7c%7b%7d%2cthis%2egetSelector%3dfunction%28N%29%7bif%28%21N%7c%7c1%21%3d%3dN%2enodeType%29return%22%22%3bfor%28var%20S%2cP%3dnew%20m%28%7btargetNode%3aN%7d%29%2cQ%3d%5b%5d%2cR%3dN%3bR%26%26%28S%3dP%2evisit%28R%29%2c%21%21S%29%26%26%28Q%2epush%28S%29%2c%21%28S%2eoptimized%26%26M%28L%28Q%29%29%29%29%3b%29R%3dR%2eparentNode%3bvar%20T%3dH%28Q%29%3breturn%20L%28T%29%7d%2cthis%2egetPath%3dfunction%28N%29%7bif%28%21N%7c%7c1%21%3d%3dN%2enodeType%29return%22%22%3bfor%28var%20S%2cP%3dnew%20m%28%7bwithoutNthChild%3a%210%2ctargetNode%3aN%7d%29%2cQ%3d%5b%5d%2cR%3dN%3bR%26%26%28S%3dP%2evisit%28R%29%2c%21%21S%29%3b%29Q%2epush%28S%29%2cR%3dR%2eparentNode%3breturn%20Q%2ereverse%28%29%2cQ%2ejoin%28%22%20%22%29%7d%7dvar%20p%3d%7b%7d%2cq%3dFunction%2ecall%2cr%3dfunction%28E%29%7breturn%21%21E%26%26%22function%22%3d%3d%3d%28typeof%20E%29%2etoLowerCase%28%29%26%26%28E%3d%3d%3dFunction%2eprototype%7c%7c%2f%5e%5cs%2afunction%5cs%2a%28%5cb%5ba%2dz%24%5f%5d%5ba%2dz0%2d9%24%5f%5d%2a%5cb%29%2a%5cs%2a%5c%28%28%7c%28%5ba%2dz%24%5f%5d%5ba%2dz0%2d9%24%5f%5d%2a%29%28%5cs%2a%2c%5ba%2dz%24%5f%5d%5ba%2dz0%2d9%24%5f%5d%2a%29%2a%29%5c%29%5cs%2a%5c%7b%5cs%2a%5c%5bnative%20code%5c%5d%5cs%2a%5c%7d%5cs%2a%24%2fi%2etest%28E%2b%22%22%29%29%7d%2ct%3dfunction%28E%29%7breturn%20E%26%26r%28E%29%3fE%3anull%7d%2cu%3dh%28Array%2eprototype%2ereduce%26%26r%28Array%2eprototype%2ereduce%29%3fArray%2eprototype%2ereduce%3afunction%28E%2cF%29%7bvar%20G%3d0%2cH%3dthis%2elength%3bif%281%3d%3d%3darguments%2elength%29do%7bif%28G%20in%20this%29%7bF%3dthis%5bG%2b%2b%5d%3bbreak%7dif%28%2b%2bG%3e%3dH%29throw%20new%20TypeError%7dwhile%281%29%3bfor%28%3bG%3cH%3bG%2b%2b%29G%20in%20this%26%26%28F%3dE%28F%2cthis%5bG%5d%2cG%29%29%3breturn%20F%7d%29%2cw%3dh%28Array%2eprototype%2emap%26%26r%28Array%2eprototype%2emap%29%3fArray%2eprototype%2emap%3afunction%28E%2cF%29%7bvar%20G%3dthis%2cH%3d%5b%5d%3breturn%20u%28G%2cfunction%28I%2cJ%2cK%29%7bH%2epush%28E%2ecall%28F%2cJ%2cK%2cG%29%29%7d%2cvoid%200%29%2cH%7d%29%2cx%3dh%28Array%2eprototype%2efilter%26%26r%28Array%2eprototype%2efilter%29%3fArray%2eprototype%2efilter%3afunction%28E%2cF%29%7bfor%28var%20H%2cG%3d%5b%5d%2cI%3d0%2cJ%3dthis%2elength%3bI%3cJ%3bI%2b%2b%29I%20in%20this%26%26E%2ecall%28F%2cH%3dthis%5bI%5d%2cI%2cthis%29%26%26G%2epush%28H%29%3breturn%20G%7d%29%2cy%3dh%28t%28Array%2eprototype%2eindexOf%29%7c%7cfunction%28E%2cF%29%7bvar%20G%3bif%28%21this%7c%7c%21this%2elength%29throw%20new%20TypeError%28%22%5c%22this%5c%22%20is%20null%20or%20not%20defined%22%29%3bvar%20H%3dObject%28this%29%2cI%3dH%2elength%3e%3e%3e0%3bif%280%3d%3dI%29return%2d1%3bvar%20J%3d%2bF%7c%7c0%3bif%28Math%2eabs%28J%29%3d%3d%3dInfinity%26%26%28J%3d0%29%2cJ%3e%3dI%29return%2d1%3bfor%28G%3dMath%2emax%280%3c%3dJ%3fJ%3aI%2dMath%2eabs%28J%29%2c0%29%3bG%3cI%3b%29%7bif%28G%20in%20H%26%26H%5bG%5d%3d%3d%3dE%29return%20G%3bG%2b%2b%7dreturn%2d1%7d%29%2cz%3dh%28t%28Array%2eprototype%2efind%29%7c%7cfunction%28E%2cF%29%7bvar%20G%3dthis%2elength%3bif%28%22function%22%21%3dtypeof%20E%29throw%20new%20TypeError%28%22Array%23find%3a%20predicate%20must%20be%20a%20function%22%29%3bif%280%21%3d%3dG%29%7bfor%28var%20I%2cH%3d0%3bH%3cG%3bH%2b%2b%29if%28I%3dthis%5bH%5d%2cE%2ecall%28F%2cI%2cH%2cthis%29%29return%20I%3breturn%7d%7d%29%3bp%2ereduce%3du%2cp%2emap%3dw%2cp%2efilter%3dx%2cp%2eindexOf%3dy%2cp%2efind%3dz%3bvar%20A%3dp%3bd%2e%5f%3dp%3bvar%20B%3d%5b%2f%5cd%7b4%2c%7d%2f%2c%2f%5eember%5cd%2b%2f%2c%2f%5e%5b0%2d9%5f%2d%5d%2b%24%2f%2c%2f%5e%5f%5cd%7b2%2c%7d%2f%2c%2f%28%5ba%2df%5f%2d%5d%2a%5b0%2d9%5f%2d%5d%29%7b6%2c%7d%2fi%5d%3bd%2eautogenCheck%3dl%3bvar%20C%3dfunction%28%29%7bfunction%20F%28J%2cK%29%7breturn%22%5c%5c%22%2bG%28J%29%2b%28K%3f%22%22%3a%22%20%22%29%7dfunction%20G%28J%29%7bvar%20K%3dJ%2echarCodeAt%280%29%2etoString%2816%29%3breturn%201%3d%3d%3dK%2elength%26%26%28K%3d%220%22%2bK%29%2cK%7dfunction%20H%28J%29%7breturn%21%21%2f%5ba%2dzA%2dZ0%2d9%5f%2d%5d%2f%2etest%28J%29%7c%7c160%3c%3dJ%2echarCodeAt%280%29%7dfunction%20I%28J%29%7breturn%20%2f%5e%2d%3f%5ba%2dzA%2dZ%5f%5d%5ba%2dzA%2dZ0%2d9%5f%2d%5d%2a%24%2f%2etest%28J%29%7dreturn%7bescape%3afunction%28J%29%7bif%28I%28J%29%29return%20J%3bvar%20K%3d%2f%5e%28%3f%3a%5b0%2d9%5d%7c%2d%5b0%2d9%2d%5d%3f%29%2f%2etest%28J%29%2cL%3dJ%2elength%2d1%3breturn%20J%2ereplace%28%2f%2e%2fg%2cfunction%28M%2cN%29%7breturn%20K%26%260%3d%3d%3dN%7c%7c%21H%28M%29%3fF%28M%2cN%3d%3dL%29%3aM%7d%29%7d%7d%7d%28%29%3bd%2ecssEscaper%3dC%3bvar%20D%3dfunction%28E%2cF%29%7bthis%2evalue%3dE%2cthis%2eoptimized%3dF%7c%7c%211%7d%3breturn%20D%2eprototype%3d%7btoString%3afunction%28%29%7breturn%20this%2evalue%7d%7d%2cd%2eDomNodePathStep%3dD%2cd%2eSelectorGeneratorStep%3dm%2cd%2eSelectorGenerator%3do%2cnew%20o%28g%29%7d%7d%28a%29%2ca%29a%2ehasOwnProperty%28b%29%26%26%28a%2eSelectorGenerator%5bb%5d%3da%5bb%5d%29%3bwindow%2eSelectorGenerator%3da%2eSelectorGenerator%7d%29%28%29%3b%28function%28%29%7bvar%20a%3d%22%23add8e6%22%2cb%3ddocument%2ecreateElement%28%22style%22%29%3bb%2eappendChild%28document%2ecreateTextNode%28%22%22%29%29%2cdocument%2ehead%2eappendChild%28b%29%2cb%2esheet%2einsertRule%28%22body%3aafter%20%7bcontent%3a%5c%22%20%5c%22%3bposition%3afixed%3bdisplay%3avar%28%2d%2ddsp%29%3bpointer%2devents%3anone%3bbackground%2dcolor%3a%22%2ba%2b%2280%3bborder%3a%22%2ba%2b%22%20solid%202px%3btop%3avar%28%2d%2dy%29%3bleft%3avar%28%2d%2dx%29%3bwidth%3avar%28%2d%2dwidth%29%3bheight%3avar%28%2d%2dheight%29%3bz%2dindex%3a9999%3b%7d%22%29%3bvar%20c%3dnew%20SelectorGenerator%3blet%20d%3d%211%3bvar%20f%3d%22selector%2dinfo%2dmessage%22%3b%22hidden%22%21%3d%3dlocalStorage%2egetItem%28f%29%26%26confirm%28%22Disable%20and%20Enable%20the%20outline%20using%20ScrollLock%5cnUse%20Ctrl%20%2b%20click%20to%20get%20the%20highlighted%20element%27s%20css%20selector%5cnPress%20okay%20to%20not%20see%20this%20message%20again%2e%2e%2e%20on%20this%20site%20%3a%2f%22%29%26%26localStorage%2esetItem%28f%2c%22hidden%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dx%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dy%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dheight%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dwidth%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2c%22none%22%29%2cdocument%2eaddEventListener%28%22click%22%2cg%3d%3e%7bif%28g%2ectrlKey%26%26d%29%7bg%2epreventDefault%28%29%2cg%2estopPropagation%28%29%3blet%20h%2ci%3dg%2etarget%2cj%3dnull%2ck%3d%22%22%3bdo%20h%3dc%2egetSelector%28i%29%2bk%2cj%3di%2ci%3dj%2eparentElement%2ck%3d%22%20%3e%20%22%2bj%2etagName%2etoLowerCase%28%29%2b%22%3anth%2dchild%28%22%2b%28%5b%5d%2eindexOf%2ecall%28i%2echildren%2cj%29%2b1%29%2b%22%29%22%2bk%3bwhile%281%3cdocument%2equerySelectorAll%28h%29%2elength%29%3bprompt%28%22You%20just%20selected%3a%22%2ch%29%7d%7d%2c%210%29%2cdocument%2eaddEventListener%28%22keydown%22%2cg%3d%3e%7bd%3dg%2egetModifierState%28%22ScrollLock%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2cd%3f%22block%22%3a%22none%22%29%7d%29%2cdocument%2eaddEventListener%28%22mousemove%22%2cg%3d%3e%7bconst%20h%3dg%2etarget%3bif%28d%3dg%2egetModifierState%28%22ScrollLock%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2cd%3f%22block%22%3a%22none%22%29%2c%21h%2egetBoundingClientRect%29return%211%3bconst%7bx%3ai%2cy%3aj%2cwidth%3ak%2cheight%3al%7d%3dh%2egetBoundingClientRect%28%29%3bdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dx%22%2ci%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dy%22%2cj%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dheight%22%2cl%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dwidth%22%2ck%2b%22px%22%29%7d%29%7d%29%28%29%3b

outline.with.info.js

(function () {
    var colourHex = '#add8e6';
    
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    style.sheet.insertRule("body:after {content:\" \";position:fixed;display:var(--dsp);pointer-events:none;background-color:"+colourHex+"80;border:"+colourHex+" solid 2px;top:var(--y);left:var(--x);width:var(--width);height:var(--height);z-index:9999;}");
  
    var generator = null;
    let enabled = false;
    
    if (typeof SelectorGenerator !== 'undefined') 
        generator = new SelectorGenerator();

    const localKey = 'selector-info-message';
    if (localStorage.getItem(localKey) !== "hidden") {
        if (confirm(
            'Disable and Enable the outline using ScrollLock\n' +
            'Use Ctrl + click to get the highlighted element\'s css selector\n' +
            'Press okay to not see this message again... on this site :/'
        )) {
            localStorage.setItem(localKey, "hidden")
        }
    }

    document.body.style.setProperty("--x", "0px");
    document.body.style.setProperty("--y", "0px");
    document.body.style.setProperty("--height", "0px");
    document.body.style.setProperty("--width", "0px");
    document.body.style.setProperty("--dsp", "none");

    document.addEventListener('click', e => {
        if (!e.ctrlKey || !enabled || generator === null) return;

        e.preventDefault();
        e.stopPropagation();

        let selector;
        let next = e.target;
        let current = null;

        let track = '';

        do {
            selector = generator.getSelector(next) + track;
            current = next;
            next = current.parentElement;

            track = ' > ' +
                current.tagName.toLowerCase() + ':nth-child(' + (
                    [].indexOf.call(next.children, current) + 1
                ) + ')' + track;
                
      } while (document.querySelectorAll(selector).length > 1);

      prompt('You just selected:', selector);
  }, true);

  document.addEventListener('keydown', e => {
      enabled = e.getModifierState('ScrollLock');
      document.body.style.setProperty("--dsp", enabled ? "block" : "none");
  });
  // Add event listener
  document.addEventListener('mousemove', e => {
      enabled = e.getModifierState('ScrollLock');
      document.body.style.setProperty("--dsp", enabled ? "block" : "none");

      if (!e.target.getBoundingClientRect) return;
      var box = e.target.getBoundingClientRect();
      document.body.style.setProperty("--x", box.x + "px");
      document.body.style.setProperty("--y", box.y + "px");
      document.body.style.setProperty("--height", box.height + "px");
      document.body.style.setProperty("--width", box.width + "px");
  })
})()

outline.without.info.js

(function () {
    var colourHex = '#add8e6';
    
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    style.sheet.insertRule("body:after {content:\" \";position:fixed;display:var(--dsp);pointer-events:none;background-color:"+colourHex+"80;border:"+colourHex+" solid 2px;top:var(--y);left:var(--x);width:var(--width);height:var(--height);z-index:9999;}");
  
    var generator = null;
    let enabled = false;
    
    if (typeof SelectorGenerator !== 'undefined') 
        generator = new SelectorGenerator();

    document.body.style.setProperty("--x", "0px");
    document.body.style.setProperty("--y", "0px");
    document.body.style.setProperty("--height", "0px");
    document.body.style.setProperty("--width", "0px");
    document.body.style.setProperty("--dsp", "none");

    document.addEventListener('click', e => {
        if (!e.ctrlKey || !enabled || generator === null) return;

        e.preventDefault();
        e.stopPropagation();

        let selector;
        let next = e.target;
        let current = null;

        let track = '';

        do {
            selector = generator.getSelector(next) + track;
            current = next;
            next = current.parentElement;

            track = ' > ' +
                current.tagName.toLowerCase() + ':nth-child(' + (
                    [].indexOf.call(next.children, current) + 1
                ) + ')' + track;
                
      } while (document.querySelectorAll(selector).length > 1);

      prompt('You just selected:', selector);
  }, true);

  document.addEventListener('keydown', e => {
      enabled = e.getModifierState('ScrollLock');
      document.body.style.setProperty("--dsp", enabled ? "block" : "none");
  });
  // Add event listener
  document.addEventListener('mousemove', e => {
      enabled = e.getModifierState('ScrollLock');
      document.body.style.setProperty("--dsp", enabled ? "block" : "none");

      if (!e.target.getBoundingClientRect) return;
      var box = e.target.getBoundingClientRect();
      document.body.style.setProperty("--x", box.x + "px");
      document.body.style.setProperty("--y", box.y + "px");
      document.body.style.setProperty("--height", box.height + "px");
      document.body.style.setProperty("--width", box.width + "px");
  })
})()

outlines.bookmark.uri

javascript:%28function%28%29%7bvar%20a%3d%22%23add8e6%22%2cb%3ddocument%2ecreateElement%28%22style%22%29%3bb%2eappendChild%28document%2ecreateTextNode%28%22%22%29%29%2cdocument%2ehead%2eappendChild%28b%29%2cb%2esheet%2einsertRule%28%22body%3aafter%20%7bcontent%3a%5c%22%20%5c%22%3bposition%3afixed%3bdisplay%3avar%28%2d%2ddsp%29%3bpointer%2devents%3anone%3bbackground%2dcolor%3a%22%2ba%2b%2280%3bborder%3a%22%2ba%2b%22%20solid%202px%3btop%3avar%28%2d%2dy%29%3bleft%3avar%28%2d%2dx%29%3bwidth%3avar%28%2d%2dwidth%29%3bheight%3avar%28%2d%2dheight%29%3bz%2dindex%3a9999%3b%7d%22%29%3bvar%20c%3dnew%20SelectorGenerator%3blet%20d%3d%211%3bvar%20f%3d%22selector%2dinfo%2dmessage%22%3b%22hidden%22%21%3d%3dlocalStorage%2egetItem%28f%29%26%26confirm%28%22Disable%20and%20Enable%20the%20outline%20using%20ScrollLock%5cnUse%20Ctrl%20%2b%20click%20to%20get%20the%20highlighted%20element%27s%20css%20selector%5cnPress%20okay%20to%20not%20see%20this%20message%20again%2e%2e%2e%20on%20this%20site%20%3a%2f%22%29%26%26localStorage%2esetItem%28f%2c%22hidden%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dx%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dy%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dheight%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dwidth%22%2c%220px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2c%22none%22%29%2cdocument%2eaddEventListener%28%22click%22%2cg%3d%3e%7bif%28g%2ectrlKey%26%26d%29%7bg%2epreventDefault%28%29%2cg%2estopPropagation%28%29%3blet%20h%2ci%3dg%2etarget%2cj%3dnull%2ck%3d%22%22%3bdo%20h%3dc%2egetSelector%28i%29%2bk%2cj%3di%2ci%3dj%2eparentElement%2ck%3d%22%20%3e%20%22%2bj%2etagName%2etoLowerCase%28%29%2b%22%3anth%2dchild%28%22%2b%28%5b%5d%2eindexOf%2ecall%28i%2echildren%2cj%29%2b1%29%2b%22%29%22%2bk%3bwhile%281%3cdocument%2equerySelectorAll%28h%29%2elength%29%3bprompt%28%22You%20just%20selected%3a%22%2ch%29%7d%7d%2c%210%29%2cdocument%2eaddEventListener%28%22keydown%22%2cg%3d%3e%7bd%3dg%2egetModifierState%28%22ScrollLock%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2cd%3f%22block%22%3a%22none%22%29%7d%29%2cdocument%2eaddEventListener%28%22mousemove%22%2cg%3d%3e%7bconst%20h%3dg%2etarget%3bif%28d%3dg%2egetModifierState%28%22ScrollLock%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2ddsp%22%2cd%3f%22block%22%3a%22none%22%29%2c%21h%2egetBoundingClientRect%29return%211%3bconst%7bx%3ai%2cy%3aj%2cwidth%3ak%2cheight%3al%7d%3dh%2egetBoundingClientRect%28%29%3bdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dx%22%2ci%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dy%22%2cj%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dheight%22%2cl%2b%22px%22%29%2cdocument%2ebody%2estyle%2esetProperty%28%22%2d%2dwidth%22%2ck%2b%22px%22%29%7d%29%7d%29%28%29%3b