Add a dev theme to help with slide aspect ratio (#1842)

Added a dev theme to help with slide aspect ratio while updating content
or for reviewing PRs.

Fixes #1796.

---------

Co-authored-by: Dustin J. Mitchell <djmitche@google.com>
Co-authored-by: Martin Geisler <martin@geisler.net>

.github/workflows/build.sh

@@ -37,6 +37,10 @@ else
 fi
 
 mdbook build -d "$dest_dir"
+
+# Disable the redbox button in built versions of the course
+echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/redbox.js"
+
 mv "$dest_dir/pandoc/pdf/comprehensive-rust.pdf" "$dest_dir/html/"
 (cd "$dest_dir/exerciser" && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/)
 

STYLE.md

@@ -15,14 +15,9 @@ important to keep this in mind when adding content: we only have limited
 vertical space. Scrolling up and down should be avoided since it is very jarring
 for people who attend the class.
 
-You can test the amount of space available using a simple tool. Uncomment these
-lines in the `book.toml` file to have a red rectangle rendered on top of all
-pages:
-
-```toml
-[preprocessor.aspect-ratio-helper]
-command = "./aspect-ratio-helper.py"
-```
+You can test the amount of space available using a simple tool. This tool can be
+used by clicking a toggle button next to the search button on left side of the
+navbar.
 
 The rectangle has an aspect ratio similar to what you can see when you share
 your screen on a 16:9 display or projector.

book.toml

@@ -22,13 +22,6 @@ class = "bob"
 [preprocessor.course]
 verbose = false # Report timing information.
 
-# Enable this preprocessor to overlay a large red rectangle on the
-# pages. This will show you an estimate of what the course
-# participants can see during the presentation.
-#
-# [preprocessor.aspect-ratio-helper]
-# command = "./aspect-ratio-helper.py"
-
 [output.pandoc]
 optional = true
 hosted-html = "https://google.github.io/comprehensive-rust/"
@@ -47,9 +40,10 @@ urlcolor = "red"
 
 [output.html]
 curly-quotes = true
-additional-js = ["theme/speaker-notes.js"]
+additional-js = ["theme/speaker-notes.js", "theme/redbox.js"]
 additional-css = [
   "theme/css/svgbob.css",
+  "theme/css/redbox.css",
   "theme/css/speaker-notes.css",
   "theme/css/language-picker.css",
   "theme/css/rtl.css",

theme/css/redbox.css

@@ -0,0 +1,20 @@
+div#aspect-ratio-helper {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+div#aspect-ratio-helper div {
+  outline: 3px dashed red;
+  margin: 0 auto;
+  /* At this width, the theme fonts are readable in a 16
+       person conference room. If the browser is wider, the
+       text becomes too small to be legible. */
+  max-width: 980px;
+  /* On a standard 16/9 monitor, we expect to lose a bit
+       of vertical space to borders. */
+  aspect-ratio: 16/8.5;
+}

theme/redbox.js

@@ -0,0 +1,38 @@
+(function redBoxButton() {
+  // Create a new div element
+  var newDiv = document.createElement("div");
+  // Set the id attribute of the new div
+  newDiv.id = "aspect-ratio-helper";
+  // Create a nested div inside the new div
+  var nestedDiv = document.createElement("div");
+  // Append the nested div to the new div
+  newDiv.appendChild(nestedDiv, newDiv.firstChild);
+  // Get the parent element where you want to append the new div
+  var parentElement = document.body; // Change this to your desired parent element
+  // Append the new div to the parent element
+  parentElement.insertBefore(newDiv, parentElement.firstChild);
+  // Create the button element
+  var hideShowButton = document.createElement("button");
+  hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
+  hideShowButton.className = "icon-button";
+  hideShowButton.type = "button";
+  hideShowButton.title =
+    "Outline the area that fits on one screen while teaching the course.";
+  hideShowButton.id = "Dev";
+  var navbarButtons = document.getElementsByClassName("left-buttons");
+  navbarButtons[0].insertBefore(hideShowButton, navbarButtons.firstChild);
+  //Default hiding the redbox
+  document.getElementById("aspect-ratio-helper").style.display = "none";
+  //Add Event listener to button to perform on click action.
+  hideShowButton.addEventListener("click", function () {
+    if (
+      document.getElementById("aspect-ratio-helper").style.display === "none"
+    ) {
+      document.getElementById("aspect-ratio-helper").style.display = "block";
+      hideShowButton.innerHTML = '<i class="fa fa-square"></i>';
+    } else {
+      document.getElementById("aspect-ratio-helper").style.display = "none";
+      hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
+    }
+  });
+})();