UI Theme Add: select-box(drop downs) selection and hover colors

[cleidigh]

Currently all widgets using 'select-box' cannot theme
the selected or hover item colors (foreground/background)
The the color is controlled by the platform. That overrides
normal CSS approaches/selectors.

After a bunch of research, I did figure out one solution
and made a prototype in a small electron app.

There appear to be three options:

1 - Some CSS guru knows of a better trick
2 - Use an input box on top of the current list widget
3 - Use something like I came up with:

one select box that is the normal drop-down with current selection
automatically includes the drop-down arrow
a second select box which can be made hidden/visible depending
on the first lightbox focus/selection

The second select box can be styled with option:checked and box shadow

option:checked {
color: #ffffff;
box-shadow: 0 0 10px 100px #905000 inset;
}

This box-shadow is the only thing I found that overwrites the platform colors
It does NOT work on a select box with only one item showing (nominal case)
That is what I came up with the two boxes and a bit of code to display and hide
the second box with the options list

I think option two is more complicated and inherits the unneeded list properties
if there is no option one , I would go ahead and prototype within VSC and do a PR

Thoughts ?

[aeschli]

I'm only guessing, but trying to mimicking the native look perfectly for all platforms could be difficult.
Maybe easier to replace the dropdown with our own implementation?
@bpasero ?

[bpasero]

Need to investigate in May what to do here, I think there are duplicates.

[cleidigh]

@aeschli
I agree with you multiplatform comment, but the way that I approach to problem utilizes
the native select for each part (the main styling in drop-down arrow in particular). I think this guarantees the "perfect" look assuming box-shadow works on all platforms.

@bpasero
@aeschli
How about I visually setup the debugger launch configuration dropdown and you can take
a look at how it looks on OS X and Linux. I think this is easier than a complete new implementation.

Useful ?

[bpasero]

@cleidigh can you share the code how you made the currently selected element in the dropdown have a different color? I am talking about the blue thing here:

[cleidigh]

@bpasero
it was a rainy weekend in Providence, I tried to get this to work but couldn't get past overflow restriction
in the debug action bar. I'd really like to prove it looks fine like the basic electron app.

if you tip me off on how to get around that I can finish up the prototype and VSC - can you do that for my education anyway? I could not get a relative for absolutely positioned div for the second select
to overflow into the bottom if the debugger panel. probably a flex box attribute somewhere

I will post the electron code, for easy multiplatform test, I couldn't package and OS X version
to test on my Mac Mini. I submitted the small amount of typescript for the event and visibility handling
I'm sure you can imagine it's quite simple. you'll have it once a post the electron code.

HTML snippet from app: two selects make the second visible on selection the first

snippet.txt

CSS: it's just one line, the inset box shadow color, but it only works on the select with this size greater than one attribute (already expanded) it has no effect on the first select (collapsed dropDown)

select {
font-size: 20px;
background-color: #b57800;
color: #ffffff;

}

option:checked {
color: #ffffff;
box-shadow: 0 0 10px 100px #905000 inset;
}

a hover pseudo- attribute will also work on the second select , not the first

[cleidigh]

@aeschli
@bpasero
I added the basic mouse level support to the basic keyboard (note that I used enter to select)
also managed test in OS X - looks good there as well
here is a link to the app (based on the electron hello world)

https://github.com/cleidigh/electron-select-example

Now if I can just get the overflow to work...

[cleidigh]

...a little bit of overlay cheating - but real styling

[bpasero]

@cleidigh does not seem to work on Windows 10 unfortunately:

Maybe for accessibility reasons it is not possible to color the selected item anymore in Win10?

[cleidigh]

@bpasero
well that's disappointing, tricks always break somewhere.
I will do some more research, and look at the existing components. maybe an existing select box
combined with a simplified single select list.

can you give me an idea of dealing with the overflow issue for my understanding?
I see overflow hidden in the action bar yet the select box dropDown seems to override this somehow
using a fixed overlay div is ugly and difficult to keep alignment obviously.

if I can't find anything for Windows ten, I think using the combination above would most closely
track the native looks on all platforms, while allowing full styling.

agree?

[cleidigh]

@bpasero
just another question - when you tried Windows ten , did you use the keyboard or mouse?
I might have missed something with the mouse that still used the first select box.

[bpasero]

I used the keyboard to move up and down the selection.

It is unlikely that we would introduce a custom dropdown list only to get the styling right I think. Maybe there is another CSS property we can set to get the selection color changed?

[cleidigh]

I updated the electron project to have a standalone select box eliminating event issues
I'm still wondering if the first select box was selected
the options are identical so you can't tell the difference
I Tab to the slack box, then press Enter that selects (makes visible the second select box with the box-shadow styling
I'm setting up a Windows ten VM to test also

there's got to be some way, I hate giving up on these types of things !! and there are several
select boxes so they are noticeable with many theme types

[cleidigh]

@bpasero
my fault, I had managed to somehow comment out the mouse click. and unless you used Enter
the native select box was activated. I updated the app and also added alt-DownArrow activation.
the code has to make sure no events get to the select box that can activate the first (top) one
otherwise you get the native look.

I got a Windows ten virtual machine on another computer made sure it was fully updated
and tested - It looks good !

I can try out a Linux VM unless it's quick for you , is Debian what you usually use?
if it works on all three platforms I'd like to make the contribution after discussing
the specifics with you.

[bpasero]

@cleidigh I fear we cannot use the trick of expanding the dropdown in-place, this would push all other elements down. Thanks for trying :)

[cleidigh]

@bpasero
Understand nothing can move. Also not a critical priority.
Given I think the first problem solved and I think the other problem can be as well,
do you mind if I continue to work on this in the background and if I find a straightforward/multiplatform
solution throw it your way - no time pressure ?
Thanks for consideration

[cleidigh]

@bpasero

I'm pretty pleased, 98% complete, straightforward solution:

• 3 files changed
• All functionality in selectbox.ts\css
• SelectBox interface unchanged
• No client changes required
• A few CSS tricks, plus select box event handling
• Consistency for drop downs across all platforms (fixing OS X weird chrome rendering)
• Tested Debug Configuration, Debug Breakpoint Widget, Panel Output Channel, Terminal selection
• submitted PR Fix #25965 Selectbox Dropdown theming and platform consistency [WIP] #27298 for your review whenever

Platforms Tested (snapshots follow):

• Windows 7 (VM) - Main build/test platform
• Windows 10 (VM)
• OSX Sierra (Native MacBook Air)
• Debian 8 (VM)

ToDo:

• Determine final dd colors (existing list, input or add new color mappings for select box)
• High contrast outline
• Light theme inversion color for hover

Inconsistent OS X (current)

OS X with theme fixed:

Debian 8:

Windows 10:

Windows 7: