How can I modify the actual HTML code of Firefox's user interface?
I'm trying to alter the actual layout of Firefox's user interface, not the CSS style. So I'm aware of userChrome.css which allows me to change the style of the UI elements, and I couldn't switch a HTML attribute "hidden = "true"" of "window-controls" element through CSS means.
I tried with "visibility" but the HTML attribute of "hidden = "true"" simply overrides it no matter what. I'm a new Firefox user, and I have the Nightly version and I'm using right now the Browser Toolbox on the fly to modify userChrome.css, but as far as I know, HTML edits have no place in CSS files, yet the attribute I'm trying to change is in HTML.
In the past Firefox could run userChrome.js with some extension, but it is no longer available, pity, I could edit literally everything through JavaScript so easily. But I'm also aware of that it could be a serious security breach if someone could actually inject JS code into my .js customization file so I totally realize why Firefox no longer supports that.
Chosen solution
Why not:
#window-controls[hidden="true"] {
display: -moz-box !important;
}
Read this answer in context
👍 1
All Replies (8)
What item(s) are you trying to modify?
You can inspectthe Firefox source code on the DXR website.
cor-el said
What item(s) are you trying to modify? You can inspectthe Firefox source code on the DXR website.
The exact element id is "window-controls", it is hidden by default and is located right after the hamburger menu, you can find this through the Browser Toolbox by inspecting the browser itself.
I can inspect everything I need from the Browser Toolbox (Ctrl+Shift+Alt+I) so I don't believe I need the source code of Firefox. However, I need a way to alter some of the UI layout which is beyond CSS' capabilities.
jscher2000 said
Pssst... What is userChrome.js?
I'm aware of that, it's a potential for a serious security breach and I've already mentioned it in the question. So userChrome.js is out of question.
Chosen Solution
Why not:
#window-controls[hidden="true"] {
display: -moz-box !important;
}
See also:
jscher2000 said
Why not:
#window-controls[hidden="true"] {
display: -moz-box !important;
}
Yay! it really worked through CSS alone. But I'm still trying to figure out if that's possible to edit the HTML structure of Firefox's UI, is it? Thanks a lot!
cor-el said
See also:
Really nice, would be very helpful to me. Thanks a lot!
Mathwave said
I'm still trying to figure out if that's possible to edit the HTML structure of Firefox's UI, is it?
No, not without using "Legacy" code methods that require hacking around with scripts.