Of course, these can be migrated to the userChrome.css file. To keep everything tidy up, the few CSS styles I have to perform for the mod are actually done in that script file as well, using JavaScript. So, I used xiaoxiaoflood’s loader available here.Īfter you install that, all that is left to do is to create a new JS script which will do the actual DOM modifications. The problem is how do you do so nowadays, after the numerous architectural changes? Well, Firefox still has a mechanism that allows creating a framework for custom JS injection that is meant for enterprise customizations, autoconfig.js.Īround this, people build loaders for custom JS in the user profile folder. The chrome of Firefox being built using web technologies, you can of course run JavaScript on it. And it is a mere workaround for what is actually required: altering the DOM and moving the menu bar element under the address bar element. I am no expert in CSS, so I tend to stay off complicated solutions, and this certainly gets pretty complicated when you think about all the edge cases. Basically, someone suggested that I may play around with the positioning using the position: relative trick. So, what’s the solution? I will first explain what I haven’t tried. The menu bar is actually a child of the title bar (which includes the tabs), so changing its position from using moz-box-ordinal-group would allow me to have the address bar and navigation buttons on top, and tabs and the menus at the bottom. Sure enough, one can quickly identify the elements that we need to deal with, but the problem is that, even with tricks like moz-box-ordinal-group that can reorder stuff, it cannot do so if the things are not on the same level (have the same parent). Once that’s done, you can peek at the DOM of the Firefox window. The feature is called Browser Toolbox, and you can activate it as described here. Now, how do you find out the elements in the UI? Well, besides being able to ‘inspect’ pages, the F12 Developer Tools allow you to actually inspect the whole window. Once that is in place, you can override the rules for any element in the UI. So, the first step is to enable the use of userChrome.css in Firefox as described here. Plus, Firefox is the true libre browser, and it is actually a very good product, so, why not make the switch already?Īnyway, enough of the background, how do you do this? Well, Firefox’s UI is amazingly written in Web technologies (and has been so since the Netscape days, which is even more impressing), so the layout is described by CSS, naturally. I use Windows 10 daily and have long wanted to switch to Firefox, which is my choice when using GNU/Linux because it supports Wayland and has recently added support for hardware video decoding. Then, Chrome came along and the reality today is that Chrome is the new IE, for better or for worse. I have used Firefox in the past, back in the days when you could skin it to look like Internet Explorer 8 (indeed, that’s Firefox, not actual IE8 which looked like this) for example. This article shows a potential solution, which invloves injecting custom CSS and JavaScript in Firefox’s chrome. I don’t want to enable the window manager’s title bar, because that way I lose Fitt’s Law benefits when the window is maximized and can quickly switch tabs. The problem is, it kind of ruins the design, because it is drawn at the very top of the window. To be honest, Firefox is really great, providing much better font rendering when compared to Chromium (yet still a bit worse than Internet Explorer!), and amazingly, it still even includes a functional menu bar so you are not forced to deal with the one-menu-to-rule-them-all approach of the hamburger button. So, I have now officially walked away from Chromium-based forks into the truly libre Mozilla territory. I have recently rethought my choices regarding the applications I use on a day to day basis.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |