Improve Blame Page rendering performance

Apply Grid layout instead of Table layout on the Blame page.
Use content-visibility on the entire cell,
instead of selectively placing it on every single line and commit block.

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/74799

Changelog: other

app/assets/stylesheets/framework/files.scss

@@ -151,7 +151,17 @@
         margin: 0;
       }
 
+      //
+      // IMPORTANT PERFORMANCE OPTIMIZATION
+      //
+      // When viewinng a blame with many commits a lot of content is rendered on the page.
+      // content-visibility rule below ensure that we only render what is visible to the user,
+      // thus reducing TBT in the browser.
+      // Grid is used instead of table layout because content-visibility performs better with it.
       tr {
+        content-visibility: auto;
+        display: grid;
+        grid-template-columns: 400px max-content auto;
         border-bottom: 1px solid $gray-darker;
 
         &:last-child {
@@ -201,6 +211,10 @@
         &.lines {
           padding: 0;
         }
+
+        .code {
+          height: 100%;
+        }
       }
 
       @for $i from 0 through 5 {
@@ -222,25 +236,6 @@
           color: $gray-900;
         }
       }
-
-      //
-      // IMPORTANT PERFORMANCE OPTIMIZATION
-      //
-      // When viewinng a blame with many commits a lot of content is rendered on the page.
-      // content-visibility rules below ensure that we only render what is visible to the user, thus reducing TBT in the browser.
-      .commit {
-        content-visibility: auto;
-        contain-intrinsic-size: 1px 3em;
-      }
-
-      code .line {
-        content-visibility: auto;
-        contain-intrinsic-size: 1px 1.1875rem;
-      }
-
-      .line-numbers {
-        content-visibility: auto;
-      }
     }
 
     &.logs {

app/helpers/blame_helper.rb

 # frozen_string_literal: true
 
 module BlameHelper
+  BODY_FONT_SIZE = "0.875rem"
+  COMMIT_LINE_HEIGHT = 3 # 150% * 2 lines of text
+  COMMIT_PADDING = "10px" # 5px from both top and bottom
+  COMMIT_BLOCK_HEIGHT_EXP = "(#{BODY_FONT_SIZE} * #{COMMIT_LINE_HEIGHT}) + #{COMMIT_PADDING}"
+  CODE_LINE_HEIGHT = 1.1875
+  CODE_PADDING = "20px" # 10px from both top and bottom
+
   def age_map_duration(blame_groups, project)
     now = Time.zone.now
     start_date = blame_groups.map { |blame_group| blame_group[:commit].committed_date }
@@ -24,4 +31,12 @@ module BlameHelper
       "blame-commit-age-#{age_group}"
     end
   end
+
+  def intrinsic_row_css(line_count)
+    # using rems here because the size of the row depends on the text size
+    # which can be customized via user agent styles and browser preferences
+    total_line_height_exp = "#{line_count * CODE_LINE_HEIGHT}rem + #{CODE_PADDING}"
+    row_height_exp = line_count == 1 ? COMMIT_BLOCK_HEIGHT_EXP : total_line_height_exp
+    "contain-intrinsic-size: 1px calc(#{row_height_exp})"
+  end
 end

app/views/projects/blame/show.html.haml

@@ -27,7 +27,7 @@
           - commit_data = @blame.commit_data(blame_group[:commit])
           - line_count = blame_group[:lines].count
 
-          %tr
+          %tr{ style: intrinsic_row_css(line_count) }
             %td.blame-commit{ class: commit_data.age_map_class }
               .commit
                 = commit_data.author_avatar