Move link icon to CSS

Moved the link icon to CSS to reduce content size

app/assets/stylesheets/highlight/common.scss

 @import '../framework/variables';
 @import './conflict_colors';
+@import 'page_bundles/mixins_and_variables_and_functions';
 
 @mixin diff-background($background, $idiff, $border) {
   background: $background;
@@ -93,3 +94,30 @@
     }
   }
 }
+
+@mixin line-number-link($color) {
+  &::before {
+    @include gl-visibility-hidden;
+    @include gl-display-inline-block;
+    @include gl-align-self-center;
+    @include gl-mt-2;
+    @include gl-mr-2;
+    @include gl-w-4;
+    @include gl-h-4;
+    @include gl-float-left;
+    background-color: $color;
+    mask-image: asset_url('icons-stacked.svg#link');
+    mask-repeat: no-repeat;
+    mask-size: cover;
+    mask-position: center;
+    content: '';
+  }
+
+  &:hover::before {
+    @include gl-visibility-visible;
+  }
+
+  &:focus::before {
+    @include gl-visibility-visible;
+  }
+}

app/assets/stylesheets/highlight/themes/dark.scss

@@ -90,6 +90,10 @@ $dark-il: #de935f;
 
 .code.dark {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($dark-line-num-color);
+  }
+  
   .line-numbers,
   .diff-line-num {
     background-color: $dark-main-bg;

app/assets/stylesheets/highlight/themes/monokai.scss

@@ -91,6 +91,10 @@ $monokai-gh: #75715e;
 
 .code.monokai {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($monokai-line-num-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $monokai-bg;

app/assets/stylesheets/highlight/themes/none.scss

@@ -11,6 +11,10 @@
 
 .code.none {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($black-transparent);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $gray-light;

app/assets/stylesheets/highlight/themes/solarized-dark.scss

@@ -94,6 +94,10 @@ $solarized-dark-il: #2aa198;
 
 .code.solarized-dark {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($solarized-dark-line-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $solarized-dark-line-bg;

app/assets/stylesheets/highlight/themes/solarized-light.scss

@@ -101,6 +101,10 @@ $solarized-light-il: #2aa198;
 
 .code.solarized-light {
   // Line numbers
+  .file-line-num {
+    @include line-number-link($solarized-light-line-color);
+  }
+
   .line-numbers,
   .diff-line-num {
     background-color: $solarized-light-line-bg;

app/assets/stylesheets/highlight/white_base.scss

@@ -78,6 +78,10 @@ $white-gc-bg: #eaf2f5;
 }
 
 // Line numbers
+.file-line-num {
+  @include line-number-link($black-transparent);
+}
+
 .line-numbers,
 .diff-line-num {
   background-color: $gray-light;

app/views/shared/_file_highlight.html.haml

@@ -2,13 +2,11 @@
   -  offset = defined?(first_line_number) ? first_line_number : 1
   .line-numbers
     - if blob.data.present?
-      - link_icon = sprite_icon('link', size: 12)
       - link = blob_link if defined?(blob_link)
       - blob.data.each_line.each_with_index do |_, index|
         - i = index + offset
         -# We're not using `link_to` because it is too slow once we get to thousands of lines.
-        %a.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
-          = link_icon
+        %a.file-line-num.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
           = i
   - highlight = defined?(highlight_line) && highlight_line ? highlight_line - offset : nil
   .blob-content{ data: { blob_id: blob.id, path: blob.path, highlight_line: highlight, qa_selector: 'file_content' } }

changelogs/unreleased/move-link-icon-to-css.yml

+---
+title: Move link icon to CSS
+merge_request: 56980
+author:
+type: performance

spec/features/projects/blobs/blob_line_permalink_updater_spec.rb

@@ -44,17 +44,6 @@ RSpec.describe 'Blob button line permalinks (BlobLinePermalinkUpdater)', :js do
         expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: ending_fragment)))
       end
 
-      it 'changes fragment hash if icon inside line number link is clicked' do
-        ending_fragment = "L7"
-
-        visit_blob
-
-        find("##{ending_fragment}").hover
-        find("##{ending_fragment} svg").click
-
-        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(project_blob_path(project, tree_join(sha, path), anchor: ending_fragment)))
-      end
-
       it 'with initial fragment hash, changes fragment hash if line number clicked' do
         fragment = "L1"
         ending_fragment = "L5"
@@ -94,17 +83,6 @@ RSpec.describe 'Blob button line permalinks (BlobLinePermalinkUpdater)', :js do
         expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: ending_fragment)))
       end
 
-      it 'changes fragment hash if icon inside line number link is clicked' do
-        ending_fragment = "L7"
-
-        visit_blob
-
-        find("##{ending_fragment}").hover
-        find("##{ending_fragment} svg").click
-
-        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(project_blame_path(project, tree_join('master', path), anchor: ending_fragment)))
-      end
-
       it 'with initial fragment hash, changes fragment hash if line number clicked' do
         fragment = "L1"
         ending_fragment = "L5"