From 93b6fac46888df89bbed86daf097360fa03d9ebb Mon Sep 17 00:00:00 2001 From: Sebastian Reinhard Date: Sun, 6 Dec 2020 10:13:19 +0100 Subject: [PATCH] nimdoc: Initialize theme switch and pragma dots on DOMContentLoaded (#16247) The default HTML template for nimdoc currently initializes the dark mode switch and pragma dots when the onload event is fired. But since the onload event does not fire until all external resources (images, stylesheets, fonts, etc.) have been loaded, the light theme is shown for a brief moment before the document is fully loaded, and it switches to the dark theme. This is quite jarring, especially on slower internet connections. So let's instead initialize these things on the DOMContentLoaded event, which is fired right after the document has been parsed and the initial DOM structure is ready. This means that we now display the dark mode immediately, without having to wait for external resources to load first. For reference, see: - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event - https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event I have updated the snapshot tests in `nimdoc/`, and done some manual testing of both the theme switch and the pragma dots, to confirm that this does not break anything. Please let me know if I've missed anything. --- config/nimdoc.cfg | 4 +++- nimdoc/rst2html/expected/rst_examples.html | 4 +++- nimdoc/test_out_index_dot_html/expected/index.html | 4 +++- nimdoc/test_out_index_dot_html/expected/theindex.html | 4 +++- nimdoc/testproject/expected/subdir/subdir_b/utils.html | 4 +++- nimdoc/testproject/expected/testproject.html | 4 +++- nimdoc/testproject/expected/theindex.html | 4 +++- 7 files changed, 21 insertions(+), 7 deletions(-) diff --git a/config/nimdoc.cfg b/config/nimdoc.cfg index e4b485ca0b..585b3cc49c 100644 --- a/config/nimdoc.cfg +++ b/config/nimdoc.cfg @@ -268,10 +268,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

$title

diff --git a/nimdoc/rst2html/expected/rst_examples.html b/nimdoc/rst2html/expected/rst_examples.html index 8a08e8df51..0b92076882 100644 --- a/nimdoc/rst2html/expected/rst_examples.html +++ b/nimdoc/rst2html/expected/rst_examples.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

Not a Nim Manual

diff --git a/nimdoc/test_out_index_dot_html/expected/index.html b/nimdoc/test_out_index_dot_html/expected/index.html index 65241d356f..35a5dfb56d 100644 --- a/nimdoc/test_out_index_dot_html/expected/index.html +++ b/nimdoc/test_out_index_dot_html/expected/index.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

foo

diff --git a/nimdoc/test_out_index_dot_html/expected/theindex.html b/nimdoc/test_out_index_dot_html/expected/theindex.html index b2863f99a1..aa9ca26458 100644 --- a/nimdoc/test_out_index_dot_html/expected/theindex.html +++ b/nimdoc/test_out_index_dot_html/expected/theindex.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

Index

diff --git a/nimdoc/testproject/expected/subdir/subdir_b/utils.html b/nimdoc/testproject/expected/subdir/subdir_b/utils.html index 40de645e35..27cef017b5 100644 --- a/nimdoc/testproject/expected/subdir/subdir_b/utils.html +++ b/nimdoc/testproject/expected/subdir/subdir_b/utils.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

subdir/subdir_b/utils

diff --git a/nimdoc/testproject/expected/testproject.html b/nimdoc/testproject/expected/testproject.html index ee09b46af2..a32e1180c6 100644 --- a/nimdoc/testproject/expected/testproject.html +++ b/nimdoc/testproject/expected/testproject.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

testproject

diff --git a/nimdoc/testproject/expected/theindex.html b/nimdoc/testproject/expected/theindex.html index 03d9c72fe0..978560e0f9 100644 --- a/nimdoc/testproject/expected/theindex.html +++ b/nimdoc/testproject/expected/theindex.html @@ -56,10 +56,12 @@ function main() { } } } + +window.addEventListener('DOMContentLoaded', main); - +

Index