Expand/Collapse Files and Blob Excerpt while Reviewing/Comparing code (#8924)

* update #8659 fold/unfold code diffs

* add fold button style

* update #8659 implement expand up/down codes (blob excerpt)

* fix golint errors

* fix expand direction

* remove debug message

* update css style for blob exceprt

* fix typo in comment

* update style sheet with less

* update expect diff (add SectionInfo)

* update #8942 accept suggested change (fix typo)

* close reader and check file type before get tail section

* adjust button position and check file type before insert fold button

* move index js to web_src

* merge index.js with master

* generate index.js

* update js coding style

3 files changed, 48 insertions, 0 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 4e53494eb0..69d2aafcc9 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1852,6 +1852,27 @@ function initCodeView() {
       }
     }).trigger('hashchange');
   }
+  $('.ui.fold-code').on('click', (e) => {
+    const $foldButton = $(e.target);
+    if ($foldButton.hasClass('fa-chevron-down')) {
+      $(e.target).parent().next().slideUp('fast', () => {
+        $foldButton.removeClass('fa-chevron-down').addClass('fa-chevron-right');
+      });
+    } else {
+      $(e.target).parent().next().slideDown('fast', () => {
+        $foldButton.removeClass('fa-chevron-right').addClass('fa-chevron-down');
+      });
+    }
+  });
+  function insertBlobExcerpt(e) {
+    const $blob = $(e.target);
+    const $row = $blob.parent().parent();
+    $.get(`${$blob.data('url')}?${$blob.data('query')}&anchor=${$blob.data('anchor')}`, (blob) => {
+      $row.replaceWith(blob);
+      $(`[data-anchor="${$blob.data('anchor')}"]`).on('click', (e) => { insertBlobExcerpt(e); });
+    });
+  }
+  $('.ui.blob-excerpt').on('click', (e) => { insertBlobExcerpt(e); });
 }
 
 function initU2FAuth() {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 84d59bbe91..974dd571cc 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2438,6 +2438,10 @@ tbody.commit-list {
     padding-bottom: 8px;
 }
 
+td.blob-excerpt {
+    background-color: #fafafa;
+}
+
 .issue-keyword {
     border-bottom: 1px dotted #959da5;
     display: inline-block;
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index c01e7533b4..d838c09c2d 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -108,3 +108,26 @@
     font: 12px @monospaced-fonts, monospace;
     color: rgba(0, 0, 0, 0.87);
 }
+
+.ui.fold-code {
+    margin-right: 1em;
+    padding-left: 5px;
+    cursor: pointer;
+    width: 22px;
+    font-size: 12px;
+}
+
+.ui.fold-code:hover {
+    color: #428bca;
+}
+
+.ui.blob-excerpt {
+    display: block;
+    line-height: 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.ui.blob-excerpt:hover {
+    color: #428bca;
+}