Added canonical and window URL information.

Author: daveverwer

FrontEnd/scripts/controllers/debug_console_controller.js

@@ -15,14 +15,16 @@
 import { Controller } from '@hotwired/stimulus'
 
 export class DebugConsoleController extends Controller {
-    connect() {
-        console.log('DebugConsoleController connected')
+    static targets = ['grid']
 
+    connect() {
         // Debug console is Hidden by default. Make it visble by typing:
         //   `localStorage.setItem('spiDebug', 'true');`
         // into the browser console.
         if (localStorage.getItem('spiDebug') === 'true') {
             this.element.classList.remove('hidden')
+
+            this.addCanonicalUrls()
         }
     }
 
@@ -34,4 +36,24 @@ export class DebugConsoleController extends Controller {
         this.element.classList.add('hidden')
         localStorage.setItem('spiDebug', 'false')
     }
+
+    newGridCell(contents) {
+        const cellElement = document.createElement('div')
+        cellElement.innerText = contents
+        return cellElement
+    }
+
+    addCanonicalUrls() {
+        const canonicalUrl = document.querySelector('link[rel="canonical"]').href
+        const windowUrl = window.location.href
+
+        this.gridTarget.appendChild(this.newGridCell('Canonical URL'))
+        this.gridTarget.appendChild(this.newGridCell(canonicalUrl))
+
+        this.gridTarget.appendChild(this.newGridCell('Window URL'))
+        this.gridTarget.appendChild(this.newGridCell(windowUrl))
+
+        this.gridTarget.appendChild(this.newGridCell('URLs Match'))
+        this.gridTarget.appendChild(this.newGridCell(canonicalUrl === windowUrl))
+    }
 }

FrontEnd/styles/debug_console.scss

@@ -28,10 +28,6 @@
     background-color: var(--debug-console-background);
     border-top: 1px solid var(--debug-console-border);
 
-    h3 {
-        margin: 5px;
-    }
-
     .buttons {
         position: absolute;
         top: 0;
@@ -56,14 +52,15 @@
         }
     }
 
-    [data-debug-console-target='data-grid'] {
+    [data-debug-console-target='grid'] {
         display: grid;
-        grid-template-columns: 1fr 10fr;
+        grid-template-columns: min-content 1fr;
+        gap: 3px 20px;
         padding: 5px;
-        font-size: 13px;
 
         > *:nth-child(odd) {
             font-weight: 600;
+            white-space: nowrap;
         }
     }
 }

Sources/App/Views/PublicPage.swift

@@ -471,9 +471,8 @@ class PublicPage {
                     .data(named: "action", value: "click->debug-console#disable")
                 )
             ),
-            .h3("Debugging information"),
             .section(
-                .data(named: "debug-console-target", value: "data-grid"),
+                .data(named: "debug-console-target", value: "grid"),
                 .group(
                     frontEndDebugConsoleData().map({ dataItem -> Node<HTML.BodyContext> in
                             .group(