Can you please create patch that I can apply to test? Also before/after image would be nice.

Created attachment 331921 [details] [review]
Improve the asklist style

Here is the patch.

Created attachment 331922 [details]
Screenshot of the improved style

And here is the screenshot illustrating the changes.

If you prefer a flatter style, just tell me.

Thanks,
  Antonio

I have no idea what I would prefer... :( Maybe you should try ask in mailing-list for review? To know what other thinks?

Did you also test with default panel size? Right now I just did quick look at patch and your screen-shot.

What do you think about using margin (1px ?) to create small space around buttons?

OK, I will prepare a screenshot with the default panel size, with and without a margin, and then ask on the mailing list.

Since I have to touch the style again, do you think I should use the named color Adwaita defines?
https://git.gnome.org/browse/gtk+/tree/gtk/theme/Adwaita/gtk-contained.css#n4636

Or do you prefer literal values for colors?

Thanks,
   Antonio

(In reply to Antonio Ospite from comment #5)
> Since I have to touch the style again, do you think I should use the named
> color Adwaita defines?
> https://git.gnome.org/browse/gtk+/tree/gtk/theme/Adwaita/gtk-contained.
> css#n4636
> 
> Or do you prefer literal values for colors?

Up to you, also it depends if we want that panel automatically follows Adwaita changes...

Created attachment 332470 [details]
Screenshot of the improved style v2

Hi, 

I am attaching an updated screenshot which also shows the variant with a margin around the buttons.

It looks good IMHO, I'll ask on the mailing list if people have any preference and then come back with a final patch.

Thanks,
   Antonio

I would go with "After". Just my personal preference, but I am mostly using window picker I would not be directly affected of that change.

I would like to point out that the spanning on multiple rows might be a feature for some people. In particular for people with lots of open windows. I think I even recall a discussion about that on the mailing list some time ago. Does it mean that with your patches its no longer possible to get two rows of windows?

I have to say that I too prefer the version without the margins.

While testing the two variants I found a difference also from an usability point of view: when the mouse pointer is at the bottom edge of the screen, if the button has a margin it won't get the click event.

It may be subjective but I find this a little annoying because it forces me to aim better, while I usually just go on the bottom edge and only aim horizontally.

If people prefer the version with margins this issue can be alleviated by not having a margin on the bottom, but then the look is a bit asymmetric.

About spanning multiple rows: that also was forcing me to aim more precisely, while with one row of buttons I can be more approximate. So I prefer having one row, even for 48px panels.

Anyways, I tried and the list ow windows will still span on multiple rows when the panel size is >= 64 pixels.

Thanks for the feedback,
   Antonio

Created attachment 334053 [details] [review]
Improve the tasklist style v2

OK, I am attaching a v2 of the version without margins, which has got twice as much votes than the one with margins (2 vs. 1 ...).

Changes since v1: added missing white space after colons, added an explicit border color.

Thanks,
   Antonio

Review of attachment 334053 [details] [review]:

What is X-Face? It is enough to just add bug link, please without 'Fixes' part.

(In reply to Alberts Muktupāvels from comment #11)
> Review of attachment 334053 [details] [review] [review]:
> 
> What is X-Face? It is enough to just add bug link, please without 'Fixes'
> part.

An X-Face is a way to represent a small bitmap image in a textual format: http://www.dairiki.org/xface/

Some email clients (and web archives of mailing lists) can decode X-Face headers in emails and display the actual image; such a header is present in my patches because I usually submit patches with git-send-email and so I configured git to put my logo as an X-Face header in patches automatically when running git-format-patch.

Bottom line: just ignore it.

Should I send a v3 to remove the "Fixes" bit, or will you amend the commit message locally?

Thanks,
   Antonio

Review of attachment 334053 [details] [review]:

I think that variant with margin will work better. Remember that panel can be used also vertically.

::: data/theme/Adwaita/gnome-panel.css
@@ +84,3 @@
+  text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+  -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);

Default padding is 4px 8px and I think it is too big for tasklist button!

@@ +106,3 @@
+
+#tasklist-button:first-child {
+  border-width: 1px; /* the first child has a border also on the left */

This does not work if buttons are in two ore more lines.

Created attachment 334154 [details] [review]
Improve the tasklist style v3

OK, here is the version with margins.

I explained why I think that usability-wise having no margins is slightly better (at least for a bottom panel), but I agree that the version with margins _looks_ more refined.

Changes since v2:
  - paddings are now explicitly set to 2px 4px
  - no more special treatment for the first child
  - 1px margin

I tested the patch with vertical panels too and it looks OK.

BTW I noticed that gnome-panel fails to expand the content vertically sometimes, but this is unrelated to the theme patch.

Thanks,
   Antonio

(In reply to Antonio Ospite from comment #14)

[...]
> BTW I noticed that gnome-panel fails to expand the content vertically
> sometimes, but this is unrelated to the theme patch.
> 

I mean when vertical panels are used.

I know that there is problem with vertical panel, but since my plan is to write new panel code I have not tried to solve problem...

About patch:
- I think that text for inactive windows are too light when using light theme.
- Do we really need effects for icons? Is not enough to just change border and/or background and/or text color?

About version without margin:
Style for vertical panel probably can be fixed by changing button style with:
.vertical #tasklist-button { ... }

Then only problem remains with horizontal panel when items are placed in two (or more?) rows...

(In reply to Alberts Muktupāvels from comment #16)
> I know that there is problem with vertical panel, but since my plan is to
> write new panel code I have not tried to solve problem...
>

I see.

> About patch:
> - I think that text for inactive windows are too light when using light
> theme.
> - Do we really need effects for icons? Is not enough to just change border
> and/or background and/or text color?
>

I think I just took the button style from the libgtk theme and copied it. That's why it is like that.

> About version without margin:
> Style for vertical panel probably can be fixed by changing button style with:
> .vertical #tasklist-button { ... }
> 
> Then only problem remains with horizontal panel when items are placed in two
> (or more?) rows...

I'd say let's go with the version with margins for 3.22, which would be already a grat improvement compared to the current situation; and if I have time, I'll try to sort out the issues with the margin-less variant for 3.24.

(In reply to Antonio Ospite from comment #17)
> I'd say let's go with the version with margins for 3.22, which would be
> already a grat improvement compared to the current situation; and if I have
> time, I'll try to sort out the issues with the margin-less variant for 3.24.

Ok, but I still would like that this problem is fixed:
"I think that text for inactive windows are too light when using light theme."

Created attachment 337357 [details]
Remove the white text-shadow and use a darker color on :hover

(In reply to Alberts Muktupāvels from comment #18)
> (In reply to Antonio Ospite from comment #17)
> > I'd say let's go with the version with margins for 3.22, which would be
> > already a grat improvement compared to the current situation; and if I have
> > time, I'll try to sort out the issues with the margin-less variant for 3.24.
> 
> Ok, but I still would like that this problem is fixed:
> "I think that text for inactive windows are too light when using light
> theme."

It is the same color used by the gtk Adwaita theme for inactive/backdrop buttons and notebook tabs, so I would leave it that way for consistency.

Removing the white text-shadow and adding a darker color for the :hover pseudoclass, should improve the style a little bit while still keeping the same colors as the gtk theme.

BTW Alberts, for these quick discussions IRC could work better, what about a #gnome-flashback channel?

Ciao ciao,
   Antonio

Ping.

Is the style in comment #19 acceptable? It still has the light text on unfocused buttons, but it makes the text darker on hover.

If you really want a darker text for unfocused buttons I can do that of course, I was just noticing what it will be different from the default buttons style.

Thanks,
   Antonio

(In reply to Antonio Ospite from comment #19)
> Created attachment 337357 [details]
> Remove the white text-shadow and use a darker color on :hover
> 
> (In reply to Alberts Muktupāvels from comment #18)
> > (In reply to Antonio Ospite from comment #17)
> > > I'd say let's go with the version with margins for 3.22, which would be
> > > already a grat improvement compared to the current situation; and if I have
> > > time, I'll try to sort out the issues with the margin-less variant for 3.24.
> > 
> > Ok, but I still would like that this problem is fixed:
> > "I think that text for inactive windows are too light when using light
> > theme."
> 
> It is the same color used by the gtk Adwaita theme for inactive/backdrop
> buttons and notebook tabs, so I would leave it that way for consistency.

But panels are not regular windows/applications.

> Removing the white text-shadow and adding a darker color for the :hover
> pseudoclass, should improve the style a little bit while still keeping the
> same colors as the gtk theme.

Hover state definitely feels better in screenshot, but I still think that unfocused button text is too light.

Maybe color (that you have for hover state in screenshot) might be same for unfocused and hovered buttons and in hover state only change button background?

> BTW Alberts, for these quick discussions IRC could work better, what about a
> #gnome-flashback channel?

I have no idea how to create new channels and where to do that...

Created attachment 339619 [details]
final comparison of the new tasklist style for the light theme

(In reply to Alberts Muktupāvels from comment #21)
> (In reply to Antonio Ospite from comment #19)
[...]
>
> Hover state definitely feels better in screenshot, but I still think that
> unfocused button text is too light.
>
> Maybe color (that you have for hover state in screenshot) might be same for
> unfocused and hovered buttons and in hover state only change button
> background?
>

OK, I used the darker gray for the unfocused button, and used the same black color for the hovered and active button label.

I did it this way because using only the background for the transition unfocused->hover was too subtle, while using only the background for hover->active seemed clear enough to me.

See the attached image.

I am attaching a patch in the next comment.

> > BTW Alberts, for these quick discussions IRC could work better, what about a
> > #gnome-flashback channel?
> 
> I have no idea how to create new channels and where to do that...

Gnome channels are usually on GIMPNet (irc.gnome.org) I already created a #gnome-flashback channel.

Thanks,
   Antonio

Created attachment 339620 [details] [review]
theme: improve the tasklist style

Created attachment 347274 [details] [review]
style the box inside the button instead of the button itself

The attached patch makes the click event work also on the edges of the panel, without changing the current look of the tasklist.