Inline JavaScript to hide bookmarks sidebar upon opening new browser instance
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? … (kàsi)
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>
- 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 will display per the attached image.