Handle cases where the toggle status notification keeps popping up. O…

…nly allow toast notifications within a second after a command

src/background/commands/dispatchCommand.ts

@@ -39,6 +39,7 @@ const backgroundCommands = new Set([
 export async function dispatchCommand(
 	command: RangoAction
 ): Promise<ResponseToTalon> {
+	await sendRequestToContent({ type: "allowToastNotification" });
 	const result = (await (backgroundCommands.has(command.type)
 		? runBackgroundCommand(command)
 		: sendRequestToContent(command))) as string | TalonAction[] | undefined;

src/content/content.ts

@@ -12,7 +12,11 @@ import { runRangoActionWithTarget } from "./actions/runRangoActionWithTarget";
 import { runRangoActionWithoutTarget } from "./actions/runRangoActionWithoutTarget";
 import { reclaimHints } from "./wrappers/wrappers";
 import { reclaimHintsFromCache } from "./hints/hintsCache";
-import { notify, notifyTogglesStatus } from "./notify/notify";
+import {
+	allowToastNotification,
+	notify,
+	notifyTogglesStatus,
+} from "./notify/notify";
 import { initContentScript } from "./setup/initContentScript";
 import { setNavigationToggle } from "./settings/toggles";
 import { updateHintsEnabled } from "./observe";
@@ -79,6 +83,10 @@ browser.runtime.onMessage.addListener(
 					await notifyTogglesStatus();
 					break;
 
+				case "allowToastNotification":
+					allowToastNotification();
+					break;
+
 				default: {
 					const result = await runRangoActionWithoutTarget(request);
 					return result;

src/content/notify/notify.tsx

@@ -7,6 +7,20 @@ import { ToastMessage } from "./ToastMessage";
 import { TogglesStatusMessage } from "./ToastTogglesMessage";
 import { ToastIcon } from "./ToastIcon";
 
+let notificationAllowed = false;
+
+// This is to avoid the notification showing up if the user hasn't issued any
+// command. For example, we reset hintsToggleTabs every time the extension
+// starts
+export function allowToastNotification() {
+	console.log("Toast notifications allowed");
+	notificationAllowed = true;
+
+	setTimeout(() => {
+		notificationAllowed = false;
+	}, 1000);
+}
+
 function renderToast() {
 	let toastContainer = document.querySelector("#rango-toast");
 
@@ -21,6 +35,7 @@ function renderToast() {
 
 async function shouldNotify() {
 	if (
+		!notificationAllowed ||
 		document.visibilityState !== "visible" ||
 		!getCachedSetting("enableNotifications") ||
 		!isMainframe() ||

src/typings/RequestFromBackground.ts

@@ -18,6 +18,10 @@ interface DisplayToastNotification {
 	options?: ToastOptions;
 }
 
+interface AllowToastNotification {
+	type: "allowToastNotification";
+}
+
 interface UpdateNavigationToggle {
 	type: "updateNavigationToggle";
 	enable: boolean | undefined;
@@ -38,4 +42,5 @@ export type RequestFromBackground = { frameId?: number } & (
 	| ReclaimHints
 	| DisplayToastNotification
 	| UpdateNavigationToggle
+	| AllowToastNotification
 );