Extend comments-time-machine-links feature

source/content.css

@@ -710,14 +710,6 @@ a.tabnav-extra[href$='mastering-markdown/'] {
 	display: none !important;
 }
 
-/* For the `add-time-machine-links-to-comments` feature */
-:root .rgh-timestamp-button {
-	padding: 0;
-}
-:root .rgh-timestamp-button .octicon {
-	vertical-align: middle;
-}
-
 @keyframes fade-in {
 	from {
 		opacity: 0;

source/features/comments-time-machine-links.tsx

@@ -4,26 +4,63 @@ import features from '../libs/features';
 import * as icons from '../libs/icons';
 import {getRepoURL} from '../libs/utils';
 
-function init() {
-	const comments = select.all('.timeline-comment-header:not(.rgh-timestamp-tree-link)');
+function addInlineLinks(comment: HTMLElement, timestamp: string) {
+	const links = select.all<HTMLAnchorElement>(`
+		[href^="${location.origin}"][href*="/blob/"]:not(.rgh-linkified-code),
+		[href^="${location.origin}"][href*="/tree/"]:not(.rgh-linkified-code)
+	`, comment);
 
-	for (const comment of comments) {
-		const timestampEl = select('relative-time', comment.closest('.discussion-item-review') || comment)!;
-		const timestamp = timestampEl.attributes.datetime.value;
-		const href = `/${getRepoURL()}/tree/HEAD@{${timestamp}}`;
+	for (const link of links) {
+		const linkParts = link.pathname.split('/');
+		// Skip permalinks
+		if (/^[0-9a-f]{40}$/.test(linkParts[4])) {
+			continue;
+		}
 
-		timestampEl.parentElement!.after(
+		linkParts[4] = `HEAD@{${timestamp}}`; // Change git ref
+		link.after(
 			' ',
 			<a
-				href={href}
-				className="timeline-comment-action btn-link rgh-timestamp-button tooltipped tooltipped-n"
-				aria-label="View repo at the time of this comment"
-			>
-				{icons.code()}
+				href={linkParts.join('/')}
+				className="muted-link tooltipped tooltipped-n"
+				aria-label="Visit as permalink">
+				{icons.clock()}
 			</a>
 		);
+	}
+}
+
+function addDropdownLink(comment: HTMLElement, timestamp: string) {
+	const dropdownPosition = select('.show-more-popover .dropdown-divider', comment);
+
+	// Comment-less reviews don't have a dropdown
+	if (!dropdownPosition) {
+		return;
+	}
+
+	dropdownPosition.after(
+		<a
+			href={`/${getRepoURL()}/tree/HEAD@{${timestamp}}`}
+			className="dropdown-item btn-link"
+			role="menuitem">
+			View repo at this time
+		</a>,
+		<div className="dropdown-divider" />
+	);
+}
+
+async function init() {
+	const comments = select.all(`
+		:not(.js-new-comment-form) > .timeline-comment:not(.rgh-time-machine-links),
+		.review-comment:not(.rgh-time-machine-links)
+	`);
+
+	for (const comment of comments) {
+		const timestamp = select('relative-time', comment)!.attributes.datetime.value;
 
-		comment.classList.add('rgh-timestamp-tree-link');
+		addDropdownLink(comment, timestamp);
+		addInlineLinks(comment, timestamp);
+		comment.classList.add('rgh-time-machine-links');
 	}
 }
 

source/libs/icons.tsx

@@ -38,6 +38,8 @@ export const chevronDown = (): JSX.Element => <svg aria-hidden="true" className=
 
 export const chevronLeft = (): JSX.Element => <svg aria-hidden="true" className="octicon octicon-chevron-left" height="16" width="8"><path fill-rule="evenodd" d="M5.5 3L7 4.5 3.25 8 7 11.5 5.5 13l-5-5z"/></svg>;
 
+export const clock = (): JSX.Element => <svg aria-hidden="true" className="octicon octicon-clock" width="14" height="16"><path d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"/></svg>;
+
 export const commit = (): JSX.Element => <svg aria-hidden="true" className="octicon octicon-git-commit" width="14" height="16" ><path d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"/></svg>;
 
 export const diff = (): JSX.Element => <svg aria-hidden="true" className="octicon octicon-diff" width="13" height="16"><path d="M6 7h2v1H6v2H5V8H3V7h2V5h1v2zm-3 6h5v-1H3v1zM7.5 2L11 5.5V15c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h6.5zM10 6L7 3H1v12h9V6zM8.5 0H3v1h5l4 4v8h1V4.5L8.5 0z"/></svg>;