Fix minimum gutter line number spacing (#18021)
I was inspecting how Zed did the layout in the editor, specifically for the gutter, and noticed that `em_width * X` is being used as the 'width of X consecutive characters'. Howevever, that math didn't work for me, because em_width doesn't account for the space between characters, so you can't just multiply it by a character count. One place this is actually noticeable is in the logic for `min_width_for_number_on_gutter`, where we try to reserve 4 characters of line number space. However, once you actually hit 4 characters, the actual width is bigger, causing things to resize. This seems clearly counter to the intent of the code. It seems the more correct logic is to use `em_advance` which accounts for the space between the characters. I am leaving the rest of the uses of `em_width` for generic padding. It is also possible that `column_pixels()` would be the more correct fix here, but it wasn't straightforward to use that due to it residing EditorElement source file. On my MacBook this increases the width of the gutter by 6 pixels when there are <999 lines in the file, otherwise it's identical. It might be worth doing some more general audit of some of the other uses of em_width as a concept. (e.g. `git_blame_entries_width`) https://github.com/user-attachments/assets/f2a28cd5-9bb6-4109-bf41-1838e56a75f9 Release Notes: - Fix a slight gutter flicker when going over 999 lines
This commit is contained in:
parent
1deed247eb
commit
1a4f9b2891
2 changed files with 16 additions and 3 deletions
|
@ -12956,6 +12956,7 @@ impl EditorSnapshot {
|
|||
font_id: FontId,
|
||||
font_size: Pixels,
|
||||
em_width: Pixels,
|
||||
em_advance: Pixels,
|
||||
max_line_number_width: Pixels,
|
||||
cx: &AppContext,
|
||||
) -> GutterDimensions {
|
||||
|
@ -12976,7 +12977,7 @@ impl EditorSnapshot {
|
|||
.unwrap_or(gutter_settings.line_numbers);
|
||||
let line_gutter_width = if show_line_numbers {
|
||||
// Avoid flicker-like gutter resizes when the line number gains another digit and only resize the gutter on files with N*10^5 lines.
|
||||
let min_width_for_number_on_gutter = em_width * 4.0;
|
||||
let min_width_for_number_on_gutter = em_advance * 4.0;
|
||||
max_line_number_width.max(min_width_for_number_on_gutter)
|
||||
} else {
|
||||
0.0.into()
|
||||
|
|
|
@ -4970,6 +4970,7 @@ impl Element for EditorElement {
|
|||
font_id,
|
||||
font_size,
|
||||
em_width,
|
||||
em_advance,
|
||||
self.max_line_number_width(&snapshot, cx),
|
||||
cx,
|
||||
);
|
||||
|
@ -6283,10 +6284,21 @@ fn compute_auto_height_layout(
|
|||
.unwrap()
|
||||
.size
|
||||
.width;
|
||||
let em_advance = cx
|
||||
.text_system()
|
||||
.advance(font_id, font_size, 'm')
|
||||
.unwrap()
|
||||
.width;
|
||||
|
||||
let mut snapshot = editor.snapshot(cx);
|
||||
let gutter_dimensions =
|
||||
snapshot.gutter_dimensions(font_id, font_size, em_width, max_line_number_width, cx);
|
||||
let gutter_dimensions = snapshot.gutter_dimensions(
|
||||
font_id,
|
||||
font_size,
|
||||
em_width,
|
||||
em_advance,
|
||||
max_line_number_width,
|
||||
cx,
|
||||
);
|
||||
|
||||
editor.gutter_dimensions = gutter_dimensions;
|
||||
let text_width = width - gutter_dimensions.width;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue