Faster Answer Links

Question

This is a convenience user script. It prevents page reloading when following links to answers that happen to be present on the same page, and to their comments; instead, it simply scrolls to the link target on the current page.

A tiny warning (perhaps not significant to most people): when following links to comments in the /posts/comments/CommentId form, the script may incur additional HTTP(S) traffic; this happens when following a link to a comment that has not (yet) been loaded on the current page, to check if it’s attached to a post that is present on the current page. Since this is a HEAD request, which consists only of HTTP headers, I estimate it to be no more than 2 kB per click (excluding TLS overhead). In the worst case, when linking to a comment for a post not present on the page, this may trigger the HEAD request, and then perform a full page reload anyway; in the middling case, when the post is present, full comments for that post will be loaded. To avoid this additional traffic, prefer linking to comments in a form that includes the #commentCommentId_PostId anchor, which includes both the comment ID and the post ID to which the comment is attached.

// ==UserScript==
// @name     Stack Exchange: Faster Answer Links
// @grant    none
// @run-at   document-start
// @match    https://*.stackexchange.com/*
// @match    https://*.superuser.com/*
// @match    https://*.stackoverflow.com/*
// @match    https://*.mathoverflow.net/*
// @match    https://*.serverfault.com/*
// @match    https://*.askubuntu.com/*
// @match    https://stackapps.com/*
// @exclude  https://chat.stackexchange.com/*
// @exclude  https://api.stackexchange.com/*
// @exclude  https://data.stackexchange.com/*
// @exclude  https://openid.stackexchange.com/*
// @exclude  https://contests.stackoverflow.com/*
// @exclude  /^https?:\/\/winterbash\d{4,}\.stackexchange\.com\//
// ==/UserScript==

// attaching to window because jQuery attaches *its* delegated
// event handlers to document, and we need to run *after* those

