[SRU] Difficult to distinguish which tab is selected

[Bryce Harrington]

[Impact]
 * When a user opens multiple tabs in GNOME terminal all tabs are styled in a *very* visually similar manner. This makes it very hard to distinguish between the current active tab and all the others and on a HiDPI screen pretty much impossible.

* This fix has been ack'd by design and was targeted for X but didn't get reviewed and OK'd in time. Design team have approved this styling.

* This bug is fixed by extending the CSS specifically for Terminal (i.e. no other applications are affected) giving the active tab a darker background colour (using only theme defined colours) and reworks the borders around the tabs to remove the graduated image borders that only look right on a light coloured background. Changes have been made for both Ambiance and Radiance.

[Test Case]
 * On a stock 16.04 install open GNOME Terminal (ctrl-alt-t)
 * Open five new tabs (ctrl-shift-t)
 * Click on the tab in the middle
 * Note that it is hard to see at a glance which tab is currently selected
 * Close Terminal and all open tabs.
 * Install the patched theme
 * Open Terminal and open five new tabs
 * Click on the tab in the middle and note that it takes on a light grey background compared to the unselected tabs which are dark grey.

[Regression Potential]
 * The patch only addresses tabs that are placed at the top of the window. However this is the only option in Terminal, so should not cause any problems.
 * There is a work-around to match the "actions bar" (the bit with the dropdown selector and + button). This bug is supposed to be fixed in v3.20 and could be removed. This is commented in the CSS.

[Brendan Donegan (brendan-donegan)]

It's probably better to explain why this isn't a valid problem with the theme rather than just setting the bug to invalid. Reset to New (would confirm as it's clearly a problem but there must be some reason this was invalidated so I'd like to find that out first)

[Sam_ (and-sam)]

Confirmed and still the case on an updated Oneiric.
$ uname -a
Linux zoo 3.0-3-generic #4-Ubuntu SMP Fri Jul 1 08:21:12 UTC 2011 x86_64 x86_64 x86_64 GNU/Linux
zootie@zoo:~$ lsb_release -a
Distributor ID: Ubuntu
Description: Ubuntu oneiric (development branch)
Release: 11.10
Codename: oneiric
$ gconftool-2 -g /desktop/gnome/interface/gtk_theme
Ambiance

I wouldn't assigne to age but rather to the theme not elegant distinguishing tabs.

[Sam_ (and-sam)]

Similar Bug #761660 and Bug #771701

[Alan Porter (alan.porter)]

This bug has been invalidated twice with no explanation. That's a sure way to dissuade those who are reporting the bugs and subscribing to the bugs with hopes of a resolution.

Remember that we are all volunteers, going that extra mile to report things that we think need to be repaired. Don't just blow us off without some sort of mitigation statement.

Alan Porter
former gnome-terminal user

[Alan Porter (alan.porter)]

Disappointed with the lack of acknowledgement here in launchpad, I finally just switched to using xfce4-terminal instead of gnome-terminal. But I still subscribe to the various bug reports on this issue, so I will know when the problem has been resolved and I can switch back to using gnome-terminal.

Alan Porter

[Mikkel Kamstrup Erlandsen (kamstrup)]

@Alan: This bug is only invalidated for the "unity" component - because it's simply unrelated to that. There is still an issue marked as Confirmed on the "light-themes" component which is the right one afaik.

[Alan Porter (alan.porter)]

Thanks for the clarification, Mikkel.
That little bit of explaining goes a long way.

[Kees (kees-vanveen)]

I had the same problem in Oneiric running Xfce with a self-chosen combination of window manager theme and 'appearance' theme.

I found a workaround to be:
- create ~/.config/gtk-3.0/gtk.css
- paste the following in:
  TerminalWindow .notebook tab:active {
        background-color: #def;
  }

This makes my active tab being a bit lighter than the other tabs.

See also /usr/share/themes and look for gtk.css and terminal.css.

