[FIX] web_editor, website: make added grid items always visible

Before this commit, when adding a new grid item in a grid by using the
"Add Elements" option, if the page was scrolled such that the top of the
grid was not visible, this new grid item may not always be visible. This
is annoying as the user could add an element and not see where it
appeared and would therefore need to look for it.

This commit fixes this by making the page scroll to the added grid item
if more than half of it is not visible. A test is also added.

Steps to reproduce:
- Drop the "Text-Image" snippet and enough snippets under it to have a
  scrollbar.
- Toggle the "Text-Image" snippet to grid mode.
- Scroll the page so the top of the grid is not visible.
- Add a new "Button" with the "Add Elements" option.
=> The button is not visible.

task-3616138

closes odoo/odoo#161159

X-original-commit: 50766b74196b3cdc5ac83d7962873f4fffa4c9f6
Signed-off-by: Guillaume Dieleman (gdi) <gdi@odoo.com>
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -5399,6 +5399,16 @@ registry.layout_column = SnippetOptionWidget.extend(ColumnLayoutMixin, {
         // Add the new column and update the grid height.
         rowEl.appendChild(newColumnEl);
         gridUtils._resizeGrid(rowEl);
+
+        // Scroll to the new column if more than half of it is hidden (= out of
+        // the viewport or hidden by an other element).
+        const newColumnPosition = newColumnEl.getBoundingClientRect();
+        const middleX = (newColumnPosition.left + newColumnPosition.right) / 2;
+        const middleY = (newColumnPosition.top + newColumnPosition.bottom) / 2;
+        const sameCoordinatesEl = this.ownerDocument.elementFromPoint(middleX, middleY);
+        if (!sameCoordinatesEl || !newColumnEl.contains(sameCoordinatesEl)) {
+            newColumnEl.scrollIntoView({behavior: "smooth", block: "center"});
+        }
         this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)});
     },
     /**

addons/website/static/tests/tours/grid_layout.js

@@ -42,3 +42,37 @@ wTourUtils.registerWebsitePreviewTour('website_replace_grid_image', {
     },
     ...wTourUtils.clickOnSave()
 ]);
+
+wTourUtils.registerWebsitePreviewTour("scroll_to_new_grid_item", {
+    test: true,
+    url: "/",
+    edition: true,
+}, () => [
+    // Drop enough snippets to scroll.
+    wTourUtils.dragNDrop({id: "s_text_image", name: "Text - Image"}),
+    wTourUtils.dragNDrop({id: "s_image_text", name: "Image - Text"}),
+    wTourUtils.dragNDrop({id: "s_image_text", name: "Image - Text"}),
+    // Toggle the first snippet to grid mode.
+    wTourUtils.clickOnSnippet({id: "s_text_image", name: "Text - Image"}),
+    wTourUtils.changeOption("layout_column", 'we-button[data-name="grid_mode"]'),
+    // Add a new grid item.
+    wTourUtils.changeOption("layout_column", 'we-button[data-add-element="image"]'),
+    {
+        content: "Check that the page scrolled to the new grid item",
+        trigger: "iframe .s_text_image .o_grid_item:nth-child(3)",
+        run: function () {
+            // Leave some time to the page to scroll.
+            setTimeout(() => {
+                const newItemPosition = this.$anchor[0].getBoundingClientRect();
+                if (newItemPosition.top < 0) {
+                    console.error("The page did not scroll to the new grid item.");
+                }
+                document.body.classList.add("o_scrolled_to_grid_item");
+            }, 500);
+        },
+    }, {
+        content: "Make sure the scroll check is done",
+        trigger: ".o_scrolled_to_grid_item",
+        isCheck: true,
+    },
+]);

addons/website/tests/test_grid_layout.py

@@ -22,3 +22,6 @@ class TestWebsiteGridLayout(odoo.tests.HttpCase):
             'datas': base64.b64encode(req.content),
         })
         self.start_tour(self.env['website'].get_client_action_url('/'), 'website_replace_grid_image', login="admin")
+
+    def test_02_scroll_to_new_grid_item(self):
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'scroll_to_new_grid_item', login='admin')