[IMP] mass_mailing: show body_arch in readonly, body_html in a debug tab

The body of a mailing is saved in two fields: body_arch without
modifications, and body_html with conversion for email client
compatibility. Prior to this commit, we were showing body_html when
opening the form view of a saved mailing in readonly. This was pretty
strange and confusing as it's a sort of intermediary version that
doesn't mean much: an in-browser rendering of html that is compiled for
email clients.
With this commit, we change the view to always show body_arch instead.
A new tab is introduced in order to show body_html for debugging, which
is therefore only visible in debug mode.

Part-of: odoo/odoo#77724

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

@@ -40,7 +40,6 @@ const MassMailingFullWidthFormController = FormController.extend({
      * template is picked.
      *
      * @private
-     * @param {JQuery} $iframe
      */
     _resizeMailingEditorIframe() {
         const VERTICAL_OFFSET = 12; // Vertical offset picked for visual design purposes.
@@ -105,7 +104,7 @@ const MassMailingFullWidthFormController = FormController.extend({
      * @private
      */
     _onDomUpdated() {
-        const data = { $iframe: this.$('iframe.wysiwyg_iframe, iframe.o_readonly') };
+        const data = { $iframe: this.$('iframe.wysiwyg_iframe:visible, iframe.o_readonly:visible') };
         this._onIframeUpdated({ data });
     },
     /**

addons/mass_mailing/static/src/js/mass_mailing_widget.js

@@ -170,13 +170,6 @@ var MassMailingFieldHtml = FieldHtml.extend({
         }
         return this._super.apply(this, arguments);
     },
-    /**
-     * @override
-     */
-    _renderReadonly: function () {
-        this.value = this.recordData[this.nodeOptions['inline-field']];
-        return this._super.apply(this, arguments);
-    },
 
     /**
      * @override

addons/mass_mailing/views/assets.xml

@@ -4,6 +4,12 @@
         <t t-call-assets="mass_mailing.assets_mail_themes" t-js="false"/>
         <t t-call="mass_mailing.mass_mailing_mail_style"/>
         <t t-call-assets="mass_mailing.assets_mail_themes_edition" t-js="false"/>
+        <!-- To view the body_arch field in readonly and have it display exactly
+        like in edit, load all the same css. TODO: move all this and the above
+        to a separate asset -->
+        <t t-call-assets="web.assets_common" t-js="false"/>
+        <t t-call-assets="web.assets_frontend" t-js="false"/>
+        <t t-call-assets="web_editor.assets_wysiwyg" t-js="false"/>
     </template>
 
     <template id="iframe_css_assets_readonly" groups="base.group_user">

addons/mass_mailing/views/mailing_mailing_views.xml

@@ -199,13 +199,12 @@
                             <page string="Mail Body" name="mail_body">
                                 <div class="position-relative">
                                     <div class="mt-n2">
-                                        <field name="body_html" class="o_mail_body oe_read_only" widget="html"
-                                            options="{'cssReadonly': 'mass_mailing.iframe_css_assets_readonly'}"/>
-                                        <field name="body_arch" class="o_mail_body oe_edit_only" widget="mass_mailing_html"
+                                        <field name="body_arch" class="o_mail_body" widget="mass_mailing_html"
                                             options="{
                                                 'snippets': 'mass_mailing.email_designer_snippets',
                                                 'cssEdit': 'mass_mailing.iframe_css_assets_edit',
-                                                'inline-field': 'body_html'
+                                                'inline-field': 'body_html',
+                                                'cssReadonly': 'mass_mailing.iframe_css_assets_edit'
                                         }" attrs="{'readonly': [('state', 'in', ('sending', 'done'))]}"/>
                                     </div>
                                     <field name="is_body_empty" invisible="1"/>
@@ -417,6 +416,27 @@
                 <xpath expr="//notebook/page[@name='chat']" position="inside">
                     <xpath expr="//div[hasclass('oe_chatter')]" position="move"/>
                 </xpath>
+                <xpath expr="//notebook/page[@name='mail_body']" position="after">
+                    <page string="Mail Debug" name="mail_debug" groups="base.group_no_one">
+                        <div class="position-relative">
+                            <div class="mt-n2">
+                                <field name="body_html" class="o_mail_body" widget="html"
+                                    options="{'cssReadonly': 'mass_mailing.iframe_css_assets_readonly', 'notEditable': True}"/>
+                            </div>
+                            <field name="is_body_empty" invisible="1"/>
+                            <div class="o_view_nocontent oe_read_only" attrs="{'invisible': ['|', ('is_body_empty', '=', False), ('state', 'in', ('sending', 'done'))]}">
+                                <div class="o_nocontent_help">
+                                    <p class="o_view_nocontent_smiling_face">
+                                        No template picked yet.
+                                    </p>
+                                    <p>
+                                        Start editing your mailing to design something awesome.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </page>
+                </xpath>
                 <xpath expr="//notebook/page[@name='dynamic_placeholder_generator']" position="inside">
                     <group/>
                 </xpath>

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

@@ -49,7 +49,6 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
      * @override
      */
     willStart: async function () {
-        console.log("this:", this);
         this.isRendered = false;
         this._onUpdateIframeId = 'onLoad_' + _.uniqueId('FieldHtml');
         await this._super();
@@ -131,10 +130,10 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
         }
         value = this._textToHtml(value);
         if (!event || event.target !== this) {
-            if (this.cssReadonly) {
-                return Promise.resolve();
-            } else if (this.mode === 'edit') {
+            if (this.mode === 'edit' && this.wysiwyg) {
                 this.wysiwyg.setValue(value);
+            } else if (this.cssReadonly) {
+                return Promise.resolve();
             } else {
                 this.$content.html(value);
             }
@@ -169,9 +168,6 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
      * @returns {$.Promise}
      */
     _createWysiwygIntance: async function () {
-        if (this.cssReadonly) {
-            return;
-        }
         this.wysiwyg = await wysiwygLoader.createWysiwyg(this, this._getWysiwygOptions());
         this.wysiwyg.__extraAssetsForIframe = this.__extraAssetsForIframe || [];
         return this.wysiwyg.appendTo(this.$el).then(() => {
@@ -272,6 +268,9 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
      * @override
      */
     _renderEdit: function () {
+        if (this.nodeOptions.notEditable) {
+            return this._renderReadonly();
+        }
         var value = this._textToHtml(this.value);
         if (this.nodeOptions.wrapper) {
             value = this._wrap(value);
@@ -350,7 +349,7 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
                                     return '<style type="text/css">' + cssContent + '</style>';
                                 }).join('\n') + '\n' +
                             '</head>\n' +
-                            '<body class="o_in_iframe o_readonly">\n' +
+                            '<body class="o_in_iframe o_readonly" style="overflow: hidden;">\n' +
                                 '<div id="iframe_target">' + value + '</div>\n' +
                                 '<script type="text/javascript">' +
                                     'if (window.top.' + self._onUpdateIframeId + ') {' +