T108 shared entry renderer

CHANGELOG.md

@@ -88,6 +88,7 @@ All notable changes to `phalcon/debugbar` are documented here. The format is bas
 - Pin `pie.phar` to a release with a sha256 check, build the PHP 8.1 Docker image, declare `ext-mbstring`, and list the Phalcon version that each feature needs. [#104](https://github.com/phalcon/debugbar/issues/104)
 - Name the collapse toggle and the tabs for screen readers, close the open panel or the history with Escape, and fix two `Phalcon\Debug` docblocks. [#106](https://github.com/phalcon/debugbar/issues/106)
 - Open the ADR debug page only for an exception logged at `error` level or higher, and show a lower-level exception only in the `exceptions` panel. [#107](https://github.com/phalcon/debugbar/issues/107)
+- Share one renderer and one CSS block for the exceptions and logs panels, and show an exception with no trace as a plain line. [#108](https://github.com/phalcon/debugbar/issues/108)
 - Test HTML writes, the collapse state and `localStorage` errors in the JS tests, and keep every listener in the fake DOM. [#103](https://github.com/phalcon/debugbar/issues/103)
 
 ## [0.4.0](https://github.com/phalcon/debugbar/releases/tag/v0.4.0) (2026-07-14)

resources/assets/debugbar.css

@@ -440,49 +440,33 @@
     font-style: italic;
 }
 
-#phalcon-debugbar .phalcon-debugbar-exception {
+#phalcon-debugbar .phalcon-debugbar-exception,
+#phalcon-debugbar .phalcon-debugbar-log {
     padding: 3px 0;
     border-bottom: 1px solid #23233440;
 }
 
-#phalcon-debugbar .phalcon-debugbar-exception-summary {
+#phalcon-debugbar .phalcon-debugbar-exception-summary,
+#phalcon-debugbar .phalcon-debugbar-log-summary {
     padding: 4px 0;
     cursor: pointer;
 }
 
-#phalcon-debugbar .phalcon-debugbar-exception-label {
+#phalcon-debugbar .phalcon-debugbar-exception-label,
+#phalcon-debugbar .phalcon-debugbar-log-label {
     margin-right: 8px;
-    color: #ff6b81;
     font-weight: 600;
 }
 
-#phalcon-debugbar .phalcon-debugbar-exception-trace {
-    margin: 6px 0 10px 16px;
-    padding: 8px 10px;
-    background: #0f0f17;
-    border-radius: 4px;
-    color: #b9b9d4;
-    font-size: 11px;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-#phalcon-debugbar .phalcon-debugbar-log {
-    padding: 3px 0;
-    border-bottom: 1px solid #23233440;
-}
-
-#phalcon-debugbar .phalcon-debugbar-log-summary {
-    padding: 4px 0;
-    cursor: pointer;
+#phalcon-debugbar .phalcon-debugbar-exception-label {
+    color: #ff6b81;
 }
 
 #phalcon-debugbar .phalcon-debugbar-log-label {
-    margin-right: 8px;
     color: #7cc4ff;
-    font-weight: 600;
 }
 
+#phalcon-debugbar .phalcon-debugbar-exception-trace,
 #phalcon-debugbar .phalcon-debugbar-log-context {
     margin: 6px 0 10px 16px;
     padding: 8px 10px;

resources/assets/debugbar.js

@@ -273,45 +273,35 @@
         return node;
     }
 
-    function renderExceptions(panel) {
+    /*
+     * The exceptions and logs panels: a row with a detail (the trace or the
+     * context) opens to show it, and a row with no detail is a plain line.
+     * `kind` names the classes: phalcon-debugbar-exception-*, phalcon-debugbar-log-*.
+     */
+    function renderEntries(panel, kind, detailKey) {
         if (!Array.isArray(panel) || !panel.length) {
             return el('div', 'phalcon-debugbar-empty', 'No data');
         }
-        var wrap = el('div', 'phalcon-debugbar-exceptions');
+        var prefix = 'phalcon-debugbar-' + kind;
+        var wrap = el('div', prefix + 's');
         panel.forEach(function (row) {
             row = row || {};
-            var details = el('details', 'phalcon-debugbar-exception');
-            var summary = el('summary', 'phalcon-debugbar-exception-summary');
-            summary.appendChild(el('span', 'phalcon-debugbar-exception-label', scalar(row.label)));
-            summary.appendChild(el('span', 'phalcon-debugbar-exception-message', scalar(row.message)));
-            details.appendChild(summary);
-            details.appendChild(el('pre', 'phalcon-debugbar-exception-trace', scalar(row.trace)));
-            wrap.appendChild(details);
-        });
-        return wrap;
-    }
-
-    function renderLogs(panel) {
-        if (!Array.isArray(panel) || !panel.length) {
-            return el('div', 'phalcon-debugbar-empty', 'No data');
-        }
-        var wrap = el('div', 'phalcon-debugbar-logs');
-        panel.forEach(function (row) {
-            row = row || {};
-            var context = scalar(row.context);
-            if (context === '') {
-                var line = el('div', 'phalcon-debugbar-log');
-                line.appendChild(el('span', 'phalcon-debugbar-log-label', scalar(row.label)));
-                line.appendChild(el('span', 'phalcon-debugbar-log-message', scalar(row.message)));
+            var detail = scalar(row[detailKey]);
+            var label = el('span', prefix + '-label', scalar(row.label));
+            var message = el('span', prefix + '-message', scalar(row.message));
+            if (detail === '') {
+                var line = el('div', prefix);
+                line.appendChild(label);
+                line.appendChild(message);
                 wrap.appendChild(line);
                 return;
             }
-            var details = el('details', 'phalcon-debugbar-log');
-            var summary = el('summary', 'phalcon-debugbar-log-summary');
-            summary.appendChild(el('span', 'phalcon-debugbar-log-label', scalar(row.label)));
-            summary.appendChild(el('span', 'phalcon-debugbar-log-message', scalar(row.message)));
+            var details = el('details', prefix);
+            var summary = el('summary', prefix + '-summary');
+            summary.appendChild(label);
+            summary.appendChild(message);
             details.appendChild(summary);
-            details.appendChild(el('pre', 'phalcon-debugbar-log-context', context));
+            details.appendChild(el('pre', prefix + '-' + detailKey, detail));
             wrap.appendChild(details);
         });
         return wrap;
@@ -326,9 +316,9 @@
             case 'html':
                 return renderHtml(panel);
             case 'exceptions':
-                return renderExceptions(panel);
+                return renderEntries(panel, 'exception', 'trace');
             case 'logs':
-                return renderLogs(panel);
+                return renderEntries(panel, 'log', 'context');
             case 'grid':
             default:
                 return renderGrid(panel);