[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

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>

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.');
+    });
 });