feat: add a condition in condition builder

src/content/handleTestCondition.js

@@ -11,9 +11,9 @@ function handleConditionElement({ data, type }) {
 
   const elementActions = {
     exists: () => Boolean(element),
+    notExists: () => !element,
     text: () => element?.innerText ?? null,
-    visibleInViewport: () => visibleInViewport(element),
-    hiddenInViewport: () => !elementActions.visibleInViewport(),
+    visibleScreen: () => visibleInViewport(element),
     visible: () => {
       if (!element) return false;
 
@@ -25,8 +25,9 @@ function handleConditionElement({ data, type }) {
       if (!element) return false;
 
       const { visibility, display } = getComputedStyle(element);
+      const styleHidden = visibility === 'hidden' || display === 'none';
 
-      return visibility === 'hidden' || display === 'none';
+      return styleHidden || !visibleInViewport(element);
     },
     attribute: ({ attrName }) => {
       if (!element || !element.hasAttribute(attrName)) return null;

src/utils/shared.js

@@ -1107,30 +1107,30 @@ export const conditionBuilder = {
       data: { selector: '' },
     },
     {
-      id: 'element#visible',
+      id: 'element#notExists',
       category: 'element',
-      name: 'Element visible',
+      name: 'Element not exists',
       compareable: false,
       data: { selector: '' },
     },
     {
-      id: 'element#invisible',
+      id: 'element#visible',
       category: 'element',
-      name: 'Element invisible',
+      name: 'Element visible',
       compareable: false,
       data: { selector: '' },
     },
     {
-      id: 'element#visibleInViewport',
+      id: 'element#visibleScreen',
       category: 'element',
-      name: 'Element visible in viewport',
+      name: 'Element visible in screen',
       compareable: false,
       data: { selector: '' },
     },
     {
-      id: 'element#hiddenInViewport',
+      id: 'element#invisible',
       category: 'element',
-      name: 'Element hidden in viewport',
+      name: 'Element hidden in screen',
       compareable: false,
       data: { selector: '' },
     },