Update `element-ready`

13 files changed, 43 insertions, 45 deletions

diff --git a/package-lock.json b/package-lock.json
index 425f8ef5..f2cf0000 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4157,11 +4157,20 @@
 			"dev": true
 		},
 		"element-ready": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/element-ready/-/element-ready-3.1.0.tgz",
-			"integrity": "sha512-WRpBdfIvKK5hpXb40PK63YxI+kBQvkYd6SMfAGUrTHwFKpiq1WnIoLGIgepZrzwVHQMz/4STLiaSyMpwHWBeDg==",
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/element-ready/-/element-ready-4.1.0.tgz",
+			"integrity": "sha512-dmUj8ppNnnzGf/CUXPr+p1khFffvUQrBquuDRYKzIzVQxnDa9SNpNiGzOqhYTQ3l8okPJmKr0j0w8oiB77T6UQ==",
 			"requires": {
-				"p-cancelable": "^1.1.0"
+				"dom-loaded": "^1.1.0",
+				"many-keys-map": "^1.0.1",
+				"p-defer": "^2.1.0"
+			},
+			"dependencies": {
+				"p-defer": {
+					"version": "2.1.0",
+					"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-2.1.0.tgz",
+					"integrity": "sha512-xMwL9id1bHn/UfNGFEMFwlULOprQUEOg6vhqSfr6oKxPFB0oSh0zhGq/9/tPSE+cyij2+RW6H8+0Ke4xsPdZ7Q=="
+				}
 			}
 		},
 		"elliptic": {
@@ -8271,6 +8280,11 @@
 			"integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
 			"dev": true
 		},
+		"many-keys-map": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/many-keys-map/-/many-keys-map-1.0.2.tgz",
+			"integrity": "sha512-bOXZsgmnTHkvWQCpq9WBnX5JNfJ1WTq9+QdzXe1UA3eu0+8llCrDSPOTKo1IVUrnzW0N0f9pZd95CDpKUC73uw=="
+		},
 		"map-age-cleaner": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@@ -9220,11 +9234,6 @@
 			"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
 			"dev": true
 		},
-		"p-cancelable": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
-			"integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
-		},
 		"p-defer": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
diff --git a/package.json b/package.json
index 88964f60..7c416eb5 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
 		"dom-chef": "^3.6.0",
 		"dom-loaded": "^1.1.0",
 		"doma": "^1.0.3",
-		"element-ready": "^3.1.0",
+		"element-ready": "^4.1.0",
 		"fit-textarea": "^1.1.0",
 		"github-reserved-names": "^1.1.5",
 		"indent-textarea": "^1.0.4",
diff --git a/source/features/hide-own-stars.tsx b/source/features/hide-own-stars.tsx
index 9c6443c6..325ecc1d 100644
--- a/source/features/hide-own-stars.tsx
+++ b/source/features/hide-own-stars.tsx
@@ -1,7 +1,7 @@
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import features from '../libs/features';
 import {getUsername} from '../libs/utils';