[Sam_ (and-sam)]

No longer affected, my workaround was installing terminator which allows comprehensive configuration (e.g. tab colours) via GUI - considered as user-friendly.

[Gustavo Carneiro (gjc)]

I am using Ubuntu 12.10, and this is certainly _NOT_ fixed.

For a great example of how tabs should look, take a look at Google Chrome. Those tabs are just right...

[Dan N. (xdanieln)]

I am using Xubuntu 12.10 with gnome-terminal and yes, this is certainly _NOT_ fixed.

[Alessio Fattorini (alessio.fattorini)]

Same problem here on ubuntu 12.10, i attach a screen. Any quick workaround?
This hack doesn't works:
http://askubuntu.com/questions/40332/how-to-make-selected-tab-in-terminal-more-prominent

[Nitin Gupta (nitingupta910)]

Using Ubuntu 13.04 and the problem still exists with gnome-terminal.

[Daniel van Vugt (vanvugt)]

Assigned to design for review.

There definitely needs to be some contrast (different shade/colour) between the active and inactive tabs. I don't recommend relying on a 1px wide border because such things are imperceptible on high-res displays.

[zasran (erik-zasran)]

Any ideas why this is not being fixed? It's fairly annoying and seem very easy to fix.

[cossio (cossio-0)]

Please fix this. The terminal is the most important thing in ubuntu! Make it nice.

[Chris Mounce (christophermounce)]

I would also like to see this issue fixed.

It's not just gnome-terminal: some other applications with tabs, such as gedit, have thte same issue. I only noticed it in gnome-terminal because I use it all the time.

[Tomislav (hefest)]

14.04 suffering from the same issue.

[Matti Haavikko (haavikko)]

I created an account here just to comment on this issue. This bug is my biggest annoyance with Ubuntu. Since this bug has been open for such a long time and there (seemingly) is a fix available, what is the problem?

A) Is there a technical issue that prevents fixing the bug - please explain and let the community help.
B) Is there a UI/design issue that needs to be solved - please explain and let the community help.
C) is there lack of interest/lack of resources to apply the fix - please explain and let the community help.

[mathematatin (nintendo-thomas)]

Now the problem seems worse in 15.04 than it did in 14.04. Both use different outlines for the active tab which only helps a little. And

in 14.04 there is a *slight* color difference in the active tab making it *very* difficult to identify.
In 15.04 there is *no* color difference in the active tab making it nearly impossible to tell the difference!

This goes for all the tabbed programs: terminal, gedit, nautilus, etc.

[Timo Palomaa (timppis)]

A workaround (theme tweak) for gnome-terminal:

http://askubuntu.com/q/355297/73968
http://askubuntu.com/q/40332/73968

[Jean Jordaan (jean-jordaan)]

One more voice begging for a fix to this nasty little niggle. Bugging me on Ubuntu 15.04. This works: http://askubuntu.com/a/554642/20835

[Johan Boule (johan-boule)]

echo '.notebook tab:active { background-color: @selected_bg_color; }' >> ~/.config/gtk-3.0/gtk.css

[Mark Shuttleworth (sabdfl)]

Man, this is a favourite bug of mine, would be DELIGHTED to see a fix in
Wily ;)

Mark

[Johan Boule (johan-boule)]

I really hope the 16.04.1 point release will finally get someone to push a fix to this otherwise we're going to live with this for several more years.
I'm re-enabling my custom ~/.config/gtk-3.0/gtk.css once again.

[Johan Boule (johan-boule)]

Since this simple theme bug has not been fixed for 5 years, despite being a annoying usability issue, I have to ask what's needed to be able to eventually see a fix coming.

Is there something that makes it technically harder than it seems to be to correct the theme ?
Who's in charge of the gtk theming issues ?
Has this bug been assigned to the right person ?

How can we make it progress ?

[Collin Peters (collin-peters)]

