Use a table instead of divs, and get styling correct.

Author: daveverwer

FrontEnd/scripts/debug_panel.js

@@ -19,44 +19,73 @@ export class SPIDebugPanel extends HTMLElement {
         // into the browser console.
         if (localStorage.getItem('spiDebug') === 'true') {
             this.classList.remove('hidden')
+
+            this.reset()
+            this.addButtons()
             this.addCanonicalUrls()
         }
+    }
+
+    disconnectedCallback() {
+        console.log('SPIDebugPanel disconnectedCallback')
+    }
+
+    reset() {
+        const buttonsContainer = this.querySelector('.buttons')
+        if (buttonsContainer) buttonsContainer.remove()
 
-        this.querySelector('.buttons > .hide').addEventListener('click', () => {
+        const dynamicRowElements = this.querySelectorAll('tr:not([server-side])')
+        dynamicRowElements.forEach((row) => row.remove())
+    }
+
+    addButtons() {
+        const hideButton = document.createElement('button')
+        hideButton.innerText = 'Hide'
+        hideButton.title = 'Temporarily hide this panel'
+        hideButton.addEventListener('click', () => {
             this.classList.add('hidden')
         })
 
-        this.querySelector('.buttons > .disable').addEventListener('click', () => {
-            this.classList.add('hidden')
+        const disableButton = document.createElement('button')
+        disableButton.innerText = 'Disable'
+        disableButton.title = 'Disable the debug panel'
+        disableButton.addEventListener('click', () => {
             localStorage.setItem('spiDebug', 'false')
+            this.classList.add('hidden')
         })
-    }
 
-    disconnectedCallback() {
-        console.log('SPIDebugPanel disconnectedCallback')
+        const buttonsContainer = document.createElement('div')
+        buttonsContainer.classList.add('buttons')
+        buttonsContainer.appendChild(hideButton)
+        buttonsContainer.appendChild(disableButton)
+        this.prepend(buttonsContainer)
     }
 
-    newTableRow(title, value) {
+    newTableRow(title, value, valueCssClass) {
+        const tableElement = this.querySelector('table > tbody')
         const rowElement = document.createElement('tr')
 
         const titleCellElement = document.createElement('td')
         titleCellElement.innerText = title
 
+        const valueSpanElement = document.createElement('span')
+        valueSpanElement.innerText = value
         const valueCellElement = document.createElement('td')
-        valueCellElement.innerText = value
+        valueCellElement.appendChild(valueSpanElement)
+        if (valueCssClass) valueCellElement.classList.add(valueCssClass)
 
         rowElement.appendChild(titleCellElement)
         rowElement.appendChild(valueCellElement)
-        return rowElement
+        tableElement.appendChild(rowElement)
     }
 
     addCanonicalUrls() {
-        const tableElement = this.querySelector('table')
         const canonicalUrl = document.querySelector('link[rel="canonical"]').href
         const windowUrl = window.location.href
+        const matchingCanonicalUrl = canonicalUrl === windowUrl
 
-        tableElement.appendChild(this.newTableRow('Canonical URL', canonicalUrl))
-        tableElement.appendChild(this.newTableRow('Window URL', windowUrl))
-        tableElement.appendChild(this.newTableRow('URLs Match', canonicalUrl === windowUrl))
+        this.newTableRow('Canonical URL', canonicalUrl)
+        this.newTableRow('Window URL', windowUrl)
+        this.newTableRow('Canonical Match', matchingCanonicalUrl, matchingCanonicalUrl ? 'green' : 'red')
     }
 }

FrontEnd/styles/debug_panel.scss

@@ -25,6 +25,7 @@ spi-debug-panel {
     overflow-y: auto;
     max-height: 500px;
     min-height: 100px;
+    padding: 18px;
     background-color: var(--debug-console-background);
     border-top: 1px solid var(--debug-console-border);
 
@@ -38,7 +39,7 @@ spi-debug-panel {
 
         button {
             cursor: pointer;
-            padding: 2px 6px;
+            padding: 0 6px;
             font-size: 10px;
             color: var(--page-text);
             background: none;
@@ -52,15 +53,37 @@ spi-debug-panel {
         }
     }
 
-    [data-debug-console-target='grid'] {
-        display: grid;
-        grid-template-columns: min-content 1fr;
-        gap: 3px 20px;
-        padding: 5px;
+    table {
+        width: 100%;
+        border-collapse: collapse;
+
+        tr {
+            > td:first-child {
+                width: 20%;
+                font-size: 14px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+
+            > td:last-child {
+                width: 80%;
+                font-family: monospace;
+                font-size: 12px;
+            }
+        }
+
+        td > span {
+            padding: 3px;
+        }
+
+        td.green > span {
+            color: var(--very-light-grey);
+            background-color: var(--mid-green);
+        }
 
-        tr > td:first-child {
-            font-weight: 600;
-            white-space: nowrap;
+        td.red > span {
+            color: var(--very-light-grey);
+            background-color: var(--mid-red);
         }
     }
 }

Sources/App/Views/DocumentationPageProcessor.swift

@@ -293,7 +293,7 @@ struct DocumentationPageProcessor {
     }
 
     var frontEndDebugPanel: String {
-        Plot.Node<HTML.BodyContext>.spiFrontEndDebugConsole(dataItems: []).render()
+        Plot.Node<HTML.BodyContext>.spiFrontEndDebugPanel(dataItems: []).render()
     }
 
     var processedPage: String {

Sources/App/Views/Plot+Extensions.swift

@@ -207,36 +207,24 @@ extension Node where Context: HTML.BodyContext {
         )
     }
 
-    static func spiFrontEndDebugConsole(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
+    static func spiFrontEndDebugPanel(dataItems: [PublicPage.DebugConsoleDataItem]) -> Node<HTML.BodyContext> {
         .element(named: "spi-debug-panel", nodes: [
             .class("hidden"),
-            .div(
-                .class("buttons"),
-                .button(
-                    .class("hide"),
-                    .text("Hide"),
-                    .title("Temporarily hide this panel")
-                ),
-                .button(
-                    .class("disable"),
-                    .text("Disable"),
-                    .title("Disable the debug console")
-                )
-            ),
             .table(
-                .class("grid"),
-                .group(
-                    dataItems.map({ dataItem -> Node<HTML.TableContext> in
-                            .tr(
-                                .class("server-side"),
-                                .td(
-                                    .text(dataItem.title)
-                                ),
-                                .td(
-                                    .text(dataItem.value)
+                .tbody(
+                    .group(
+                        dataItems.map({ dataItem -> Node<HTML.TableContext> in
+                                .tr(
+                                    .attribute(named: "server-side"),
+                                    .td(
+                                        .text(dataItem.title)
+                                    ),
+                                    .td(
+                                        .text(dataItem.value)
+                                    )
                                 )
-                            )
-                    })
+                        })
+                    )
                 )
             )
         ])

Sources/App/Views/PublicPage.swift

@@ -465,7 +465,7 @@ class PublicPage {
     /// Output a hidden-by-default panel on the page showing useful debug information
     /// - Returns: The HTML for the debug console element.
     final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
-        .spiFrontEndDebugConsole(dataItems: frontEndDebugConsoleData())
+        .spiFrontEndDebugPanel(dataItems: frontEndDebugConsoleData())
     }
 
     /// Returns the debug information that a page would like to show in the front-end debug console.