Re-enable the red box to show available space (#2932)

Way back in #187, I introduced a hacky tool to show the available space
on a slide: it was a `mdbook` plugin which injected the necessary CSS on
each slide. Crude, but it got the job done.

The logic was moved from Python to a real CSS file with associated
JavaScript in #1842. In #1917, the functionality was moved to a
dedicated “instructor menu”, together with functionality for saving the
state of the Playground on each slide.

Unfortunately, the whole thing was disabled in #1935 since I found that
the Playgrounds lost their code with the saving logic. I was also not
100% happy with dedicating space on each slide for a menu only used by
instructors.

However, I really think we need a tool to let slide editors know about
the available space, so I would like to re-introduce the red box. This
time via a keyboard shortcut to make it easy to toggle as needed.

I’m suggesting enabling this for everyone, with the expectation that
most people won’t find the shortcut and will quickly disable the box if
they do (there is a dedicated button to hide it again).

End-to-end tests have been added for the new functionality.

theme/css/redbox.css

@@ -8,7 +8,8 @@ div#aspect-ratio-helper {
 }
 
 div#aspect-ratio-helper div {
-  outline: 3px dashed red;
+  position: relative;
+  outline: 2em solid rgba(255, 0, 0, 0.2);
   margin: 0 auto;
   /* At this width, the theme fonts are readable in a 16
        person conference room. If the browser is wider, the
@@ -19,6 +20,16 @@ div#aspect-ratio-helper div {
   aspect-ratio: 16/8.5;
 }
 
-#instructor-menu-list {
-  margin-left: 55px;
+#turn-off-red-box {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  z-index: 10000;
+  padding: 10px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  pointer-events: auto;
 }

theme/instructor-menu.js

@@ -1,71 +0,0 @@
-(function handleInstructor() {
-  function handleInstructorMenu() {
-    let leftButtons = document.getElementsByClassName("left-buttons")[0];
-    let instructorMenu = document.createElement("button");
-    let instructorMenuList = document.createElement("ul");
-    let redBoxItem = document.createElement("li");
-    let redBoxButton = document.createElement("button");
-    let playgroundStateItem = document.createElement("li");
-    let playgroundStateButton = document.createElement("button");
-
-    leftButtons.insertBefore(instructorMenu, leftButtons.lastChild);
-    leftButtons.insertBefore(instructorMenuList, leftButtons.lastChild);
-    instructorMenuList.insertBefore(redBoxItem, instructorMenuList.lastChild);
-    instructorMenuList.insertBefore(
-      playgroundStateItem,
-      instructorMenuList.lastChild,
-    );
-    redBoxItem.insertBefore(redBoxButton, redBoxItem.lastChild);
-    playgroundStateItem.insertBefore(
-      playgroundStateButton,
-      playgroundStateItem.lastChild,
-    );
-
-    instructorMenu.title = "Utilities for course instructors";
-    instructorMenu.innerHTML =
-      '<i class="fa fa-ellipsis-v" aria-hidden="true"></i>';
-    redBoxButton.innerHTML = "aspect-ratio box";
-    redBoxButton.title =
-      "Outline the area that fits on one screen while teaching the course.";
-    playgroundStateButton.innerHTML = "reset all playgrounds";
-    playgroundStateButton.title =
-      "Reset code in all playgrounds to its original value.";
-
-    instructorMenu.className = "icon-button";
-    instructorMenuList.className = "theme-popup";
-    redBoxButton.className = "theme";
-    playgroundStateButton.className = "theme";
-    instructorMenuList.style.display = "none";
-
-    instructorMenuList.role = "menu";
-    redBoxItem.role = "none";
-    playgroundStateItem.role = "none";
-    redBoxButton.role = "menuitem";
-    playgroundStateButton.role = "menuitem";
-
-    redBoxButton.id = "redbox";
-    instructorMenuList.id = "instructor-menu-list";
-    playgroundStateButton.id = "playground-state";
-
-    instructorMenu.addEventListener("click", () => {
-      if (instructorMenuList.style.display === "none") {
-        instructorMenuList.style.display = "block";
-      } else {
-        instructorMenuList.style.display = "none";
-      }
-    });
-
-    document.addEventListener("click", (e) => {
-      if (!instructorMenu.contains(e.target)) {
-        instructorMenuList.style.display = "none";
-      }
-    });
-  }
-  handleInstructorMenu();
-  var redBoxButton = document.getElementById("redbox");
-  var playgroundStateButton = document.getElementById("playground-state");
-  redBoxButton.addEventListener("click", () => window.redboxButtonClicked());
-  playgroundStateButton.addEventListener("click", () =>
-    window.resetPlaygroundsClicked(),
-  );
-})();

theme/redbox.js

@@ -1,29 +1,61 @@
-(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);
-  //Default hiding the redbox
-  document.getElementById("aspect-ratio-helper").style.display = "none";
-})();
-
-//Create a function to button to perform on click action.
-function redboxButtonClicked() {
-  var hideShowButton = document.getElementById("redbox");
-  if (document.getElementById("aspect-ratio-helper").style.display === "none") {
-    document.getElementById("aspect-ratio-helper").style.display = "block";
-    hideShowButton.innerHTML = "aspect-ratio box";
-  } else {
-    document.getElementById("aspect-ratio-helper").style.display = "none";
-    hideShowButton.innerHTML = "aspect-ratio box";
+(function () {
+  if (window.location.hash === "#speaker-notes-open") {
+    return;
   }
-}
-window.redboxButtonClicked = redboxButtonClicked;
+
+  const redBox = document.createElement("div");
+  redBox.id = "aspect-ratio-helper";
+  redBox.style.display = "none"; // Initially hidden
+
+  const nestedDiv = document.createElement("div");
+  redBox.appendChild(nestedDiv);
+
+  const turnOffButton = document.createElement("button");
+  turnOffButton.id = "turn-off-red-box";
+  turnOffButton.textContent = "Hide Red Box";
+  nestedDiv.appendChild(turnOffButton);
+
+  document.body.prepend(redBox);
+
+  const storageKey = "showRedBox";
+
+  const turnOff = () => {
+    redBox.style.display = "none";
+    sessionStorage.removeItem(storageKey);
+  };
+
+  const turnOn = () => {
+    sessionStorage.setItem(storageKey, "true");
+    redBox.style.display = "block";
+  };
+
+  const toggleRedBox = () => {
+    if (redBox.style.display === "none") {
+      turnOn();
+    } else {
+      turnOff();
+    }
+  };
+
+  document.addEventListener("keydown", (event) => {
+    // Toggle the red box with Ctrl+Alt+B
+    if (event.ctrlKey && event.altKey && event.key === "b") {
+      event.preventDefault();
+      toggleRedBox();
+    }
+  });
+
+  turnOffButton.addEventListener("click", turnOff);
+
+  // Check initial state from URL parameter or session storage
+  const searchParams = new URLSearchParams(window.location.search);
+  const showRedBoxParam = searchParams.get("show-red-box");
+
+  if (showRedBoxParam === "true") {
+    turnOn();
+  } else if (showRedBoxParam === "false") {
+    turnOff();
+  } else if (sessionStorage.getItem(storageKey) === "true") {
+    turnOn();
+  }
+})();