Need help with userChrome.css for Nightly...

[That Random Guy]

Hello,

In an effort to better prepare for Firefox 57 and onward, I've taken the liberty of customizing Nightly to replicate my current preferred UI layout.

My personal preference is main toolbar>bookmarks toolbar,tabs bar.

To better illustrate (this is my Firefox UI with CTR customization):
> http://i.imgur.com/cJj2Yiz.png

Thus far, I've been able to get the tabs on bottom to work on Nightly. It looks like this:

> http://i.imgur.com/dTRq3R9.png

As one might be able to notice, there appears to be a small border in between the main toolbar and the tabs bar.

Another issue I've come across is the placement of the bookmarks toolbar.

It isn't shown in the Nightly screenshot above, but the bookmarks toolbar has the default placement of being on top of the main toolbar.

This is the opposite of what I'd like to implement as shown in the first image above.

I've tried to reference valid resources[1][2] to understand how I can get this to work, but I don't know what's valid anymore.

I also tried to install DOM-Inspector but apparently that isn't usable anymore.

To make it more clear: I want to get my UI on Nightly the same as what I have on Firefox currently. I would also appreciate it if there was a way to get rid of that random border in between the main toolbar and the tabs bar.

Can I please get some assistance with this?

TIA

T.R.G.

[LIMPET235]

Moving this to the Builds forum...

[That Random Guy]

I somehow forgot I was able to move the bookmarks toolbar (I don't change much).

So, essentially, I've been able to achieve my desired UI/layout.

The only problem that still remains (for me) is the random border that separates the main/navigation toolbar with the tabs bar.

I was tipped off by this source that I can actually see the CSS being used on the browser—which incidentally was something I've been looking for.

The particular resource also confirmed that the article that I found on this site is most likely outdated.

Can anyone try and look at the CSS file for Nightly and maybe try and decipher where that random border is coming from?

[Frank Lion]

I was tipped off by this source

You know that your 'source' dates back over 6 years, right? So some of that is also outdated.

[That Random Guy]

You know that your 'source' dates back over 6 years, right? So some of that is also outdated.

First, thank you for telling me that. I'm sure I would've noticed when I looked at the post time-stamp, but since I was able to see what the post was referencing to, I had assumed that was still a valid way to see what was underneath.

Second, knowing this now, what can I do to actually see what's going on (since I can't use DOM-inspector anymore)?

[Frank Lion]

Second, knowing this now, what can I do to actually see what's going on (since I can't use DOM-inspector anymore)?

To be honest, you and others will have a problem.

Experienced theme/UI guys can read the code directly, with difficulty, but even that is harder than it should be, as Firefox write their code in the most truly bizarre and over-complicated way ever seen. Plus, those guys will not be around, like the old days. It's one thing to help users with code snippets if you need to check the code anyway, quite another if they are not needing to or even using the browser.

Your best best is to use 56, which possibly(?) still has a proper DOMi which can look at the UI code, remember/write down what you see and hope that 57 hasn't changed it.

[tauio111]

You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".

[That Random Guy]

To be honest, you and others will have a problem.

Experienced theme/UI guys can read the code directly, with difficulty, but even that is harder than it should be, as Firefox write their code in the most truly bizarre and over-complicated way ever seen. Plus, those guys will not be around, like the old days. It's one thing to help users with code snippets if you need to check the code anyway, quite another if they are not needing to or even using the browser.

Your best best is to use 56, which possibly(?) still has a proper DOMi which can look at the UI code, remember/write down what you see and hope that 57 hasn't changed it.

I guess it's a miracle I even got what I have now then. I'll keep trying.

Thanks,

T.R.G.

[That Random Guy]

You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".

Thanks!

-T.R.G.

[custom.firefox.lady]

You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".

Also see: https://developer.mozilla.org/en-US/doc ... er_Toolbox
for an alternative method (the info there about debugging popups might also be useful). Not nearly as useful as DOMi combined with Inspect Context used to be though.

Meta bug for its various deficiencies
https://bugzilla.mozilla.org/show_bug.cgi?id=1090423

[tauio111]

You can open up chrome://browser/content/ and F12 there, you can check out what the UI has by stock, but some elements do not show up there. Neither will the userchrome.css overrides, and that makes it hard to "debug".

Also see: https://developer.mozilla.org/en-US/doc ... er_Toolbox
for an alternative method (the info there about debugging popups might also be useful). Not nearly as useful as DOMi combined with Inspect Context used to be though.

Meta bug for its various deficiencies
https://bugzilla.mozilla.org/show_bug.cgi?id=1090423

ach! Didn't know about the remote debugging on Firefox, this is rather perfect.
Thanks