Repository: ymrl/a11y-visualizer
Pull request #153 (2024-07-01 14:05:01)

:sparkles: remove next sibling from inline judgement
#88 


Patch:
diff --git a/src/background.ts b/src/background.ts
index 9acd2fe..937f92b 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -53,18 +53,8 @@ chrome.runtime.onStartup.addListener(async () => {
   updateIcons(enabled);
 });
 
-chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message) => {
   if (message.type === "updateEnabled") {
     updateIcons(message.enabled);
   }
-  if (message.type === "isEnabled") {
-    (async () => {
-      const enabled = await loadEnabled();
-      sendResponse({
-        type: "isEnabledAnswer",
-        enabled,
-      });
-    })();
-    return true;
-  }
 });
diff --git a/src/content/dom/isInline.ts b/src/content/dom/isInline.ts
index 76c55af..7ad0330 100644
--- a/src/content/dom/isInline.ts
+++ b/src/content/dom/isInline.ts
@@ -1,6 +1,5 @@
-const hasInlineSibling = (el: Element): boolean => {
+const hasPreviousInlineSibling = (el: Element): boolean => {
   let prev = el.previousSibling;
-  let next = el.nextSibling;
   while (prev) {
     if (prev.nodeType === Node.TEXT_NODE) {
       if (prev.textContent?.trim()) {
@@ -8,27 +7,16 @@ const hasInlineSibling = (el: Element): boolean => {
       }
     } else if (prev.nodeType === Node.ELEMENT_NODE) {
       const style = window.getComputedStyle(prev as HTMLElement);
-      if (style.display.startsWith("inline")) {
+      if (style.position === "absolute" || style.position === "fixed") {
+        /* no op */
+      } else if (style.display.startsWith("inline")) {
         return true;
+      } else {
+        break;
       }
-      break;
     }
     prev = prev.previousSibling;
   }
-  while (next) {
-    if (next.nodeType === Node.TEXT_NODE) {
-      if (next.textContent?.trim()) {
-        return true;
-      }
-    } else if (next.nodeType === Node.ELEMENT_NODE) {
-      const style = window.getComputedStyle(next as HTMLElement);
-      if (style.display.startsWith("inline")) {
-        return true;
-      }
-      break;
-    }
-    next = next.nextSibling;
-  }
   return false;
 };
 
@@ -67,8 +55,8 @@ export const isInline = (el: Element): boolean => {
     return false;
   }
 
-  // テキスト、またはインラインの兄弟がいる場合はtrue
-  if (hasInlineSibling(el)) {
+  // 自身よりも前にテキスト、またはインラインの兄弟がいる場合はtrue
+  if (hasPreviousInlineSibling(el)) {
     return true;
   }
 
diff --git a/src/content/index.ts b/src/content/index.ts
index c39abe8..b76a952 100644
--- a/src/content/index.ts
+++ b/src/content/index.ts
@@ -14,19 +14,8 @@ const listener = (message: SettingsMessage) => {
   if (message.enabled && !injected) {
     injectRoot(window, window.document.body);
     injected = true;
+  } else {
+    injected = false;
   }
 };
-
 chrome.runtime.onMessage.addListener(listener);
-
-document.addEventListener("visibilitychange", async () => {
-  if (document.visibilityState === "visible") {
-    const { enabled } = await chrome.runtime.sendMessage({
-      type: "isEnabled",
-    });
-    if (enabled && !injected) {
-      injectRoot(window, window.document.body);
-      injected = true;
-    }
-  }
-});
diff --git a/src/content/injectRoot.tsx b/src/content/injectRoot.tsx
index edf9b22..4760165 100644
--- a/src/content/injectRoot.tsx
+++ b/src/content/injectRoot.tsx
@@ -69,21 +69,8 @@ export const injectRoot = async (
     } else {
       mountReturn?.unmount();
       mountReturn = null;
+      chrome.runtime.onMessage.removeListener(listener);
     }
   };
   chrome.runtime.onMessage.addListener(listener);
-
-  w.document.addEventListener("visibilitychange", async () => {
-    if (w.document.visibilityState === "visible") {
-      const { enabled } = await chrome.runtime.sendMessage({
-        type: "isEnabled",
-      });
-      if (enabled) {
-        (mountReturn || (mountReturn = mount(w, parent))).render(settings);
-      } else {
-        mountReturn?.unmount();
-        mountReturn = null;
-      }
-    }
-  });
 };


Test patch:
diff --git a/src/content/dom/isInline.test.ts b/src/content/dom/isInline.test.ts
index 255f659..63bd667 100644
--- a/src/content/dom/isInline.test.ts
+++ b/src/content/dom/isInline.test.ts
@@ -62,7 +62,33 @@ describe("isInline", () => {
     expect(isInline(el)).toBe(false);
   });
 
-  test("has inline sibling", () => {
+  test("has previous inline sibling", () => {
+    const parent = document.createElement("div");
+    const el = document.createElement("span");
+    el.style.display = "inline-block";
+    el.getBoundingClientRect = () => ({ height: 19.2 }) as DOMRect;
+    const sibling = document.createElement("span");
+    sibling.style.display = "inline-block";
+    parent.appendChild(sibling);
+    parent.appendChild(el);
+    document.body.appendChild(parent);
+    expect(isInline(el)).toBe(true);
+  });
+  test("previous sibling is position: absolute", () => {
+    const parent = document.createElement("div");
+    const el = document.createElement("span");
+    el.style.display = "inline-block";
+    el.getBoundingClientRect = () => ({ height: 19.2 }) as DOMRect;
+    const sibling = document.createElement("span");
+    sibling.style.display = "inline-block";
+    sibling.style.position = "absolute";
+    parent.appendChild(sibling);
+    parent.appendChild(el);
+    document.body.appendChild(parent);
+    expect(isInline(el)).toBe(false);
+  });
+
+  test("has next inline sibling", () => {
     const parent = document.createElement("div");
     const el = document.createElement("span");
     el.style.display = "inline-block";
@@ -72,10 +98,22 @@ describe("isInline", () => {
     parent.appendChild(el);
     parent.appendChild(sibling);
     document.body.appendChild(parent);
+    expect(isInline(el)).toBe(false);
+  });
+
+  test("has previous text sibling", () => {
+    const parent = document.createElement("div");
+    const el = document.createElement("span");
+    el.style.display = "inline-block";
+    el.getBoundingClientRect = () => ({ height: 19.2 }) as DOMRect;
+    const sibling = document.createTextNode("test");
+    parent.appendChild(sibling);
+    parent.appendChild(el);
+    document.body.appendChild(parent);
     expect(isInline(el)).toBe(true);
   });
 
-  test("has test sibling", () => {
+  test("has next text sibling", () => {
     const parent = document.createElement("div");
     const el = document.createElement("span");
     el.style.display = "inline-block";
@@ -84,7 +122,7 @@ describe("isInline", () => {
     parent.appendChild(el);
     parent.appendChild(sibling);
     document.body.appendChild(parent);
-    expect(isInline(el)).toBe(true);
+    expect(isInline(el)).toBe(false);
   });
 
   test("display:inline and has text", () => {
@@ -116,8 +154,8 @@ describe("isInline", () => {
       e.getBoundingClientRect = () => ({ height: 19.2 }) as DOMRect;
     });
     parent.appendChild(el);
-    grandParent.appendChild(parent);
     grandParent.appendChild(parentSibling);
+    grandParent.appendChild(parent);
     document.body.appendChild(grandParent);
     expect(isInline(el)).toBe(true);
   });