feature #40052 [ErrorHandler] Add button to copy the path where error is thrown (lmillucci)

fabpot · fabpot · commit a19735bc31e1 · 2021-07-26T09:21:27.000+02:00
This PR was squashed before being merged into the 5.4 branch. Discussion ---------- [ErrorHandler] Add button to copy the path where error is thrown | Q | A | ------------- | --- | Branch? | 5.x for features | Bug fix? | no | New feature? | yes | Deprecations? | no | Tickets | | License | MIT | Doc PR | As a developer I want to copy the path where an exception is thrown on my IDE to check what is the problem. At the moment I have to select the path on the error page and copy it. I think that this process could be simplified through a "copy path" button that copies the error path on the clipboard. I was thinking about something like this: ![Screenshot_2021-02-01 MyException (500 Internal Server Error)](https://user-images.githubusercontent.com/5730780/106430292-e3240900-646b-11eb-8f56-9cc0d4ecaa9b.png) (Page style should be improved) Let me know what you think. If you think it is a good idea I could improve this PR Commits ------- 5779f86 [ErrorHandler] Add button to copy the path where error is thrown
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
@@ -38,6 +38,15 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === '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'));
+                })
+            });
+        }
+
         var request = function(url, onSuccess, onError, payload, options, tries) {
             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
             options = options || {};
@@ -705,6 +714,14 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === '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();
+                        });
+                    }
+
                     toggles[i].setAttribute('data-processed', 'true');
                 }
             },
diff --git a/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css b/src/Symfony/Component/ErrorHandler/Resources/assets/css/exception.css
@@ -227,6 +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; 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/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,6 +30,15 @@ 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,
 
@@ -166,6 +175,14 @@ 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();
+                        });
+                    }
+
                     toggles[i].setAttribute('data-processed', 'true');
                 }
             },
diff --git a/src/Symfony/Component/ErrorHandler/Resources/views/trace.html.php b/src/Symfony/Component/ErrorHandler/Resources/views/trace.html.php
@@ -25,6 +25,9 @@
                 <span class="trace-method"><?= $trace['function']; ?></span>
             <?php } ?>
             (line <?= $lineNumber; ?>)
+            <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>
