Bug 548286 - [GTK] Clean up system color CSS parsing
Summary: [GTK] Clean up system color CSS parsing
Status: VERIFIED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: SWT (show other bugs)
Version: 4.13   Edit
Hardware: PC Linux
: P3 normal (vote)
Target Milestone: 4.13 M1   Edit
Assignee: Eric Williams CLA
QA Contact:
URL:
Whiteboard: RHT
Keywords: triaged
Depends on:
Blocks:
 
Reported: 2019-06-14 11:24 EDT by Eric Williams CLA
Modified: 2019-07-10 11:06 EDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Eric Williams CLA 2019-06-14 11:24:50 EDT
Adopt GtkStyleContext extraction wherever possible, similar to the fixes from bug 546252.
Comment 1 Alexandr Miloslavskiy CLA 2019-06-19 12:44:35 EDT
Some additional notes:
1) I noticed that SWT-GTK Link is fully custom-implemented. Maybe all of that could be dropped in favor of GtkLink, which is also capable of parsing and handling HTML-like links.
2) Current SWT-GTK Link doesn't underline links, so if link color matches text color (for example see 'HighContrast' theme) then it's hard to spot links.
3) This patch makes SWT startup ~0.5 sec faster, which is nice :)
Comment 2 Eric Williams CLA 2019-06-19 15:00:06 EDT
(In reply to Alexandr Miloslavskiy from comment #1)
> Some additional notes:
> 1) I noticed that SWT-GTK Link is fully custom-implemented. Maybe all of
> that could be dropped in favor of GtkLink, which is also capable of parsing
> and handling HTML-like links.
> 2) Current SWT-GTK Link doesn't underline links, so if link color matches
> text color (for example see 'HighContrast' theme) then it's hard to spot
> links.

It's something on the list for sure, currently Link is custom drawn which is quite unnecessary since GtkLink exists.

> 3) This patch makes SWT startup ~0.5 sec faster, which is nice :)