The ~/.config/gtk-3.0/gtk.css fix is not working for me in 16.04. Is it working for anyone else?

[Will Cooke (willcooke)]

If you want to provide some feedback on the attached branch that would help.

You can download the relevant CSS for your config (Ambiance for the default theme, Radiance for the alternative lighter theme) from here:

http://bazaar.launchpad.net/~willcooke/ubuntu-themes/terminal-tabs/view/head:/Ambiance/gtk-3.0/apps/gnome-terminal.css

or

http://bazaar.launchpad.net/~willcooke/ubuntu-themes/terminal-tabs/view/head:/Radiance/gtk-3.0/apps/gnome-terminal.css

Then I'd suggest renaming your current /usr/share/themes/Ambiance/gtk-3.0/apps/gnome-terminal.css to something like /usr/share/themes/Ambiance/gtk-3.0/apps/gnome-terminal.css.ori and then copy the file you downloaded above in to that location.

If you dont like it, delete the new file and rename the original back again.

It's not especially pretty, but it does the job for me.

[Vaclav Rehak (vaclav-n)]

@willcooke: I tried the Ambiance version and it looks good. Thank you for the fix.

[Will Cooke (willcooke)]

Added to Trello: https://trello.com/c/EIv8Jcwv/2-bug-762349-difficult-to-distinguish-which-tab-is-selected

[Will Cooke (willcooke)]

Screenshot of patch in action for approval by Design

[Will Cooke (willcooke)]

Added to Trello: https://trello.com/c/ydGJA9LW/9-bug-762349-difficult-to-distinguish-which-tab-is-selected

[John Lea (johnlea)]

+1 from design

[Mark Shuttleworth (sabdfl)]

Oh god yes please!

[Will Cooke (willcooke)]

Updated bug to make it SRU compliant.

[Iain Lane (laney)]

I uploaded this.

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-themes - 14.04+16.04.20160426-0ubuntu2

---------------
ubuntu-themes (14.04+16.04.20160426-0ubuntu2) yakkety; urgency=medium

  [ Will Cooke ]
  * Adds Terminal specific CSS to change tab colours making it easier to
    distinguish the current selected tab from the others. Design have reviewed
    and ack'd. LP: #762349

 -- Iain Lane <email address hidden> Tue, 24 May 2016 10:21:12 +0100

[Martin Pitt (pitti)]

Hello Bryce, or anyone else affected,

Accepted ubuntu-themes into xenial-proposed. The package will build now and be available at https://launchpad.net/ubuntu/+source/ubuntu-themes/14.04+16.04.20160415-0ubuntu2 in a few hours, and then in the -proposed repository.

Please help us by testing this new package. See https://wiki.ubuntu.com/Testing/EnableProposed for documentation how to enable and use -proposed. Your feedback will aid us getting this update out to other Ubuntu users.

If this package fixes the bug for you, please add a comment to this bug, mentioning the version of the package you tested, and change the tag from verification-needed to verification-done. If it does not fix the bug for you, please add a comment stating that, and change the tag to verification-failed. In either case, details of your testing will help us make a better decision.

Further information regarding the verification process can be found at https://wiki.ubuntu.com/QATeam/PerformingSRUVerification . Thank you in advance!

[Will Cooke (willcooke)]

Tested and works. Thanks for the upload Laney.

[Will Cooke (willcooke)]

& Pitti.

[Will Cooke (willcooke)]

Tested version:

$ apt-cache policy ubuntu-artwork
ubuntu-artwork:
  Installed: 1:14.04+16.04.20160415-0ubuntu2
  Candidate: 1:14.04+16.04.20160415-0ubuntu2
  Version table:
 *** 1:14.04+16.04.20160415-0ubuntu2 500
        500 http://gb.archive.ubuntu.com/ubuntu xenial-proposed/main amd64 Packages
        500 http://gb.archive.ubuntu.com/ubuntu xenial-proposed/main i386 Packages
        100 /var/lib/dpkg/status
     1:14.04+16.04.20160415-0ubuntu1 500
        500 http://gb.archive.ubuntu.com/ubuntu xenial/main amd64 Packages
        500 http://gb.archive.ubuntu.com/ubuntu xenial/main i386 Packages

