Windows 10 reached EOS (end of support) on October 14, 2025. For more information, see this article.

Sök i support

Akta dig för supportbedrägerier: Vi kommer aldrig att be dig att ringa eller skicka ett sms till ett telefonnummer eller dela personlig information. Rapportera misstänkt aktivitet med alternativet "Rapportera missbruk".

Läs mer

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

fler alternativ

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.

Vald lösning

Why not:

#window-controls[hidden="true"] {
  display: -moz-box !important;
}
Läs svaret i sitt sammanhang 👍 1

Alla svar (8)

fler alternativ

What item(s) are you trying to modify?

You can inspectthe Firefox source code on the DXR website.

fler alternativ
fler alternativ

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.

fler alternativ

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.

fler alternativ

Vald lösning

Why not:

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

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!

fler alternativ

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.