Add code intelligence to embedded snippets (#45)

Author: KattMingMing

app/components/BlobAnnotator.tsx

@@ -16,6 +16,7 @@ interface Props {
 	basePath: string | null;
 	repoURI: string;
 	fileElement: HTMLElement;
+	rev?: string;
 }
 
 interface State {
@@ -32,6 +33,7 @@ export class BlobAnnotator extends React.Component<Props, State> {
 	isCommit?: boolean;
 	isPullRequest?: boolean;
 	isSplitDiff?: boolean;
+	isCodePage?: boolean;
 
 	// rev is defined for blob view
 	rev?: string;
@@ -50,7 +52,7 @@ export class BlobAnnotator extends React.Component<Props, State> {
 
 		this.fileExtension = utils.getPathExtension(props.headPath);
 
-		const { isDelta, isPullRequest, isCommit } = github.parseURL(window.location);
+		const { isDelta, isPullRequest, isCommit, isCodePage } = github.parseURL(window.location);
 		let { rev } = github.parseURL(window.location);
 		const gitHubState = github.getGitHubState(window.location.href);
 		// TODO(uforic): Eventually, use gitHubState for everything, but for now, only use it when the branch should have a
@@ -62,7 +64,8 @@ export class BlobAnnotator extends React.Component<Props, State> {
 		this.isDelta = isDelta;
 		this.isPullRequest = isPullRequest;
 		this.isCommit = isCommit;
-		this.rev = rev;
+		this.isCodePage = isCodePage;
+		this.rev = this.props.rev || rev;
 
 		if (this.isDelta) {
 			this.isSplitDiff = github.isSplitDiff();
@@ -208,6 +211,9 @@ export class BlobAnnotator extends React.Component<Props, State> {
 	}
 
 	render(): JSX.Element | null {
+		if (!this.isCodePage) {
+			return null;
+		}
 		if (!this.isDelta && !Boolean(this.state.resolvedRevs[this.props.repoURI])) {
 			return null;
 		}

app/github/util.tsx

@@ -558,3 +558,8 @@ export function parseURL(loc: Location = window.location): GitHubURL {
 
 	return { user, repo, rev, path, repoURI, uri: repoURI, isDelta, isPullRequest, isCommit, isCodePage };
 }
+
+// Code Comments
+export function getCodeCommentContainers(): HTMLCollectionOf<HTMLElement> {
+	return document.getElementsByClassName("js-comment-body") as HTMLCollectionOf<HTMLElement>;
+}

chrome/extension/inject/github.tsx

@@ -106,6 +106,7 @@ function inject(): void {
 	injectRepositorySearchToggle();
 	injectOpenOnSourcegraphButton();
 	injectBlobAnnotators();
+	injectCodeSnippetAnnotator();
 	injectGitHubEditor();
 	injectFileTree();
 }
@@ -277,6 +278,31 @@ function selectTreeNodeForURL(): void {
 	tree.select_node(gitHubState["path"]);
 }
 
+function injectCodeSnippetAnnotator(): void {
+	const codeComments = github.getCodeCommentContainers();
+
+	for (const file of Array.from(codeComments)) {
+		const mountEl = document.createElement("div");
+		mountEl.style.display = "none";
+		mountEl.className = "sourcegraph-app-annotator";
+		file.appendChild(mountEl);
+		const code = file.querySelector(".border.rounded-1.my-2");
+		const filePathContainer = file.querySelector(".mb-0.text-bold");
+		if (!filePathContainer) {
+			continue;
+		}
+		const href = filePathContainer.firstElementChild ? (filePathContainer.firstElementChild as any).href : undefined;
+		if (!href) {
+			continue;
+		}
+		const gitHubState = github.getGitHubState(href);
+		if (!gitHubState || !gitHubState.repo || !gitHubState.rev || !gitHubState["path"]) {
+			continue;
+		}
+		render(<BlobAnnotator headPath={gitHubState["path"]} repoURI={`github.com/${gitHubState.owner}/${gitHubState.repo}`} fileElement={code as HTMLElement} basePath={null} rev={gitHubState.rev} />, mountEl);
+	}
+}
+
 function injectBlobAnnotators(): void {
 	const { repoURI, isDelta } = github.parseURL();
 	let { path } = github.parseURL();