Tokens no longer right-aligned

[Cellcote]

Affected version: V1.4.1

pull-3623 and pull-3730 seem to have caused (on purpose I guess?) the tokens for each entry in the auto-complete list to no longer be right-aligned.

Is there any reason for this? Right-aligned made it a lot clearer.

[nightwing]

This was changed because the new way of rendering text layer broke the right alignment, and not aligning was simpler. Also not aligning matched the way completion popup works in cloud9 and there have not been complaints about it.

Do you think the new layout is very bad or just not as good as the old one?

[Cellcote]

I think it is certainly not as good as the old one. It takes more effort to see what kind of objects are in the list. In our case, we have a lot of functions and variables with a highly variable length. Also, it seems like there is a lot more whitespace in the completion window as opposed to the right-aligned version.

[YellowAfterlife]

After updating Ace from 1.2.9 I've been experimenting with a similar style to what GameMaker Studio 2 does - proportional font in completion popup and metadata in front, I managed to achieve the following by creating the metadata token with token type matching metadata (to get them colored - obviously application-specific) before the rest rather than after,

        var metaType = "completion-meta";
        if (data.meta && /^\w+$/.test(data.meta)) {
            metaType += "." + data.meta;
        }
        tokens.push({type: metaType, value: data.meta||""});

and then styling it so that it's fixed-size and can overflow:

.ace_editor.ace_autocomplete {
    font-family: sans-serif;
}
.ace_editor.ace_autocomplete .ace_text-layer {
    margin-left: 0!important;
}
.ace_editor.ace_autocomplete .ace_completion-meta {
    opacity: 1;
    margin: 0;
    display: inline-block;
    width: 68px;
    vertical-align: bottom;
    overflow-x: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    white-space: nowrap;
    position: relative;
    padding-left: 4px;
    margin-right: 4px;
}

as for the that subtle background, well...

.ace_editor.ace_autocomplete .ace_completion-meta::before {
    opacity: 0.1;
    background: currentColor;
    display: inline-block;
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

[github-actions[bot]]

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

[mkslanc]

Fixed by #5204