GtkNotebook - a lacking tab container

[fastrizwaan (Asif Ali Rizvan)]

The tabs in Gtk apps are drawn witth Gtk Notebook Container which draws tabs with pages, but the Tab management is bad. Some of the reasons why Notebook Tabs are bad for GTK users:

1. Blocking the info: Instead of presenting content/folder/file/pages in visible tabs, the notebook header hides existing open tabs when the tab number increases to more than 4-6 tabs (based on label size). Now, the user will be at loss of finding his/her opened content/folder/file/page and may forget that the existing opened tabs is open. It makes working with multiple tabs (more than 6) very very difficult, because it hides the information user was working with.

E.g., open 10 Nautilus Tabs with different directories. you can only see 4 or 5 (depends on label size)

Another example, I am most affected by this. I open text, python files in gedit. And gedit open new files in Tabs. If I’m working with more than 5 or 6 files (on full hd maximized window) which I usually do, with multple py files, and open another file. The notebook header hides my existing opened file in 1st tab to which I will be copy/pasting. Yes, Split window helps somewhat, but, randomly opening a new text file, and pushes the old tabs in hiding mode. We have to struggle with Arrows which are kept on far Left and far Right side of the window/notebook header, just to find my file to paste text. This is abysmal behavior of notebook tabs.

And if we see Chrome and Gnome Web or Gedit with 5 tabs with big file names: Chrome is showing (all) 16 tabs whereas gnome web is showing only 4 (out of 7).

2. There is unnecessary unclickable, padding between 2 tabs Notebook Tabs If we click in that Gab between 2 tabs, the click is wasted. What’s the point of having unclickable padding between. Below, G is the Gap
   [Tab 1] G [Tab2] G [Tab3]
   There should be no gap beween tabs.

3. Can’t move Tabs : say we have 10 tabs 1,2,3…10, and we are on last tab i.e., Tab 10. It is not possible for us to move the 10th tab to 1st position or any tab position which is beyond the Arrows on left or right.

Hence GTK application with Notebook Tab bar are not popular. Gnome Web is a decent browser, but the Notebook tabs make gnome-web/epiphany a web browser which is difficult to navigate, and work with many tabs.

Yes, It is wrong to clutter tabs into teeny tiny buttons like chrome, but the tabs should become as smaller to present more pages/tabs for better workflow.

As gnome is touch friendly. The minimum tab size should be of a button like on a headerbar, and a menulist like button on right like in gnome-web should be made a feature of notebook header. The current Left [<] and [>] arrows on notebook header is very difficult to navigate.

Best Example: gnome-terminal

Gnome terminal almost does it perfectly. This gnome-terminal like tab sizing should be done by gtk apps. I open more than 20 tabs in gnome-terminal with ssh sessions to different servers.

more improvment for tabs of terminal:

1. hide button, on hover show like chrome does
2. remove left and right arrows and gap between tabs which will allow more tabs to be packed.

Thank you.

[MichiB (Michael Buzgaru)]

@fastrizwaan

There is unnecessary unclickable, padding between 2 tabs Notebook Tabs If we click in that Gab between 2 tabs, the click is wasted. What’s the point of having unclickable padding between. Below, G is the Gap

For this kind of things we have CSS:

 notebook header.top > tabs > tab
{
    padding:    0;
    margin:     0;
}

My actual medical condition does now allows me to write a code for you, but I am pretty sure that one can easy achieve rest of your complains.

[matthiasc (Matthias Clasen)]

Web browser tabs are really quite different from what GtkNotebook provides. GtkNotebook has suffered quite a bit from trying to cover all possible ‘tabs’ use cases with a single widget.

If you want different tabs behavior, the best approach is to write a stackswitcher that does what you need.

[MichiB (Michael Buzgaru)]

@matthiasc

If you want different tabs behavior, the best approach is to write a stackswitcher that does what you need.

Yes, this is the first thing what I had in my mind also GtkStackSwitcher and GtkStack

[fastrizwaan (Asif Ali Rizvan)]

My complain is that Gtk/gnome apps by default are not tab efficient; even after reducing the margin to 0, the overflowing tabs will again disappear behind [<] left and [>] right arrows. I’ll request gedit and nautilus and epiphany authors for this kind of change. I really want to use epiphany as my daily driver but, the small numbers of tabs and disappearing/hidden tabs makes working with gnome-web a pain.

Thank you. No need for code. May you get healthy asap. I tried notebook code from geeks for geeks.

CSS margin 0 makes it good. Padding with 5px look good. 0 padding makes it look clutter.

import gi 
# Since a system can have multiple versions 
# of GTK + installed, we want to make  
# sure that we are importing GTK + 3. 
gi.require_version("Gtk", "3.0") 
from gi.repository import Gtk, Gdk

#gi.require_version('WebKit2', '4.0')
from gi.repository import WebKit2
  
