[FIX] website, *: review theme tab creation + switching

*: web_editor

When clicking on the theme tab on an empty page, a scrollbar appeared
and stayed. This was because the fake `<theme/>` element was focused and
the overlay positioned randomly outside of the page.

This commit fixes that by simplifying the code and always hiding the
related overlay. This commit also makes sure the onFocus/onBlur method
of the theme options are called consistently, even though they are
probably not useful.

Part of https://github.com/odoo/odoo/pull/52081

closes odoo/odoo#52114

X-original-commit: 7760898de4e14fa30db1db87dfa05276bfcaa2bb
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -1872,10 +1872,10 @@ var SnippetsMenu = Widget.extend({
 
         tab = tab || this.tabs.BLOCKS;
 
-        while (this.customizePanel.firstChild) {
-            this.customizePanel.removeChild(this.customizePanel.firstChild);
-        }
         if (content) {
+            while (this.customizePanel.firstChild) {
+                this.customizePanel.removeChild(this.customizePanel.firstChild);
+            }
             $(this.customizePanel).append(content);
         }
 

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

@@ -52,17 +52,17 @@ weSnippetEditor.Class.include({
             this.el.appendChild(this.fakeThemeEl);
         }
 
-        await this._activateSnippet($(this.fakeThemeEl));
-
-        if (!this.themeCustomizationMenuEl) {
-            this.themeCustomizationMenuEl = document.createElement('div');
-            for (const node of this.customizePanel.childNodes) {
-                this.themeCustomizationMenuEl.appendChild(node);
-            }
-        }
+        // Need all of this in that order so that:
+        // - the element is visible and can be enabled and the onFocus method is
+        //   called each time.
+        // - the element is hidden afterwards so it does not take space in the
+        //   DOM, same as the overlay which may make a scrollbar appear.
+        this.fakeThemeEl.classList.remove('d-none');
+        const editor = await this._activateSnippet($(this.fakeThemeEl));
+        this.fakeThemeEl.classList.add('d-none');
+        editor.toggleOverlay(false);
 
         this._updateLeftPanelContent({
-            content: this.themeCustomizationMenuEl,
             tab: this.tabs.THEME,
         });
     },