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? I… (閱讀更多)
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">
- 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.