Show full argument by click (+bugfix)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 3.2.2 under development
 
+- Bug #114: Stop `click` event on text selection (@xepozz)
+- Enh #114: Show full argument by click (@xepozz)
 - Enh #113: Simplify error log (@xepozz)
 - Enh #112: Add copy cURL button, sort request headers, fix UI (@xepozz)
 

src/Renderer/HtmlRenderer.php

@@ -281,7 +281,7 @@ public function renderCallStack(Throwable $t, array $trace = []): string
      *
      * @return string The string representation of the arguments array.
      */
-    public function argumentsToString(array $args): string
+    public function argumentsToString(array $args, bool $truncate = true): string
     {
         $count = 0;
         $isAssoc = $args !== array_values($args);
@@ -292,7 +292,7 @@ public function argumentsToString(array $args): string
         foreach ($args as $key => $value) {
             $count++;
 
-            if ($count >= 5) {
+            if ($truncate && $count >= 5) {
                 if ($count > 5) {
                     unset($args[$key]);
                 } else {
@@ -307,15 +307,15 @@ public function argumentsToString(array $args): string
                 $args[$key] = '<span class="keyword">' . ($value ? 'true' : 'false') . '</span>';
             } elseif (is_string($value)) {
                 $fullValue = $this->htmlEncode($value);
-                if (mb_strlen($value, 'UTF-8') > 32) {
+                if ($truncate && mb_strlen($value, 'UTF-8') > 32) {
                     $displayValue = $this->htmlEncode(mb_substr($value, 0, 32, 'UTF-8')) . '...';
                     $args[$key] = "<span class=\"string\" title=\"$fullValue\">'$displayValue'</span>";
                 } else {
                     $args[$key] = "<span class=\"string\">'$fullValue'</span>";
                 }
             } elseif (is_array($value)) {
                 unset($args[$key]);
-                $args[$key] = '[' . $this->argumentsToString($value) . ']';
+                $args[$key] = '[' . $this->argumentsToString($value, $truncate) . ']';
             } elseif ($value === null) {
                 $args[$key] = '<span class="keyword">null</span>';
             } elseif (is_resource($value)) {

templates/_call-stack-item.php

@@ -33,9 +33,16 @@
 
             <?php if ($function !== null): ?>
                 <span class="function-info">
-                    <?= $file === null ? "{$index}." : '&ndash;' ?>
-                    <?php $function = $class === null ? $function : "$class::$function" ?>
-                    <?= "{$this->htmlEncode($function)}({$this->argumentsToString($args)})" ?>
+                    <?php
+                    echo $file === null ? "{$index}." : '&mdash;&nbsp;';
+                    $function = $class === null ? $function : "$class::$function";
+
+                    echo '<span class="function">' . $this->htmlEncode($function) . '</span>';
+                    echo '<span class="arguments">(';
+                    echo '<span class="short-arguments">' . $this->argumentsToString($args, true) . '</span>';
+                    echo '<span class="full-arguments hidden">' . $this->argumentsToString($args, false) . '</span>';
+                    echo ')</span>';
+                    ?>
                 </span>
             <?php endif ?>
         </div>

templates/development.css

@@ -377,6 +377,10 @@ main {
     }
 }
 
+.hidden {
+    display: none;
+}
+
 .flex-1 {
     flex: 1;
 }
@@ -451,11 +455,15 @@ main {
     color: var(--element-wrap-text-color);
 }
 
-.call-stack ul li .element-wrap:hover .file-name,
+.call-stack ul li .element-wrap .file-name:hover,
 .call-stack ul li .element-code-wrap .code-wrap .lines-item:hover {
     color: var(--element-wrap-hover-text-color);
 }
 
+.call-stack ul li .arguments:hover {
+    color: var(--element-wrap-hover-text-color);
+}
+
 .call-stack ul li .element-wrap .function-info {
     display: inline-block;
     line-break: normal;

templates/development.php

@@ -189,8 +189,8 @@ class="copy-clipboard"
 </script>
 <script>
     window.onload = function() {
-        var codeBlocks = document.querySelectorAll('.solution pre code,.codeBlock'),
-            callStackItems = document.getElementsByClassName('call-stack-item');
+        const codeBlocks = document.querySelectorAll('.solution pre code,.codeBlock');
+        const callStackItems = document.getElementsByClassName('call-stack-item');
 
         // If there are grouped vendor package files
         var vendorCollapse = document.getElementsByClassName('call-stack-vendor-collapse');
@@ -249,13 +249,47 @@ class="copy-clipboard"
         };
 
         for (var i = 0, imax = callStackItems.length; i < imax; ++i) {
-            refreshCallStackItemCode(callStackItems[i]);
+            let stackItem = callStackItems[i];
+            refreshCallStackItemCode(stackItem);
 
             // toggle code block visibility
-            callStackItems[i].getElementsByClassName('element-wrap')[0].addEventListener('click', function (event) {
+            stackItem.querySelector('.show-arguments-toggle')?.addEventListener('click', function (e) {
+                e.stopPropagation()
+
+                stackItem.getElementsByClassName('function-arguments-wrap')[0].classList.toggle('hidden')
+            });
+
+            // toggle code block visibility
+            const arguments = stackItem.querySelector('.arguments');
+            arguments?.addEventListener('select', function (e) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+            })
+
+            arguments?.addEventListener('click', function (e) {
+                e.stopPropagation()
+                // stop click event on selecting text
+                if (document.getSelection()?.type === 'Range') {
+                    return
+                }
+
+                const fullArguments = stackItem.querySelector('.full-arguments');
+                const shortArguments = stackItem.querySelector('.short-arguments');
+                if (fullArguments) {
+                    fullArguments.classList.toggle('hidden')
+                    shortArguments.classList.toggle('hidden')
+                }
+            });
+
+            // toggle code block visibility
+            stackItem.getElementsByClassName('element-wrap')[0].addEventListener('click', function (event) {
                 if (event.target.nodeName.toLowerCase() === 'a') {
                     return;
                 }
+                // stop click event on selecting text
+                if (document.getSelection()?.type === 'Range') {
+                    return
+                }
 
                 var callStackItem = this.parentNode,
                     code = callStackItem.getElementsByClassName('code-wrap')[0];
@@ -273,6 +307,7 @@ class="copy-clipboard"
                     refreshCallStackItemCode(callStackItem);
                 }
             });
+
         }
 
         // handle copy stacktrace action on clipboard button