Display copy button only on hover

lmillucci · lmillucci · commit d1a60bba5a24 · 2021-07-26T08:54:30.000+02:00
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css
@@ -227,7 +227,8 @@ header .container { display: flex; justify-content: space-between; }
 .trace-line a { color: var(--base-6); }
 .trace-line .icon { opacity: .4; position: absolute; left: 10px; top: 11px; }
 .trace-line .icon svg { fill: var(--base-5); height: 16px; width: 16px; }
-.trace-line .icon.icon-copy { left: auto; top: auto; padding-left: 5px; }
+.trace-line .icon.icon-copy { left: auto; top: auto; padding-left: 5px; display: none }
+.trace-line:hover .icon.icon-copy:not(.hidden) { display: inline-block }
 .trace-line-header { padding-left: 36px; padding-right: 10px; }
 
 .trace-file-path, .trace-file-path a { color: var(--base-6); font-size: 13px; }
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js b/src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js
@@ -30,17 +30,17 @@ if (typeof Sfjs === 'undefined') {
             };
         }
 
-    if (navigator.clipboard) {
-        document.querySelectorAll('[data-clipboard-text]').forEach(function(element) {
-            removeClass(element, 'hidden');
-            element.addEventListener('click', function() {
-                navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
-            })
-        });
-    }
-
-    return {
-        addEventListener: addEventListener,
+        if (navigator.clipboard) {
+            document.querySelectorAll('[data-clipboard-text]').forEach(function(element) {
+                removeClass(element, 'hidden');
+                element.addEventListener('click', function() {
+                    navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
+                })
+            });
+        }
+
+        return {
+            addEventListener: addEventListener,
 
             createTabs: function() {
                 var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
@@ -175,13 +175,13 @@ if (typeof Sfjs === 'undefined') {
                         });
                     }
 
-                /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
-                var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]')
-                for (var k = 0; k < copyToClipboardElements.length; k++) {
-                    addEventListener(copyToClipboardElements[k], 'click', function(e) {
-                        e.stopPropagation();
-                    });
-                }
+                    /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
+                    var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]')
+                    for (var k = 0; k < copyToClipboardElements.length; k++) {
+                        addEventListener(copyToClipboardElements[k], 'click', function(e) {
+                            e.stopPropagation();
+                        });
+                    }
 
                     toggles[i].setAttribute('data-processed', 'true');
                 }
