[FIX] web: correctly handle 'oe_read|edit_only' in lists

ClassNames 'oe_read_only' (resp. 'oe_edit_only') can be used in
x2many lists to hide columns in 'edit' (resp. 'readonly') modes.

However, before this rev., there were two issues:
 1) Having such a className on a <button> tag didn't work well as
    the 'display: none' rule didn't apply on the body cell (it only
    applied on the button). Same could be observed on <widget>
    nodes.
 2) Having more than one invisible column (with those classNames)
    didn't work either, because the footer cells weren't hidden.
    We didn't notice it with one invisible column, because the
    footer contained one cell less than the header and the body.

Those two issues could be observed on the mrp.bom form view.

Task 2068261

addons/web/static/src/js/views/list/list_editable_renderer.js

@@ -1005,6 +1005,17 @@ ListRenderer.include({
         }
         return $body;
     },
+    /**
+     * @override
+     * @private
+     */
+    _renderFooter: function () {
+        const $footer = this._super.apply(this, arguments);
+        if (this.addTrashIcon) {
+            $footer.find('tr').append($('<td>'));
+        }
+        return $footer;
+    },
     /**
      * Override to optionally add a th in the header for the remove icon column.
      *

addons/web/static/src/js/views/list/list_renderer.js

@@ -287,7 +287,14 @@ var ListRenderer = BasicRenderer.extend({
                 if (c.attrs.name in columnInvisibleFields) {
                     reject = columnInvisibleFields[c.attrs.name];
                 }
-
+               if (c.attrs.class) {
+                    if (c.attrs.class.match(/\boe_edit_only\b/)) {
+                        c.attrs.editOnly = true;
+                    }
+                    if (c.attrs.class.match(/\boe_read_only\b/)) {
+                        c.attrs.readOnly = true;
+                    }
+                }
                 if (!reject && c.attrs.widget === 'handle') {
                     self.handleField = c.attrs.name;
                     if (self.isGrouped) {
@@ -331,6 +338,12 @@ var ListRenderer = BasicRenderer.extend({
             if (config.isDebug()) {
                 $cell.addClass(column.attrs.name);
             }
+            if (column.attrs.editOnly) {
+                $cell.addClass('oe_edit_only');
+            }
+            if (column.attrs.readOnly) {
+                $cell.addClass('oe_read_only');
+            }
             if (column.attrs.name in aggregateValues) {
                 var field = self.state.fields[column.attrs.name];
                 var value = aggregateValues[column.attrs.name].value;
@@ -394,6 +407,12 @@ var ListRenderer = BasicRenderer.extend({
                 tdClassName += (' o_' + node.attrs.widget + '_cell');
             }
         }
+        if (node.attrs.editOnly) {
+            tdClassName += ' oe_edit_only';
+        }
+        if (node.attrs.readOnly) {
+            tdClassName += ' oe_read_only';
+        }
         var $td = $('<td>', { class: tdClassName, tabindex: -1 });
 
         // We register modifiers on the <td> element so that it gets the correct
@@ -748,13 +767,11 @@ var ListRenderer = BasicRenderer.extend({
         if (name) {
             $th.attr('data-name', name);
         }
-        if (node.attrs.class) {
-            if (node.attrs.class.indexOf('oe_edit_only') !== -1) {
-                $th.addClass('oe_edit_only');
-            }
-            if (node.attrs.class.indexOf('oe_read_only') !== -1) {
-                $th.addClass('oe_read_only');
-            }
+        if (node.attrs.editOnly) {
+            $th.addClass('oe_edit_only');
+        }
+        if (node.attrs.readOnly) {
+            $th.addClass('oe_read_only');
         }
         if (!field) {
             return $th;

addons/web/static/tests/fields/relational_fields/field_one2many_tests.js

@@ -8705,6 +8705,42 @@ QUnit.module('fields', {}, function () {
 
             form.destroy();
         });
+
+        QUnit.test('editable one2many list with oe_read_only button', async function (assert) {
+            assert.expect(9);
+
+            const form = await createView({
+                View: FormView,
+                model: 'partner',
+                data: this.data,
+                arch: `<form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                                <button name="do_it" type="object" class="oe_read_only"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                res_id: 1,
+            });
+
+            assert.containsN(form, '.o_list_view thead th:visible', 2);
+            assert.containsN(form, '.o_list_view tbody .o_data_row td:visible', 2);
+            assert.containsN(form, '.o_list_view tfoot td:visible', 2);
+            assert.containsNone(form, '.o_list_record_remove_header');
+
+            await testUtils.form.clickEdit(form);
+
+            // should have two visible columns in edit: foo + trash
+            assert.hasClass(form.$('.o_form_view'), 'o_form_editable');
+            assert.containsN(form, '.o_list_view thead th:visible', 2);
+            assert.containsN(form, '.o_list_view tbody .o_data_row td:visible', 2);
+            assert.containsN(form, '.o_list_view tfoot td:visible', 2);
+            assert.containsOnce(form, '.o_list_record_remove_header');
+
+            form.destroy();
+        });
+
     });
 });
 });