395 context menu item translate page is sometimes not displayed (#567)

# Problem

We have single context menu for all tabs and dynamically update it when user toggle/refresh tab.

While this update we fetch content script for state of page translation and sometimes it happens too quickly, so content script is not ready to response for requests.

This lead us to an exception and `catch` block is hide context menu in result.

# How this change fixes it

Implemented retries mechanism for query content script.

Now background script can wait response (with reasonable deadline time).

---

* fix(#395): wait response of content script

* chore: update debug print

Author: vitonsky

src/app/ContextMenus/TranslatePageContextMenu.ts

@@ -4,6 +4,7 @@ import browser from 'webextension-polyfill';
 import { isFirefox } from '../../lib/browser';
 import { getCurrentTabId, isValidBrowserTabId } from '../../lib/browser/tabs';
 import { getMessage } from '../../lib/language';
+import { wait } from '../../lib/time';
 import { getConfig } from '../../requests/backend/getConfig';
 import { getTranslatorFeatures } from '../../requests/backend/getTranslatorFeatures';
 import { disableTranslatePage } from '../../requests/contentscript/pageTranslation/disableTranslatePage';
@@ -96,7 +97,12 @@ export class TranslatePageContextMenu {
 		}
 	}
 
+	private updateMenuContext: unknown = null;
 	private readonly updateMenuItem = async (tabId: number) => {
+		// Update context
+		const currentContext = {};
+		this.updateMenuContext = currentContext;
+
 		const currentWindow = await browser.windows.getCurrent();
 		const tab = await browser.tabs.get(tabId);
 
@@ -123,18 +129,46 @@ export class TranslatePageContextMenu {
 		});
 
 		if (isVisible) {
-			try {
-				const translateState = await getPageTranslateState(tabId);
-				this.tabStateUpdated({
-					tabId,
-					isTranslating: translateState.isTranslated,
-				});
-			} catch (_error) {
-				// Handle case when tab contentscript is not loaded yet
-				// and requests do not handle
-				browser.contextMenus.update(this.menuId, {
-					visible: false,
-				});
+			const timeout = 50;
+			const retriesLimit = 30;
+
+			// Retry loop
+			// eslint-disable-next-line no-constant-condition
+			for (let retry = 0; true; retry++) {
+				// Handle case if user have changed tab while waiting
+				if (this.updateMenuContext !== currentContext) break;
+
+				try {
+					const translateState = await getPageTranslateState(tabId);
+
+					browser.contextMenus.update(this.menuId, {
+						visible: true,
+					});
+
+					this.tabStateUpdated({
+						tabId,
+						isTranslating: translateState.isTranslated,
+					});
+
+					break;
+				} catch (error) {
+					// Handle case when tab contentscript is not loaded yet
+					// and requests do not handle
+					browser.contextMenus.update(this.menuId, {
+						visible: false,
+					});
+
+					// Retry attempt
+					if (retry < retriesLimit) {
+						await wait(timeout);
+						continue;
+					}
+
+					// Out of limit
+					console.warn('Error while render context menu for page translation');
+					console.error(error);
+					break;
+				}
 			}
 		}
 	};

src/lib/time.ts

@@ -0,0 +1 @@
+export const wait = (time: number) => new Promise((res) => setTimeout(res, time));

webpack.config.js

@@ -38,6 +38,7 @@ console.log('WebpackConfig', {
 	mode,
 	target,
 	outputPath,
+	isFastBuild,
 });
 
 const offscreenDocuments = ['main', 'worker', 'translator'];