[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.

1 files changed, 1 insertions, 13 deletions

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);