Fixed Back Button for files + line number jumping for preview and editor

4 files changed, 30 insertions, 7 deletions

diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 96d6a75bb61..f1acd339ad3 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -63,7 +63,7 @@ const RepoEditor = {
       const lineNumber = e.target.position.lineNumber;
       if (e.target.element.classList.contains('line-numbers')) {
         location.hash = `L${lineNumber}`;
-        Store.activeLine = lineNumber;
+        Store.setActiveLine(lineNumber);
 
         Helper.monacoInstance.setPosition({
           lineNumber: this.activeLine,
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 1e40814b95f..535206bafe3 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -25,11 +25,28 @@ export default {
 
   methods: {
     addPopEventListener() {
-      window.addEventListener('popstate', () => {
-        if (location.href.indexOf('#') > -1) return;
-        this.linkClicked({
-          url: location.href,
-        });
+      window.addEventListener('popstate', (event) => {
+        const selectedFile = this.files.find(file => location.href.indexOf(file.url) > -1);
+        if (selectedFile) {
+          if (selectedFile.url !== this.activeFile.url) {
+            this.fileClicked(selectedFile);
+          }
+
+          if (location.hash.indexOf('#L') > -1) {
+            const lineNumber = Number(location.hash.substr(2));
+            if (!isNaN(lineNumber)) {
+              Store.setActiveLine(lineNumber);
+              if (Store.isPreviewView()) {
+                document.getElementById('L' + lineNumber).scrollIntoView();
+              } else {
+                Helper.monacoInstance.setPosition({
+                  lineNumber: this.activeLine,
+                  column: 1,
+                });
+              }
+            }
+          }
+        }
       });
     },
 
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index ac59a2bed23..7483f8bc305 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -254,7 +254,9 @@ const RepoHelper = {
 
     RepoHelper.key = RepoHelper.genKey();
 
-    history.pushState({ key: RepoHelper.key }, '', url);
+    if (document.location.pathname !== url) {
+      history.pushState({ key: RepoHelper.key }, '', url);
+    }
 
     if (title) {
       document.title = title;
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index 9a4fc40bc69..0d1853ff148 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -101,6 +101,10 @@ const RepoStore = {
     RepoStore.activeFileIndex = i;
   },
 
+  setActiveLine(activeLine) {
+    RepoStore.activeLine = activeLine;
+  },
+
   setActiveToRaw() {
     RepoStore.activeFile.raw = false;
     // can't get vue to listen to raw for some reason so RepoStore for now.