Toggle #navigator-toolbox visibility using a keypress?

[whatNoHttps?]

Hi all.

tl:dr:
Can I toggle #navigator-toolbox visibility between "collapse" and "visible" using a keypress?

Full story:

I'm a language teacher and I now teach over Zoom, so I'm writing a really simple html5/css game (hide/reveal-type stuff) to teach vocabulary to my students. I share the firefox window over Zoom so my students watch the game (the firefox window) and give me the answers, but it's me that does all the keyboard interaction.

Normally, a firefox window shows the tab bar and url bar(/awesome bar/mega bar/whatever it's called this year) at the top of the screen, but I'd prefer to only "send" (share) the page itself (which contains the "game") without "sending" (sharing) the tab bar and url bar.

I've tried firefox's kiosk mode, but as it makes the browser window take up the whole screen, I can obviously no longer see my students.

I've spent a couple of days searching, and I've found that if I enable userChrome.css and use the following:

Code: Select all

#navigator-toolbox {
  visibility:collapse
}

then hey, I get exactly the effect that I'm looking for - Brilliant!! I can now load up the game, etc, etc and share the window over zoom, and all is good. It's just that it's a PITA trying to do this *during* a lesson while I'm trying to "manage" a dozen screaming 8-year-olds (it really is "Kindergarten Cop" over Zoom).

It would be easier if I could start a normal browser, load up the game, share the window, then press Ctrl-<someKey> to toggle the unwanted chrome (presumably using userChrome.css?) Is there an easy way (hey, I'm a language teacher!) to bind a keypress to something that would make the unwanted chrome disappear?

Thanks for any help you can offer.

[morat]

Try this:

Code: Select all

(function () {
  window.__unique_identifier_toggle_toolbox = function (event) {
    var toolbox = document.getElementById("navigator-toolbox");
    var isCollapsed = toolbox.getAttribute("collapsed") == "true";
    if (isCollapsed) toolbox.removeAttribute("collapsed");
    else toolbox.setAttribute("collapsed", "true");
  };
  var keyset = document.getElementById("mainKeyset");
  var key = document.createXULElement("key");
  key.setAttribute("id", "__unique_identifier_key_toggle_toolbox");
  key.setAttribute("keycode", "VK_F1");
  key.setAttribute("oncommand", "__unique_identifier_toggle_toolbox(event);");
  keyset.appendChild(key);
})();

Instructions:

* open about:config page
* set devtools.chrome.enabled preference to true
* open browser console i.e. tools > web developer > browser console
* copy and paste code into browser console command line
* press enter to run
* focus browser window
* press f1 to test

Remember to restart the application before running the code because there is an odd bug that if you press f1 before running the code, then pressing f1 after running the code won't work.

If you're already using the f1 shortcut, then you would have to unbind the f1 shortcut or use another shortcut.

Firefox shortcuts
http://support.mozilla.org/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

Similar thread: viewtopic.php?p=14845838#p14845838