From 7ac2a5332f1edafbff0852bcdc2c87d5ec69313c Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Mon, 19 Sep 2022 14:15:09 +0000
Subject: [PATCH] [FIX] web: list: limit selector column to 40px

There is a not that simple logic involving column widths in list
views, in order to optimize the space available for columns with
arbitrary long content (e.g. char or many2one fields). For that
reason, some columns have a fixed width. Before this commit, the
first column, containing record selectors, had no fixed width,
whereas it should be set to 40px.

This commit also renames o_list_controller.scss into
o_list_renderer.scss as this file only contains renderer rules.

closes odoo/odoo#100522

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 ...ist_controller.scss => list_renderer.scss} |  4 +++
 .../web/static/tests/views/list_view_tests.js | 31 +++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)
 rename addons/web/static/src/views/list/{list_controller.scss => list_renderer.scss} (99%)

diff --git a/addons/web/static/src/views/list/list_controller.scss b/addons/web/static/src/views/list/list_renderer.scss
similarity index 99%
rename from addons/web/static/src/views/list/list_controller.scss
rename to addons/web/static/src/views/list/list_renderer.scss
index 165055bb215..05ba1dc9e75 100644
--- a/addons/web/static/src/views/list/list_controller.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -105,6 +105,10 @@
             user-select: none;  // Prevent unwanted selection while sorting
         }
 
+        .o_list_record_selector {
+            width: 40px;
+        }
+
         .o_list_record_remove, .o_handle_cell {
             width: 1px;  // to prevent the column to expand
         }
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 017ac527e4f..22f968d8820 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -3168,11 +3168,20 @@ QUnit.module("Views", (hooks) => {
                     </tree>`,
                 limit: 2,
             });
-            var widthPage1 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+
+            assert.strictEqual(
+                target.querySelector("thead .o_list_record_selector").offsetWidth,
+                40
+            );
+            const widthPage1 = target.querySelector(`th[data-name=foo]`).offsetWidth;
 
             await pagerNext(target);
 
-            var widthPage2 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+            assert.strictEqual(
+                target.querySelector("thead .o_list_record_selector").offsetWidth,
+                40
+            );
+            const widthPage2 = target.querySelector(`th[data-name=foo]`).offsetWidth;
             assert.ok(
                 widthPage1 > widthPage2,
                 "column widths should be computed dynamically according to the content"
@@ -13734,19 +13743,21 @@ QUnit.module("Views", (hooks) => {
                 </tree>`,
         });
 
-        // Target handle
+        const originalWidths = [...target.querySelectorAll(".o_list_table th")].map(
+            (th) => th.offsetWidth
+        );
         const th = target.querySelector("th:nth-child(2)");
         const resizeHandle = th.querySelector(".o_resize");
-        const originalWidth = th.offsetWidth;
-        const expectedWidth = Math.floor(originalWidth / 2 + resizeHandle.offsetWidth / 2);
-
+        const expectedWidth =
+            Math.round(originalWidths[1] / 2) + Math.round(resizeHandle.offsetWidth / 2);
         await dragAndDrop(resizeHandle, th);
 
-        assert.strictEqual(
-            th.style.width,
-            `${expectedWidth}px`,
-            "header width should be halved (plus half the width of the handle)"
+        const finalWidths = [...target.querySelectorAll(".o_list_table th")].map(
+            (th) => th.offsetWidth
         );
+        assert.strictEqual(finalWidths[0], originalWidths[0]);
+        assert.ok(Math.abs(finalWidths[1] - expectedWidth) <= 1); // rounding
+        assert.strictEqual(finalWidths[2], originalWidths[2]);
     });
 
     QUnit.test("editable list: resize column headers with max-width", async function (assert) {