From 618cc9cc885833cefab2ddd6ac908c15340441a7 Mon Sep 17 00:00:00 2001
From: mano-odoo <mano@odoo.com>
Date: Fri, 2 Feb 2024 13:06:19 +0100
Subject: [PATCH] [FIX] website_sale: ecommerce category scrollbar behavior

In commit[1] an improvement was made to increase the scrollbar height
on hover to make it easier to scroll. However chromium updated the way
::webkit-scrollbar works breaking the behavior on recent browser. On
firefox the margin was applied without the change of height on the
scrollbar creating a visual glitch on hover.

On chromium >121 the `scrollbar` property takes priority over the
`::webkit`-x to keep the scrollbar styling with height change on webkit
browser we have to apply the `scrollbar` property only on Firefox.

The mixin was used only on `website_sale` filter offcanvas and category
horizontal scrollbar, this commit removes the mixin and customization on
the offcanvas vertical scroll to make it consistent with the other
offcanvas across website.

This commit also disables the scrollbar hover effect on touchscreens.

The transform was causing an issue on some devices displaying the
scrollbar behind the items, thus it's now applied on the container.

Note: We use not `.o_wsale_filmstip_fancy_disabled` to avoid the
`scrollbar` property being set when the Javascript is not loaded yet.
Otherwise the scrollbar would be invisible until a hover from the user.

[1]: odoo/odoo@bdede43e1ea4587185a9f37f051cee87a61cf488

task-3718501

closes odoo/odoo#152456

Signed-off-by: Valentin Chevalier <vcr@odoo.com>
---
 .../static/src/js/website_sale.js             |  6 ++
 .../static/src/scss/website_sale.scss         | 64 ++++++++-----------
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/addons/website_sale/static/src/js/website_sale.js b/addons/website_sale/static/src/js/website_sale.js
index ccaa416ed04..2a0606dec1e 100644
--- a/addons/website_sale/static/src/js/website_sale.js
+++ b/addons/website_sale/static/src/js/website_sale.js
@@ -10,6 +10,7 @@ import { ProductImageViewer } from "@website_sale/js/components/website_sale_ima
 import { jsonrpc } from "@web/core/network/rpc_service";
 import { debounce, throttleForAnimation } from "@web/core/utils/timing";
 import { listenSizeChange, SIZES, utils as uiUtils } from "@web/core/ui/ui_service";
+import { isBrowserFirefox, hasTouch } from "@web/core/browser/feature_detection";
 import { Component } from "@odoo/owl";
 
 export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerMixin, {
@@ -94,6 +95,11 @@ export const WebsiteSale = publicWidget.Widget.extend(VariantMixin, cartHandlerM
             this.triggerVariantChange(this.$el);
         });
 
+        // This allows conditional styling for the filmstrip
+        if (isBrowserFirefox() || hasTouch()) {
+            this.el.querySelector('.o_wsale_filmstip_container')?.classList.add('o_wsale_filmstip_fancy_disabled');
+        }
+
         this.getRedirectOption();
         return def;
     },
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 88a9d8d7b6f..fb842808ff8 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -43,27 +43,6 @@ $input-border-color: $gray-400;
     }
 }
 
-@mixin o-wsale-scrollbar-subdle($-vertical: true) {
-    $-o-scrollbar-subdle-bg: rgba($dark, 0.05);
-
-    scrollbar-color: currentColor $-o-scrollbar-subdle-bg;
-    scrollbar#{if($-vertical, -width, -height)}: 2px;
-    cursor: grab;
-
-    &::-webkit-scrollbar {
-        #{if($-vertical, width, height)}: 2px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: $btn-border-radius-sm;
-        background: currentColor;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: $-o-scrollbar-subdle-bg;
-    }
-}
-
 .oe_website_sale {
     // ==== Products list designs
     .o_wsale_design_cards {
@@ -104,7 +83,34 @@ $input-border-color: $gray-400;
     }
 
     .o_wsale_filmstip_container {
-        &:hover {
+        $-o-scrollbar-subdle-bg: rgba($dark, 0.05);
+
+        transform: translateZ(0);
+
+        &.o_wsale_filmstip_fancy_disabled {
+            scrollbar-color: currentColor $-o-scrollbar-subdle-bg;
+        }
+
+        .o_wsale_filmstip_wrapper {
+            margin-bottom: map-get($spacers, 2);
+            scroll-snap-type: x mandatory;
+            cursor: grab;
+
+            &::-webkit-scrollbar {
+                height: 2px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: $btn-border-radius-sm;
+                background: currentColor;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: $-o-scrollbar-subdle-bg;
+            }
+        }
+
+        &:not(.o_wsale_filmstip_fancy_disabled):hover {
             .o_wsale_filmstip_wrapper {
                 margin-bottom: map-get($spacers, 1);
 
@@ -115,16 +121,6 @@ $input-border-color: $gray-400;
         }
     }
 
-    .o_wsale_filmstip_wrapper {
-        margin-bottom: map-get($spacers, 2);
-        scroll-snap-type: x mandatory;
-        @include o-wsale-scrollbar-subdle($-vertical: false);
-
-        .o_wsale_filmstip {
-            transform: translateX(0);
-        }
-    }
-
     .activeDrag * {
         cursor: grabbing !important;
         cursor: -webkit-grabbing;
@@ -189,10 +185,6 @@ $input-border-color: $gray-400;
         padding-bottom: 0.75rem;
     }
 
-    #o_wsale_offcanvas_content {
-        @include o-wsale-scrollbar-subdle();
-    }
-
     #products_grid_before {
         // == Guess the distance with the navbar
         $-container-top-gap: calc(#{map-get($spacers, 2)} + var(--gutter-x));