Update permalink/blame buttons with line number fragment hash

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/19742

app/assets/javascripts/blob/update_line_numbers_on_blob_permalinks.js

+
+const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
+  const hash = gl.utils.getLocationHash();
+  if (hash && (/^L[0-9]+/).test(hash)) {
+    const hashUrlString = `#${hash}`;
+
+    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
+      const baseHref = permalinkButton.getAttribute('data-original-href') || (() => {
+        const href = permalinkButton.getAttribute('href');
+        permalinkButton.setAttribute('data-original-href', href);
+        return href;
+      })();
+      permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
+    });
+  }
+};
+
+export default updateLineNumbersOnBlobPermalinks;

app/assets/javascripts/dispatcher.js

@@ -37,6 +37,7 @@
 import GroupsList from './groups_list';
 import ProjectsList from './projects_list';
+import updateLineNumbersOnBlobPermalinks from './blob/update_line_numbers_on_blob_permalinks';
 const ShortcutsBlob = require('./shortcuts_blob');
 const UserCallout = require('./user_callout');
@@ -251,6 +252,19 @@ const UserCallout = require('./user_callout');
             skipResetBindings: true,
             fileBlobPermalinkUrl,
           });
+
+          const updateBlameAndBlobPermalinkCb = () => {
+            // Wait for the hash to update from the LineHighlighter callback
+            setTimeout(() => {
+              updateLineNumbersOnBlobPermalinks(
+                document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+              );
+            }, 0);
+          };
+          Array.prototype.forEach.call(document.querySelectorAll('.diff-line-num[data-line-number]'), (lineNumElement) => {
+            lineNumElement.addEventListener('click', updateBlameAndBlobPermalinkCb);
+          });
+          updateBlameAndBlobPermalinkCb();
           break;
         case 'groups:labels:new':
         case 'groups:labels:edit':

app/assets/javascripts/line_highlighter.js

@@ -67,17 +67,7 @@ require('vendor/jquery.scrollTo');
     }
     LineHighlighter.prototype.bindEvents = function() {
-      $('#blob-content-holder').on('mousedown', 'a[data-line-number]', this.clickHandler);
-      // While it may seem odd to bind to the mousedown event and then throw away
-      // the click event, there is a method to our madness.
-      //
-      // If not done this way, the line number anchor will sometimes keep its
-      // active state even when the event is cancelled, resulting in an ugly border
-      // around the link and/or a persisted underline text decoration.
-      $('#blob-content-holder').on('click', 'a[data-line-number]', function(event) {
-        event.preventDefault();
-        event.stopPropagation();
-      });
+      $('#blob-content-holder').on('click', 'a[data-line-number]', this.clickHandler);
     };
     LineHighlighter.prototype.clickHandler = function(event) {

app/assets/stylesheets/framework/highlight.scss

@@ -57,8 +57,13 @@
         visibility: hidden;
       }
-      &:hover i {
-        visibility: visible;
+      &:hover,
+      &:focus {
+        outline: none;
+
+        & i {
+          visibility: visible;
+        }
       }
     }
   }

app/views/projects/blob/_actions.html.haml

@@ -12,7 +12,7 @@
           class: 'btn btn-sm'
     - else
       = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
-          class: 'btn btn-sm' unless @blob.empty?
+          class: 'btn btn-sm js-blob-blame-link' unless @blob.empty?
   = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
       class: 'btn btn-sm'
   = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,

changelogs/unreleased/19742-permalink-blame-button-line-number-hash-links.yml

+---
+title: Update permalink/blame buttons with line number fragment hash
+merge_request:
+author:

spec/features/projects/blobs/update_line_numbers_on_blob_permalinks_spec.rb

+require 'spec_helper'
+
+feature 'Blob button line permalinks', feature: true, js: true do
+  include TreeHelper
+
+  let(:project) { create(:project, :public, :repository) }
+  let(:path) { 'CHANGELOG' }
+  let(:sha) { project.repository.commit.sha }
+
+  describe 'On a file(blob)' do
+    def get_absolute_url(path = "")
+      "http://#{page.server.host}:#{page.server.port}#{path}"
+    end
+
+    def visit_blob(fragment = nil)
+      visit namespace_project_blob_path(project.namespace, project, tree_join('master', path), anchor: fragment)
+    end
+
+    describe 'Click "Permalink" button' do
+      it 'works with no initial line number fragment hash' do
+        visit_blob
+
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(namespace_project_blob_path(project.namespace, project, tree_join(sha, path))))
+      end
+
+      it 'maintains intitial fragment hash' do
+        fragment = "L3"
+
+        visit_blob(fragment)
+
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(namespace_project_blob_path(project.namespace, project, tree_join(sha, path), anchor: fragment)))
+      end
+
+      it 'changes fragment hash if line number clicked' do
+        ending_fragment = "L5"
+
+        visit_blob
+
+        find('#L3').click
+        find("##{ending_fragment}").click
+
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(namespace_project_blob_path(project.namespace, 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"
+
+        visit_blob(fragment)
+
+        find('#L3').click
+        find("##{ending_fragment}").click
+
+        expect(find('.js-data-file-blob-permalink-url')['href']).to eq(get_absolute_url(namespace_project_blob_path(project.namespace, project, tree_join(sha, path), anchor: ending_fragment)))
+      end
+    end
+
+    describe 'Click "Blame" button' do
+      it 'works with no initial line number fragment hash' do
+        visit_blob
+
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(namespace_project_blame_path(project.namespace, project, tree_join('master', path))))
+      end
+
+      it 'maintains intitial fragment hash' do
+        fragment = "L3"
+
+        visit_blob(fragment)
+
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(namespace_project_blame_path(project.namespace, project, tree_join('master', path), anchor: fragment)))
+      end
+
+      it 'changes fragment hash if line number clicked' do
+        ending_fragment = "L5"
+
+        visit_blob
+
+        find('#L3').click
+        find("##{ending_fragment}").click
+
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(namespace_project_blame_path(project.namespace, 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"
+
+        visit_blob(fragment)
+
+        find('#L3').click
+        find("##{ending_fragment}").click
+
+        expect(find('.js-blob-blame-link')['href']).to eq(get_absolute_url(namespace_project_blame_path(project.namespace, project, tree_join('master', path), anchor: ending_fragment)))
+      end
+    end
+  end
+end