Link to previous blames in file blame page (#16259)

Adds a link to each blame hunk, to view the blame of an earlier version of the file, similar to GitHub. Also refactors the blame render from fmtstring based to template based.

* Fix blame bottom line and add blame prior button

* Jump to previous parent commit from the commit.

* Fix previous commit link

* Fix previous blame link

* Fix the given file not exist in the previous commit.

* Fix blameRow struct not export

* fix theming issues, rename template var

* remove unused LastCommit fetch

* fix location of blame-hunk divider

* rewrite previous commit checks

* remove duplicate commit lookup

its already resolved and stored in ctx.Repo.Commit!

* split out blamePart processing into function

Co-authored-by: rogerluo410 <rogerluo410@gmail.com>

3 files changed, 35 insertions, 13 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index f1f41ce747..0693175a00 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -2283,20 +2283,24 @@ function initCodeView() {
       const $select = $(this);
       let $list;
       if ($('div.blame').length) {
-        $list = $('.code-view td.lines-code li');
+        $list = $('.code-view td.lines-code.blame-code');
       } else {
         $list = $('.code-view td.lines-code');
       }
       selectRange($list, $list.filter(`[rel=${$select.attr('id')}]`), (e.shiftKey ? $list.filter('.active').eq(0) : null));
       deSelect();
-      showLineButton();
+
+      // show code view menu marker (don't show in blame page)
+      if ($('div.blame').length === 0) {
+        showLineButton();
+      }
     });
 
     $(window).on('hashchange', () => {
       let m = window.location.hash.match(/^#(L\d+)-(L\d+)$/);
       let $list;
       if ($('div.blame').length) {
-        $list = $('.code-view td.lines-code li');
+        $list = $('.code-view td.lines-code.blame-code');
       } else {
         $list = $('.code-view td.lines-code');
       }
@@ -2304,7 +2308,12 @@ function initCodeView() {
       if (m) {
         $first = $list.filter(`[rel=${m[1]}]`);
         selectRange($list, $first, $list.filter(`[rel=${m[2]}]`));
-        showLineButton();
+
+        // show code view menu marker (don't show in blame page)
+        if ($('div.blame').length === 0) {
+          showLineButton();
+        }
+
         $('html, body').scrollTop($first.offset().top - 200);
         return;
       }
@@ -2312,7 +2321,12 @@ function initCodeView() {
       if (m) {
         $first = $list.filter(`[rel=L${m[2]}]`);
         selectRange($list, $first);
-        showLineButton();
+
+        // show code view menu marker (don't show in blame page)
+        if ($('div.blame').length === 0) {
+          showLineButton();
+        }
+
         $('html, body').scrollTop($first.offset().top - 200);
       }
     }).trigger('hashchange');
@@ -2911,7 +2925,6 @@ function selectRange($list, $select, $from) {
       } else {
         $issue.attr('href', `${$issue.attr('href')}%23L${a}-L${b}`);
       }
-
       return;
     }
   }
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index fb4e15e146..8a2279c727 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -106,6 +106,7 @@
   --color-markup-code-block: #00000010;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
+  --color-code-sidebar-bg: #f5f5f5;
   --color-shadow: #00000030;
   --color-secondary-bg: #f4f4f4;
   --color-expand-button: #d8efff;
@@ -1442,6 +1443,14 @@ a.ui.label:hover {
   margin-right: 0;
 }
 
+.lines-blame-btn {
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: right !important;
+  background-color: var(--color-code-sidebar-bg);
+  width: 2%;
+}
+
 .lines-num {
   padding-left: 10px;
   padding-right: 10px;
@@ -1507,7 +1516,7 @@ a.ui.label:hover {
 
 .blame .lines-num {
   padding: 0 !important;
-  background-color: #f5f5f5;
+  background-color: var(--color-code-sidebar-bg);
 }
 
 .blame .lines-code {
@@ -1532,7 +1541,7 @@ a.ui.label:hover {
   vertical-align: top;
   color: #999999;
   padding: 0 !important;
-  background: #f5f5f5;
+  background: var(--color-code-sidebar-bg);
   width: 1%;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1574,6 +1583,10 @@ a.ui.label:hover {
   }
 }
 
+.top-line-blame {
+  border-top: 1px solid var(--color-secondary);
+}
+
 .lines-code,
 .lines-commit {
   .bottom-line {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index e638f3b461..74db8faaaa 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -101,6 +101,7 @@
   --color-markup-code-block: #292d39;
   --color-button: #353846;
   --color-code-bg: #2a2e3a;
+  --color-code-sidebar-bg: #2e323e;
   --color-shadow: #00000060;
   --color-secondary-bg: #2a2e3a;
   --color-text-focus: #fff;
@@ -430,11 +431,6 @@ td.blob-hunk {
   background-color: #bbbbbb !important;
 }
 
-.lines-commit,
-.blame .lines-num {
-  background: #2e323e !important;
-}
-
 .lines-num {
   color: var(--color-secondary-dark-6) !important;
   border-color: var(--color-secondary) !important;