Fix for display:contents (#111)

forgetso · Jan 28, 2024 · 5f4ed56 · 5f4ed56
1 parent 0bc45b5
commit 5f4ed56
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 15 deletions.
diff --git 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
diff --git 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 <[email protected]>"
   },

diff --git 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
@@ -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
@@ -10,7 +10,7 @@ module.exports = merge(common, {
             new TerserPlugin({
                 terserOptions: {
                     compress: {
-                        drop_console: true,
+                        drop_console: ['log', 'info', 'debug'],
                     },
                 },
             }),