Making Firefox run as a bare content panel only 60px high using userChrome.css and localstore.rdf
I'm developing a web application for personal use, which due to extreme space constraints must be contained within a Firefox window measuring exactly 60px high by 331px wide. The window must have all the controls and bordering removed and appear as a totally bare pane whilst retaining the ability to move between tabs using CTRL-TAB.
So far I've managed to remove all the controls and bordering and retain the CTRL-TAB functionality using the custom userChrome.css style sheet pasted below. I've added a 1px border to the bottom and right for clarity. Making #navigator-toolbox visibility:hidden instead of display:none enables CTRL-TAB to work without the navigator-toolbox being visible. Giving #tab-view-deck -85px top margin aligns the top of the web page with the top of the Firefox window. Setting #browser-border-end, #browser-border-start display:none removes the effective border to the left and right of the browser window. So far so good.
I then set the following parameters in localstore.rdf in the profile folder.
<RDF:Description RDF:about="chrome://browser/content/browser.xul#main-window" height="149" width="331" screenX="0" screenY="0" sizemode="normal" />
The window appears perfectly at the top left of the screen and works exactly as specified. Unfortunately, when I reduce the height parameter to 60px, the window remains about 100px tall. I guess I'm missing some key important override rules in my userChrome.css or perhaps some other Firefox configuration settings need to be changed. Although it seems like a small difference, reducing the window from 100px to 60px will result in a massive design shift and a huge productivity gain. If you can help, I'd been extremely grateful. Thanks,
Neil
I'm using FF 33.0 and Windows 8.1.
Content of userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ #main-window { -moz-appearance:none !important; } #titlebar { display: none !important; } #tab-view-deck { border-bottom: 1px solid black !important; border-right: 1px solid black !important; margin: -85px 0px 0px 0px !important; padding: none !important; } #tab-view-deck * { border: none !important; margin: none !important; padding: none !important; } #navigator-toolbox { visibility: hidden !important; } #browser-border-end, #browser-border-start { display: none !important; }
added the forum code for displaying css code properly
Zmodyfikowany przez the-edmeister w dniu
Wszystkie odpowiedzi (1)
For some reason the userChrome.css has not posted correctly. Each instance of 1. should be replaced with # denoting an ID selector.