Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How can I modify the actual HTML code of Firefox's user interface?

more options

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.

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.

Ŋuɖoɖo si wotia

Why not:

#window-controls[hidden="true"] {
  display: -moz-box !important;
}
Xle ŋuɖoɖo sia le goya me 👍 1

All Replies (8)

more options

What item(s) are you trying to modify?

You can inspectthe Firefox source code on the DXR website.

more options
more options

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.

more options

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.

more options

Ɖɔɖɔɖo si wotia

Why not:

#window-controls[hidden="true"] {
  display: -moz-box !important;
}
more options
more options

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!

more options

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.