message: Only show `comments-time-machine-links` after visiting the link
diff: import React from 'dom-chef';
  +import XIcon from 'octicon/x.svg';
  import select from 'select-dom';
  -import ClockIcon from 'octicon/clock.svg';
  +import elementReady from 'element-ready';
  import * as pageDetect from 'github-url-detection';
  import features from '.';
  +import parseRoute from '../github-helpers/parse-route';
  import {getRepoURL} from '../github-helpers';
  import {appendBefore} from '../helpers/dom-utils';
  @@ -20,17 +22,9 @@ function addInlineLinks(comment: HTMLElement, timestamp: string): void {
  continue;
  }
  - linkParts[4] = `HEAD@{${timestamp}}`; // Change git ref
  - link.after(
  - ' ',
  - <a
  - href={linkParts.join('/') + link.hash}
  - className="muted-link tooltipped tooltipped-n"
  - aria-label="Visit as permalink"
  - >
  - <ClockIcon/>
  - </a>
  - );
  + const searchParameters = new URLSearchParams(link.search);
  + searchParameters.set('rgh-link-date', timestamp);
  + link.search = String(searchParameters);
  }
  }
  @@ -57,6 +51,43 @@ function addDropdownLink(comment: HTMLElement, timestamp: string): void {
  );
  }
  +async function showTimemachineBar(): Promise<void | false> {
  + const url = new URL(location.href);
  + const date = url.searchParams.get('rgh-link-date')!;
  +
  + // Drop parameter from current page after using it
  + url.searchParams.delete('rgh-link-date');
  + history.replaceState(history.state, document.title, url.href);
  +
  + if (pageDetect.is404()) {
  + const pathnameParts = url.pathname.split('/');
  + pathnameParts[4] = `HEAD@{${date}}`;
  + url.pathname = pathnameParts.join('/');
  + } else {
  + // This feature only makes sense if the URL points to a non-permalink
  + const branchSelector = await elementReady('.branch-select-menu i');
  + const isPermalink = /Tag|Tree/.test(branchSelector!.textContent!);
  + if (isPermalink) {
  + return false;
  + }
  +
  + const path = parseRoute(location.pathname);
  + url.pathname = {
  + ...path,
  + branch: `${path.branch}@{${date}}`
  + }.toString();
  + }
  +
  + const closeButton = <button className="flash-close js-flash-close" type="button" aria-label="Dismiss this message"><XIcon/></button>;
  + select('#start-of-content')!.after(
  + <div className="flash flash-full flash-notice">
  + <div className="container-lg px-3">
  + {closeButton} You can also <a href={String(url)}>view this object as it appeared at the time of the comment</a> (<relative-time datetime={date}/>)
  + </div>
  + </div>
  + );
  +}
  +
  function init(): void {
  // PR reviews' main content has nested `.timeline-comment`, but the deepest one doesn't have `relative-time`. These are filtered out with `:not([id^="pullrequestreview"])`
  const comments = select.all(`
  @@ -82,4 +113,15 @@ features.add({
  pageDetect.hasComments
  ],
  init
  +}, {
  + include: [
  + pageDetect.is404,
  + pageDetect.isSingleFile,
  + pageDetect.isRepoTree
  + ],
  + exclude: [
  + () => !new URLSearchParams(location.search).has('rgh-link-date')
  + ],
  + waitForDomReady: false,
  + init: showTimemachineBar
  });
  