[FEATURE] Only highlight the currently focussed widget

[DarkTrick]

Current situation

There's no differentiation in colors between the states :selected and :selected:focus. This leads to something like this:

Suggestion

1. Behavior: Differentiate between both states to make it very clear to the user which input currently has focus.
2. Coloring: <omitted, let's first clear up if the behavior is wanted.>

Summary of the posts below:

1. The ideal is that only the currently active, selected element has blue highlighting. This is to show the user that when they type something it would affect that very location.
2. The ideal is impossible to implement in GTK3 due to their styling constraints. Behavior described in this post would be acceptable.
3. The ideal is implementable in GTK4. (But that is might be better treated in a different issue)

[DarkTrick]

Note: How to Implement

Given, that #303 will be accepted the change is very easy: in gtk-3/_common.scss under %selected_items, the following part

  // don't differentiate between focussed and unfocussed widgets.
  &:focus, &{
    color: $selected_fg_color;
    background-color: $selected_bg_color;
  }

needs to become

  color: $selected_fg_color;
  background-color: $selected_bg_color;

  &:focus {
    color: $selected_focussed_fg_color;
    background-color: $selected_focussed_bg_color;
  }

And - accordingly - the values of the used variables must be adjusted.

[bluesabre]

At least in the Edge browser, when the URL bar has focus, the page selection is considered inactive (goes grey instead of the highlight color). It probably makes sense for us to do the same.

[DarkTrick]

Thank you for the quick look-over.
Your suggestion would be about a 6-character diff (selected-non-focussed color = selected backdrop color).
Other voices?

[DarkTrick]

I came up with these two. I can't decide which to take. I'm not a designer, so some input in coloring would really help :)

[ochosi]

I'm all for the "easier to implement" version. It's still well-readable and a good improvement over what we have now.

[DarkTrick]

Update: This is much more complicated than expected for certain cases.

Question: Is this tolerable?

No, it is not
Is this behavior for mutliselection in a GtkListBox (not TreeView) tolaerable, if everything else works fine in regard of this issue report?

Current problem

At the moment, it seems impossible implement it for GtkListBox, because

1. list (GtkListBox's CSS class) will have no indicator, if one of its children is focused
   AND
2. CSS does not enable styling of preceding elements (I'm searching here (for general CSS) and here (for a Gtk-specific answer))

This is how a GtkListBox would currently look like with multiselect:

How far I've got

General change

This is a diff for the general change to only make focus highlight

@@ -4500,13 +4500,12 @@ headerbar.selection-mode button.titlebutton,
 
 %selected_items {
 
-  // don't differentiate between focussed and unfocussed widgets.
-  &:focus, &{
+  &:focus{
     color: $selected_fg_color;
     background-color: $selected_bg_color;
   }
 
-  &:backdrop {
+  &:backdrop, & {
     color: $backdrop_selected_fg_color;
     background-color: $backdrop_selected_bg_color;
   }
@@ -4516,6 +4515,8 @@ headerbar.selection-mode button.titlebutton,
 
     @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
 
+    &:focus, &{ color: $selected_fg_color; }
+
     &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
 
     &:backdrop {

Edge-case: Treeview multiselect

This will style treeview properly (difficult because of multiselect):

    treeview:focus > treeview:selected
    {
       background: $selected_bg_color;
    }

Edge-case: Whiskermenu (multiple focused elements)

This will style Whiskermenu properly (in _xfce.scss) (difficult, because whiskermenu kind of has two focused elements at the same time.):

#whiskermenu-window box :selected
{
  color: $selected_fg_color;
  background-color: $selected_bg_color;
}

Edge-case: GtkListBox multiselect

      // 1) focused row itself
      row:focus {
        background: $selected_bg_color;
      }

      // 2) every selected row BELOW the focused row
      row:focus ~ row:selected {
        background: $selected_bg_color;
      }

     // 3) every selected row ABOVE the focused row
     // still searching (see problem description above)

Edge-case GtkLabel (??)

Problem:
Open gtk3-demo, page3, click in treeview in the top left, press tab, [label receives focus and turns blue], mouse-click in treeview again, label stays blue (label should loose the blue background).

Probably easy to solve; I'm still working on GtkListBox atm.

[DarkTrick]

GTK3 does not support this feature for all widgets (namely the GtkListBox list box is impossible to solve in GTK3).
GTK4 offers a solution for GtkListBoxes as well (:focus-within).

Question

Is it acceptable to

• In general only highlight the currently selected item in focus.
• Only GtkListBoxes are always colored as if they have the focus.

?

Here's an example from gtk3-demo.

I know this is an inconsistency, but at least all apps that don't involve GtkListBoxes wore more intuitive that way.

[ochosi]

@DarkTrick I wasn't around for a while, if you still wanna fix this a PR would be appreciated! (I can live with the ListBox inconsistency)

[DarkTrick]

From a thousand tabs I found this again.
Thanks for the feedback @ochosi ! Unfortunately I have no resources at the time :(

If this thing stays unresolved long enough, I will eventually catch on to it again (OT: together with some other stuff)