nimdoc: Initialize theme switch and pragma dots on DOMContentLoaded (#16247)

sebbert · web-flow · commit 93b6fac46888 · 2020-12-06T10:13:19.000+01:00
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.
diff --git a/config/nimdoc.cfg b/config/nimdoc.cfg
@@ -268,10 +268,12 @@ function main() {
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">$title</h1>
diff --git a/nimdoc/rst2html/expected/rst_examples.html b/nimdoc/rst2html/expected/rst_examples.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">Not a Nim Manual</h1>
diff --git a/nimdoc/test_out_index_dot_html/expected/index.html b/nimdoc/test_out_index_dot_html/expected/index.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">foo</h1>
diff --git a/nimdoc/test_out_index_dot_html/expected/theindex.html b/nimdoc/test_out_index_dot_html/expected/theindex.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">Index</h1>
diff --git a/nimdoc/testproject/expected/subdir/subdir_b/utils.html b/nimdoc/testproject/expected/subdir/subdir_b/utils.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">subdir/subdir_b/utils</h1>
diff --git a/nimdoc/testproject/expected/testproject.html b/nimdoc/testproject/expected/testproject.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">testproject</h1>
diff --git a/nimdoc/testproject/expected/theindex.html b/nimdoc/testproject/expected/theindex.html
@@ -56,10 +56,12 @@
     }
   }
 }
+
+window.addEventListener('DOMContentLoaded', main);
 </script>
 
 </head>
-<body onload="main()">
+<body>
 <div class="document" id="documentId">
   <div class="container">
     <h1 class="title">Index</h1>

Original file line number	Diff line number	Diff line change
`@@ -268,10 +268,12 @@ function main() {`
`268`	`268`	`}`
`269`	`269`	`}`
`270`	`270`	`}`
	`271`	`+`
	`272`	`+window.addEventListener('DOMContentLoaded', main);`
`271`	`273`	`</script>`
`272`	`274`
`273`	`275`	`</head>`
`274`		`-<body onload="main()">`
	`276`	`+<body>`
`275`	`277`	`<div class="document" id="documentId">`
`276`	`278`	`<div class="container">`
`277`	`279`	`<h1 class="title">$title</h1>`
Original file line number	Diff line number	Diff line change
`@@ -56,10 +56,12 @@`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`	`}`
	`59`	`+`
	`60`	`+window.addEventListener('DOMContentLoaded', main);`
`59`	`61`	`</script>`
`60`	`62`
`61`	`63`	`</head>`
`62`		`-<body onload="main()">`
	`64`	`+<body>`
`63`	`65`	`<div class="document" id="documentId">`
`64`	`66`	`<div class="container">`
`65`	`67`	`<h1 class="title">Not a Nim Manual</h1>`