Blockly Editor: combine renderer selection and show item label icons

[jimtng]

The current icons are too crowded for mobile devices. This PR combines the renderer choice and the show labels into one icon.

Before

After

[relativeci]

Job #1692: Bundle Size — 11.01MiB (~+0.01%).

716e8d8(current) vs e2738b5 main#1690(baseline)

Warning

Bundle contains 19 duplicate packages – View duplicate packages

Bundle metrics   1 change

	Current Job #1692	Baseline Job #1690
Initial JS	1.85MiB	1.85MiB
Initial CSS	607.92KiB	607.92KiB
Cache Invalidation	16.99%	16.76%
Chunks	220	220
Assets	242	242
Modules	3088	3088
Duplicate Modules	164	164
Duplicate Code	1.77%	1.77%
Packages	150	150
Duplicate Packages	18	18

Bundle size by type   1 change 1 regression

	Current Job #1692	Baseline Job #1690
JS	9.2MiB (+0.01%)	9.2MiB
CSS	889.38KiB	889.38KiB
Fonts	526.1KiB	526.1KiB
Media	295.6KiB	295.6KiB
IMG	140.74KiB	140.74KiB
HTML	1.24KiB	1.24KiB
Other	871B	871B

---

View job #1692 report View jimtng:blockly-renderer-icons branch activity View project dashboard

[jimtng]

The second commit capitalizes the renderer name. I think it looks nicer

[florian-h05]

For mobile phones, this looks really good!
I however wonder if the options however shouldn’t stay separated on big enough screens for faster access.

[jimtng]

I however wonder if the options however shouldn’t stay separated on big enough screens for faster access.

I agree. Just need to add more code. I'll add that tomorrow.

[jimtng]

It wasn't too hard, so I've made the changes.

On desktop it now looks like this (with an icon instead of the name)

[ghys]

It does look good, thank you!