[FIX] web_editor, *: show text tools in style tab only

*: website

As the text editor is still the summernote one, this improvement was
made possible through a series of hack. It has to be reviewed once the
new editor is ready.
This makes the text tools only appear in the style tab by switching to
it as soon as the summernote tools are updated. To prevent flickering,
css and js hacks had to be made.

This also moves the undo/redo buttons in the top bar with another hack:
those simulates click on the hidden summernote ones.

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

3 files changed, 51 insertions, 9 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 229acc0616c..b99c9781446 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -341,6 +341,15 @@ eventHandler.modules.popover.update = function ($popover, oStyle, isAirMode) {
     } else {
         $airPopover.show();
     }
+
+    const $externalHistoryButtons = $('.o_we_external_history_buttons');
+    if ($externalHistoryButtons.length) {
+        const $noteHistory = $('.note-history');
+        $noteHistory.addClass('d-none');
+        $externalHistoryButtons.find(':first-child').prop('disabled', $noteHistory.find('[data-event=undo]').prop('disabled'));
+        $externalHistoryButtons.find(':last-child').prop('disabled', $noteHistory.find('[data-event=redo]').prop('disabled'));
+    }
+    $popover.trigger('summernote_popover_update_call');
 };
 
 var fn_handle_update = eventHandler.modules.handle.update;
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index b4a5dca1d4b..707c73ed481 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -821,6 +821,7 @@ var SnippetsMenu = Widget.extend({
         'mousedown': '_onMouseDown',
         'input .o_snippet_search_filter_input': '_onSnippetSearchInput',
         'click .o_snippet_search_filter_reset': '_onSnippetSearchResetClick',
+        'summernote_popover_update_call .o_we_snippet_text_tools': '_onSummernoteToolsUpdate',
     },
     custom_events: {
         'activate_insertion_zones': '_onActivateInsertionZones',
@@ -929,7 +930,7 @@ var SnippetsMenu = Widget.extend({
         this.customizePanel.classList.add('o_we_customize_panel', 'd-none');
 
         this.textEditorPanelEl = document.createElement('div');
-        this.textEditorPanelEl.classList.add('o_we_snippet_text_tools');
+        this.textEditorPanelEl.classList.add('o_we_snippet_text_tools', 'd-none');
 
         this.invisibleDOMPanelEl = document.createElement('div');
         this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel');
@@ -1030,9 +1031,8 @@ var SnippetsMenu = Widget.extend({
         });
 
         const $autoFocusEls = $('.o_we_snippet_autofocus');
-        if ($autoFocusEls.length) {
-            this._activateSnippet($autoFocusEls.first());
-        }
+        this._activateSnippet($autoFocusEls.length ? $autoFocusEls.first() : false);
+        this._textToolsSwitchingEnabled = true;
 
         return Promise.all(defs).then(() => {
             this.$('[data-title]').tooltip({
@@ -1985,6 +1985,7 @@ var SnippetsMenu = Widget.extend({
      * @param {this.tabs.VALUE} [tab='blocks'] - the tab to select
      */
     _updateLeftPanelContent: function ({content, tab}) {
+        clearTimeout(this._textToolsSwitchingTimeout);
         this._closeWidgets();
 
         tab = tab || this.tabs.BLOCKS;
@@ -1999,10 +2000,12 @@ var SnippetsMenu = Widget.extend({
         this.$('.o_snippet_search_filter').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.$('#o_scroll').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.customizePanel.classList.toggle('d-none', tab === this.tabs.BLOCKS);
+        this.textEditorPanelEl.classList.toggle('d-none', tab !== this.tabs.OPTIONS);
 
         this.$('.o_we_add_snippet_btn').toggleClass('active', tab === this.tabs.BLOCKS);
         this.$('.o_we_customize_snippet_btn').toggleClass('active', tab === this.tabs.OPTIONS)
                                              .prop('disabled', tab !== this.tabs.OPTIONS);
+
     },
     /**
      * Scrolls to given snippet.
@@ -2426,6 +2429,33 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * @private
+     */
+    _onSummernoteToolsUpdate(ev) {
+        if (!this._textToolsSwitchingEnabled) {
+            return;
+        }
+        if (!$.summernote.core.range.create()) {
+            // Sometimes not enough...
+            return;
+        }
+        this.textEditorPanelEl.classList.add('d-block');
+        const hasVisibleButtons = !!$(this.textEditorPanelEl).find('.btn:visible').length;
+        this.textEditorPanelEl.classList.remove('d-block');
+        if (!hasVisibleButtons) {
+            // Ugly way to detect that summernote was updated but there is no
+            // visible text tools.
+            return;
+        }
+        // Only switch tab without changing content (_updateLeftPanelContent
+        // make text tools visible only on that specific tab). Also do it with
+        // a slight delay to avoid flickering doing it twice.
+        clearTimeout(this._textToolsSwitchingTimeout);
+        this._textToolsSwitchingTimeout = setTimeout(() => {
+            this._updateLeftPanelContent({tab: this.tabs.OPTIONS});
+        }, 250);
+    },
+    /**
+     * @private
      * @param {OdooEvent} ev
      */
     _onUpdateCustomizeElements: function (ev) {
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 37ad3403a07..ba1ba15ce43 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -45,7 +45,7 @@ body.editor_enable.editor_has_snippets {
 // Ugly hack to force ugly rules... while waiting for new editor
 #oe_snippets#oe_snippets .o_we_snippet_text_tools {
     padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
-    box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
+    box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
     z-index: $o-we-zindex;
 
     .popover {
@@ -57,6 +57,7 @@ body.editor_enable.editor_has_snippets {
     }
     .popover-body {
         padding: 0 !important;
+        border: none !important;
 
         > * {
             margin-bottom: $o-we-sidebar-content-field-spacing;
@@ -81,10 +82,12 @@ body.editor_enable.editor_has_snippets {
           margin-bottom: $dropdown-spacer;
         }
     }
-}
-#o_scroll:not(.d-none) ~ .o_we_snippet_text_tools {
-    padding-right: $o-we-sidebar-blocks-content-spacing;
-    padding-left: $o-we-sidebar-blocks-content-spacing;
+    .note-popover ~ .note-popover,
+    .note-handle ~ .note-handle,
+    .note-dialog ~ .note-dialog {
+        // Prevent flickering of summernote when switching text tools...
+        display: none;
+    }
 }
 
 .oe_snippet {