feat: stop recording from webpage

src/background/index.js

@@ -156,6 +156,14 @@ message.on(
 message.on('workflow:register', ({ triggerBlock, workflowId }) => {
   registerWorkflowTrigger(workflowId, triggerBlock);
 });
+message.on('recording:stop', async () => {
+  try {
+    await BackgroundUtils.openDashboard('', false);
+    await BackgroundUtils.sendMessageToDashboard('recording:stop');
+  } catch (error) {
+    console.error(error);
+  }
+});
 
 automa('background', message);
 

src/content/services/recordWorkflow/App.vue

@@ -14,9 +14,10 @@
       @mousedown="toggleDragging(true, $event)"
     >
       <span
-        class="relative rounded-full bg-red-400 flex items-center justify-center"
-        title="Recording workflow"
+        class="relative cursor-pointer rounded-full bg-red-400 flex items-center justify-center"
         style="height: 24px; width: 24px"
+        title="Stop recording"
+        @click="stopRecording"
       >
         <v-remixicon
           name="riRecordCircleLine"
@@ -245,6 +246,11 @@ const blocksList = {
   default: ['get-text', 'attribute-value'],
 };
 
+function stopRecording() {
+  browser.runtime.sendMessage({
+    type: 'background--recording:stop',
+  });
+}
 function getElementBlocks(element) {
   if (!element) return;
 

src/newtab/App.vue

@@ -194,6 +194,11 @@ async function syncHostedWorkflows() {
 
   await hostedWorkflowStore.fetchWorkflows(hostIds);
 }
+function stopRecording() {
+  if (!window.stopRecording) return;
+
+  window.stopRecording();
+}
 
 const messageEvents = {
   'refresh-packages': function () {
@@ -228,6 +233,8 @@ const messageEvents = {
   'workflow:execute': function ({ data, options = {} }) {
     executeWorkflow(data, options);
   },
+  'recording:stop': stopRecording,
+  'background--recording:stop': stopRecording,
 };
 
 browser.runtime.onMessage.addListener(({ type, data }) => {
@@ -331,6 +338,9 @@ window.addEventListener('message', ({ data }) => {
     const { isRecording } = await browser.storage.local.get('isRecording');
     if (isRecording) {
       router.push('/recording');
+
+      await browser.action.setBadgeBackgroundColor({ color: '#ef4444' });
+      await browser.action.setBadgeText({ text: 'rec' });
     }
 
     autoDeleteLogs();

src/newtab/pages/Recording.vue

@@ -252,6 +252,8 @@ onMounted(async () => {
 
   if (!isRecording && !recording) return;
 
+  window.stopRecording = stopRecording;
+
   browser.storage.onChanged.addListener(onStorageChanged);
   browser.tabs.onCreated.addListener(browserEvents.onTabCreated);
   browser.tabs.onActivated.addListener(browserEvents.onTabsActivated);
@@ -263,6 +265,7 @@ onMounted(async () => {
   Object.assign(state, recording);
 });
 onBeforeUnmount(() => {
+  window.stopRecording = null;
   browser.storage.local.onChanged.removeListener(onStorageChanged);
   browser.storage.onChanged.removeListener(onStorageChanged);
   browser.tabs.onCreated.removeListener(browserEvents.onTabCreated);