Does 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?
… (funda kabanzi)
Does 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
memu bar
page tabs bar
address bar along all add-on buttons
bookmarks sidebar
The "-kiosk" option is not appropriate for my needs.
-kiosk 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" 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!
As a test, 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. :frowning:
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.
- Basic HTML test page** *(myHtmlGame.html)* **:**
```
<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>
Box A
Box B
Box C
Box D
Box E
<script>
{what to I place here }
</script>
```
- 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. :-(
```
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 will display per the attached image.
