Changelog for Fox 2 the Moon

[Ernst]

Hi.

I'm a Fox 2 the Moon user.

But I have a lot of customization done for the theme in userChrome.css.

Today the theme has been updated and I'm seeing #TabsToolbar with the default Fox 2 the Moon look instead of my regular custom image in userChrome.css.

Looking at the theme file itself, I've seen that there are some new version27 and version28 folders and I guess I should dig into them to find what happened, but it would be nice to have a change log of the theme so I can quickly figure out where to look.

It there such a thing?

[Lootyhoof]

This would be here:

https://github.com/Lootyhoof/fox2themoo ... ANGELOG.md

There weren't any changes to the #TabsToolbar for the 4.1.0 release, though...were you on a much earlier version before?

[Ernst]

This would be here:

https://github.com/Lootyhoof/fox2themoo ... ANGELOG.md

There weren't any changes to the #TabsToolbar for the 4.1.0 release, though...were you on a much earlier version before?

Nice. Thanks.

I was on 4.0.5.

This is 4.0.5:



And this 4.1.0:



Culprit is indeed #TabsToolbar. I had this code commented out in userChrome.css:

Code: Select all

#TabsToolbar {
	-moz-appearance: none !important;
	background: url("tabbrowser-tabs-bkgnd.png") repeat-x !important;
	border-top: none !important;
}

And if it uncomment it, this is what happens:



"tabbrowser-tabs-bkgnd.png" is 1x75 px image which stretches out. Top pixel is white to give a border effect and the rest is transparent. This transparency seems to be the issue. Before it showed the regular ThreeDFace color. Now it's blue.

Regards.

EDIT:

Added this to the above code:

Code: Select all

background-color: ThreeDFace !important;

And it's back to the way it looked in 4.0.5.

It seems that now default background color is blue. Probably the line "-moz-appearance: none !important;" has something to do with it.

[Lootyhoof]

It seems that now default background color is blue.

The toolbar turns blue there because you're likely referencing a file that doesn't exist - if you want to use that background image from the theme you should instead be using:

Code: Select all

background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;

As such, it turns transparent. I take it you're on Windows 10? If so, the entire #main-window has a background-color to it, to correctly style the titlebar, so it inherits that styling.

If you want a cleaner implementation, I might recommend using this styling instead:

Code: Select all

#TabsToolbar {
  background: var(--toolbar-custom-color) !important;
}

This variable controls the toolbar colour for all the toolbars in the main UI, so if you ever wanted to change that to something else (for example, yellow), you could (in addition to the above) do:

Code: Select all

:root {
  --toolbar-custom-color: yellow !important;
}

This would produce something like the following (on the default styling at least):



I may add a few more of those in future to make things even more customisable.

[Ernst]

It seems that now default background color is blue.

The toolbar turns blue there because you're likely referencing a file that doesn't exist - if you want to use that background image from the theme you should instead be using:

Code: Select all

background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;

Nope. I have tabbrowser-tabs-bkgnd.png in my chrome folder. It turns blue because that file is transparent (except for the top 1 px I use to make the border). I have loads of other files there to change icons and stuff.

What probably happened is that my 4.0.5 skin was edited. Looking at your skin change log dates, this might have happened when I made the whole Firefox-Pale Moon transition. Back then I was still editing the skin instead of doing everything in userChrome.css.

That's why I had the code in my userChrome.css commented. It explains also that the background appeared only when the skin was updated.

As such, it turns transparent. I take it you're on Windows 10? If so, the entire #main-window has a background-color to it, to correctly style the titlebar, so it inherits that styling.

If you want a cleaner implementation, I might recommend using this styling instead:

Code: Select all

#TabsToolbar {
  background: var(--toolbar-custom-color) !important;
}

This variable controls the toolbar colour for all the toolbars in the main UI, so if you ever wanted to change that to something else (for example, yellow), you could (in addition to the above) do:

Code: Select all

:root {
  --toolbar-custom-color: yellow !important;
}

This would produce something like the following (on the default styling at least):



I may add a few more of those in future to make things even more customisable.

I am indeed on Windows 10. That variable is a nice trick. This is a much cleaner solution and makes possible to get rid of the file. My tabbrowser-tabs-bkgnd.png adds a 1 px white border to the toolbar as well, but I'm sure I can add that through css.