[FIX] html_builder, *: parametrize the "mobile" media breakpoint

Prior to this commit, `lg` bootstrap media breakpoint (992px) was hardcoded in
the html Builder. However it is not adequate for MassMailing as the content will
be displayed in its "mobile" form while the width of the screen is still large
enough to be displayed in its "desktop" form. This is particularly notable in
the Form view which allows a large amount of space for the chatter.

This commit parametrize a `mobileBreakpoint` so that `md` can be provided
instead. `lg` will still be used in website and by default, whilst
`mass_mailing` will use `md`.

This change is reflected in all snippets/templates/plugins/tools used by
`mass_mailing`.

task-4247642

Co-authored-by: Damien Abeloos <[email protected]>
Co-authored-by: Thomas Josse <[email protected]>

Author: abd-msyukyu-odoo

addons/html_builder/static/src/builder.js

@@ -14,6 +14,7 @@ import {
 } from "@odoo/owl";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { _t } from "@web/core/l10n/translation";
+import { SIZES, MEDIAS_BREAKPOINTS } from "@web/core/ui/ui_service";
 import { useService } from "@web/core/utils/hooks";
 import { addLoadingEffect as addButtonLoadingEffect } from "@web/core/utils/ui";
 import { InvisibleElementsPanel } from "@html_builder/sidebar/invisible_elements_panel";
