From 5ee99c04ceb07ff82113c899a92751d40b66ee23 Mon Sep 17 00:00:00 2001
From: Renaud Thiry <reth@odoo.com>
Date: Wed, 3 May 2023 11:45:53 +0000
Subject: [PATCH] [FIX] web_editor: hide codeview when readonly

In 2389f77c25f3c4dcfd609a8674dc673703cac6a1
containsComplexHTML was added to allow editing of html content
that would otherwise break when inserted as-is in a DOM

For this we added a rule to always display the code view toggle button.
This should not be the case when the field is marked as readonly.

Switching to the code view in readonly mode will cause a traceback.

task-3255777

X-original-commit: 243b7879ecad229aaefed3cdf0c64e7ae434d8ec
Part-of: odoo/odoo#121976
---
 .../static/src/js/backend/html_field.xml      |  2 +-
 .../static/tests/html_field_tests.js          | 44 +++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/backend/html_field.xml b/addons/web_editor/static/src/js/backend/html_field.xml
index 1c287cd22d6..354971cbb75 100644
--- a/addons/web_editor/static/src/js/backend/html_field.xml
+++ b/addons/web_editor/static/src/js/backend/html_field.xml
@@ -29,7 +29,7 @@
                 </span>
             </t>
         </div>
-        <div t-if="state.showCodeView || containsComplexHTML" t-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="toggleCodeView">
+        <div t-if="state.showCodeView || (containsComplexHTML and !props.readonly and !props.notEditable)" t-ref="codeViewButton" id="codeview-btn-group" class="btn-group" t-on-click="toggleCodeView">
             <button class="o_codeview_btn btn btn-primary">
                 <i class="fa fa-code" />
             </button>
diff --git a/addons/web_editor/static/tests/html_field_tests.js b/addons/web_editor/static/tests/html_field_tests.js
index 876312599f1..e537e8b2cd3 100644
--- a/addons/web_editor/static/tests/html_field_tests.js
+++ b/addons/web_editor/static/tests/html_field_tests.js
@@ -123,4 +123,48 @@ QUnit.module("WebEditor.HtmlField", ({ beforeEach }) => {
         await click(saveButton);
         await writePromise;
     });
+
+    /**
+     * Check that documents with data in a <head> node and with the readonly prop
+     * do not display the codeview button
+     */
+    QUnit.test("html fields with complete HTML document in readonly mode", async (assert) => {
+        serverData.models.partner.records = [{
+            id: 1,
+            txt: `
+            <!DOCTYPE HTML>
+            <html xml:lang="en" lang="en">
+                <head>
+
+                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+                    <meta name="format-detection" content="telephone=no"/>
+                    <style type="text/css">
+                        body {
+                            color: blue;
+                        }
+                    </style>
+                </head>
+                <body>
+                    Hello
+                </body>
+            </html>`,
+        }];
+        await makeView({
+            type: "form",
+            resId: 1,
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form string="Partner">
+                    <field name="txt" widget="html" readonly="1"/>
+                </form>`,
+        });
+
+        const readonlyElement = target.querySelector('.o_field_html .o_readonly');
+        assert.ok(readonlyElement);
+        assert.strictEqual(readonlyElement.innerText, 'Hello');
+        assert.strictEqual(window.getComputedStyle(readonlyElement).color, 'rgb(0, 0, 255)');
+
+        assert.containsN(target, '.o_codeview_btn', 0, 'Codeview toggle should not be possible in readonly mode.');
+    });
 });