better GTK+ theme support

[demetrislambrou123]

Hello,

I love your extensions and I even use it on Ubuntu 14.04 unity, it makes firefox much better.

However when I used gnome 3.12 on Fedora I never used the stock theme so the tabs were never consisted even with the new 3.12 tabs. And on unity the same thing applies. Is there a consideration for supporting different themes at least on tabs? On other areas at least the colours I have not encounter any problems yet.

If there is no intention for adding it where can I change the tabs by my own? I searched the gnome-firefox-29.2b6.xpi and I only found the old style tabs. I have no idea on programming or themeing but on elementary firefox theme I managed to change some icons and colours to be consisted with a custom theme I used.

[garrett]

Hi demetrislambrou123. Did you follow the steps in my comment to enable the GNOME 3.12 style tabs?

Basically, it's these two screens that are the most important:

…and, if you're running Firefox 29, then you should see an option to use GNOME 3.12 style tabs. Make sure it's checked and your tabs should change.

---

As the old tabs were previously using images, making user themes would've been nearly impossible. We considered it 3 years ago, in issue #33, but now that we have new tabs that are based on the system theme, it might be possible to revisit.

[demetrislambrou123]

Yes I followed I know how to enable them. The problem is this:

See the difference between the tabs on files (nautilus) and firefox?

So you saying now it's more possible than before to make firefox to use any theme that is used by the system? (at least on tabs?) For example I am using zukitwo for ubuntu. Would I need to edit anything on firefox xpi to make the tabs like on zukitwo or just wait if you reconsider and enable support for user themes?

[garrett]

Firefox uses GTK+2, so any GTK+3 theme would have to mimic itself in a GTK+2 theme as well. If it doesn't style up the tabs, then it's impossible for Firefox to know how to style things.

I'm not sure if it's the case for zukitwo; I'm installing it on Fedora right now with yum install zukitwo-gtk3-theme zukitwo-gtk2-theme zukitwo-metacity-theme gnome-shell-theme-zukitwo to find out.

[garrett]

Ah, at first, I thought the "different themes" was referring to what was previously called "personas" and are now "lightweight themes" for Firefox itself.

I'm wondering if we can re-use the default GTK+ style (which, for Firefox at the moment, is provided by GTK+2) for the tabs.

Previously, I thought that it was using a default GTK+ theme as the tabs do recolor themselves based on the highlight color, so it did look like some of the Moka-based themes I was trying out last week.

(Note: I wasn't involved in the implementation of tabs this time around, so I made an assumption of how they are implemented. It may be possible to make them adapt to themes better, but it will take some experimentation to see if we can improve support for 3rd party themes without hurting the default style. It really might be possible, as the tab implementation should be more straightforward, without all the overlapping we had in the previous sets of tabs.)

[garrett]

I've renamed the title of this issue for clarity.

[demetrislambrou123]

Well from various test I did it recolors in different themes but not sure which one color it use:

from the screenshot above there are no colours in tabs on files. But it recolors based on the highlight color. Not sure if it uses that one but basicly it uses something like the general color of the theme.

When I used the default theme on firefox and change the gtk+ theme on ubuntu it adapts very well on colours even on tabs.

(I did not used any firefox custom themes above, I used the default firefox 29 theme and just change the system gtk+ theme.)

So without knowing a lot of gtk+ or theming it seems possible, don't know if easy though ;p

[demetrislambrou123]

I tried using the default theme and a custom userChrome.css on ~/.mozilla/firefox/xxxxx.default/chrome. I acquired userChrome.css from the launchpad page of zukitwo developer which produced a userChrome.css for firefox 29. You can get it from here: http://bazaar.launchpad.net/~lassekongo83/zukitwo/gnome3.12/files/head:/Zukitre-firefox-theme/chrome/

The result is this:

Obviously when I tried using the custom userChrome.css with your theme enabled it didn't work. The tabs were the same with gnome 3.12 and they stayed on top even when I enabled and disabled the tick box on show tabs on top. I don't know if this help but I thought of showing you this. It might help as a start to make your tweak to have better support on custom userChrome.css?

[seleznev]

@garrett, @demetrislambrou123, it seems to me that you confuse our target with target of GTK+ Native theme.

However, I agree that we should use transparent colors more often.

@demetrislambrou123,

zukitwo developer which produced a userChrome.css for firefox 29

You must follow recommendations by Zukitwo developers.

[garrett]

@seleznev: Good point.

[demetrislambrou123]

@seleznev Oo didn't know that GTK+ native theme extensions even existed. I will give it a try once it's updated for firefox 29.

However whats your target? Is it to integrate firefox to gnome 3? Or just make an adwaita theme for firefox?

[garrett]

The target is to integrate with GNOME 3.

Whenever we can base widgets off of native ones, that's great. Otherwise, it's more important to make it feel native even if that means doing a kludge.

---

@demetrislambrou123: Firefox itself supports userChrome.css, and our theme therefore respects it. However, that CSS is targeting the standard theme, and our CSS is different, so it won't match up.

Using custom CSS meant for the stock theme in userChrome.css will definitely have unintended consiquences. While we do use a lot of the same CSS, our theme does change things in many places, so it's a pretty good bet that things somewhere will most likely break.

A better suggestion would be to use Stylish and something similar to the following userstyle:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#TabsToolbar[newstyletabs] .tab-background-middle {
    -moz-border-bottom-colors: transparent !important;
}

This will remove the border color on the bottom of the selected tab. You can port things over from the userstyle you linked to... and Stylish lets you preview changes too (without restarting your browser).

You can also dig around browser.css in our repo to see other things you might want to override locally as well.

[seleznev]

However whats your target? Is it to integrate firefox to gnome 3? Or just make an adwaita theme for firefox?

The target is to integrate with GNOME 3.

It seems we have some misunderstanding. :D

[demetrislambrou123]

@garrett okay cool I think I get what you are saying. I'll try to play a little with different .css and stylish as you suggested and give a look at GTK+ native theme that @seleznev pointed out, to see the results. Thanks for the clarity and info. Keep up the great work

[danielkza]

I'm using Firefox 29, with the GNOME 3 Theme 29.1, GNOME Tweak 29.1 extension, and GNOME 3.12 in Fedora 20 (using the COPR), and I don't have an option to enable 3.12-style tabs. Am I missing something?

[seleznev]

@danielkza, you must have 29.2+ version of theme and extension.

We missed 29.2 release but you can find latest beta on this page. For Firefox 29 it is gnome-firefox-29.2b10.xpi build.

UPD: More details: #241.

[danielkza]

I think I'll skip straight to 30 since I noticed it's already built for Fedora 20. Thanks.