Fix/firefoxshortcut (#5)

* Fix: broken getShortcut on firefox

* Chore: update runtimehandler refs

* Refactor: move debugShow show to context with context selector

Update: old and new ui to ref useDebugShow

src/background/index.ts

@@ -92,7 +92,7 @@ const messageListener = (request, sender: chrome.runtime.MessageSender, sendResp
 			break;
 		}
 		case 'getShortcut': {
-			chrome.commands
+			runTimeHandler.commands
 				.getAll()
 				.then((commands) => {
 					const [commandEntry = undefined] = commands.filter(({ name }) => /toggle-bionic/.test(name));
@@ -144,6 +144,6 @@ function onInstallHandler(event: chrome.runtime.InstalledDetails) {
 
 chrome.runtime.onInstalled.addListener(onInstallHandler);
 
-chrome?.commands?.onCommand?.addListener(commandListener);
+runTimeHandler.commands.onCommand?.addListener(commandListener);
 
-runTimeHandler.runtime.onMessage.addListener(messageListener);
+(runTimeHandler as typeof chrome).runtime.onMessage.addListener(messageListener);

src/popup/context.tsx

@@ -0,0 +1,67 @@
+import { Storage } from '@plasmohq/storage';
+import { createContext, useContext, useEffect, useReducer } from 'react';
+
+let storage = {
+	key: 'context.store',
+	api: new Storage({ area: 'local' }),
+	get value() {
+		return this.api.get(this.key) as typeof rawValues;
+	},
+	set value(newStore) {
+		this.api.set(this.key, newStore);
+	},
+};
+
+const rawValues = {
+	isDebugDataVisible: !/production/i.test(process.env.NODE_ENV),
+};
+
+const initialPopupContextValue = {
+	...rawValues,
+	dispatch: function <Tkey extends keyof typeof rawValues>([action, value]: [Tkey, typeof rawValues[Tkey]]) {
+		return;
+	},
+};
+
+function reducer<Tkey extends keyof typeof rawValues>(state, [action, data]: [Tkey, typeof rawValues[Tkey]]): typeof rawValues {
+	let result = state;
+	switch (action) {
+		case 'isDebugDataVisible': {
+			result = { ...state, [action]: data };
+			break;
+		}
+	}
+
+	storage.value = result;
+	return result;
+}
+
+const PopupContext = createContext(initialPopupContextValue);
+
+export default function PopupContextProvider({ children }) {
+	const [store, dispatch] = useReducer(reducer, initialPopupContextValue);
+
+	const loadFromStorage = () => {
+		(async () => {
+			const savedStore: typeof rawValues = await storage.value;
+
+			if (!savedStore) {
+				return;
+			}
+
+			for (const [key, val] of Object.entries(savedStore)) {
+				dispatch([key as keyof typeof store, val]);
+			}
+		})();
+	};
+
+	useEffect(loadFromStorage, []);
+
+	return <PopupContext.Provider value={{ ...store, dispatch }}>{children}</PopupContext.Provider>;
+}
+
+export function usePopupContext() {
+	const { dispatch, ...store } = useContext(PopupContext);
+
+	return { store, dispatch };
+}

src/popup/index.tsx

@@ -13,8 +13,10 @@ import documentParser from '~services/documentParser';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
 
+import PopupContextProvider from './context';
 import IndexPopupNew from './indexNew';
 import IndexPopupOld from './indexOld';
+import { useShowDebugSwitch } from './shorcut';
 
 const badCapScroll = /safari/i.test(process.env.TARGET) ? { overflowY: 'scroll', height: '600px' } : {};
 
@@ -36,7 +38,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1;
 function IndexPopup() {
 	const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab);
 	const [footerMessageIndex, setFooterMeessageIndex] = useState(null);
-	const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV));
+	const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch();
 
 	const getTabOriginfn = useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]);
 
@@ -139,4 +141,12 @@ function IndexPopup() {
 	);
 }
 
-export default IndexPopup;
+function PopupShell() {
+	return (
+		<PopupContextProvider>
+			<IndexPopup />
+		</PopupContextProvider>
+	);
+}
+
+export default PopupShell;

