Add link-to-file-in-file-history feature (#2000)

Co-authored-by: Federico Brigante <github@bfred.it>

.github/CODEOWNERS

@@ -1,3 +1,4 @@
 source/features/filter-pr-by-build-status.tsx @HardikModha
 source/features/tags-dropdown.tsx @HardikModha
+source/features/link-to-file-in-file-history.tsx @HardikModha
 source/features/default-to-rich-diff.tsx @idasbiste

readme.md

@@ -203,6 +203,7 @@ GitHub Enterprise is also supported. More info in the options.
 - [Follow file renames in commits lists.](https://user-images.githubusercontent.com/1402241/54799957-7306a280-4c9a-11e9-86de-b9764ed93397.png)
 - [Edit files straight from a repo’s list by clicking their icon.](https://user-images.githubusercontent.com/1402241/56370462-d51cde00-622d-11e9-8cd3-8a173bd3dc08.png)
 - [Search or select tags from a dropdown in the `Releases` page.](https://user-images.githubusercontent.com/22439276/56373231-27ee9980-621e-11e9-9b21-601919d3dddf.png)
+- [Link to file itself in the history pages](https://user-images.githubusercontent.com/22439276/57195061-b88ddf00-6f6b-11e9-8ad9-13225d09266d.png)
 
 ### Previously part of Refined GitHub
 

source/content.ts

@@ -99,6 +99,7 @@ import './features/tags-dropdown';
 import './features/filter-pr-by-build-status';
 import './features/edit-files-faster';
 import './features/hide-disabled-milestone-sorter';
+import './features/link-to-file-in-file-history';
 
 import './features/scrollable-code-and-blockquote.css';
 import './features/center-reactions-popup.css';

source/features/link-to-file-in-file-history.tsx

@@ -0,0 +1,47 @@
+/**
+Adds direct link to file/directory when viewing the history.
+See it in action at https://github.com/sindresorhus/refined-github/commits/master/readme.md
+*/
+
+import React from 'dom-chef';
+import select from 'select-dom';
+import features from '../libs/features';
+import {file} from '../libs/icons';
+import {getRepoPath} from '../libs/utils';
+import {groupSiblings} from '../libs/group-buttons';
+
+function init(): void | false {
+	// /user/repo/commits/master/readme.md -> 'readme.md'
+	// /user/repo/commits/master/          -> ''
+	const path = getRepoPath()!.replace(/^commits\/[^/]+\//, '');
+	if (!path) {
+		return false;
+	}
+
+	for (const rootLink of select.all<HTMLAnchorElement>('[aria-label="Browse the repository at this point in the history"]')) {
+		// `rootLink.pathname` points to /tree/ but GitHub automatically redirects to /blob/ when the path is of a file
+		rootLink.before(
+			<a
+				href={rootLink.pathname + '/' + path}
+				className="btn btn-outline tooltipped tooltipped-sw"
+				aria-label="See object at this point in the history"
+			>
+				{file()}
+			</a>
+		);
+
+		// TODO: drop `as` after https://github.com/Microsoft/TSJS-lib-generator/pull/697
+		(rootLink.closest('.commit-links-cell') as HTMLElement).style.width = 'auto';
+
+		groupSiblings(rootLink);
+	}
+}
+
+features.add({
+	id: 'link-to-file-in-file-history',
+	include: [
+		features.isCommitList
+	],
+	load: features.onAjaxedPages,
+	init
+});