feat: add window position and size input on the new window block

src/background/workflow-engine/blocks-handler/handler-new-window.js

@@ -6,11 +6,17 @@ export async function newWindow(block) {
 
   try {
     const { incognito, windowState } = block.data;
-    const { id } = await browser.windows.create({
-      incognito,
-      state: windowState,
-    });
+    const windowOptions = { incognito, state: windowState };
 
+    if (windowState === 'normal') {
+      ['top', 'left', 'height', 'width'].forEach((key) => {
+        if (block.data[key] <= 0) return;
+
+        windowOptions[key] = block.data[key];
+      });
+    }
+
+    const { id } = await browser.windows.create(windowOptions);
     this.windowId = id;
 
     return {

src/components/block/BlockBasic.vue

@@ -80,6 +80,7 @@ function handleStartDrag(event) {
     data: block.data,
     id: block.details.id,
     blockId: block.id,
+    fromBlockBasic: true,
   };
 
   event.dataTransfer.setData('block', JSON.stringify(payload));

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -154,7 +154,7 @@ export default {
     function dropHandler({ dataTransfer, clientX, clientY, target }) {
       const block = JSON.parse(dataTransfer.getData('block') || null);
 
-      if (!block) return;
+      if (!block || block.fromBlockBasic) return;
 
       const isTriggerExists =
         block.id === 'trigger' &&

src/components/newtab/workflow/edit/EditNewWindow.vue

@@ -19,6 +19,7 @@
     <ui-checkbox
       :model-value="data.incognito"
       :disabled="!allowInIncognito"
+      class="mb-4"
       @change="updateData({ incognito: $event })"
     >
       {{ t('workflow.blocks.new-window.incognito.text') }}
@@ -26,6 +27,35 @@
         &#128712;
       </span>
     </ui-checkbox>
+    <template v-if="data.windowState === 'normal'">
+      <div class="flex items-center space-x-2">
+        <ui-input
+          :model-value="data.top"
+          :label="t('workflow.blocks.new-window.top')"
+          @change="updateData({ top: +$event })"
+        />
+        <ui-input
+          :model-value="data.left"
+          :label="t('workflow.blocks.new-window.left')"
+          @change="updateData({ left: +$event })"
+        />
+      </div>
+      <div class="flex items-center space-x-2">
+        <ui-input
+          :model-value="data.height"
+          :label="t('workflow.blocks.new-window.height')"
+          @change="updateData({ height: +$event })"
+        />
+        <ui-input
+          :model-value="data.width"
+          :label="t('workflow.blocks.new-window.width')"
+          @change="updateData({ width: +$event })"
+        />
+      </div>
+      <p class="mt-4 text-gray-600">
+        {{ t('workflow.blocks.new-window.note') }}
+      </p>
+    </template>
   </div>
 </template>
 <script setup>

src/locales/en/blocks.json

@@ -146,6 +146,11 @@
       "new-window": {
         "name": "New window",
         "description": "Create a new window",
+        "top": "Top",
+        "left": "Left",
+        "height": "Height",
+        "width": "Width",
+        "note": "Note: use 0 to disable",
         "windowState": {
           "placeholder": "Window state",
           "options": {

src/utils/shared.js

@@ -93,6 +93,10 @@ export const tasks = {
     maxConnection: 1,
     data: {
       description: '',
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
       incognito: false,
       windowState: 'normal',
     },