@@ -77,13 +78,23 @@ export class Builder extends Component {
         this.editorBus = new EventBus();
         this.colorPresetToShow = null;
         this.activeTargetEl = null;
+        const mobileBreakpoint = this.props.config.mobileBreakpoint ?? "lg";
 
         // TODO: maybe do a different config for the translate mode and the
         // "regular" mode.
         this.editor = new Editor(
             {
                 Plugins: this.props.Plugins,
                 ...this.props.config,
+                mobileBreakpoint,
+                isMobileView: (targetEl) => {
+                    const mobileViewThreshold =
+                        MEDIAS_BREAKPOINTS[SIZES[mobileBreakpoint.toUpperCase()]].minWidth;
+                    const clientWidth =
+                        targetEl.ownerDocument.defaultView?.frameElement?.clientWidth ||
+                        targetEl.ownerDocument.documentElement.clientWidth;
+                    return !!clientWidth && clientWidth < mobileViewThreshold;
+                },
                 onChange: ({ isPreviewing }) => {
                     if (!isPreviewing) {
                         this.state.canUndo = this.editor.shared.history.canUndo();
@@ -322,6 +333,6 @@ export class Builder extends Component {
     }
 
     getActiveTarget() {
-        return this.editor.shared["builderOptions"].getContainers().at(-1)?.element
+        return this.editor.shared["builderOptions"].getContainers().at(-1)?.element;
     }
 }

addons/html_builder/static/src/core/builder_overlay/builder_overlay.js

@@ -1,5 +1,4 @@
 import { renderToElement } from "@web/core/utils/render";
-import { isMobileView } from "@html_builder/utils/utils";
 import {
     addBackgroundGrid,
     getGridProperties,
@@ -24,7 +23,18 @@ export const sizingGrid = {
 };
 
 export class BuilderOverlay {
-    constructor(overlayTarget, { iframe, overlayContainer, history, hasOverlayOptions, next }) {
+    constructor(
+        overlayTarget,
+        {
+            iframe,
+            overlayContainer,
+            history,
+            hasOverlayOptions,
+            next,
+            isMobileView,
+            mobileBreakpoint,
+        }
+    ) {
         this.history = history;
         this.next = next;
         this.hasOverlayOptions = hasOverlayOptions;
@@ -43,6 +53,8 @@ export class BuilderOverlay {
             `.e:not(.o_grid_handle), .w:not(.o_grid_handle)`
         );
         this.gridHandles = this.handlesWrapperEl.querySelectorAll(".o_grid_handle");
+        this.isMobileView = isMobileView;
+        this.mobileBreakpoint = mobileBreakpoint;
 
         this.initHandles();
         this.initSizing();
@@ -91,7 +103,7 @@ export class BuilderOverlay {
         }
 
         if (this.overlayTarget.parentNode?.classList.contains("row")) {
-            const isMobile = isMobileView(this.overlayTarget);
+            const isMobile = this.isMobileView(this.overlayTarget);
             const isGridOn = this.overlayTarget.classList.contains("o_grid_item");
             const isGrid = !isMobile && isGridOn;
             // Hiding/showing the correct resize handles if we are in grid mode
@@ -222,7 +234,7 @@ export class BuilderOverlay {
     }
 
     getSizingXConfig() {
-        const resolutionModifier = this.isMobile ? "" : "lg-";
+        const resolutionModifier = this.isMobile ? "" : `${this.mobileBreakpoint}-`;
         const rowWidth = this.overlayTarget.closest(".row").getBoundingClientRect().width;
         const valuesE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
         const valuesW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
@@ -241,7 +253,7 @@ export class BuilderOverlay {
     }
 
     onResizeX(compass, initialClasses, currentIndex) {
-        const resolutionModifier = this.isMobile ? "" : "lg-";
+        const resolutionModifier = this.isMobile ? "" : `${this.mobileBreakpoint}-`;
         // (?!\S): following char cannot be a non-space character
         const offsetRegex = new RegExp(`(?:^|\\s+)offset-${resolutionModifier}(\\d{1,2})(?!\\S)`);
         const colRegex = new RegExp(`(?:^|\\s+)col-${resolutionModifier}(\\d{1,2})(?!\\S)`);
@@ -268,16 +280,18 @@ export class BuilderOverlay {
 
             // Add/remove the `offset-lg-0` class when needed.
             if (this.isMobile && offset === 0) {
-                this.overlayTarget.classList.remove("offset-lg-0");
+                this.overlayTarget.classList.remove(`offset-${this.mobileBreakpoint}-0`);
             } else {
                 const className = this.overlayTarget.className;
-                const hasDesktopClass = !!className.match(/(^|\s+)offset-lg-\d{1,2}(?!\S)/);
+                const hasDesktopClass = !!className.match(
+                    new RegExp(`(^|\\s+)offset-${this.mobileBreakpoint}-\\d{1,2}(?!\\S)`)
+                );
                 const hasMobileClass = !!className.match(/(^|\s+)offset-\d{1,2}(?!\S)/);
                 if (
                     (this.isMobile && offset > 0 && !hasDesktopClass) ||
                     (!this.isMobile && offset === 0 && hasMobileClass)
                 ) {
-                    this.overlayTarget.classList.add("offset-lg-0");
+                    this.overlayTarget.classList.add(`offset-${this.mobileBreakpoint}-0`);
                 }
             }
         } else if (initialOffset > 0) {
@@ -318,12 +332,12 @@ export class BuilderOverlay {
                 cssProperty: "grid-row-end",
             },
             w: {
-                classes: valuesW.map((v) => "g-col-lg-" + (columnEnd - v)),
+                classes: valuesW.map((v) => `g-col-${this.mobileBreakpoint}-` + (columnEnd - v)),
                 values: valuesW.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)),
                 cssProperty: "grid-column-start",
             },
             e: {
-                classes: valuesE.map((v) => "g-col-lg-" + (v - columnStart)),
+                classes: valuesE.map((v) => `g-col-${this.mobileBreakpoint}-` + (v - columnStart)),
                 values: valuesE.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)),
                 cssProperty: "grid-column-end",
             },
@@ -389,7 +403,10 @@ export class BuilderOverlay {
 
         if (compass === "w" || compass === "e") {
             const numberColumns = style.gridColumnEnd - style.gridColumnStart;
-            this.replaceSizingClass(/\s*(g-col-lg-)([0-9-]+)/g, `g-col-lg-${numberColumns}`);
+            this.replaceSizingClass(
+                new RegExp(`\\s*(g-col-${this.mobileBreakpoint}-)([0-9-]+)`, "g"),
+                `g-col-${this.mobileBreakpoint}-${numberColumns}`
+            );
         }
     }
 
@@ -473,7 +490,7 @@ export class BuilderOverlay {
 
         const handleEl = ev.currentTarget;
         const isGridHandle = handleEl.classList.contains("o_grid_handle");
-        this.isMobile = isMobileView(this.overlayTarget);
+        this.isMobile = this.isMobileView(this.overlayTarget);
 
         // If we are in grid mode, add a background grid and place it in front
         // of the other elements.

addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js

@@ -98,6 +98,8 @@ export class BuilderOverlayPlugin extends Plugin {
                 history: this.dependencies.history,
                 hasOverlayOptions: checkElement(option.element, {}) && option.hasOverlayOptions,
                 next: this.dependencies.operation.next,
+                isMobileView: this.config.isMobileView,
+                mobileBreakpoint: this.config.mobileBreakpoint,
             });
             this.overlays.push(overlay);
             this.overlayContainer.append(overlay.overlayElement);

addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js

@@ -16,7 +16,6 @@ import {
     toggleGridMode,
     hasGridLayoutOption,
 } from "@html_builder/utils/grid_layout_utils";
-import { isMobileView } from "@html_builder/utils/utils";
 import { isElement } from "@html_editor/utils/dom_info";
 
 const gridItemSelector = ".row.o_grid_mode > div.o_grid_item";
@@ -76,7 +75,7 @@ export class GridLayoutPlugin extends Plugin {
 
         const buttons = [];
         this.overlayTarget = target;
-        if (!isMobileView(this.overlayTarget)) {
+        if (!this.config.isMobileView(this.overlayTarget)) {
             buttons.push(
                 {
                     class: "o_send_back oi",
@@ -140,7 +139,7 @@ export class GridLayoutPlugin extends Plugin {
      */
     adjustGridItem(el) {
         const gridItemEl = el.closest(".o_grid_item");
-        if (gridItemEl && gridItemEl !== el && !isMobileView(gridItemEl)) {
+        if (gridItemEl && gridItemEl !== el && !this.config.isMobileView(gridItemEl)) {
             const rowEl = gridItemEl.parentElement;
             const { rowGap, rowSize } = getGridProperties(rowEl);
             const { rowStart, rowEnd } = getGridItemProperties(gridItemEl);
@@ -212,7 +211,7 @@ export class GridLayoutPlugin extends Plugin {
         // The columns move handles are not visible in mobile view to prevent
         // dragging them.
         const isColumn = targetEl.parentElement?.classList.contains("row");
-        if (isColumn && isMobileView(targetEl)) {
+        if (isColumn && this.config.isMobileView(targetEl)) {
             return false;
         }
         return true;
@@ -242,7 +241,7 @@ export class GridLayoutPlugin extends Plugin {
                 // Toggle the grid mode if it is not already on.
                 if (!isRowInGridMode) {
                     const preserveSelection = this.dependencies.selection.preserveSelection;
-                    toggleGridMode(containerEl, preserveSelection);
+                    toggleGridMode(containerEl, preserveSelection, this.config.mobileBreakpoint);
                 }
                 const gridItemProps = getGridItemProperties(columnEl);
 
@@ -292,7 +291,13 @@ export class GridLayoutPlugin extends Plugin {
         // grid item and store its dimensions.
         if (!columnEl.classList.contains("o_grid_item")) {
             const { columnWidth, columnHeight } = dragState;
-            const spans = convertColumnToGrid(rowEl, columnEl, columnWidth, columnHeight);
+            const spans = convertColumnToGrid(
+                rowEl,
+                columnEl,
+                columnWidth,
+                columnHeight,
+                this.config.mobileBreakpoint
+            );
             dragState.columnSpan = spans.columnSpan;
             dragState.rowSpan = spans.rowSpan;
         }
@@ -397,7 +402,7 @@ export class GridLayoutPlugin extends Plugin {
             resizeGrid(rowEl);
         } else if (columnEl.classList.contains("o_grid_item")) {
             // Case when dropping a grid item in a non-grid dropzone.
-            convertToNormalColumn(columnEl);
+            convertToNormalColumn(columnEl, this.config.mobileBreakpoint);
         }
     }
 
@@ -416,7 +421,13 @@ export class GridLayoutPlugin extends Plugin {
             // grid item and store its dimensions.
             if (!columnEl.classList.contains("o_grid_item")) {
                 const { columnWidth, columnHeight } = dragState;
-                const spans = convertColumnToGrid(rowEl, columnEl, columnWidth, columnHeight);
+                const spans = convertColumnToGrid(
+                    rowEl,
+                    columnEl,
+                    columnWidth,
+                    columnHeight,
+                    this.config.mobileBreakpoint
+                );
                 dragState.columnSpan = spans.columnSpan;
                 dragState.rowSpan = spans.rowSpan;
             }
@@ -434,7 +445,7 @@ export class GridLayoutPlugin extends Plugin {
             resizeGrid(rowEl);
         } else if (columnEl.classList.contains("o_grid_item")) {
             // Case when a grid item is dropped near a non-grid dropzone.
-            convertToNormalColumn(columnEl);
+            convertToNormalColumn(columnEl, this.config.mobileBreakpoint);
         }
     }
 

addons/html_builder/static/src/core/move_plugin.js

@@ -6,30 +6,12 @@ import {
     fillRemovedItemGap,
     removeMobileOrders,
 } from "@html_builder/utils/column_layout_utils";
-import { isElementInViewport, isMobileView } from "@html_builder/utils/utils";
+import { isElementInViewport } from "@html_builder/utils/utils";
 import { scrollTo } from "@html_builder/utils/scrolling";
 
-export function getVisibleSibling(target, direction) {
-    const siblingEls = [...target.parentNode.children];
-    const visibleSiblingEls = siblingEls.filter(
-        (el) => window.getComputedStyle(el).display !== "none"
-    );
-    const targetMobileOrder = target.style.order;
-    // On mobile, if the target has a mobile order (which is independent
-    // from desktop), consider these orders instead of the DOM order.
-    if (targetMobileOrder && isMobileView(target)) {
-        visibleSiblingEls.sort((a, b) => parseInt(a.style.order) - parseInt(b.style.order));
-    }
-    const targetIndex = visibleSiblingEls.indexOf(target);
-    const siblingIndex = direction === "prev" ? targetIndex - 1 : targetIndex + 1;
-    if (siblingIndex === -1 || siblingIndex === visibleSiblingEls.length) {
-        return false;
-    }
-    return visibleSiblingEls[siblingIndex];
-}
-
 export class MovePlugin extends Plugin {
     static id = "move";
+    static dependencies = ["visibility"];
     resources = {
         has_overlay_options: { hasOption: (el) => this.isMovable(el) },
         get_overlay_buttons: withSequence(0, {
@@ -95,7 +77,7 @@ export class MovePlugin extends Plugin {
             const columnEls = [...rowEl.children];
             const orderedColumnEls = columnEls.filter((el) => el.style.order);
             if (orderedColumnEls.length && orderedColumnEls.length !== columnEls.length) {
-                removeMobileOrders(orderedColumnEls);
+                removeMobileOrders(orderedColumnEls, this.config.mobileBreakpoint);
             }
         }
     }
@@ -121,8 +103,14 @@ export class MovePlugin extends Plugin {
             const isVertical =
                 this.overlayTarget.matches(this.verticalMove.selector) &&
                 !this.overlayTarget.matches(this.verticalMove.exclude);
-            const previousSiblingEl = getVisibleSibling(this.overlayTarget, "prev");
-            const nextSiblingEl = getVisibleSibling(this.overlayTarget, "next");
+            const previousSiblingEl = this.dependencies.visibility.getVisibleSibling(
+                this.overlayTarget,
+                "prev"
+            );
+            const nextSiblingEl = this.dependencies.visibility.getVisibleSibling(
+                this.overlayTarget,
+                "next"
+            );
 
             if (previousSiblingEl) {
                 const direction = isVertical ? "up" : "left";
@@ -188,11 +176,11 @@ export class MovePlugin extends Plugin {
         }
 
         // Remove all the mobile orders in the new snippet.
-        removeMobileOrders(parentEl.children);
+        removeMobileOrders(parentEl.children, this.config.mobileBreakpoint);
     }
 
     areArrowsHidden() {
-        const isMobile = isMobileView(this.overlayTarget);
+        const isMobile = this.config.isMobileView(this.overlayTarget);
         const isGridItem = this.overlayTarget.classList.contains("o_grid_item");
         const siblingsEl = [...this.overlayTarget.parentNode.children];
         const visibleSiblingEl = siblingsEl.find(
@@ -210,7 +198,7 @@ export class MovePlugin extends Plugin {
      * @param {String} direction "prev" or "next"
      */
     onMoveClick(direction) {
-        const isMobile = isMobileView(this.overlayTarget);
+        const isMobile = this.config.isMobileView(this.overlayTarget);
         let hasMobileOrder = !!this.overlayTarget.style.order;
         const parentEl = this.overlayTarget.parentNode;
         const siblingEls = parentEl.children;
@@ -221,14 +209,17 @@ export class MovePlugin extends Plugin {
         // mobile view, the mobile order is reset.
         const isColumn = parentEl.classList.contains("row");
         if (isMobile && isColumn && !hasMobileOrder) {
-            addMobileOrders(siblingEls);
+            addMobileOrders(siblingEls, this.config.mobileBreakpoint);
             hasMobileOrder = true;
         } else if (!isMobile && hasMobileOrder) {
-            removeMobileOrders(siblingEls);
+            removeMobileOrders(siblingEls, this.config.mobileBreakpoint);
             hasMobileOrder = false;
         }
 
-        const siblingEl = getVisibleSibling(this.overlayTarget, direction);
+        const siblingEl = this.dependencies.visibility.getVisibleSibling(
+            this.overlayTarget,
+            direction
+        );
         if (hasMobileOrder) {
             // Swap the mobile orders.
             const currentOrder = this.overlayTarget.style.order;

addons/html_builder/static/src/core/remove_plugin.js

@@ -1,7 +1,6 @@
 import { Plugin } from "@html_editor/plugin";
 import { withSequence } from "@html_editor/utils/resource";
 import { _t } from "@web/core/l10n/translation";
-import { getVisibleSibling } from "./move_plugin";
 import { unremovableNodePredicates as deletePluginPredicates } from "@html_editor/core/delete_plugin";
 import { isUnremovableQWebElement as qwebPluginPredicate } from "@html_editor/others/qweb_plugin";
 import { isEditable } from "@html_builder/utils/utils";
@@ -27,7 +26,7 @@ const layoutElementsSelector = [
 
 export class RemovePlugin extends Plugin {
     static id = "remove";
-    static dependencies = ["builderOptions"];
+    static dependencies = ["builderOptions", "visibility"];
     resources = {
         get_overlay_buttons: withSequence(3, {
             getButtons: this.getActiveOverlayButtons.bind(this),
@@ -129,8 +128,11 @@ export class RemovePlugin extends Plugin {
 
         // Get the parent and the previous and next visible siblings.
         let parentEl = toRemoveEl.parentElement;
-        const previousSiblingEl = getVisibleSibling(toRemoveEl, "prev");
-        const nextSiblingEl = getVisibleSibling(toRemoveEl, "next");
+        const previousSiblingEl = this.dependencies.visibility.getVisibleSibling(
+            toRemoveEl,
+            "prev"
+        );
+        const nextSiblingEl = this.dependencies.visibility.getVisibleSibling(toRemoveEl, "next");
         if (parentEl.matches(".o_editable:not(body)")) {
             // If we target the editable, we want to reset the selection to the
             // body. If the editable has options, we do not want to show them.