feat: add tab zoom in and out in new tab block (#1262)

package.json

@@ -90,6 +90,7 @@
     "vue-i18n": "9",
     "vue-imask": "^6.4.2",
     "vue-router": "^4.2.4",
+    "vue-slider-component": "^4.1.0-beta.7",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2",

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

@@ -66,11 +66,23 @@
       class="mt-1 w-full"
       @change="updateData({ userAgent: $event })"
     />
+    <div class="mt-4">
+      <p>{{ t('workflow.blocks.new-tab.tab-zoom') }}</p>
+      <vue-slider
+        :min="0.25"
+        :max="4.5"
+        :interval="0.25"
+        :model-value="data.tabZoom || 1"
+        @change="updateData({ tabZoom: $event })"
+      />
+    </div>
   </div>
 </template>
 <script setup>
 import { useI18n } from 'vue-i18n';
+import VueSlider from 'vue-slider-component';
 import EditAutocomplete from './EditAutocomplete.vue';
+import 'vue-slider-component/theme/default.css';
 
 const props = defineProps({
   data: {

src/locales/en/blocks.json

@@ -565,6 +565,7 @@
         "name": "New tab",
         "description": "",
         "url": "New tab URL",
+        "tab-zoom": "Tab zoom",
         "customUserAgent": "Use custom User-Agent",
         "activeTab": "Set as active tab",
         "tabToGroup": "Add tab to a group",

src/utils/shared.js

@@ -103,6 +103,7 @@ export const tasks = {
       url: '',
       userAgent: '',
       active: true,
+      tabZoom: 1,
       inGroup: false,
       waitTabLoaded: false,
       updatePrevTab: false,

src/workflowEngine/blocksHandler/handlerNewTab.js

@@ -66,6 +66,11 @@ async function newTab({ id, data }) {
       }
     }
 
+    if (data.tabZoom && data.tabZoom !== 1) {
+      await sleep(1000);
+      await browser.tabs.setZoom(tab.id, data.tabZoom);
+    }
+
     this.activeTab.id = tab.id;
     this.windowId = tab.windowId;
   }

yarn.lock

@@ -7071,6 +7071,11 @@ vue-router@^4.2.4:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-slider-component@^4.1.0-beta.7:
+  version "4.1.0-beta.7"
+  resolved "https://registry.yarnpkg.com/vue-slider-component/-/vue-slider-component-4.1.0-beta.7.tgz#f6aaac2557df8b9d5460482e2576a009d0ed2dae"
+  integrity sha512-Qb7K920ZG7PoQswoF6Ias+i3W2rd3k4fpk04JUl82kEUcN86Yg6et7bVSKWt/7VpQe8a5IT3BqCKSCOZ7AJgCA==
+
 vue-toastification@^2.0.0-rc.5:
   version "2.0.0-rc.5"
   resolved "https://registry.yarnpkg.com/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz#92798604d806ae473cfb76ed776fae294280f8f8"