Adds build status and link to CI next to the repo's title (#800)

extension/content.css

@@ -674,6 +674,19 @@ a.tabnav-extra[href$="mastering-markdown/"] {
 	display: none;
 }
 
+/* For `add-ci-link` */
+.rgh-ci-link {
+	position: relative;
+	top: -0.1em;
+	left: 0.2em;
+	animation: fade-in 0.2s;
+}
+
+:root .repohead h1 .octicon {
+	position: static;
+	color: inherit;
+}
+
 /* Sticky file headers on pull request diff view */
 .pull-request-tab-content .diff-view .file-header {
 	position: sticky;

readme.md

@@ -127,6 +127,7 @@ GitHub Enterprise is also supported by [authorizing your own domain in the optio
 - [Shows user's full name in comments](https://cloud.githubusercontent.com/assets/170270/16172068/0a67b98c-3580-11e6-92f0-6fc930ee17d1.png)
 - [Differentiates merge commits from regular commits](https://cloud.githubusercontent.com/assets/170270/14101222/2fe2c24a-f5bd-11e5-8b1f-4e589917d4c4.png)
 - [Adds labels to comments by the original poster](https://cloud.githubusercontent.com/assets/4331946/25075520/d62fbbd0-2316-11e7-921f-ab736dc3522e.png)
+- [Adds build status and link to CI by the repo's title](https://user-images.githubusercontent.com/1402241/32562120-d65166e4-c4e8-11e7-90fb-cbaf36e2709f.png)
 
 ### Declutter
 

src/content.js

@@ -48,6 +48,7 @@ import openCIDetailsInNewTab from './features/open-ci-details-in-new-tab';
 import focusConfirmationButtons from './features/focus-confirmation-buttons';
 import addKeyboardShortcutsToCommentFields from './features/add-keyboard-shortcuts-to-comment-fields';
 import addConfirmationToCommentCancellation from './features/add-confirmation-to-comment-cancellation';
+import addCILink from './features/add-ci-link';
 
 import * as pageDetect from './libs/page-detect';
 import {observeEl, safeElementReady, safely} from './libs/utils';
@@ -150,6 +151,7 @@ function ajaxedPagesHandler() {
 		safely(addReadmeButtons);
 		safely(addDiffViewWithoutWhitespaceOption);
 		safely(removeDiffSigns);
+		safely(addCILink);
 		safely(sortMilestonesByClosestDueDate); // Needs to be after addMilestoneNavigation
 	}
 

src/features/add-ci-link.js

@@ -0,0 +1,44 @@
+import select from 'select-dom';
+import domify from '../libs/domify';
+import {getRepoURL} from '../libs/page-detect';
+
+// This var will be:
+// - undefined on first load
+// - a Promised dom element after a successful fetch
+// - false after a failed fetch
+let request;
+
+async function fetchStatus() {
+	const url = `${location.origin}/${getRepoURL()}/commits/`;
+	const dom = await fetch(url).then(r => r.text()).then(domify);
+
+	const icon = select('.commit-build-statuses', dom);
+
+	// This will error if the element isn't found.
+	// It's caught later.
+	icon.classList.add('rgh-ci-link');
+
+	return icon;
+}
+
+export default async function () {
+	// Avoid duplicates and avoid on pages that already failed to load
+	if (request === false || select.exists('.rgh-ci-link')) {
+		return;
+	}
+
+	try {
+		if (request) {
+			// Skip icon re-animation because
+			// it was probably already animated once
+			(await request).style.animation = 'none';
+		} else {
+			request = fetchStatus();
+		}
+		select('.pagehead [itemprop="name"]').append(await request);
+	} catch (err) {
+		// Network failure or no CI status found.
+		// Don’t try again
+		request = false;
+	}
+}