T102 host css and history errors

CHANGELOG.md

@@ -84,6 +84,7 @@ All notable changes to `phalcon/debugbar` are documented here. The format is bas
 - Show `true` and `false` for booleans in messages, show `[]`, `null` and the class name of an object in the grid, and time each query from its own start (0 when there is no start). [#99](https://github.com/phalcon/debugbar/issues/99)
 - Debug page: show the previous exceptions, fix the API links, read each file one time, drop the arguments from the `debugVar()` backtrace, match `\vendor\`, and end the line of a skipped `Dump` key. [#100](https://github.com/phalcon/debugbar/issues/100)
 - Debug page: copy on `http://` pages, show "Copy failed" when a copy fails, and encode the paths in the PhpStorm and VS Code links. [#101](https://github.com/phalcon/debugbar/issues/101)
+- Keep host CSS out of the bar tables, code blocks and buttons, stop history requests after 10 seconds, and show "Unable to load" in a history row that fails. [#102](https://github.com/phalcon/debugbar/issues/102)
 - 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

@@ -21,6 +21,15 @@
     color: #e2e2ef;
 }
 
+/* Host rules must not change the buttons of the bar. A rule of the bar with a
+   class has a higher specificity, so it still sets its own values. */
+#phalcon-debugbar button {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+    text-transform: none;
+}
+
 /* Collapsed: shrink to the bottom-right handle so the host page's own
    bottom-left controls (logout, etc.) are never covered. */
 #phalcon-debugbar.is-collapsed {
@@ -309,6 +318,16 @@
     box-shadow: inset 3px 0 #7c3aed;
 }
 
+#phalcon-debugbar .phalcon-debugbar-history-request-error {
+    display: none;
+    grid-column: 1 / -1;
+    color: #ff6b81;
+}
+
+#phalcon-debugbar .phalcon-debugbar-history-request.is-error .phalcon-debugbar-history-request-error {
+    display: block;
+}
+
 #phalcon-debugbar .phalcon-debugbar-history-method {
     color: #a78bfa;
     font-weight: 700;
@@ -355,6 +374,16 @@
     }
 }
 
+/* Host rules must not set the colors of the panel tables and code blocks. */
+#phalcon-debugbar table,
+#phalcon-debugbar tr,
+#phalcon-debugbar th,
+#phalcon-debugbar td,
+#phalcon-debugbar pre {
+    background: transparent;
+    color: inherit;
+}
+
 #phalcon-debugbar table {
     width: 100%;
     border-collapse: collapse;

resources/assets/debugbar.js

@@ -18,6 +18,7 @@
 
     var STORAGE_KEY = 'phalcon-debugbar-collapsed';
     var HISTORY_VERSION = 1;
+    var REQUEST_TIMEOUT_MS = 10000;
 
     function ready(fn) {
         if (document.readyState !== 'loading') {
@@ -369,12 +370,34 @@
         options.headers = options.headers || {};
         options.headers.Accept = 'application/json';
 
+        // A request that does not end must not keep the history controls disabled.
+        var timer = null;
+        if (window.AbortController && window.setTimeout && window.clearTimeout) {
+            var controller = new window.AbortController();
+            options.signal = controller.signal;
+            timer = window.setTimeout(function () {
+                controller.abort();
+            }, REQUEST_TIMEOUT_MS);
+        }
+
+        function stopTimer() {
+            if (timer !== null) {
+                window.clearTimeout(timer);
+            }
+        }
+
         return window.fetch(url, options).then(function (response) {
             if (!response.ok) {
                 throw new Error('HTTP ' + response.status);
             }
 
             return response.json();
+        }).then(function (data) {
+            stopTimer();
+            return data;
+        }, function (error) {
+            stopTimer();
+            throw error;
         });
     }
 
@@ -505,13 +528,15 @@
                     button.appendChild(el('span', 'phalcon-debugbar-history-status', scalar(request.status)));
                     button.appendChild(el('time', 'phalcon-debugbar-history-time', scalar(request.requested_at)));
 
+                    var rowError = null;
                     button.addEventListener('click', function () {
                         var selection = requestGuard.startDetail();
                         if (selection === null) {
                             return;
                         }
 
                         button.disabled = true;
+                        button.classList.remove('is-error');
                         loadJson(historyUrl(url, id)).then(function (detail) {
                             if (!requestGuard.isDetailCurrent(selection)) {
                                 button.disabled = false;
@@ -536,6 +561,11 @@
                             button.disabled = false;
                         }).catch(function () {
                             button.disabled = false;
+                            button.classList.add('is-error');
+                            if (rowError === null) {
+                                rowError = el('span', 'phalcon-debugbar-history-request-error', 'Unable to load');
+                                button.appendChild(rowError);
+                            }
                         });
                     });