[Mar-castelluccio (mar-castelluccio)]

Would it be possible to do the same with Gedit? It is affected by exactly the same problem.

[Will Cooke (willcooke)]

@mar-castelluccio - yes and no. Terminal uses it's own Gtk Notebook widget (tabbed interface) so the styling fixes don't apply cleanly to Gedit which uses the "normal" Notebook which is shared across all other tabbed interface components. If & when we move to Gtk 3.20 then there are a whole load of theme fixes needed so the generic Notebook will get a fix at the same time. Until then we probably won't fix generic tabs such as used in Gedit. If someone would like to work on it, then patches would be very welcome.

[Launchpad Janitor (janitor)]

This bug was fixed in the package ubuntu-themes - 14.04+16.04.20160415-0ubuntu2

---------------
ubuntu-themes (14.04+16.04.20160415-0ubuntu2) xenial; urgency=medium

  [ Will Cooke ]
  * Adds Terminal specific CSS to change tab colours making it easier to
    distinguish the current selected tab from the others. Design have reviewed
    and ack'd. LP: #762349

  [ Iain Lane ]
  * Update Vcs-Bzr for 16.04

 -- Iain Lane <email address hidden> Tue, 24 May 2016 10:54:25 +0100

[Adam Conrad (adconrad)]

The verification of the Stable Release Update for ubuntu-themes has completed successfully and the package has now been released to -updates. Subsequently, the Ubuntu Stable Release Updates Team is being unsubscribed and will not receive messages about this bug report. In the event that you encounter a regression using the package from -updates please report a new bug using ubuntu-bug and tag the bug report regression-update so we can easily find any regressions.

[Mark Shuttleworth (sabdfl)]

Just wanted to say thanks for this fix, I will appreciate it every day :)

Mark

[Johan Boule (johan-boule)]

The current fix is only a workaround that's specific to the terminal app, while the bug appears to be broader issue assigned to the ubuntu-themes package.
I can confirm that the problem persists for other apps. Try gedit for example.
Can you please reopen the bug ?

[Valentas (vk-registrator)]

The currently existing fix results in rather ugly tabs: they are grey, while the default theme is dark. In xenial it looks somewhat better, but the spacing between the last tab and the "+" icon, does not look nice.

[Johan Boule (johan-boule)]

In Unbuntu 16.10, the easy fix in ~/.config/gtk-3.0/gtk.css does not work anymore.

I used to simply have this in that file :

  .notebook tab:active {
   background-color: @selected_bg_color;
  }

But now, gedit does not take it into account anymore (neither gnome-terminal but afaik they unfortunately hacked something specific just to workaround the problem locally, and indeed it's now better-looking in that app now).

Does anyone know what's the new css class to style to get *all* gtk tabs look fine ?

[Johan Boule (johan-boule)]

The bug is still here in Ubuntu 17.10.
Tested by opening gedit, and adding a second tab : my eyes can hardly tell which tab is active.

[Nicolas Jungers (unbug)]

The old fix doesn't work any more because the names of the properties have changed.

This works for me:

notebook.terminal-notebook tab {
    background-color: #a2a1a0;
    foreground-color: #ffffff;
}

notebook.terminal-notebook tab:active {
    background-color: #ffffff;
    foreground-color: #010101;
}

I've put the file in ~/.config/gtk-3.0/gtk.css. You may adapt the colors at your liking. The original definitions are in /usr/share/themes/Ambiance/gtk-3.0/apps/gnome-terminal.css

[Daniel van Vugt (vanvugt)]

Nicolas, please log a new bug so it's more obvious that this /new/ problem exists...