src/popup/indexNew.tsx

@@ -21,7 +21,7 @@ import documentParser from '~services/documentParser';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
 
-import Shortcut, { ShortcutGuide } from './shorcut';
+import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut';
 
 const popupLogStyle = 'background:cyan;color:brown';
 
@@ -41,7 +41,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1;
 function IndexPopupNew() {
 	const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab);
 	const [footerMessageIndex, setFooterMeessageIndex] = useState(null);
-	const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV));
+	const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch();
 
 	const getTabOriginfn = useCallback(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), [TabHelper]);
 
@@ -142,7 +142,7 @@ function IndexPopupNew() {
 		};
 
 		setTabSession({ ...tabSession, brMode: newBrMode });
-		runTimeHandler.runtime.sendMessage(payload, () => Logger.LogLastError());
+		(runTimeHandler as typeof chrome).runtime.sendMessage(payload, () => Logger.LogLastError());
 
 		TabHelper.getActiveTab(true).then((tab) => chrome.tabs.sendMessage(tab.id, payload, () => Logger.LogLastError()));
 	};

src/popup/indexOld.tsx

@@ -20,7 +20,8 @@ import {
 import documentParser from '~services/documentParser';
 import defaultPrefs from '~services/preferences';
 import runTimeHandler from '~services/runTimeHandler';
-import Shortcut, { ShortcutGuide } from './shorcut';
+
+import Shortcut, { ShortcutGuide, useShowDebugSwitch } from './shorcut';
 
 const popupLogStyle = 'background:cyan;color:brown';
 
@@ -39,7 +40,7 @@ const FIRST_FOOTER_MESSAGE_INDEX = 1;
 function IndexPopupOld() {
 	const [activeTab, setActiveTab] = useState(null as chrome.tabs.Tab);
 	const [footerMessageIndex, setFooterMeessageIndex] = useState(null);
-	const [isDebugDataVisible, setIsDebugDataVisible] = useState(!/production/i.test(process.env.NODE_ENV));
+	const [isDebugDataVisible, setIsDebugDataVisible] = useShowDebugSwitch();
 
 	const [prefs, setPrefs] = usePrefs(async () => await TabHelper.getTabOrigin(await TabHelper.getActiveTab(true)), true, process.env.TARGET);
 
@@ -136,7 +137,7 @@ function IndexPopupOld() {
 		};
 
 		setTabSession({ ...tabSession, brMode: newBrMode });
-		runTimeHandler.runtime.sendMessage(payload, () => Logger.LogLastError());
+		(runTimeHandler as typeof chrome).runtime.sendMessage(payload, () => Logger.LogLastError());
 
 		TabHelper.getActiveTab(true).then((tab) => chrome.tabs.sendMessage(tab.id, payload, () => Logger.LogLastError()));
 	};

src/popup/shorcut.tsx

@@ -3,11 +3,13 @@ import { useEffect, useState } from 'react';
 import Logger from '~services/Logger';
 import runTimeHandler from '~services/runTimeHandler';
 
+import { usePopupContext } from './context';
+
 export function useShortcut() {
 	const [shortcut, setShortcut] = useState(undefined);
 
 	const getShortcut = () => {
-		runTimeHandler.runtime
+		(runTimeHandler as typeof chrome).runtime
 			.sendMessage({ message: 'getShortcut' })
 			.then((shortcutResponse) => setShortcut(shortcutResponse))
 			.catch(Logger.logError);
@@ -40,3 +42,13 @@ export default function Shortcut() {
 		</span>
 	);
 }
+
+export function useShowDebugSwitch() {
+	const {
+		store: { isDebugDataVisible },
+		dispatch,
+	} = usePopupContext();
+
+	const setIsDebugDataVisible = (value: typeof isDebugDataVisible) => dispatch(['isDebugDataVisible', value]);
+	return [isDebugDataVisible, setIsDebugDataVisible] as [typeof isDebugDataVisible, typeof setIsDebugDataVisible];
+}