[Bug]: The selected prompt box is incorrect

[himicoswilson]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Expected Behavior

Normal display is OK

Steps To Reproduce

No response

Environment

- OS: Mac
- VSCode: 1.78.2
- Extension: 1.1.15
- Theme: Github Dark

Anything else?

No response

[illixion]

Please switch to a compatible theme like Dark+ and try again.

[himicoswilson]

Yes, I tried to switch to Dark+, but the display is still abnormal

[illixion]

Just to clarify, you're talking about the selection box's blue background overshooting by one character? If so, I can see this on my end as well, though I never really paid attention to it.

[himicoswilson]

My native language is not English, so I may not express clearly.

The problem is that there is indeed an extra character distance, and there are some minor flaws in the display such as the rounded corners.

I uninstalled the plugin and took another screenshot for comparison. You can take a look.

[illixion]

Thank you for clarifying, now I understand what you mean, I'll look into this.

[illixion]

I've looked into this, but couldn't find a way to fix the issue. Seems like it's caused by setting div.cslr.monaco-editor-background.bottom-right-radius to have a transparent background-color, meaning that the selection color is applied underneath the actual selection box element. This issue doesn't really bother me, so I won't be working on it, but if anyone finds a solution then feel free to comment here and/or make a PR.

[axaxxx]

hi i found a solution for this that works at least for me

in vscode_vibrancy.imports custom css add lines:

.lines-content.monaco-editor-background > .view-overlays > div > div.cslr.selected-text {
    background-color: rgba(0, 0, 0, 0) !important;
}

.lines-content.monaco-editor-background > .view-overlays.focused > div > div.cslr.selected-text {
    background-color: rgba(0, 0, 0, 0) !important;
}

.lines-content.monaco-editor-background > .view-overlays > div > div:last-of-type.cslr.selected-text,
.lines-content.monaco-editor-background > .view-overlays > div > div:nth-last-of-type(2).cslr.selected-text {
    background-color: rgba(252, 252, 250, 0.05) !important;
}

.lines-content.monaco-editor-background > .view-overlays.focused  > div > div:last-of-type.cslr.selected-text,
.lines-content.monaco-editor-background > .view-overlays.focused  > div > div:nth-last-of-type(2).cslr.selected-text {
    background-color: rgba(38, 79, 120,0.6) !important;
}

and in vscode settings add: "editor.guides.indentation": false

[axaxxx]

and in vscode settings add: "editor.guides.indentation": false

to preserve "editor.guides.indentation": true and only change it to false when text is being selected

i wrote a simple extension with yo code (selecting New Extension (TypeScript))

tldr of this extension: src/extension.ts:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    console.log('vibrancy-fix-selection-preserve-editor-guides-indentation is active!');

    const config = vscode.workspace.getConfiguration('editor.guides');
    const isIndentationGuideEnabled = config.get('indentation');
    if (isIndentationGuideEnabled) {
        let editorselection = vscode.window.onDidChangeTextEditorSelection((e: vscode.TextEditorSelectionChangeEvent) => {
                if (e.selections[0] && !e.selections[0].isEmpty) {
                    config.update('indentation', false, true);
                } else {
                    config.update('indentation', true, true);
                }
        });
        context.subscriptions.push(editorselection);
    }
}

export function deactivate() {}

and add to package.json:

"activationEvents": [
    "onStartupFinished"
],

the ready .vsix file of extension in the attachment vibrancy-fix-selection-preserve-editor-guides-indentation-0.0.2.vsix.zip