Fetch widget for `view-markdown-source` instead of maintaining a copy of it (#3670)

Co-authored-by: Federico <me@fregante.com>

1 files changed, 14 insertions, 65 deletions

diff --git a/source/features/view-markdown-source.tsx b/source/features/view-markdown-source.tsx
index 44847a77..21926086 100644
--- a/source/features/view-markdown-source.tsx
+++ b/source/features/view-markdown-source.tsx
@@ -1,5 +1,6 @@
 import './view-markdown-source.css';
 import React from 'dom-chef';
+import domify from 'doma';
 import select from 'select-dom';
 import onetime from 'onetime';
 import delegate from 'delegate-it';
@@ -7,73 +8,21 @@ import * as pageDetect from 'github-url-detection';
 
 import FileIcon from 'octicon/file.svg';
 import CodeIcon from 'octicon/code.svg';
-import KebabHorizontalIcon from 'octicon/kebab-horizontal.svg';
 
 import features from '.';
 import fetchDom from '../helpers/fetch-dom';
 import GitHubURL from '../github-helpers/github-url';
 import {buildRepoURL} from '../github-helpers';
 
-const lineActions = onetime(() => (
-	<details
-		className="details-reset details-overlay BlobToolbar position-absolute js-file-line-actions dropdown d-none"
-		aria-hidden="true"
-	>
-		<summary
-			className="btn-octicon ml-0 px-2 p-0 bg-white border border-gray-dark rounded-1"
-			aria-label="Inline file action toolbar"
-			aria-haspopup="menu"
-			role="button"
-		>
-			<KebabHorizontalIcon/>
-		</summary>
-		<details-menu role="menu">
-			<ul
-				className="BlobToolbar-dropdown dropdown-menu dropdown-menu-se mt-2"
-				style={{width: '185px'}}
-			>
-				<li>
-					<clipboard-copy
-						role="menuitem"
-						className="dropdown-item zeroclipboard-link"
-						id="js-copy-lines"
-					>
-						Copy line
-					</clipboard-copy>
-				</li>
-				<li>
-					<clipboard-copy
-						role="menuitem"
-						className="dropdown-item zeroclipboard-link"
-						id="js-copy-permalink"
-					>
-						Copy permalink
-					</clipboard-copy>
-				</li>
-				<li>
-					<a
-						className="dropdown-item js-update-url-with-hash"
-						id="js-view-git-blame"
-						role="menuitem"
-						href={new GitHubURL(location.href).assign({route: 'blame'}).href}
-					>
-						View git blame
-					</a>
-				</li>
-				<li>
-					<a
-						className="dropdown-item"
-						id="js-new-issue"
-						role="menuitem"
-						href={buildRepoURL('issues/new')}
-					>
-						Reference in new issue
-					</a>
-				</li>
-			</ul>
-		</details-menu>
-	</details>
-));
+const lineActions = onetime(async () => {
+	// Avoid having to create the entire 60 lines of JSX. The URL is hardcoded to a file we know the DOM exists.
+	const randomKnownFile = 'https://github.com/sindresorhus/refined-github/blob/b1229bbaeb8cf071f0711bc2ed1b40dd96cd7a05/.editorconfig';
+	const html = await browser.runtime.sendMessage({request: randomKnownFile});
+	const blobToolbar = domify(html).querySelector('.BlobToolbar')!;
+	select<HTMLAnchorElement>('#js-view-git-blame', blobToolbar)!.href = new GitHubURL(location.href).assign({route: 'blame'}).href;
+	select<HTMLAnchorElement>('#js-new-issue', blobToolbar)!.href = buildRepoURL('issues/new');
+	return blobToolbar;
+});
 
 const buttonBodyMap = new WeakMap<Element, Element | Promise<Element>>();
 
@@ -119,9 +68,9 @@ async function showSource(): Promise<void> {
 	sourceButton.classList.add('selected');
 	renderedButton.classList.remove('selected');
 	blurButton(sourceButton);
-	(await source).before(lineActions());
-
 	dispatchEvent(sourceButton, 'rgh:view-markdown-source');
+
+	(await source).before(await lineActions());
 }
 
 async function showRendered(): Promise<void> {
@@ -137,9 +86,9 @@ async function showRendered(): Promise<void> {
 	sourceButton.classList.remove('selected');
 	renderedButton.classList.add('selected');
 	blurButton(renderedButton);
-	lineActions().remove();
-
 	dispatchEvent(sourceButton, 'rgh:view-markdown-rendered');
+
+	(await lineActions()).remove();
 }
 
 async function init(): Promise<void> {