Skip to content

Commit ad2fbe7

Browse files
daveverwerdaveverwer
committed
Basics of a front-end debug console.
1 parent b7b7fbf commit ad2fbe7

File tree

8 files changed

+180
-17
lines changed

8 files changed

+180
-17
lines changed

‎FrontEnd/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $mobile-breakpoint: 740px;
2424
@import 'styles/build_monitor';
2525
@import 'styles/colors';
2626
@import 'styles/copyable_input';
27+
@import 'styles/debug_console';
2728
@import 'styles/error';
2829
@import 'styles/github_highlighting';
2930
@import 'styles/header_footer';

‎FrontEnd/scripts/controllers/debug_console_controller.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
import { Controller } from '@hotwired/stimulus'
16+
17+
export class DebugConsoleController extends Controller {
18+
connect() {
19+
console.log('DebugConsoleController connected')
20+
21+
// Debug console is Hidden by default. Make it visble by typing:
22+
// `localStorage.setItem('spiDebug', 'true');`
23+
// into the browser console.
24+
if (localStorage.getItem('spiDebug') === 'true') {
25+
this.element.classList.remove('hidden')
26+
}
27+
}
28+
29+
hide() {
30+
this.element.classList.add('hidden')
31+
}
32+
33+
disable() {
34+
this.element.classList.add('hidden')
35+
localStorage.setItem('spiDebug', 'false')
36+
}
37+
}

‎FrontEnd/scripts/controllers/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { PanelButtonController } from './panel_button_controller.js'
2121
import { UseThisPackagePanelController } from './use_this_package_panel_controller.js'
2222
import { BlogController } from './blog_controller.js'
2323
import { VegaChartController } from './vega_chart_controller.js'
24+
import { DebugConsoleController } from './debug_console_controller.js'
2425

2526
const application = Application.start()
2627
application.register('overflowing-list', OverflowingListController)
@@ -31,3 +32,4 @@ application.register('panel-button', PanelButtonController)
3132
application.register('use-this-package-panel', UseThisPackagePanelController)
3233
application.register('blog', BlogController)
3334
application.register('vega-chart', VegaChartController)
35+
application.register('debug-console', DebugConsoleController)

‎FrontEnd/styles/colors.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@
187187
--avatar-shadow: 0 2px 2px 3px rgba(0, 0, 0, 5%);
188188

189189
--rss-subscribe-color: var(--orange);
190+
191+
--debug-console-background: var(--light-blue);
192+
--debug-console-border: var(--grey);
193+
--debug-console-button-hover: var(--light-grey);
190194
}
191195

192196
// Dark mode.
@@ -309,5 +313,9 @@
309313
rgba(25, 25, 35, 0%) 50%,
310314
rgba(25, 25, 35, 100%) 100%
311315
);
316+
317+
--debug-console-background: var(--dark-blue);
318+
--debug-console-border: var(--light-grey);
319+
--debug-console-button-hover: var(--dark-grey);
312320
}
313321
}

‎FrontEnd/styles/debug_console.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Copyright Dave Verwer, Sven A. Schmidt, and other contributors.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
// -------------------------------------------------------------------------
16+
// Front End Debug Console
17+
// -------------------------------------------------------------------------
18+
19+
[data-controller='debug-console'] {
20+
position: fixed;
21+
bottom: 0;
22+
left: 0;
23+
right: 0;
24+
z-index: 1000;
25+
overflow-y: auto;
26+
max-height: 500px;
27+
min-height: 100px;
28+
background-color: var(--debug-console-background);
29+
border-top: 1px solid var(--debug-console-border);
30+
31+
h3 {
32+
margin: 5px;
33+
}
34+
35+
.buttons {
36+
position: absolute;
37+
top: 0;
38+
right: 0;
39+
display: flex;
40+
gap: 10px;
41+
padding: 5px;
42+
43+
button {
44+
cursor: pointer;
45+
padding: 2px 6px;
46+
font-size: 10px;
47+
color: var(--page-text);
48+
background: none;
49+
border: none;
50+
border: 1px solid var(--debug-console-border);
51+
border-radius: 50px;
52+
53+
&:hover {
54+
background-color: var(--debug-console-button-hover);
55+
}
56+
}
57+
}
58+
59+
[data-debug-console-target='data-grid'] {
60+
display: grid;
61+
grid-template-columns: 1fr 10fr;
62+
padding: 5px;
63+
font-size: 13px;
64+
65+
> *:nth-child(odd) {
66+
font-weight: 600;
67+
}
68+
}
69+
}

