[FIX] web_editor, mass_mailing: properly resize mass_mailing iframe

The iframe in mass_mailing is self-resizing in order to avoid having two
vertical scrollbar side by side. This failed since the conversion to OWL
due to the vertical offset added when resizing having become
insufficient. This adds a class to the <html> element of the iframe to
identify when it's in the context of mass_mailing so we can remove the
overflow visible style that is not needed in this context. This allows
us to remove that vertical offset altogether since the scrollbar
disappeared.

X-original-commit: 4f538911d68afdeca0253f15c9e8ffdbed4e995c
Part-of: odoo/odoo#102734

addons/mass_mailing/static/src/js/mailing_mailing_view_form_full_width.js

@@ -105,12 +105,10 @@ export class MassMailingFullWidthViewController extends formView.Controller {
      */
     _onToggleFullscreen() {
         const $iframeDoc = this.$iframe.contents();
-        const iframeTarget = $iframeDoc.find('#iframe_target');
+        const html = $iframeDoc.find('html').get(0);
+        html.scrollTop = 0;
+        html.classList.toggle('o_fullscreen');
         const isFullscreen = this._isFullScreen();
-        iframeTarget.css({
-            display: isFullscreen ? '' : 'flex',
-            'flex-direction': isFullscreen ? '' : 'column',
-        });
         const wysiwyg = $iframeDoc.find('.note-editable').data('wysiwyg');
         if (wysiwyg && wysiwyg.snippetsMenu) {
             // Restore the appropriate scrollable depending on the mode.
@@ -118,6 +116,7 @@ export class MassMailingFullWidthViewController extends formView.Controller {
             wysiwyg.snippetsMenu.$scrollable = isFullscreen ? $iframeDoc.find('.note-editable') : this._$scrollable;
         }
         this._repositionMailingEditorSidebar();
+        this._resizeMailingEditorIframe();
     }
     /**
      * Return true if the mailing editor is in full screen mode, false
@@ -138,19 +137,18 @@ export class MassMailingFullWidthViewController extends formView.Controller {
      * @private
      */
     _resizeMailingEditorIframe() {
-        const VERTICAL_OFFSET = 12; // Vertical offset picked for visual design purposes.
-        const minHeight = $(window).height() - Math.abs(this.$iframe.offset().top) - (VERTICAL_OFFSET / 2);
+        const minHeight = $(window).height() - Math.abs(this.$iframe.offset().top);
         const $iframeDoc = this.$iframe.contents();
         const $themeSelectorNew = $iframeDoc.find('.o_mail_theme_selector_new');
         if ($themeSelectorNew.length) {
-            this.$iframe.height(Math.max($themeSelectorNew[0].scrollHeight + VERTICAL_OFFSET, minHeight));
+            this.$iframe.height(Math.max($themeSelectorNew[0].scrollHeight, minHeight));
         } else {
             const ref = $iframeDoc.find('#iframe_target')[0];
             if (ref) {
                 this.$iframe.css({
                     height: this._isFullScreen()
                         ? $(window).height()
-                        : Math.max(ref.scrollHeight + VERTICAL_OFFSET, minHeight),
+                        : Math.max(ref.scrollHeight, minHeight),
                 });
             }
         }

addons/mass_mailing/static/src/js/mass_mailing_html_field.js

@@ -562,6 +562,7 @@ MassMailingHtmlField.props = {
     ...HtmlField.props,
     filterTemplates: { type: Boolean, optional: true },
     inlineField: { type: String, optional: true },
+    iframeHtmlClass: { type: String, optional: true },
 };
 
 MassMailingHtmlField.displayName = _lt("Email");
@@ -572,6 +573,7 @@ MassMailingHtmlField.extractProps = (...args) => {
         ...htmlProps,
         filterTemplates: attrs.options.filterTemplates,
         inlineField: attrs.options['inline-field'],
+        iframeHtmlClass: attrs['iframeHtmlClass'],
     };
 };
 

addons/mass_mailing/static/src/scss/mass_mailing.ui.scss

@@ -7,10 +7,15 @@
     margin-bottom: -$o-sheet-cancel-bpadding;
 }
 
-html, body {
+html:not(.o_mass_mailing_iframe), body:not(.o_mass_mailing_iframe), html.o_fullscreen {
     overflow: visible !important;
 }
 
+#iframe_target:not(.o_fullscreen) {
+    display: flex;
+    flex-direction: column;
+}
+
 .o_mail_theme_selector {
     > a {
         height: $o-we-toolbar-height;

addons/mass_mailing/views/mailing_mailing_views.xml

@@ -443,6 +443,9 @@
                 <xpath expr="//div[hasclass('oe_chatter')]" position="attributes">
                     <attribute name="class" remove="o-aside"/>
                 </xpath>
+                <xpath expr="//notebook/page[@name='mail_body']//field[@name='body_arch']" position="attributes">
+                    <attribute name="iframeHtmlClass">o_mass_mailing_iframe</attribute>
+                </xpath>
                 <xpath expr="//notebook/page[@name='mail_body']" position="after">
                     <!-- test_01_mass_mailing_editor_tour -->
                     <field name="body_html" invisible="1"/>

addons/web_editor/static/src/js/backend/html_field.js

@@ -603,6 +603,7 @@ HtmlField.extractProps = ({ attrs, field }) => {
             noAttachment: attrs.options['no-attachment'],
             inIframe: Boolean(attrs.options.cssEdit),
             iframeCssAssets: attrs.options.cssEdit,
+            iframeHtmlClass: attrs.iframeHtmlClass,
             snippets: attrs.options.snippets,
             allowCommandVideo: Boolean(attrs.options.allowCommandVideo) && (!field.sanitize || !field.sanitize_tags),
             mediaModalParams: {

addons/web_editor/static/src/js/wysiwyg/wysiwyg_iframe.js

@@ -149,7 +149,9 @@ Wysiwyg.include({
                 });
                 self.$iframe[0].contentWindow.document
                     .open("text/html", "replace")
-                    .write(`<!DOCTYPE html><html>${iframeContent}</html>`);
+                    .write(`<!DOCTYPE html><html${
+                        self.options.iframeHtmlClass ? ` class="${self.options.iframeHtmlClass}"` : ''
+                    }>${iframeContent}</html>`);
             });
             self.options.document = self.$iframe[0].contentWindow.document;
         });