[3.x] Refactor layer property editor grid

[pouleyKetchoupp]

Implements proposal godotengine/godot-proposals#2770 on the 3.x branch (see #51039 for 4.0), based on different comments and suggestions.

List of changes:

• Now able to display up to 32 layers for physics in 4x2 blocks (still 20 layers in 5x2 blocks for render because some layers are reserved)
• Also show 32 layers for physics/navigation layer names in project settings
• Adjustable grid size to fit available space in dock
• Expansion icon to display more layers vertically
• Layer numbers in cells to help with selection (cells are also slightly larger to fit the numbers)

For now I haven't implemented the label for layer names like in godotengine/godot-proposals#2770 (comment), because tooltips are already displaying them and it can wait for feedback before doing further improvements if needed.

Physics layers:

Render layers:

Rescaling demo:

[pouleyKetchoupp]

I've pushed text color changes based on #51039 (comment) (CC @Calinou).

In comparison to 4.0, I'm using dark_color_3 instead of font_hover_color for selected cells in order to get better contrast (especially on light themes), due to cells using less of the highlight color.

This is the result with the default theme:

And with a light theme:

---

For reference, that was the result on a light theme with the same settings as on master:

[akien-mga]

Looks good to me.

I was just wondering if it could be problematic for UX that the numbers are not contiguous, e.g. when looking at the first row:

 1  2  3  4   9 10 11 12

One alternative could be to write top-to-bottom and then left-to-right like this:

 1  3  5  7   9 11 13 15
 2  4  6  8  10 12 14 16

But I don't know if that's better.

[YuriSizov]

I was just wondering if it could be problematic for UX that the numbers are not contiguous, e.g. when looking at the first row:

I think that contiguous rows is how it is currently, but we still split it in chunks, so it is even more confusing IMO:

 1  2  3  4  5 < -- >  6  7  8  9 10
11 12 13 14 15 < -- > 16 17 18 19 20

So this is actually better for my taste.

[pouleyKetchoupp]

Numbers are organized by blocks to keep things consistent when resizing and follow left-to-right reading in each block to make it intuitive in English. It could be inverted for RTL languages, but apart from that I don't see another approach that really works in term of UX.

[akien-mga]

Thanks!

[nitaku]

Wouldn't it be better to use a zero-based numbering, to keep it consistent with bit numbers in set_collision_mask_bit()?

0 1 2 3
4 5 6 7 etc.

I started using Godot 3.4 today, and loved the feature of controlling all 32 layers, but lost half an hour right away because I was working with the wrong bit in code.

Maybe others could get confused as well.

(Sorry if I'm writing here, I didn't feel like opening a full bug report or proposal for such a small thing.)

[pouleyKetchoupp]

@nitaku This issue is going to be solved in 4.0 with #51532, but rather than making the layers 0-based in the inspector (which is harder to read, and especially confusing to non-programmers) the script functions have been renamed and changed to use 1-based indices too.

[nitaku]

@pouleyKetchoupp Thanks, that solution will be even better!