oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513)

Close #23466

Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.

And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.

Before:

https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov

After:

https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov

Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):

https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov

authored by

Hester Gong and committed by
GitHub 8120c0c2 6aca9287

+21 -1
+21 -1
web_src/js/features/repo-issue.js
··· 6 6 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; 7 7 import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js'; 8 8 import {hideElem, showElem, toggleElem} from '../utils/dom.js'; 9 + import {setFileFolding} from './file-fold.js'; 9 10 10 11 const {appSubUrl, csrfToken} = window.config; 11 12 ··· 437 438 438 439 export function initRepoPullRequestReview() { 439 440 if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) { 441 + // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing 442 + if (window.history.scrollRestoration !== 'manual') { 443 + window.history.scrollRestoration = 'manual'; 444 + } 440 445 const commentDiv = $(window.location.hash); 441 446 if (commentDiv) { 442 447 // get the name of the parent id 443 448 const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id'); 444 449 if (groupID && groupID.startsWith('code-comments-')) { 445 450 const id = groupID.slice(14); 451 + const ancestorDiffBox = commentDiv.closest('.diff-file-box'); 452 + // on pages like conversation, there is no diff header 453 + const diffHeader = ancestorDiffBox.find('.diff-file-header'); 454 + // offset is for scrolling 455 + let offset = 30; 456 + if (diffHeader[0]) { 457 + offset += $('.diff-detail-box').outerHeight() + diffHeader.outerHeight(); 458 + } 446 459 $(`#show-outdated-${id}`).addClass('gt-hidden'); 447 460 $(`#code-comments-${id}`).removeClass('gt-hidden'); 448 461 $(`#code-preview-${id}`).removeClass('gt-hidden'); 449 462 $(`#hide-outdated-${id}`).removeClass('gt-hidden'); 450 - commentDiv[0].scrollIntoView(); 463 + // if the comment box is folded, expand it 464 + if (ancestorDiffBox.attr('data-folded') && ancestorDiffBox.attr('data-folded') === 'true') { 465 + setFileFolding(ancestorDiffBox[0], ancestorDiffBox.find('.fold-file')[0], false); 466 + } 467 + window.scrollTo({ 468 + top: commentDiv.offset().top - offset, 469 + behavior: 'instant' 470 + }); 451 471 } 452 472 } 453 473 }