refactor: more fine-grained lock

src/content/blocksHandler/handlerForms.js

@@ -1,6 +1,7 @@
-import { sendMessage } from '@/utils/message';
 import handleFormElement from '@/utils/handleFormElement';
+import { sendMessage } from '@/utils/message';
 import handleSelector, { markElement } from '../handleSelector';
+import synchronizedLock from '../synchronizedLock';
 
 async function forms(block) {
   const { data } = block;
@@ -24,38 +25,43 @@ async function forms(block) {
 
   async function typeText(element) {
     if (block.debugMode && data.type === 'text-field') {
+      // get lock
+      await synchronizedLock.getLock();
       element.focus?.();
 
-      if (data.clearValue) {
-        const backspaceCommands = new Array(element.value?.length ?? 0).fill({
-          type: 'rawKeyDown',
-          unmodifiedText: 'Delete',
-          text: 'Delete',
-          windowsVirtualKeyCode: 46,
-        });
+      try {
+        if (data.clearValue) {
+          const backspaceCommands = new Array(element.value?.length ?? 0).fill({
+            type: 'rawKeyDown',
+            unmodifiedText: 'Delete',
+            text: 'Delete',
+            windowsVirtualKeyCode: 46,
+          });
+
+          await sendMessage(
+            'debugger:type',
+            { commands: backspaceCommands, tabId: block.activeTabId, delay: 0 },
+            'background'
+          );
+        }
 
+        const commands = data.value.split('').map((char) => ({
+          type: 'keyDown',
+          text: char === '\n' ? '\r' : char,
+        }));
+        const typeDelay = +block.data.delay;
         await sendMessage(
           'debugger:type',
-          { commands: backspaceCommands, tabId: block.activeTabId, delay: 0 },
+          {
+            commands,
+            tabId: block.activeTabId,
+            delay: Number.isNaN(typeDelay) ? 0 : typeDelay,
+          },
           'background'
         );
+      } finally {
+        synchronizedLock.releaseLock();
       }
-
-      const commands = data.value.split('').map((char) => ({
-        type: 'keyDown',
-        text: char === '\n' ? '\r' : char,
-      }));
-      const typeDelay = +block.data.delay;
-      await sendMessage(
-        'debugger:type',
-        {
-          commands,
-          tabId: block.activeTabId,
-          delay: Number.isNaN(typeDelay) ? 0 : typeDelay,
-        },
-        'background'
-      );
-
       return;
     }
 

src/content/index.js

@@ -240,19 +240,9 @@ async function messageListener({ data, source }) {
 
   automa('content');
 
-  let locked = false;
-  const queue = [];
-
   browser.runtime.onMessage.addListener(async (data) => {
     const asyncExecuteBlock = async (block) => {
-      if (locked) {
-        return new Promise((resolve, reject) => {
-          queue.push([block, resolve, reject]);
-        });
-      }
-
       try {
-        locked = true;
         const res = await executeBlock(block);
         return res;
       } catch (error) {
@@ -275,20 +265,11 @@ async function messageListener({ data, source }) {
 
         await blocksHandler().loopData(loopBlock);
         return executeBlock(block);
-      } finally {
-        locked = false;
       }
     };
 
     if (data.isBlock) {
       const res = await asyncExecuteBlock(data);
-      while (queue.length) {
-        const [block, resolve, reject] = queue.shift();
-        requestAnimationFrame(() => {
-          asyncExecuteBlock(block).then(resolve).catch(reject);
-        });
-      }
-
       return res;
     }