From 1a4f9b289130593d77db0759be738624203731e1 Mon Sep 17 00:00:00 2001
From: Galen Elias <gelias@gmail.com>
Date: Thu, 26 Sep 2024 06:30:06 -0700
Subject: [PATCH] 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
---
 crates/editor/src/editor.rs  |  3 ++-
 crates/editor/src/element.rs | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs
index 730482b123bf77f9691cf7a409885de4644b1e3c..102e94f1abb41e1d9e7506b8ecafa0fc57aaa811 100644
--- a/crates/editor/src/editor.rs
+++ b/crates/editor/src/editor.rs
@@ -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()
diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs
index 9fe05bc4f26063e7c7a760df078a709358913c1c..f5db7b94ba8ad51361f875987b46037fe273c560 100644
--- a/crates/editor/src/element.rs
+++ b/crates/editor/src/element.rs
@@ -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;