Anybody know which options to use on the command-line start of Firefox such that the only thing displayed is the area within which an HTML page would be presented?
I want to have it start with everything else turned off or hidden, namely
The "-kiosk" option does not work.
Have you tried firefox -kiosk -private-window [URL] where [URL] is the page you want viewed?
Odd that -kiosk didn't work for you. It did for me. I'm running version 135.0 (64-bit). Are you current?
I will check it out. Thanks.
-kiosk (tried that before posting) doesn't hide the sidebar (Bookmarks or not) if that sidebar was visible during last session before exit ... so ... no, "-kiosk" is not a proper implementation of a "page-only" display mode.
"-private-window" (tried that before posting) gives no benefit, display-wise, over and above what the "-new-window" option provides.
Everything I've read (even on the Mozilla support site) seems to point to creating a special profile for just that mode, and then to modify the "userChrome.css" file with custom properties to ensure the desired "off" setting for the GUI elements. That seems a rather "small-minded" view, ignoring the potential for huge market of self-contained hard-coded applications that would need only use the Firefox rendering engine, and nothing else!
One comment on Reddit indicated that the functionality was there ("-app" option working with XULrunner), but discontinued! 
Could it be that you have an added extension that may be interfering with the -kiosk mode? I have only the three that Firefox recommends plus one other, and I can invoke kiosk mode easily. In fact, once I'm in it, I can't easily get out of it! 
Thank you, Fred, for digging in.
I did close all my browsers, leaving the bookmark sidebar visible before closing. I then entered:
firefox -kiosk -safe-mode -private-window ${URL}
I still get the bookmark-sidebar visible, with everything else "hidden" or "disabled", because visible sidebar is my default mode for normal browsing.
Is there no command-line startup switch to force that sidebar to "hide", equivalent to clicking on the "X" on the top-right corner?
OR ...
Is there any programmatic way to tell that to hide using JavaScript in the HTML page that is loaded? Everything I seem to locate refer to in-page Elements only, not Browser Elements.
But "kiosk"(fullscreen-mode) is not the mode I want, because I want users to be able to have the simplified browser-based HTML App co-exist on the desktop with other windows, like a normal App.
Maybe this reddit discussion has the solution for you if I understood your question correctly:
https://www.reddit.com/r/FirefoxCSS/comments/lhoh0b/is_there_a_way_to_hideshow_all_ui_elements_and/
Thank you, Alarik, for locating that for me.
I had already been studying that same page reference for 3 days, and can't make enough sense of it to make it work for me.
Basic HTML test page (myHtmlGame.html) :
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>myHtmlGame.html</title>
<link href="myHtmlGame_bookmarks.css" rel="stylesheet" type="text/css" />
<script src="myHtmlGame_bookmarks.js" type="text/javascript" > </script>
</head>
<body>
<div class="game-grid" >
<div id="boxA" class="game-item-1" > Box A </div>
<div id="boxB" class="game-item-2" > Box B </div>
<div id="boxC" class="game-item-3" > Box C </div>
<div id="boxD" class="game-item-4" > Box D </div>
<div id="boxE" class="game-item-5" > Box E </div>
</div>
<script>
{what to I place here }
</script>
</body>
</html>
Basic Javascript file (myHtmlGame_bookmarks.js) :
// REF: https://stackoverflow.com/questions/1690002/how-can-i-prevent-firefox-showing-my-extensions-sidebar-on-startup
var current = this;
var quitObserver = {
QueryInterface: function(aIID) {
if (aIID.equals(Components.interfaces.nsIObserver) || aIID.equals(Components.interfaces.nsISupports)) {
return this;
}
throw Components.results.NS_NOINTERFACE;
},
observe: function(aSubject,aTopic,aData ) {
var mainWindow = current._windowMediator.getMostRecentWindow("navigator:browser");
var sidebar = mainWindow.document.getElementById("sidebar");
if (sidebar.contentWindow.location.href == "chrome://daisy/content/sidebar.xul") {
mainWindow.toggleSidebar('openDaisySidebar', false);
}
}
};
setTimeout(function() {
var mainWindow = current._windowMediator.getMostRecentWindow("navigator:browser");
var observerService = Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService);
observerService.addObserver(quitObserver,"quit-application-granted",false);
},2000);
I've tried using this alternative content for the JavaScript file, but that also failed (using 'hideSidebarBookmarks()' call in the in-line script segment):
function hideSidebarBookmarks() {
const sidebar = document.getElementById("CustomizableUI.AREA_BOOKMARKS") ;
sidebar.hide() ;
}
I even tried replacing the word "document" with "browser" in the above, still with no success.
Startup command :
firefox -new-window ./myHtmlGame.html &
Basic CSS file (myHtmlGame_bookmarks.css) :
html {
font-size: 14px ;
font-family: "Liberation Sans", "Aileron", "Archivo", FreeSerif, serif ;
line-height: 1.2em ;
}
body {
display: block ;
background-color: #1F1F1F ;
color: #FF0000 ;
margin-top: 0 ;
margin-right: 0 ;
margin-bottom: 0 ;
margin-left: 0 ;
}
/*
************************************************************************
*/
.game-grid {
display: grid ;
grid-template-columns: 300px 300px 60px ;
grid-template-rows: 40px 300px 150px ;
}
.game-item-1 {
grid-column: 1 / span 3 ;
grid-row: 1 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-2 {
grid-column: 3 / span 1 ;
grid-row: 2 / span 2 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-3 {
grid-column: 1 / span 2 ;
grid-row: 2 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
.game-item-4 {
grid-column: 1 / span 1 ;
grid-row: 3 / span 1 ;
/*
box-sizing: border-box ;
*/
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
padding-left: 3 em ;
display: block ;
color: #FFCF4F ;
word-wrap: break-word ;
/*
overflow-y: scroll ;
overflow-y: auto ;
*/
overflow-anchor: none ;
scrollbar-color: grey-black ;
scrollbar-width: thin ;
scroll-padding-bottom: 20px ;
/* In case you need to kick off effect immediately, this plus JS */
/*
height: 100.001vh ;
*/
}
.game-item-5 {
grid-column: 2 / span 1 ;
grid-row: 3 / span 1 ;
border: 1px solid #8FCF8F ;
background-color: #1F1F1F ;
}
div {
padding-top: 1 em ;
padding-right: 0 ;
padding-bottom: 1 em ;
padding-left: 0 ;
}
The above should come up looking like this:
May be you would be interested in a bit different approach. To avoid complexities of browser's kiosk mode some people prefer to embed browser as a widget in very basic application. E.g.
BTW, TkInter (Tcl/Tk 4 Python) and QT have such widgets.
Have you tried pressing CTRL + Shift + J and then in browser console run this commands:
// Hide UI elements
document.getElementById("nav-bar").hidden = true; // Hides the navigation bar
document.getElementById("TabsToolbar").hidden = true; // Hides the tab bar
document.getElementById("titlebar").style.display = "none"; // Hides title bar
To return to normal code I found is:
// Show UI elements again
document.getElementById("nav-bar").hidden = false;
document.getElementById("TabsToolbar").hidden = false;
document.getElementById("titlebar").style.display = "";
Hope this might help - I don't really want to try to replicate it myself since I'm not sure if I would be able to restore it to normal but I hope its the solution you've been looking for
EDIT: I also found this link so it may be of interest:
Thank you, Alarik. That seems promising, but not doing what I need.
If we refer to this image,
those 3 lines only made Elements 3 and 4 disappear. When I used the identifier "sidebar" for another line, it hides the content under zone 6, but I was hoping it would hide zone 5 including zone 6, as if you clicked on that "X".
More importantly, if I try to use those as inline Javascript within the "script" tag, they have no effect!
In the end, I would like to force hide all of 2-6, leaving only 1 visible.
Where could I find the identifier for those elements, because I've tried to find that, and failed on my own, digging into the MDN site.
Thank you, Eugene. While I appreciate the suggestion, I am not sure that I am quite ready yet to jump into that new arena. I'm hoping I can stick with controlling the Firefox GUI, then move on to Chrome, before tackling other browsers or rendering engines. If Firefox were to adopt WebKit to replace its own Gekko, then I would have jumped all over that. But as far as I know, that isn't the case (yet?).
If you're looking to build something that runs locally like a desktop app, I'd second @ugnvs's (and Reddit suggestion) to make a lightweight Python script which uses either WebKitGTK or QWebEngine (based on Chromium). There's also Electron (Chromium). That way, you have full control over the window, and everyone using it will have a consistent experience with your web app/game.
Fun fact! Ubuntu MATE Welcome was a WebKitGTK program.
I gave up a long time ago with Firefox having site-specific windows (especially for PWAs). It was once possible, but they removed the feature. The only embedded Gecko I can recall is Wine's Internet Explorer! 
It is possible to programmatically open a window with the minimal interface. You will need a new intermediary page like "Start your adventure" with a button.
<button onclick="window.open('mypage2.html', '', 'popup=true,toolbar=no,location=no,menubar=no,scrollbars=no,resizable=no,status=no');">Start!</button>
Clicking "Start" would open mypage2.html in a new window using window.open() with the most stripped down browser frame allowed:
This is the closest you can get to a minimal window. For security reasons, websites can't touch browser elements. Firefox and Chrome always show the address bar for their minimal "pop up" windows — Imagine if malware could just fake the back button so you may never leave! 
@lah7, @ugnvs, thank you both.
So ... if I were to commit to WebKit,
is it a reasonable expectation to have WebKit libraries available on all computers (as opposed to Chrome/Firefox base) ?
am I building from ground up, or is there much that can be leveraged (learnings, examples, snippets) if I take the approach of building the app as a bundled implementation of Epiphany ?
If I go that route, I'm venturing into new territory and am unsure about the learning curve for that architecture/context.
You are correct. Distribution of an application is not a painless experience. No one can ensure that all necessary libraries are installed and/or compatible with an application in question. That is why they invented such approaches as
appimage and snap do.
Since you really want to make it work - are you adamant in using Firefox as a browser or would you be open to suggestions since as I browsed around searching for answers I saw that people recommend Vivaldi browser as it has all those "Hide browser window UI" out of the box
I mean I don't use it myself but here is the link:
https://help.vivaldi.com/desktop/appearance-customization/hide-browser-windows-user-interface/
I mean - if it works it works only problem I really see is on the ethics side if one is adamant in not using non-open source since Vivaldi is not completely but only "mostly" open source as Internet tells me
Although, the easiest distribution could just be a lightweight Debian package with a dependency on [Python, WebKitGTK, etc] so it uses what's installed on the system. That said, things may vary depending on Ubuntu release.
Methods like AppImage, Snap and a single packed executable would use a tremendous amount of disk space as it pretty much needs to carry its own web browser. 
I guess which solution to go for depends on @ericmarceau's use case - is it built for fun? For distribution/sharing? Or just something that should run in anyone's web browser with as little window controls as possible?
Hi Eric,
I don't know if this is of any help but I once had to create a narrowcasting solution and needed a HTML output without UI elements.
I chose the 'qupzilla' browser for this because firefox could not cut it (and was too heavyweight)
To start it I used this command:
qupzilla -display :0 -fs -ne -ct="$html_page"
In the meantime, 'qupzilla' has been renamed to 'falkon' and some things have been changed so I don't know if this solution is still viable,
EDIT: What you want is (AFAIK) known as a headless browser
Using this as a searchengine search term will be reaping the most results.
You might want to take a peek here:
GitHub - dhamaniasad/HeadlessBrowsers: A list of (almost) all headless web browsers in existence
So, to answer Luke's question of the "use case", the answer is
Can WebKitGTK be considered universally available
[a] on all Linux distros, or
[b] beyond Linux ecosystem
Has anyone seen numbers on degree of penetration into the various development ecosystems ?