[REF] web, *: create jQuery ':hasVisibility' and ':hasOpacity' selectors

* web_editor, web_tour

jQuery has the built-in ':visible' selector. This is however not enough
as this only checks if the element and its parents have a visible
'display' property. Ironically, if the element has the 'visibility'
property set to 'hidden', it will be considered ':visible' by jQuery.

This commit creates the ':hasVisibility' and ':hasOpacity' selectors
which respectively check if the element and its parents have a visible
'visibility' property and a visible 'opacity' property.

3 files changed, 24 insertions, 25 deletions

diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js
index ace99a0f8d3..8722025663e 100644
--- a/addons/web/static/src/js/libs/jquery.js
+++ b/addons/web/static/src/js/libs/jquery.js
@@ -41,6 +41,28 @@ $.extend($.expr[':'], {
     data: function (element, index, matches) {
         return $(element).data(matches[3]);
     },
+    hasVisibility: function (element, index, matches) {
+        var $element = $(element);
+        if ($(element).css('visibility') === 'hidden') {
+            return false;
+        }
+        var $parent = $element.parent();
+        if (!$parent.length || $element.is('html')) {
+            return true;
+        }
+        return $parent.is(':hasVisibility');
+    },
+    hasOpacity: function (element, index, matches) {
+        var $element = $(element);
+        if (parseFloat($(element).css('opacity')) <= 0.01) {
+            return false;
+        }
+        var $parent = $element.parent();
+        if (!$parent.length || $element.is('html')) {
+            return true;
+        }
+        return $parent.is(':hasOpacity');
+    },
 });
 
 // jQuery functions extensions
diff --git a/addons/web_editor/static/src/js/snippets.editor.js b/addons/web_editor/static/src/js/snippets.editor.js
index d0b6394ecd9..2353fcaee2f 100644
--- a/addons/web_editor/static/src/js/snippets.editor.js
+++ b/addons/web_editor/static/src/js/snippets.editor.js
@@ -726,20 +726,8 @@ data.Class = Widget.extend({
     activate_overlay_zones: function ($targets) {
         var self = this;
 
-        function is_visible($el) {
-            return     $el.css('display')    !== 'none'
-                    && $el.css('opacity')    !== '0'
-                    && $el.css('visibility') !== 'hidden';
-        }
-
         // filter out invisible elements
-        $targets = $targets.filter(function () { return is_visible($(this)); });
-
-        // filter out elements with invisible parents
-        $targets = $targets.filter(function () {
-            var parents = $(this).parents().filter(function () { return !is_visible($(this)); });
-            return parents.length === 0;
-        });
+        $targets = $targets.filter(':visible:hasVisibility:hasOpacity');
 
         $targets.each(function () {
             var $target = $(this);
diff --git a/addons/web_tour/static/src/js/tour_manager.js b/addons/web_tour/static/src/js/tour_manager.js
index c2a9a7d8122..3b8b2844446 100644
--- a/addons/web_tour/static/src/js/tour_manager.js
+++ b/addons/web_tour/static/src/js/tour_manager.js
@@ -26,21 +26,11 @@ function get_running_delay_key() {
 function get_first_visible_element($elements) {
     for (var i = 0 ; i < $elements.length ; i++) {
         var $i = $elements.eq(i);
-        if ($i.is(":visible") && _has_visibility($i)) {
+        if ($i.is(':visible:hasVisibility')) {
             return $i;
         }
     }
     return $();
-
-    function _has_visibility($elem) {
-        if ($elem.css("visibility") === "hidden") {
-            return false;
-        }
-        if ($elem.is("html")) {
-            return true;
-        }
-        return _has_visibility($elem.parent());
-    }
 }
 
 function do_before_unload(if_unload_callback, if_not_unload_callback) {
@@ -503,5 +493,4 @@ return core.Class.extend(mixins.EventDispatcherMixin, ServicesMixin, {
         },
     },
 });
-
 });