Append line number to path and replace button with icon

lmillucci · lmillucci · commit 84c48717a083 · 2021-07-26T08:51:28.000+02:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
@@ -39,10 +39,10 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
         }
 
         if (navigator.clipboard) {
-            document.querySelectorAll('[data-clipboard-text]').forEach(function(button) {
-                removeClass(button, 'hidden');
-                button.addEventListener('click', function() {
-                    navigator.clipboard.writeText(button.getAttribute('data-clipboard-text'));
+            document.querySelectorAll('[data-clipboard-text]').forEach(function(element) {
+                removeClass(element, 'hidden');
+                element.addEventListener('click', function() {
+                    navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
                 })
             });
         }
@@ -714,10 +714,10 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                         });
                     }
 
-                    /* Prevents from disallowing clicks on buttons inside toggles */
-                    var copyToClipboardButtons = toggles[i].querySelectorAll('button');
-                    for (var k = 0; k < copyToClipboardButtons.length; k++) {
-                        addEventListener(copyToClipboardButtons[k], 'click', function(e) {
+                    /* 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();
                         });
                     }
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css
@@ -227,8 +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-header { padding-left: 36px; padding-right: 10px; }
-.trace-line-header button { color: var(--color-error); padding-left: 0; padding-right: 0 }
 
 .trace-file-path, .trace-file-path a { color: var(--base-6); font-size: 13px; }
 .trace-class { color: var(--color-error); }
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/images/icon-copy.svg b/src/Symfony/Component/ErrorHandler/Resources/assets/images/icon-copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js b/src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js
@@ -30,11 +30,11 @@ if (typeof Sfjs === 'undefined') {
             };
         }
 
-        if (navigator.clipboard) {
-        document.querySelectorAll('[data-clipboard-text]').forEach(function(button) {
-            removeClass(button, 'hidden');
-            button.addEventListener('click', function() {
-                navigator.clipboard.writeText(button.getAttribute('data-clipboard-text'));
+    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'));
             })
         });
     }
@@ -175,10 +175,10 @@ if (typeof Sfjs === 'undefined') {
                         });
                     }
 
-                /* Prevents from disallowing clicks on buttons inside toggles */
-                var copyToClipboardButtons = toggles[i].querySelectorAll('button');
-                for (var k = 0; k < copyToClipboardButtons.length; k++) {
-                    addEventListener(copyToClipboardButtons[k], 'click', function(e) {
+                /* 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();
                     });
                 }
diff --git a/src/Symfony/Component/ErrorHandler/Resources/views/trace.html.php b/src/Symfony/Component/ErrorHandler/Resources/views/trace.html.php
@@ -25,7 +25,9 @@
                 <span class="trace-method"><?= $trace['function']; ?></span>
             <?php } ?>
             (line <?= $lineNumber; ?>)
-            <button class="hidden" data-clipboard-text="<?php echo implode(\DIRECTORY_SEPARATOR, $filePathParts); ?>">Copy path</button>
+            <span class="icon icon-copy hidden" data-clipboard-text="<?php echo implode(\DIRECTORY_SEPARATOR, $filePathParts).':'.$lineNumber; ?>">
+                <?php echo $this->include('assets/images/icon-copy.svg'); ?>
+            </span>
         </span>
     <?php } ?>
 </div>
