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.

tests/src/redbox.test.ts

@@ -0,0 +1,98 @@
+import { describe, it } from "mocha";
+import { expect, browser } from "@wdio/globals";
+
+describe("Red Box", () => {
+  const redBox = () => $("#aspect-ratio-helper");
+  const redBoxButton = () => $("#turn-off-red-box");
+
+  beforeEach(async () => {
+    await browser.url("/hello-world.html");
+    await browser.execute(() => sessionStorage.clear());
+    // Clear any lingering state (like inline styles) from previous
+    // tests. Reading https://webdriver.io/docs/api/browser/url,
+    // this should not be necessary, but tests fail without it.
+    await browser.refresh();
+  });
+
+  it("should be hidden by default", async () => {
+    await expect(redBox()).not.toBeDisplayed();
+  });
+
+  describe("Keyboard Shortcut", () => {
+    it("should show the red box when toggled on", async () => {
+      await browser.toggleRedBox();
+      await expect(redBox()).toBeDisplayed();
+      await expect(redBoxButton()).toBeDisplayed();
+    });
+
+    it("should hide the red box when toggled off", async () => {
+      // Toggle on first
+      await browser.toggleRedBox();
+      await expect(redBox()).toBeDisplayed();
+
+      // Then toggle off
+      await browser.toggleRedBox();
+      await expect(redBox()).not.toBeDisplayed();
+    });
+  });
+
+  describe("URL Parameter", () => {
+    it("should show red box", async () => {
+      await browser.url("/hello-world.html?show-red-box=true");
+      await expect(redBox()).toBeDisplayed();
+    });
+
+    it("should override session storage", async () => {
+      // Set session storage first to ensure the URL parameter takes precedence.
+      await browser.execute(() => sessionStorage.setItem("showRedBox", "true"));
+      await browser.url("/hello-world.html?show-red-box=false");
+      await expect(redBox()).not.toBeDisplayed();
+    });
+  });
+
+  describe("Hide Button", () => {
+    it("should hide the red box when clicked", async () => {
+      await browser.toggleRedBox();
+      await expect(redBox()).toBeDisplayed();
+
+      await (await redBoxButton()).click();
+      await expect(redBox()).not.toBeDisplayed();
+    });
+  });
+
+  describe("Session Storage", () => {
+    it("should persist being shown after a reload", async () => {
+      await browser.toggleRedBox();
+      await expect(redBox()).toBeDisplayed();
+
+      await browser.refresh();
+
+      await expect(redBox()).toBeDisplayed();
+    });
+
+    it("should persist being hidden after a reload", async () => {
+      await browser.toggleRedBox(); // turn on
+      await browser.toggleRedBox(); // turn off
+      await expect(redBox()).not.toBeDisplayed();
+
+      // Explicitly check that storage is cleared before reloading
+      const storage = await browser.execute(() =>
+        sessionStorage.getItem("showRedBox"),
+      );
+      expect(storage).toBeNull();
+
+      await browser.refresh();
+      await expect(redBox()).not.toBeDisplayed();
+    });
+  });
+
+  describe("Interactions", () => {
+    it("should be able to be hidden with the keyboard after being shown with the URL", async () => {
+      await browser.url("/hello-world.html?show-red-box=true");
+      await expect(redBox()).toBeDisplayed();
+
+      await browser.toggleRedBox();
+      await expect(redBox()).not.toBeDisplayed();
+    });
+  });
+});

tests/src/speaker-notes.test.ts

@@ -3,7 +3,17 @@ import { $, expect, browser } from "@wdio/globals";
 
 describe("speaker-notes", () => {
   beforeEach(async () => {
-    await browser.url("/");
+    await browser.url("/welcome-day-1.html");
+    await browser.refresh();
+  });
+
+  afterEach(async () => {
+    const handles = await browser.getWindowHandles();
+    if (handles.length > 1) {
+      await browser.switchToWindow(handles[1]);
+      await browser.closeWindow();
+      await browser.switchToWindow(handles[0]);
+    }
   });
 
   it("contains summary with heading and button", async () => {
@@ -17,7 +27,7 @@ describe("speaker-notes", () => {
     const details$ = await $("details");
     const button$ = await $("details summary .pop-out");
     await expect(details$).toBeDisplayed();
-    button$.scrollIntoView();
+    await button$.scrollIntoView();
     await button$.click();
     await expect(details$).not.toBeDisplayed();
 
@@ -28,4 +38,16 @@ describe("speaker-notes", () => {
       expect.stringContaining("#speaker-notes-open"),
     );
   });
+
+  it("should not show the red box in the speaker notes window", async () => {
+    const button$ = await $("details summary .pop-out");
+    await button$.scrollIntoView();
+    await button$.click();
+
+    const handles = await browser.getWindowHandles();
+    await browser.switchToWindow(handles[1]);
+
+    const redBox = await $("#aspect-ratio-helper");
+    await expect(redBox).not.toExist();
+  });
 });