Added a front end debug panel for inspecting useful page metadata

.gitignore

@@ -18,8 +18,12 @@ node_modules
 .parcel-cache
 Public/main.js
 Public/main.js.map
+Public/shared.js
+Public/shared.js.map
 Public/main.css
 Public/main.css.map
+Public/shared.css
+Public/shared.css.map
 Public/docc.css
 Public/docc.css.map
 Tests/AppTests/__Snapshots__/WebpageSnapshotTests/*

FrontEnd/docc.scss

@@ -18,9 +18,6 @@
 
 $mobile-breakpoint: 740px;
 
-@import 'styles/colors';
-@import 'styles/images';
-
 header.spi,
 footer.spi {
     position: sticky;

FrontEnd/esbuild.mjs

@@ -17,7 +17,13 @@ import { sassPlugin } from 'esbuild-sass-plugin'
 
 try {
     const context = await esbuild.context({
-        entryPoints: ['FrontEnd/main.js', 'FrontEnd/main.scss', 'FrontEnd/docc.scss'],
+        entryPoints: [
+            'FrontEnd/main.js',
+            'FrontEnd/shared.js',
+            'FrontEnd/main.scss',
+            'FrontEnd/docc.scss',
+            'FrontEnd/shared.scss',
+        ],
         outdir: 'Public',
         bundle: true,
         sourcemap: true,

FrontEnd/main.scss

@@ -22,13 +22,11 @@ $mobile-breakpoint: 740px;
 @import 'styles/breadcrumbs';
 @import 'styles/build_logs';
 @import 'styles/build_monitor';
-@import 'styles/colors';
 @import 'styles/copyable_input';
 @import 'styles/error';
 @import 'styles/github_highlighting';
 @import 'styles/header_footer';
 @import 'styles/home';
-@import 'styles/images';
 @import 'styles/keywords';
 @import 'styles/layout';
 @import 'styles/maintainer_info';

FrontEnd/scripts/debug_panel.js

@@ -0,0 +1,91 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+export class SPIDebugPanel extends HTMLElement {
+    connectedCallback() {
+        // 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.classList.remove('hidden')
+
+            this.reset()
+            this.addButtons()
+            this.addCanonicalUrls()
+        }
+    }
+
+    disconnectedCallback() {
+        console.log('SPIDebugPanel disconnectedCallback')
+    }
+
+    reset() {
+        const buttonsContainer = this.querySelector('.buttons')
+        if (buttonsContainer) buttonsContainer.remove()
+
+        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')
+        })
+
+        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')
+        })
+
+        const buttonsContainer = document.createElement('div')
+        buttonsContainer.classList.add('buttons')
+        buttonsContainer.appendChild(hideButton)
+        buttonsContainer.appendChild(disableButton)
+        this.prepend(buttonsContainer)
+    }
+
+    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.appendChild(valueSpanElement)
+        if (valueCssClass) valueCellElement.classList.add(valueCssClass)
+
+        rowElement.appendChild(titleCellElement)
+        rowElement.appendChild(valueCellElement)
+        tableElement.appendChild(rowElement)
+    }
+
+    addCanonicalUrls() {
+        const canonicalUrl = document.querySelector('link[rel="canonical"]').href
+        const windowUrl = window.location.href
+        const matchingCanonicalUrl = canonicalUrl === windowUrl
+
+        this.newTableRow('Canonical URL', canonicalUrl)
+        this.newTableRow('Window URL', windowUrl)
+        this.newTableRow('Canonical Match', matchingCanonicalUrl, matchingCanonicalUrl ? 'green' : 'red')
+    }
+}

FrontEnd/shared.scss

@@ -0,0 +1,22 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Any styles shared between SPI and the SPI documentation pages.
+// -------------------------------------------------------------------------
+
+@import 'styles/colors';
+@import 'styles/utility';
+@import 'styles/debug_panel';
+@import 'styles/images';

FrontEnd/styles/base.scss

@@ -226,15 +226,6 @@ a.big-button {
     background-color: var(--announcement-background);
 }
 
-.hidden {
-    display: none;
-}
-
-.trimmed {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .count-tag {
     padding: 1px 5px;
     font-size: 10px;

FrontEnd/styles/colors.scss

@@ -187,6 +187,10 @@
     --avatar-shadow: 0 2px 2px 3px rgba(0, 0, 0, 5%);
 
     --rss-subscribe-color: var(--orange);
+
+    --debug-console-background: var(--light-blue);
+    --debug-console-border: var(--grey);
+    --debug-console-button-hover: var(--light-grey);
 }
 
 // Dark mode.
@@ -309,5 +313,9 @@
             rgba(25, 25, 35, 0%) 50%,
             rgba(25, 25, 35, 100%) 100%
         );
+
+        --debug-console-background: var(--dark-blue);
+        --debug-console-border: var(--light-grey);
+        --debug-console-button-hover: var(--dark-grey);
     }
 }

FrontEnd/styles/debug_panel.scss

@@ -0,0 +1,89 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Debug console panel shared between the site and documentation.
+// -------------------------------------------------------------------------
+
+spi-debug-panel {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    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);
+
+    .buttons {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: 10px;
+        padding: 5px;
+
+        button {
+            cursor: pointer;
+            padding: 0 6px;
+            font-size: 10px;
+            color: var(--page-text);
+            background: none;
+            border: none;
+            border: 1px solid var(--debug-console-border);
+            border-radius: 50px;
+
+            &:hover {
+                background-color: var(--debug-console-button-hover);
+            }
+        }
+    }
+
+    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);
+        }
+
+        td.red > span {
+            color: var(--very-light-grey);
+            background-color: var(--mid-red);
+        }
+    }
+}

FrontEnd/styles/utility.scss

@@ -0,0 +1,26 @@
+// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// -------------------------------------------------------------------------
+// Shared utility styles.
+// -------------------------------------------------------------------------
+
+.hidden {
+    display: none;
+}
+
+.trimmed {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

Sources/App/Views/DocumentationPageProcessor.swift

@@ -79,7 +79,8 @@ struct DocumentationPageProcessor {
             if let metaNoIndex = self.metaNoIndex {
                 try document.head()?.prepend(metaNoIndex)
             }
-            try document.head()?.append(self.stylesheetLink)
+            try document.head()?.append(self.stylesheetLinks)
+            try document.head()?.append(self.javascriptLinks)
             if let canonicalUrl = self.canonicalUrl {
                 try document.head()?.append(
                     // We should not use `url` here as some of the DocC JavaScript lowercases
@@ -93,6 +94,7 @@ struct DocumentationPageProcessor {
             }
             try document.body()?.prepend(self.header)
             try document.body()?.append(self.footer)
+            try document.body()?.append(self.frontEndDebugPanel)
             if let analyticsScript = self.analyticsScript {
                 try document.head()?.append(analyticsScript)
             }
@@ -109,10 +111,20 @@ struct DocumentationPageProcessor {
         ).render()
     }
 
-    var stylesheetLink: String {
-        Plot.Node.link(
-            .rel(.stylesheet),
-            .href(SiteURL.stylesheets("docc").relativeURL() + "?" + ResourceReloadIdentifier.value)
+    var stylesheetLinks: String {
+        Plot.Node.group(["docc", "shared"].map { stylesheetName -> Plot.Node<HTML.HeadContext> in
+                .link(
+                    .rel(.stylesheet),
+                    .href(SiteURL.stylesheets(stylesheetName).relativeURL() + "?" + ResourceReloadIdentifier.value)
+                )
+        }).render()
+    }
+
+    var javascriptLinks: String {
+        Plot.Node<HTML.HeadContext>.script(
+            .src(SiteURL.javascripts("shared").relativeURL() + "?" + ResourceReloadIdentifier.value),
+            .data(named: "turbolinks-track", value: "reload"),
+            .defer()
         ).render()
     }
 
@@ -280,6 +292,10 @@ struct DocumentationPageProcessor {
         ).render()
     }
 
+    var frontEndDebugPanel: String {
+        Plot.Node<HTML.BodyContext>.spiFrontEndDebugPanel(dataItems: []).render()
+    }
+
     var processedPage: String {
         do {
             return try document.html()