window.addEventListener('click', ev => {
  if (ev.defaultPrevented)
    return;

  const target = ev.target.closest(':any-link');
  
  // ignore non-link clicks
  if (!target)
    return;
  
  // ignore target="_blank" links (especially on review pages)
  if (target.target)
    return;
  
  // ignore clicks with modifier keys; we presume
  // those would not result in normal navigation
  if (ev.ctrlKey || ev.altKey || ev.shiftKey || ev.metaKey)
    return;

  // ignore href="#" pseudo-links
  // (.getAttribute because .href returns the resolved absolute URL)
  if (target.getAttribute('href') === '#')
    return;

  const parseURL = u => {
    let m;
    
    // catch both HTTPS and older plaintext-HTTP links
    if (u.host !== location.host || !/^https?:$/.test(u.protocol))
      return null;
    
    // /posts/comments/<comment_id>
    if (m = /^\/posts\/comments\/(\d+)(?=\/|$)/u.exec(u.pathname)) {
      return { commentId: m[1], commentPostId: null };
    }
    
    // #comment<comment_id>_<post_id>
    if (/^\/(q|a|questions)\//u.test(u.pathname)
        && (m = /^#comment(\d+)_(\d+)$/u.exec(u.hash))) {
      return { commentId: m[1], commentPostId: m[2] };
    }

    // /a/<answer_id>
    // /questions/<question_id>/<question_title>/<answer_id>
    if (m = /^\/(?:a|questions\/(\d+)\/[^\/]+)\/(\d+)(?=\/|$)/u.exec(u.pathname)) {
      return { questionId: m[1] ?? null, answerId: m[2] };
    }
    
    // /q/<question_id>
    // /questions/<question_id>/<question_title>
    if (m = /^\/(?:q|questions)\/(\d+)(?=\/|$)/u.exec(u.pathname)) {
      const questionId = m[1];
      if (m = /^#(?:answer-)?(\d+)$/u.exec(u.hash))
        return { questionId, answerId: m[1] };
      if (!u.hash || u.hash === '#question')
        return { questionId, answerId: null };
    }
    
    return null;
  };
  
  const insteadGoTo = target => {
    ev.preventDefault();
    location.href = target;
  };
  
  const isThereQuestion = postId =>
    !!document.querySelector(`#question[data-questionid="${postId}"]`);
  const isThereAnswer = postId =>
    !!document.getElementById(`answer-${postId}`);
  const isTherePost = postId =>
    !!document.querySelector(`#answer-${postId}, #question[data-questionid="${postId}"]`)
  
  const u = new URL(target.href);  
  const linkTarget = parseURL(u);
  
  if (!linkTarget)
    return;
  
  if (linkTarget.commentId != null) {
    if (linkTarget.commentPostId != null) {
      const { commentPostId, commentId } = linkTarget;     
      if (isTherePost(commentPostId))
        return insteadGoTo(`#comment${commentId}_${commentPostId}`);
    } else {
      let node;

      // when rerouting comment links, use the magic fragment id
      // (processed by Stack Exchange JS)  instead of the proper
      // element id (natively supported in the browser)
      // because the latter does not work all that well
      // (probably something to do with 'display: contents;')
      // additionally, a magic fragment id will work for comments
      // that have not been loaded yet

      if (node = document.querySelector(`#comment-${linkTarget.commentId}`)) {
        // happy path: comment already loaded, just navigate to it

        const commentId = node.dataset.commentId;
        const commentPostId = node.closest('.comments[data-post-id]').dataset.postId;

        return insteadGoTo(`#comment${commentId}_${commentPostId}`);
      }
      
      // if there are no hidden comments on the current page, don't bother,
      // just do a full page reload
      if (!document.querySelector('.js-post-comments-component .js-show-link:not(.dno)')) {
        return;
      }
      
      // prevent default now; if fetching the target fails,
      // we will just redirect manually later
      ev.preventDefault();
      
      (async () => {
        target.style.cursor = 'progress';

        try {
          const response = await fetch(
            new URL(`/posts/comments/${linkTarget.commentId}`, location),
            { method: 'HEAD' }
          );
          const redirectTarget = response.redirected && parseURL(new URL(response.url));

          if (redirectTarget) {
            // the fallbacks are here because response.url of fetch requests
            // made from Greasemonkey for some reason omit the fragment
            // identifier

            const commentId =
                  redirectTarget.commentId ??
                  linkTarget.commentId;
            const commentPostId =
                  redirectTarget.commentPostId ??
                  redirectTarget.answerId ??
                  redirectTarget.questionId;

            if (isTherePost(commentPostId)) {
              // mediocre path: post is present on the page, and navigating
              // to the magic link should trigger loading full comments

              location.href = `#comment${commentId}_${commentPostId}`;
              return;
            }

            // sad path: post not present on the page at all, we have to follow the link

            console.warn(
              `[FAL] Failed to follow ${u.href}: post #${commentPostId} not found on the page`);
          } else {
            console.warn(
              `[FAL] Failed to resolve ${u.href}: response is `, response);
          }

          location.href = u.href;
        } finally {
          target.style.cursor = '';
        }
      })().catch(e => {
        location.href = u.href;
        console.warn(`[FAL] Failed to resolve ${u.href}: error `, e);
      });
    }
  } else if (linkTarget.answerId != null) {
    // checking question id is probably not necessary, and may
    // even be harmful if an answer is moved between questions

    if (isThereAnswer(linkTarget.answerId))
      return insteadGoTo(`#answer-${linkTarget.answerId}`);
  } else if (linkTarget.questionId != null) {
    // a link to the current question is unusual, but possible; we handle this too
    // however, we make an exception for the link in the header,
    // sometimes clicked in lieu of refreshing the page

    if (target.matches('#question-header :any-link'))
      return;

    if (isThereQuestion(linkTarget.questionId))
      return insteadGoTo('#question');
  } else {
    console.warn(`[FAL] URL ${u} parsed, but not handled:`, linkTarget);
  }
}, false);