From 5f4ed56ec51cea16a4162a4f5356091f17217913 Mon Sep 17 00:00:00 2001
From: Chris <forgetso86@gmail.com>
Date: Sun, 28 Jan 2024 20:45:01 +0100
Subject: [PATCH] Fix for display:contents (#111)

---
 manifest.json           |  2 +-
 package-lock.json       |  4 ++--
 package.json            |  2 +-
 src/elements.ts         | 39 ++++++++++++++++++++++++++++++---------
 tests/test.html         |  2 +-
 webpack/webpack.prod.js |  2 +-
 6 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/manifest.json b/manifest.json
index 9416c1d..aa49e0f 100644
--- a/manifest.json
+++ b/manifest.json
@@ -31,7 +31,7 @@
     "permissions": ["activeTab", "storage", "notifications"],
     "host_permissions": ["http://*/*", "https://*/*"],
     "update_url": "http://clients2.google.com/service/update2/crx",
-    "version":"2.0.6",
+    "version":"2.0.7",
     "options_page": "assets/options.html",
     "icons": {
         "16": "assets/icon-16.png",
diff --git a/package-lock.json b/package-lock.json
index a6cb3f4..9302457 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "search_and_replace",
-  "version": "2.0.2",
+  "version": "2.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "search_and_replace",
-      "version": "2.0.2",
+      "version": "2.0.7",
       "devDependencies": {
         "@eslint/eslintrc": "^2.0.3",
         "@html-eslint/eslint-plugin": "^0.22.0",
diff --git a/package.json b/package.json
index c25fe2d..33c6dfe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "search_and_replace",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "resolutions": {
     "author": "Chris Taylor <cjtaylor38@gmail.com>"
   },
diff --git a/src/elements.ts b/src/elements.ts
index 3e625d7..42fd5fc 100644
--- a/src/elements.ts
+++ b/src/elements.ts
@@ -65,6 +65,18 @@ function ancestorIsVisible(element: Element, cloned = false) {
     return true
 }
 
+/**
+ * Check if an element is hidden by checking the following conditions
+ * - If the element is the body, assume it's visible and return `false`
+ * - If the element is an input, return true if the input is `hidden`
+ * - If the element has style return true if the style is `none`
+ * - If the element is not a clone, does not have display:`contents`,
+ *   and has a `checkVisibility` method, return the result of that method
+ * - Get the computed style and return true if the computed style is `none`
+ * - Otherwise return `false`
+ * @param element
+ * @param cloned
+ */
 export function isHidden(element: HTMLElement | Element, cloned = false) {
     if (element.tagName === 'BODY') {
         return false
@@ -78,19 +90,28 @@ export function isHidden(element: HTMLElement | Element, cloned = false) {
         }
     }
 
-    if (element && 'style' in element && element.style.display === 'none') {
-        // if the element has style return true if the style is `none`
-        return true
-    }
+    if (element && 'style' in element) {
+        if (element.style.display === 'none') {
+            // if the element has style return true if the style is `none`
+            return true
+        }
 
-    // clones are not visible so we can't use checkVisibility
-    if (!cloned && 'checkVisibility' in element && typeof element.checkVisibility === 'function') {
-        // use the relatively new checkVisibility method, which returns `true` if the element is visible
-        return !element.checkVisibility()
+        if (
+            // clones are not visible, so we can't use checkVisibility on them
+            !cloned &&
+            // checkVisibility currently returns false for elements with `display: contents`
+            // https://chromium-review.googlesource.com/c/chromium/src/+/4950634
+            element.style.display !== 'contents' &&
+            'checkVisibility' in element &&
+            typeof element.checkVisibility === 'function'
+        ) {
+            // use the relatively new checkVisibility method, which returns `true` if the element is visible
+            return !element.checkVisibility()
+        }
     }
 
     // This method is not as accurate as checkVisibility
-    // compute the style as its not immediately obvious if the element is hidden
+    // compute the style as it's not immediately obvious if the element is hidden
     const computedStyle = getComputedStyle(element)
 
     if (computedStyle.display === 'none') {
diff --git a/tests/test.html b/tests/test.html
index d3149ea..b37a6c2 100644
--- a/tests/test.html
+++ b/tests/test.html
@@ -6,7 +6,7 @@
 <body>
 <div>
     <h1>Tests</h1>
-    <div>
+    <div style="display: 'contents';">
         <h2>1 Input Field</h2>
         <form action="#" method="post">
             <label>
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
index 304d613..dad7373 100644
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@@ -10,7 +10,7 @@ module.exports = merge(common, {
             new TerserPlugin({
                 terserOptions: {
                     compress: {
-                        drop_console: true,
+                        drop_console: ['log', 'info', 'debug'],
                     },
                 },
             }),