Bug 576043

Summary: [GTK3] Impossible to write an Eclipse-specific CSS selector which can be made a part of a GTK3 theme
Product: [Eclipse Project] Platform Reporter: Andrey ''Bass'' Shcheglov <andrewbass>
Component: SWTAssignee: Platform-SWT-Inbox <platform-swt-inbox>
Status: NEW --- QA Contact:
Severity: normal    
Priority: P3    
Version: 4.20   
Target Milestone: ---   
Hardware: PC   
OS: Linux   
URL: https://github.com/vlastavesely/raleigh-reloaded
Whiteboard:
Attachments:
Description Flags
Eclipse 4.7 with Raleigh GTK2 theme
none
Eclipse 4.20 with Raleigh-Reloaded GTK3 theme
none
Eclipse 4.20 with Raleigh-Reloaded GTK3 theme plus custom CSS rules
none
Thunar launched with GTK_DEBUG=interactive
none
Eclipse launched with GTK_DEBUG=interactive none

Description Andrey ''Bass'' Shcheglov CLA 2021-09-16 12:10:33 EDT
Created attachment 287146 [details]
Eclipse 4.7 with Raleigh GTK2 theme

I'm well aware of the `org.eclipse.swt.internal.gtk.cssFile` property, but it has the following disadvantages:

 * custom CSS rules may be theme-specific (so I may have one CSS file for Adwaita, another one for Greybird, and so on);
 * I may want to make my CSS changes an (application-specific) part of a particular theme.

For instance, for the [Raleigh-Reloaded](https://github.com/vlastavesely/raleigh-reloaded) theme, the following extra CSS changes make Eclipse look almost identically to version 4.7 with GTK2 Raleigh theme:

```
toolbar {
        border: 0;
}

scrolledwindow {
        border: 0;
}

frame {
        border: 0;
}
```

The problem with these selectors is they're way too generic and, when an integral part of a GTK theme, will negatively affect other applications.

The common solution other (well-behaved) GTK applications utilize is adding custom (application-specific) CSS styles. E. g., `thunar` (the XFCE file manager) sets the `thunar` CSS style to its top-level window, enabling a theme designer to write rules like

```
.thunar toolbar > button.flat {
        padding: 42px;
}
```

Example: https://github.com/iloveeclipse/clearlooks-phenix/blob/master/gtk-3.0/applications.css

Unfortunately, this is not possible for Eclipse.

The other aspect of the same problem is the inability to selectively apply CSS styles to Eclipse window sub-components, because they lack CSS `class` and `id` attributes, too. Consider the following sample use-cases:

 * applying a CSS selector not to a generic GtkToolbar, but to a specific one (e. g.: the main toolbar, the perspective switch toolbar, or the tool window toolbar);
 * theming the Preferences dialog differently from the main window.

The above is quite familiar for everyone with just minimal experience with Web markup, and fully possible for other GTK3 applications -- except for Eclipse.
Comment 1 Andrey ''Bass'' Shcheglov CLA 2021-09-16 12:11:48 EDT
Created attachment 287147 [details]
Eclipse 4.20 with Raleigh-Reloaded GTK3 theme
Comment 2 Andrey ''Bass'' Shcheglov CLA 2021-09-16 12:14:08 EDT
Created attachment 287148 [details]
Eclipse 4.20 with Raleigh-Reloaded GTK3 theme plus custom CSS rules

Compare this attachment with attachments #287146 and #287147.
Comment 3 Andrey ''Bass'' Shcheglov CLA 2021-09-16 12:18:06 EDT
Created attachment 287149 [details]
Thunar launched with GTK_DEBUG=interactive

Note the `thunar` CSS class of the top-level window.
Comment 4 Andrey ''Bass'' Shcheglov CLA 2021-09-16 12:20:09 EDT
Created attachment 287150 [details]
Eclipse launched with GTK_DEBUG=interactive

Note that Eclipse-specific CSS classes are never used.
Comment 5 Andrey ''Bass'' Shcheglov CLA 2021-09-16 17:02:43 EDT
> Note that Eclipse-specific CSS classes are never used.

I meant: "never set by Eclipse and/or SWT runtime".