Skip to content

Border entire line, regardless of word wrap #247472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

hickford
Copy link
Contributor

@hickford hickford commented Apr 26, 2025

Depending on theme, the active line is highlighted with a background or border. Previously, when word wrap was enabled, the border did not surround the entire line. This was confusing because commands like "cut" and "copy" apply to the entire line.

Move top and bottom borders to surround the entire line. Remove left and right borders -- these obscured text.

Delete unused method "_shouldRenderOther".

Tested with various combinations of workbench.colorTheme, editor.wordWrap and editor.renderLineHighlight.

Fixes #36839
Fixes #214857


Timeline:

Depending on theme, the active line is highlighted with a background or border. Previously, when word wrap was enabled, the border did not surround the entire line.

Move top and bottom borders to surround the entire line. Remove left and right borders -- these obscured text.

Delete unused method "_shouldRenderOther".

Tested with various combinations of workbench.colorTheme, editor.wordWrap and editor.renderLineHighlight.
@hickford
Copy link
Contributor Author

hickford commented May 7, 2025

With word wrap enabled, screenshots before and after:
1 wrapped before
2 wrapped after

@hickford
Copy link
Contributor Author

hickford commented May 7, 2025

Without word wrap enabled, screenshots before and after. There's a tiny 1 pixel difference on the left, which I think is an improvement.

3 unwrapped before
4 unwrapped after

@aiday-mar aiday-mar assigned aiday-mar and unassigned alexdima May 7, 2025
@aiday-mar aiday-mar added the editor-lines Issues related to editor lines label May 7, 2025
@aiday-mar aiday-mar self-requested a review May 8, 2025 08:45
@aiday-mar
Copy link
Contributor

aiday-mar commented Jun 5, 2025

Hi thank you @hickford for doing this PR. I wonder if we should merge this PR. Perhaps users are used to seeing the box surround the active view line and not the active mode line, and I wonder if they will be confused if we start surrounding the model line instead.

Copy link
Contributor

@aiday-mar aiday-mar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have thought about this some more and I am not sure if we should implement this so it is the default behavior. The reasons for this are the following.

  1. I have recently merged the feature which allows defining variable line heights in the editor, so a line can have a height of 30 and the one after can have a height of 50. The advantage of having the border surround the view line only and not the model line is that it allows the user to better grasp the exact height of the given view line (which can differ as explained). This is especially important when line numbers are not visible in the gutter.
  2. I think screen reader users may well be relying on the active view line being highlighted when coding. If the whole model line is highlighted, it makes it could make it hard to distinguish where the cursor is located for screen reader users.

As such I suggest we add a setting to control this behavior which will control whether we surround the view line or the model line. I think the default should be the current behavior.

@aiday-mar
Copy link
Contributor

As well as this I noticed you could simplify the code as follows:

renderData[lineIndex] = this._renderOne(ctx, lineNumber === firstLine, lineNumber === lastLine);

Also generally we try to keep changes to a minimum in PRs so as to minimize the risk of breaking existing behavior so I would suggest to remove the _shouldRenderOther method in a separate PR and to not modify the class names where possible. If you do modify a class name I think it would be useful to verify that this initial class name is not referenced elsewhere. I saw for example that current-line-exact was referenced in the file view.css so the class-name also needs to be changed there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changes-requested editor-lines Issues related to editor lines
Projects
None yet
Development

Successfully merging this pull request may close these issues.

lineHighlightBorder should frame all warped line renderLineHighlight should highlight logical line
3 participants