minor #49977 [VarDumper] Reduce stylesheet assignments via JavaScript…

… in `HtmlDumper` (ohader)

This PR was squashed before being merged into the 6.3 branch.

Discussion
----------

[VarDumper] Reduce stylesheet assignments via JavaScript in `HtmlDumper`

| Q             | A
| ------------- | ---
| Branch?       | 6.3
| Bug fix?      | no
| New feature?  | no
| Deprecations? | no
| Tickets       | *none*
| License       | MIT

The dynamic `<style>` element in the JavaScript variable `refStyle` can be replaced by static CSS and element states.
The new rule `.sf-dump-hover:hover` substitutes JavaScript event handling for `mouseover` events.

This is a preparation to have the possibility to assign `nonce` HTML attributes to inline `<script>` and `<style>` nodes, e.g. shown as proof-of-concept at
https://review.typo3.org/c/Packages/TYPO3.CMS/+/78512/2/typo3/sysext/adminpanel/Classes/Utility/HtmlDumper.php

Commits
-------

53046a3bac [VarDumper] Reduce stylesheet assignments via JavaScript in `HtmlDumper`

Dumper/HtmlDumper.php

@@ -163,19 +163,17 @@ protected function getDumpHeader()
 <script>
 Sfdump = window.Sfdump || (function (doc) {
 
-var refStyle = doc.createElement('style'),
-    rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
+if (doc.body instanceof HTMLElement) {
+    doc.body.classList.add('sf-js-enabled');
+}
+
+var rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
     idRx = /\bsf-dump-\d+-ref[012]\w+\b/,
     keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
     addEventListener = function (e, n, cb) {
         e.addEventListener(n, cb, false);
     };
 
-refStyle.innerHTML = 'pre.sf-dump .sf-dump-compact, .sf-dump-str-collapse .sf-dump-str-collapse, .sf-dump-str-expand .sf-dump-str-expand { display: none; }';
-doc.head.appendChild(refStyle);
-refStyle = doc.createElement('style');
-doc.head.appendChild(refStyle);
-
 if (!doc.addEventListener) {
     addEventListener = function (element, eventName, callback) {
         element.attachEvent('on' + eventName, function (e) {
@@ -355,19 +353,9 @@ function xpathString(str) {
     function xpathHasClass(className) {
         return "contains(concat(' ', normalize-space(@class), ' '), ' " + className +" ')";
     }
-    addEventListener(root, 'mouseover', function (e) {
-        if ('' != refStyle.innerHTML) {
-            refStyle.innerHTML = '';
-        }
-    });
     a('mouseover', function (a, e, c) {
         if (c) {
             e.target.style.cursor = "pointer";
-        } else if (a = idRx.exec(a.className)) {
-            try {
-                refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}';
-            } catch (e) {
-            }
         }
     });
     a('click', function (a, e, c) {
@@ -436,6 +424,7 @@ function xpathHasClass(className) {
             }
         } else if (/\bsf-dump-ref\b/.test(elt.className) && (a = elt.getAttribute('href'))) {
             a = a.slice(1);
+            elt.className += ' sf-dump-hover';
             elt.className += ' '+a;
 
             if (/[\[{]$/.test(elt.previousSibling.nodeValue)) {
@@ -652,6 +641,16 @@ function showCurrent(state)
 
 })(document);
 </script><style>
+.sf-js-enabled pre.sf-dump .sf-dump-compact,
+.sf-js-enabled .sf-dump-str-collapse .sf-dump-str-collapse,
+.sf-js-enabled .sf-dump-str-expand .sf-dump-str-expand {
+    display: none;
+}
+.sf-dump-hover:hover {
+    background-color: #B729D9;
+    color: #FFF !important;
+    border-radius: 2px;
+}
 pre.sf-dump {
     display: block;
     white-space: pre;