MozillaZine

Need help with userChrome.css for Nightly...

Discussion about official Mozilla Firefox builds
That Random Guy
 
Posts: 10
Joined: March 1st, 2017, 5:38 pm

Post Posted August 15th, 2017, 6:46 am

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. :roll:

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.
Last edited by LIMPET235 on August 15th, 2017, 6:54 am, edited 1 time in total.
Reason: Image tags removed to restore the forum layout.

LIMPET235
Moderator

User avatar
 
Posts: 37485
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted August 15th, 2017, 6:55 am

Moving this to the Builds forum...
Ancient Amateur Astronomer
Win-7-HP/Intel® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-50.0-56.0.1/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting. Conficker Test. (Always choose the "Custom" Install.)

That Random Guy
 
Posts: 10
Joined: March 1st, 2017, 5:38 pm

Post Posted August 16th, 2017, 12:18 pm

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

User avatar
 
Posts: 19363
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted August 16th, 2017, 12:29 pm

That Random Guy wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

That Random Guy
 
Posts: 10
Joined: March 1st, 2017, 5:38 pm

Post Posted August 16th, 2017, 5:56 pm

Frank Lion wrote: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

User avatar
 
Posts: 19363
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted August 16th, 2017, 6:19 pm

That Random Guy wrote: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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

tauio111
 
Posts: 9
Joined: August 12th, 2017, 8:52 am

Post Posted August 18th, 2017, 7:26 am

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
 
Posts: 10
Joined: March 1st, 2017, 5:38 pm

Post Posted August 20th, 2017, 5:57 am

Frank Lion wrote: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
 
Posts: 10
Joined: March 1st, 2017, 5:38 pm

Post Posted August 20th, 2017, 5:58 am

tauio111 wrote: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
 
Posts: 329
Joined: February 28th, 2008, 3:48 am
Location: PA

Post Posted August 21st, 2017, 7:10 am

tauio111 wrote: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/docs/Tools/Browser_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
 
Posts: 9
Joined: August 12th, 2017, 8:52 am

Post Posted August 21st, 2017, 1:08 pm

custom.firefox.lady wrote:
tauio111 wrote: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/docs/Tools/Browser_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

Return to Firefox Builds


Who is online

Users browsing this forum: No registered users and 2 guests