class MyWindow(Gtk.Window): 
    def __init__(self): 
        Gtk.Window.__init__(self, title ="Geeks for Geeks") 
        self.set_border_width(00) 
        headerbar = Gtk.HeaderBar()
        headerbar.set_show_close_button(True)
        self.set_titlebar(headerbar)
        self.set_resizable(True)
        
        self.set_default_size(800, 500)

        entry = Gtk.Entry.new()
        entry.connect("activate", self.on_enter)
        headerbar.pack_start(entry)
        
        # CSS begins
        screen = Gdk.Screen.get_default()
        provider = Gtk.CssProvider()
        style_context = Gtk.StyleContext()
        style_context.add_provider_for_screen(screen, provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

        # see https://developer.gnome.org/gtk3/stable/chap-css-overview.html for gradient etc effects
        css = b"""
        #styled_button {
            
            background-image: url('./nuwallpaper.jpg');
        }
        radiobutton:checked {
            background-color: #56f9a0;
        }
        headerbar {
        background-image: url('./nuwallpaper.jpg');
        background-position: left top;
        }
        window.background {
        background-image: url('./nuwallpaper.jpg');
        background-size: contain;
        background-position: left top;
        border: 0px solid black;
        
        }
        notebook header.top > tabs > tab
        {
            padding:    5;
            margin:     0;
        }
        
        """
        
        provider.load_from_data(css)
        # CSS ENDS
        
        # Create Notebook 
        self.notebook = Gtk.Notebook() 
        self.add(self.notebook) 
   
        self.webview = WebKit2.WebView()
        self.add(self.webview) 
        
        self.webview.load_uri("https://youtube.com")
        
        scroll_window= Gtk.ScrolledWindow(None,None)
        scroll_window.add(self.webview)
        
        # Create Boxes 
        self.page1 = Gtk.Box() 
        self.page1.set_border_width(0) 
        self.page1.pack_start(scroll_window, True, True, 5)
#        self.page1.add(scroll_window) 
        self.notebook.append_page(self.page1, Gtk.Label("Click Here")) 
  
        self.page2 = Gtk.Box() 
        self.page2.set_border_width(0) 
        self.page2.add(Gtk.Label("A computer science portal for geeks")) 
        self.notebook.append_page(self.page2, Gtk.Label("Click Here")) 
  
    def on_enter(self, entry):
        url = entry.get_text()
        self.webview.load_uri("https://"+url)
        label = self.notebook.get_tab_label_text(self.page1)
        print(self.notebook.get_tab_label(self.page1))
        self.notebook.set_tab_label_text(self.page1, "Label Changed")
        print(url)
        
win = MyWindow() 
win.connect("destroy", Gtk.main_quit) 
# Display the window. 
win.show_all() 
# Start the GTK + processing loop 
Gtk.main() 

[fastrizwaan (Asif Ali Rizvan)]

The big margin seems to from adwaita theme, Arc theme have very small margin for Notebook tabs.

Yes, we may code using other widgets for our own programs. But what about existing Gnome core apps like Gedit, Nautilus, Gnome-web?

Gnome-terminal at least handles tabs well, with fair tab size, but it does not show labels because it include button on tab. I’ll request at gnome-terminal to add this feature of “show button on hover/on mouse pointer enter only”

https://developer.gnome.org/hig/stable/tabs.html.en

Terminal, Text Editor, and Web Browser are mostly going to have too many tabs. Especially Web browser, it can go up to 50.

So, the gnome HIG should suggest accordingly.

Gedit try to solve this Tab mess by “View->Side Panel” (aka vertical tabs)
Gnome Terminal by “Tab menu” with radio buttons
Epiphany with “Tab Menu”
Nautilus, Nothing

Side Panel/vertical Tabs are great. But in general tabs with notebook remain limited. I just want to see gnome apps with tabs as good as chrome tabs which are dynamic, too many, hide when too many tabs are open. Most people use Chrome/Firefox, they expect tabs to behave like they are used to with chrome/firefox.

One more Issue is that unlike Notebook Tabs, firefox show partial tab and shadow to visually suggest the user that there are more tabs. Whereas gnome apps simply show [<] left and [>] right buttons which does not give ample clue to the user that there are many tabs open.

Firefox with extra open tabs on right

firefox with extra open tabs on both sides

So, my wish is to see gnome apps with tabs to:

1. Show many tabs
2. Give visual hint like firefox (if tabs are to be hidden, with partial tab visible)
3. Hide when many tabs are open for labels

Thank you.

[ebassi (Emmanuele Bassi)]

@fastrizwaan

Yes, we may code using other widgets for our own programs. But what about existing Gnome core apps like Gedit, Nautilus, Gnome-web?

You can propose patches for those applications as well.

The important thing to note is that GtkNotebook is meant for user interfaces with a well-known amount of tabs; if you are implementing a tabbed multiple-document interface, with an arbitrary amount of tabs, and possibly with controls inside the tab widget, then it’s recommended you use your own tab switching widget and a GtkStack. Currently, GTK does not have a tabbed MDI switcher widget because every single application has its own requirements, and nobody has proposed one. Additionally, once a widget is inside GTK, it must be strictly API and ABI compatible for the entirety of a major cycle, something not every application developer wishes to commit to.