‎Sources/App/Views/PackageController/Builds/BuildShow+View.swift‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@ enum BuildShow {
4141
"Compatibility information for \(model.packageName). Check compatibility with \(model.buildInfo.swiftVersion.longDisplayName) on \(model.buildInfo.platform.displayName) with full build logs."
4242
}
4343

44-
override func bodyComments() -> Node<HTML.BodyContext> {
45-
.comment(model.versionId.uuidString)
44+
override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
45+
[
46+
.init(title: "Version ID", value: model.versionId.uuidString)
47+
]
4648
}
4749

4850
override func breadcrumbs() -> [Breadcrumb] {

‎Sources/App/Views/PackageController/PackageShow+View.swift‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,6 @@ extension PackageShow {
5151
"package"
5252
}
5353

54-
override func bodyComments() -> Node<HTML.BodyContext> {
55-
.group(
56-
.comment(model.packageId.uuidString),
57-
.comment(model.score.map(String.init) ?? "unknown")
58-
)
59-
}
60-
6154
override func breadcrumbs() -> [Breadcrumb] {
6255
[
6356
Breadcrumb(title: "Home", url: SiteURL.home.relativeURL()),
@@ -72,6 +65,13 @@ extension PackageShow {
7265
}
7366
}
7467

68+
override func frontEndDebugConsoleData() -> [PublicPage.DebugConsoleDataItem] {
69+
[
70+
.init(title: "Package ID", value: model.packageId.uuidString),
71+
.init(title: "Score", value: model.score.map(String.init) ?? "No score.")
72+
]
73+
}
74+
7575
override func content() -> Node<HTML.BodyContext> {
7676
.group(
7777
.div(

‎Sources/App/Views/PublicPage.swift‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,6 @@ class PublicPage {
238238
.class(bodyClass() ?? ""),
239239
.forEach(bodyAttributes(), { .attribute($0) }),
240240
preBody(),
241-
bodyComments(),
242241
stagingBanner(),
243242
header(),
244243
announcementBanner(),
@@ -248,16 +247,11 @@ class PublicPage {
248247
postMain(),
249248
footer(),
250249
stagingBanner(),
251-
postBody()
250+
postBody(),
251+
frontEndDebugConsole()
252252
)
253253
}
254254

255-
/// Any page level HTML comments for hidden metadata.
256-
/// - Returns: An element, or `group` of elements.
257-
func bodyComments() -> Node<HTML.BodyContext> {
258-
.empty
259-
}
260-
261255
/// A staging banner, which only appears on the staging/development server.
262256
/// - Returns: Either a <div> element, or nothing.
263257
final func stagingBanner() -> Node<HTML.BodyContext> {
@@ -458,6 +452,49 @@ class PublicPage {
458452
)
459453
}
460454

455+
/// Output a hidden-by-default panel on the page showing useful debug information
456+
/// - Returns: The HTML for the debug console element.
457+
final func frontEndDebugConsole() -> Node<HTML.BodyContext> {
458+
.div(
459+
.class("hidden"),
460+
.data(named: "controller", value: "debug-console"),
461+
.div(
462+
.class("buttons"),
463+
.button(
464+
.text("Hide"),
465+
.title("Temporarily hide this panel"),
466+
.data(named: "action", value: "click->debug-console#hide")
467+
),
468+
.button(
469+
.text("Disable"),
470+
.title("Disable the debug console"),
471+
.data(named: "action", value: "click->debug-console#disable")
472+
)
473+
),
474+
.h3("Debugging information"),
475+
.section(
476+
.data(named: "debug-console-target", value: "data-grid"),
477+
.group(
478+
frontEndDebugConsoleData().map({ dataItem -> Node<HTML.BodyContext> in
479+
.group(
480+
.div(
481+
.text(dataItem.title)
482+
),
483+
.div(
484+
.text(dataItem.value)
485+
)
486+
)
487+
})
488+
)
489+
)
490+
)
491+
}
492+
493+
/// Returns the debug information that a page would like to show in the front-end debug console.
494+
/// - Returns: An array of `DebugConsoleDataItem` structs that will be displayed by `frontEndDebugConsole()`.
495+
func frontEndDebugConsoleData() -> [DebugConsoleDataItem] {
496+
[]
497+
}
461498
}
462499

463500
extension PublicPage {
@@ -468,3 +505,10 @@ extension PublicPage {
468505
}
469506

470507
}
508+
509+
extension PublicPage {
510+
struct DebugConsoleDataItem {
511+
var title: String
512+
var value: String
513+
}
514+
}

0 commit comments

Comments
 (0)