-import {safeElementReady} from '../libs/dom-utils';
 
 const observer = new MutationObserver(([{addedNodes}]) => {
 	// Remove events from dashboard
@@ -20,7 +20,7 @@ const observer = new MutationObserver(([{addedNodes}]) => {
 });
 
 async function init(): Promise<void> {
-	observer.observe((await safeElementReady('#dashboard .news'))!, {childList: true});
+	observer.observe((await elementReady('#dashboard .news'))!, {childList: true});
 }
 
 features.add({
diff --git a/source/features/linkify-branch-refs.tsx b/source/features/linkify-branch-refs.tsx
index b1e07a15..cc6254fa 100644
--- a/source/features/linkify-branch-refs.tsx
+++ b/source/features/linkify-branch-refs.tsx
@@ -1,9 +1,10 @@
 import React from 'dom-chef';
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import features from '../libs/features';
 import * as pageDetect from '../libs/page-detect';
 import {getOwnerAndRepo} from '../libs/utils';
-import {safeElementReady, wrap} from '../libs/dom-utils';
+import {wrap} from '../libs/dom-utils';
 
 function inPR(): void {
 	let deletedBranch: string | undefined;
@@ -47,7 +48,7 @@ function inPR(): void {
 }
 
 async function inQuickPR(): Promise<void> {
-	const el = await safeElementReady('.branch-name');
+	const el = await elementReady('.branch-name');
 	if (el) {
 		const {ownerName, repoName} = getOwnerAndRepo();
 		const branchUrl = `/${ownerName}/${repoName}/tree/${el.textContent}`;
diff --git a/source/features/mark-unread.tsx b/source/features/mark-unread.tsx
index e3a63f4c..fdcdbfce 100644
--- a/source/features/mark-unread.tsx
+++ b/source/features/mark-unread.tsx
@@ -1,12 +1,12 @@
 import './mark-unread.css';
 import React from 'dom-chef';
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import delegate, {DelegateSubscription, DelegateEvent} from 'delegate-it';
 import features from '../libs/features';
 import observeEl from '../libs/simplified-element-observer';
 import * as icons from '../libs/icons';
 import * as pageDetect from '../libs/page-detect';
-import {safeElementReady} from '../libs/dom-utils';
 import {getUsername, getOwnerAndRepo} from '../libs/utils';
 
 type NotificationType = 'pull-request' | 'issue';
@@ -227,7 +227,7 @@ async function renderNotifications(unreadNotifications: Notification[]): Promise
 	}
 
 	// Don’t simplify selector, it’s for cross-extension compatibility
-	let pageList = (await safeElementReady('#notification-center .notifications-list'))!;
+	let pageList = (await elementReady('#notification-center .notifications-list'))!;
 
 	if (!pageList) {
 		pageList = <div className="notifications-list"></div>;
diff --git a/source/features/more-dropdown.tsx b/source/features/more-dropdown.tsx
index 6fec9d1d..c8f9721c 100644
--- a/source/features/more-dropdown.tsx
+++ b/source/features/more-dropdown.tsx
@@ -1,11 +1,12 @@
 import './more-dropdown.css';
 import React from 'dom-chef';
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import features from '../libs/features';
 import * as icons from '../libs/icons';
 import {getRepoURL} from '../libs/utils';
 import {isEnterprise} from '../libs/page-detect';
-import {appendBefore, safeElementReady} from '../libs/dom-utils';
+import {appendBefore} from '../libs/dom-utils';
 
 const repoUrl = getRepoURL();
 
@@ -25,7 +26,7 @@ function createDropdown(): void {
 }
 
 async function init(): Promise<void> {
-	await safeElementReady('.pagehead + *'); // Wait for the tab bar to be loaded
+	await elementReady('.pagehead + *'); // Wait for the tab bar to be loaded
 	if (!select.exists('.reponav-dropdown')) {
 		createDropdown();
 	}
diff --git a/source/features/releases-tab.tsx b/source/features/releases-tab.tsx
index c39296e5..d82c5f74 100644
--- a/source/features/releases-tab.tsx
+++ b/source/features/releases-tab.tsx
@@ -1,10 +1,10 @@
 import React from 'dom-chef';
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import features from '../libs/features';
 import * as icons from '../libs/icons';
 import * as cache from '../libs/cache';
 import {getRepoURL} from '../libs/utils';
-import {safeElementReady} from '../libs/dom-utils';
 import {isRepoRoot, isReleasesOrTags} from '../libs/page-detect';
 
 const repoUrl = getRepoURL();
@@ -25,7 +25,7 @@ async function updateReleasesCount(): Promise<number | undefined> {
 }
 
 async function init(): Promise<false | void> {
-	await safeElementReady('.pagehead + *'); // Wait for the tab bar to be loaded
+	await elementReady('.pagehead + *'); // Wait for the tab bar to be loaded
 	const count = await updateReleasesCount();
 	if (count === 0) {
 		return false;
diff --git a/source/features/remove-projects-tab.tsx b/source/features/remove-projects-tab.tsx
index c5054fe8..8eb33551 100644
--- a/source/features/remove-projects-tab.tsx
+++ b/source/features/remove-projects-tab.tsx
@@ -1,8 +1,8 @@
 import React from 'dom-chef';
 import select from 'select-dom';
 import onetime from 'onetime';
+import elementReady from 'element-ready';
 import features from '../libs/features';
-import {safeElementReady} from '../libs/dom-utils';
 import {isUserProfile, isOwnOrganizationProfile, isOrganizationProfile} from '../libs/page-detect';
 
 const addNewProjectLink = onetime(() => {
@@ -33,7 +33,7 @@ const addNewProjectLink = onetime(() => {
 });
 
 async function init(): Promise<false | void> {
-	await safeElementReady(`
+	await elementReady(`
 		.orghead + *,
 		.repohead + *,
 		.user-profile-nav + *
diff --git a/source/features/resolve-conflicts.tsx b/source/features/resolve-conflicts.tsx
index 4cfba5f3..de364abd 100644
--- a/source/features/resolve-conflicts.tsx
+++ b/source/features/resolve-conflicts.tsx
@@ -4,7 +4,10 @@ import elementReady from 'element-ready';
 import features from '../libs/features';
 
 async function init(): Promise<void> {
-	await elementReady('.CodeMirror'); // *Not* safeElementReady
+	await elementReady('.CodeMirror', {
+		stopOnDomReady: false
+	});
+
 	document.head.append(<script src={browser.runtime.getURL('resolve-conflicts.js')}/>);
 }
 
diff --git a/source/features/sort-issues-by-update-time.tsx b/source/features/sort-issues-by-update-time.tsx
index b22842fc..efdbbb1a 100644
--- a/source/features/sort-issues-by-update-time.tsx
+++ b/source/features/sort-issues-by-update-time.tsx
@@ -1,7 +1,7 @@
 import select from 'select-dom';
+import elementReady from 'element-ready';
 import features from '../libs/features';
 import {getUsername} from '../libs/utils';
-import {safeElementReady} from '../libs/dom-utils';
 
 function getDefaultQuery(link: HTMLAnchorElement, search: URLSearchParams): string {
 	// Query-less URLs imply some queries.
@@ -51,7 +51,7 @@ function init(): void {
 }
 
 async function cleanBar(): Promise<void> {
-	(await safeElementReady<HTMLInputElement>('.header-search-input'))!.value = '';
+	(await elementReady<HTMLInputElement>('.header-search-input'))!.value = '';
 }
 
 const description = 'Change the default sort order of issues and pull requests to "Recently updated"';
diff --git a/source/features/trending-menu-item.tsx b/source/features/trending-menu-item.tsx
index 15322e69..dad817e1 100644
--- a/source/features/trending-menu-item.tsx
+++ b/source/features/trending-menu-item.tsx
@@ -1,9 +1,9 @@
 import React from 'dom-chef';
+import elementReady from 'element-ready';
 import features from '../libs/features';
-import {safeElementReady} from '../libs/dom-utils';
 
 async function init(): Promise<false | void> {
-	const exploreLink = await safeElementReady('.Header-link[href="/explore"]');
+	const exploreLink = await elementReady('.Header-link[href="/explore"]');
 	if (!exploreLink) {
 		return false;
 	}
diff --git a/source/libs/dom-utils.ts b/source/libs/dom-utils.ts
index 9b7a8941..eedd8921 100644
--- a/source/libs/dom-utils.ts
+++ b/source/libs/dom-utils.ts
@@ -1,20 +1,4 @@
 import select from 'select-dom';
-import domLoaded from 'dom-loaded';
-import elementReady from 'element-ready';
-
-/*
- * Automatically stops checking for an element to appear once the DOM is ready.
- */
-export const safeElementReady = <T extends Element>(selector: string): Promise<T | null> => {
-	const waiting = elementReady<T>(selector);
-
-	// Don't check ad-infinitum
-	// eslint-disable-next-line promise/prefer-await-to-then
-	domLoaded.then(() => requestAnimationFrame(() => waiting.cancel()));
-
-	// If cancelled, return null like a regular select() would
-	return waiting.catch(() => null);
-};
 
 /**
  * Append to an element, but before a element that might not exist.
diff --git a/source/libs/features.tsx b/source/libs/features.tsx
index a8da200a..be1a159a 100644
--- a/source/libs/features.tsx
+++ b/source/libs/features.tsx
@@ -2,10 +2,10 @@ import React from 'dom-chef';
 import select from 'select-dom';
 import onDomReady from 'dom-loaded';
 import OptionsSync from 'webext-options-sync';
+import elementReady from 'element-ready';
 import onNewComments from './on-new-comments';
 import onFileListUpdate from './on-file-list-update';
 import * as pageDetect from './page-detect';
-import {safeElementReady} from './dom-utils';
 
 type BooleanFunction = () => boolean;
 type VoidFunction = () => void;
@@ -79,7 +79,7 @@ onAjaxedPages(async () => {
 // Rule assumes we don't want to leave it pending:
 // eslint-disable-next-line no-async-promise-executor
 const globalReady: Promise<GlobalOptions> = new Promise(async resolve => {
-	await safeElementReady('body');
+	await elementReady('body');
 
 	if (pageDetect.is500()) {
 		return;