Update permalink/blame buttons with line number fragment hash

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

app/assets/javascripts/blob/blob_line_permalink.js

+
+const hashChangeCallback = () => {
+  const hash = gl.utils.getLocationHash();
+  if (hash && (/^L[0-9]+/).test(hash)) {
+    const hashUrlString = `#${hash}`;
+
+    Array.prototype.forEach.call(document.querySelectorAll('.js-blob-permalink-link, .js-blob-blame-link'), (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}`);
+    });
+  }
+};
+
+window.addEventListener('DOMContentLoaded', hashChangeCallback);
+window.addEventListener('hashchange', hashChangeCallback);
+// Custom event
+window.addEventListener('push-state', hashChangeCallback);

app/assets/javascripts/extensions/history.js

+const windowPushState = window.history.pushState;
+window.history.pushState = function pushState(...args) {
+  const result = windowPushState.apply(history, args);
+
+  window.dispatchEvent(new CustomEvent('push-state', {
+    state: args[0],
+    title: args[1],
+    url: args[2],
+  }));
+
+  return result;
+};

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

@@ -11,11 +11,11 @@
           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,
-      tree_join(@commit.sha, @path)), class: 'btn btn-sm js-data-file-blob-permalink-url'
+      tree_join(@commit.sha, @path)), class: 'btn btn-sm js-blob-permalink-link js-data-file-blob-permalink-url'
 - if current_user
   .btn-group{ role: "group" }

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/blob_line_permalink_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-blob-permalink-link')['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-blob-permalink-link')['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
+        visit_blob
+
+        find('#L3').click
+        ending_fragment = "L5"
+        find("##{ending_fragment}").click
+
+        expect(find('.js-blob-permalink-link')['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"
+        visit_blob(fragment)
+
+        find('#L3').click
+        ending_fragment = "L5"
+        find("##{ending_fragment}").click
+
+        expect(find('.js-blob-permalink-link')['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
+        visit_blob
+
+        find('#L3').click
+        ending_fragment = "L5"
+        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"
+        visit_blob(fragment)
+
+        find('#L3').click
+        ending_fragment = "L5"
+        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