[FIX] website: hide backend navbar tour tips when entering edit mode

When entering edit mode, the navbar is hidden. The problem is that since
the merge of the website-in-backend feature at [1], it is only not shown
via an animation (height 0 + out of screen) but not `display: none`. The
tour system thus thinks it is still shown and keeps showing the related
tour tips.

E.g. with website_sale installed (and no demo data, to have the tours),
go on the shop page, there is a tooltip pointing at "+ New", enter edit
mode => the tooltip is still there and it even prevents to click on
"Discard" to leave the edit mode.

This commit fixes the issue by making the navbar `display: none` once
the closing animations are finished.

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-3082439

closes odoo/odoo#106735

X-original-commit: cdc8d4c889b316664323afad0d848403960150d5
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/client_actions/website_preview/website_preview.scss

@@ -89,6 +89,10 @@ header {
     }
 }
 
+.editor_has_snippets_hide_backend_navbar header .o_main_navbar {
+    display: none !important;
+}
+
 .o_block_preview {
     z-index: $zindex-dropdown - 1 !important;
 }

addons/website/static/src/js/editor/snippets.editor.js

@@ -42,6 +42,16 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
             this._toggleAnimatedTextButton();
         };
         this.$body[0].addEventListener('selectionchange', this.__onSelectionChange);
+
+        // editor_has_snippets is, amongst other things, in charge of hiding the
+        // backend navbar with a CSS animation. But we also need to make it
+        // display: none when the animation finishes for efficiency but also so
+        // that the tour tooltips pointing at the navbar disappear. This could
+        // rely on listening to the transitionend event but it seems more future
+        // proof to just add a delay after which the navbar is hidden.
+        this._hideBackendNavbarTimeout = setTimeout(() => {
+            this.el.ownerDocument.body.classList.add('editor_has_snippets_hide_backend_navbar');
+        }, 500);
     },
     /**
      * @override
@@ -50,6 +60,8 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({
         this._super(...arguments);
         this.$body[0].removeEventListener('selectionchange', this.__onSelectionChange);
         this.$body[0].classList.remove('o_animated_text_highlighted');
+        clearTimeout(this._hideBackendNavbarTimeout);
+        this.el.ownerDocument.body.classList.remove('editor_has_snippets_hide_backend_navbar');
     },
 
     //--------------------------------------------------------------------------