Didn't have a chance to benchmark yet, this is a pretty good number!
Comment 4 Eric Williams CLA 2019-06-20 09:54:21 EDT
(In reply to Eclipse Genie from comment #3)
> Gerrit change https://git.eclipse.org/r/144266 was merged to [master].
> Commit:
> http://git.eclipse.org/c/platform/eclipse.platform.swt.git/commit/
> ?id=2d8c4271d38bd3d3777f952bb1cd8cf99b3d9853

In master now.
Comment 5 Andrey Loskutov CLA 2019-06-25 03:33:19 EDT
(In reply to Eclipse Genie from comment #3)
> Gerrit change https://git.eclipse.org/r/144266 was merged to [master].
> Commit:
> http://git.eclipse.org/c/platform/eclipse.platform.swt.git/commit/
> ?id=2d8c4271d38bd3d3777f952bb1cd8cf99b3d9853

This causes regression on Clearlooks-Phoenix. Link color (COLOR_LINK_FOREGROUND) is now black (0,0,0), not blue (0,0,238) as before. To reproduce, open Console -> Java Stack Trace Console and paste any stack trace. The linked types font is black, not blue.

Adwaita is fine.

Simeon, please check if this is a theme bug or SWT one.
Comment 6 Simeon Andreev CLA 2019-06-25 04:46:14 EDT
Sorry, I looked at the Java editor and the Problems view colours and I thought all is well.

If I can comment out the imports in our Clearlooks-Phenix theme (i.e. leave only the colour definitions) the links are still blue, but a different blue. I think somehow those lines are important:

@define-color link_color #0000ee;
@define-color visited_link_color #551a8b;

In Clearlooks-Phenix those colours are only used for:

	-GtkIMHtml-hyperlink-color: @link_color;
	-GtkHTML-link-color: @link_color;

However deleting those entries from the theme does nothing. Deleting the colour definitions on the other hand results in different blue coloured links. Deleting the *entire* theme results in black coloured links. So maybe some code that ran in SWT (native GTK+ or something else, now missing) read "link_color", and if not present it defaults to another keyword.

Adwaita on the other hand defines the link colours with *something* in (or all of) the following code:

/*********
 * Links *
 *********/
button:link > label,
button:visited > label,
*:link,
button:link,
button:visited {
  color: #2a76c6; }
  button:link > label:visited,
  button:visited > label:visited,
  *:link:visited,
  button:visited {
    color: #215d9c; }
    *:selected button:link > label:visited,
    *:selected button:visited > label:visited, *:selected
    *:link:visited, *:selected
    button:visited:link,
    *:selected button:visited {
      color: #b7d3f0; }
  button:link > label:hover,
  button:visited > label:hover,
  *:link:hover,
  button:hover:link,
  button:hover:visited {
    color: #4a90d9; }
    *:selected button:link > label:hover,
    *:selected button:visited > label:hover, *:selected
    *:link:hover, *:selected
    button:hover:link,
    *:selected button:hover:visited {
      color: #edf4fb; }
  button:link > label:active,
  button:visited > label:active,
  *:link:active,
  button:active:link,
  button:active:visited {
    color: #2a76c6; }
    *:selected button:link > label:active,
    *:selected button:visited > label:active, *:selected
    *:link:active, *:selected
    button:active:link,
    *:selected button:active:visited {
      color: #dbe9f7; }
  button:link > label:backdrop:backdrop:hover,
  button:visited > label:backdrop:backdrop:hover, button:link > label:backdrop:backdrop:hover:selected,
  button:visited > label:backdrop:backdrop:hover:selected, button:link > label:backdrop,
  button:visited > label:backdrop,
  *:link:backdrop:backdrop:hover,
  button:backdrop:backdrop:hover:link,
  button:backdrop:backdrop:hover:visited,
  *:link:backdrop:backdrop:hover:selected,
  button:backdrop:backdrop:hover:selected:link,
  button:backdrop:backdrop:hover:selected:visited,
  .selection-mode.titlebar:not(headerbar) .subtitle:backdrop:backdrop:hover:link,
  headerbar.selection-mode .subtitle:backdrop:backdrop:hover:link,
  *:link:backdrop,
  button:backdrop:link,
  button:backdrop:visited {
    color: #4a90d9; }
  infobar.info *:link, infobar.info button:link,
  infobar.info button:visited, infobar.question *:link, infobar.question button:link,
  infobar.question button:visited, infobar.warning *:link, infobar.warning button:link,
  infobar.warning button:visited, infobar.error *:link, infobar.error button:link,
  infobar.error button:visited, button:link > label:selected,
  button:visited > label:selected, *:selected button:link > label,
  *:selected button:visited > label,
  *:link:selected,
  button:selected:link,
  button:selected:visited,
  .selection-mode.titlebar:not(headerbar) .subtitle:link,
  headerbar.selection-mode .subtitle:link, *:selected
  *:link, *:selected
  button:link,
  *:selected button:visited {
    color: #dbe9f7; }

Hard to say which of those are necessary in which cases.

But it looks like a Clearlooks-Phenix theme issue? Adwaita does define link colours so likely this is expected of other themes as well.

If I add this, the link colours in the Java Stack Trace console and in the default empty Package Explorer are fine again:

diff --git a/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/eclipse-patches/theme-patches.css b/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/eclipse-patches/theme-patches.css
index cd6d23d..da42f59 100644
--- a/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/eclipse-patches/theme-patches.css
+++ b/src/clearlooks-phenix-theme-7.0.1/gtk-3.0/eclipse-patches/theme-patches.css
@@ -329,3 +329,11 @@ tooltip *,
 .tooltip * {
        color: @theme_tooltip_fg_color;
 }
+
+*:link {
+       color: @link_color;
+}
+
+*:link:visited {
+       color: @visited_link_color;
+}

I'll need to check an HTML snippet though in the SWT browser. Maybe more is needed from the Adwaita .css for links (there is a lot as seen above). I suggest we open an internal ticket and set it as blocking for our 4.13 update. If it can't be fixed in Clearlooks-Phenix (which I doubt) we can come back to this Eclipse ticket or open a new one.
Comment 7 Andrey Loskutov CLA 2019-06-25 08:35:05 EDT
(In reply to Simeon Andreev from comment #6)
> Sorry, I looked at the Java editor and the Problems view colours and I
> thought all is well.

:-) I've discovered it because I always use latest snapshots as my main IDE, and if you have to look at staks in the Console, you are immediately noticing that something looks wrong.

FYI: one can open org.eclipse.swt.examples.views bundle in the workspace and in the debugger instance one can open "SWT Controls" view that contains a "Color" tab with all Color definitions. Comparing that with the commit before shows nicely constants that change they value.

> I'll need to check an HTML snippet though in the SWT browser. Maybe more is
> needed from the Adwaita .css for links (there is a lot as seen above). I
> suggest we open an internal ticket and set it as blocking for our 4.13
> update. If it can't be fixed in Clearlooks-Phenix (which I doubt) we can
> come back to this Eclipse ticket or open a new one.

OK, let try internally with the updated theme, and if this will work, we could close this bug.
Comment 8 Eric Williams CLA 2019-06-25 09:25:33 EDT
Try creating a native GTK snippet that uses either a GtkLinkButton or GtkLabel with markup set (aka a link GtkLabel). That will tell you whether the Clearlooks theme is broken or something else.
Comment 9 Alexandr Miloslavskiy CLA 2019-06-25 11:35:09 EDT
The new link color of Clearlooks-Phenix is not a bug. In fact, this is a fix!

Previous code parsed CSS and I think it grabbed '@define-color link_color #0000ee'. However, in Clearlooks-Phenix this is a trap, because 'link_color' is not used for links. Instead, link color is not defined, so it's the default black #000000.

Easy to verify with:
`GTH_THEME=Clearlooks-Phenix gtk3-demo`

If blue color is wanted, Clearlooks-Phenix should define it for links.
Comment 10 Andrey Loskutov CLA 2019-06-25 11:49:31 EDT
(In reply to Alexandr Miloslavskiy from comment #9)
> The new link color of Clearlooks-Phenix is not a bug. In fact, this is a fix!
> 
> Previous code parsed CSS and I think it grabbed '@define-color link_color
> #0000ee'. However, in Clearlooks-Phenix this is a trap, because 'link_color'
> is not used for links. Instead, link color is not defined, so it's the
> default black #000000.
> 
> Easy to verify with:
> `GTH_THEME=Clearlooks-Phenix gtk3-demo`
> 
> If blue color is wanted, Clearlooks-Phenix should define it for links.

Thanks Alexandr, Eric, we will patch Clearlooks-Phenix. Closing this one.
Comment 11 Alexandr Miloslavskiy CLA 2019-06-25 11:54:10 EDT
PS: According to my current understanding, this CSS snippet defines color of links used in GtkLinkButton:

button:link
{
  color: #ff0000;
}

And this is how themes usually define colors for all links, including GtkLabel with markup:

*:link
{
  color: #ff0000;
}

NOTE: Other states can be defined, such as 'visited', 'focused', etc

NOTE: You can play with all these using GtkInspector (google to find how to enable and trigger it), it has a very handy CSS tab where you can override parts of CSS and instantly see the result
Comment 12 Eric Williams CLA 2019-06-25 11:56:36 EDT
(In reply to Alexandr Miloslavskiy from comment #11)
> NOTE: You can play with all these using GtkInspector (google to find how to
> enable and trigger it), it has a very handy CSS tab where you can override
> parts of CSS and instantly see the result

It will also show you the line number in the CSS file where the property is defined (very useful)!
Comment 13 Eric Williams CLA 2019-07-10 11:06:42 EDT
Verified in I20190710-0610.