From 1cc8f40d74bc7e563715a08fe8e3e5dfdc084180 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 26 Jul 2023 11:27:52 +0000
Subject: [PATCH] [FIX] mail: smooth scrolling in mobile messaging menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, scrolling inside the messaging menu in mobile
was stuttering.

This happens because the dropdown is in full screen, and whenever
there's a scroll inside this dropdown menu, the position is
recomputed from internal `usePosition()` hook of `Dropdown`.
The repaint of recomputing this position is costly because of
using `bottom: 0` and having images in notification items that
have transparent background (e.g. chatter notifications).

This commit fixes the issue by defining the height of the messaging
menu dropdown in mobile without `bottom-0`. This drastically eases
the repainting for fixed position. `ActivityMenu` had the exact same
problem, so it is also considered in this fix.

closes odoo/odoo#129859

X-original-commit: 67af0ac45dcea55f52ee7ffbc253827d665d7ac6
Signed-off-by: Matthieu Stockbauer (tsm) <tsm@odoo.com>
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/common/primary_variables.scss | 4 ++++
 addons/mail/static/src/core/web/activity_menu.xml         | 2 +-
 addons/mail/static/src/core/web/messaging_menu.xml        | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addons/mail/static/src/core/common/primary_variables.scss b/addons/mail/static/src/core/common/primary_variables.scss
index 9a92623d913..deab760c949 100644
--- a/addons/mail/static/src/core/common/primary_variables.scss
+++ b/addons/mail/static/src/core/common/primary_variables.scss
@@ -29,3 +29,7 @@ $o-mail-Discuss-headerHeight: 48px !default;
         background: none;
     }
 }
+
+.o-mail-systrayFullscreenDropdownMenu {
+    height: calc(100% - #{$o-navbar-height} + 10px); // mobile dropdown takes 10px of navbar
+}
diff --git a/addons/mail/static/src/core/web/activity_menu.xml b/addons/mail/static/src/core/web/activity_menu.xml
index 5217db392c5..182db02c41f 100644
--- a/addons/mail/static/src/core/web/activity_menu.xml
+++ b/addons/mail/static/src/core/web/activity_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.ActivityMenu" owl="1">
-    <Dropdown position="'bottom-end'" autoOpen="false" beforeOpen.bind="onBeforeOpen" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
+    <Dropdown position="'bottom-end'" autoOpen="false" beforeOpen.bind="onBeforeOpen" menuClass="`p-0 ${ ui.isSmall ? 'o-mail-systrayFullscreenDropdownMenu start-0 w-100 mh-100 d-flex flex-column' : ''}`">
         <t t-set-slot="toggler">
             <i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"></i>
             <span t-if="store.activityCounter" class="o-mail-ActivityMenu-counter badge rounded-pill"><t t-esc="store.activityCounter"/></span>
diff --git a/addons/mail/static/src/core/web/messaging_menu.xml b/addons/mail/static/src/core/web/messaging_menu.xml
index 714507457bf..b698fb75c65 100644
--- a/addons/mail/static/src/core/web/messaging_menu.xml
+++ b/addons/mail/static/src/core/web/messaging_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.MessagingMenu" owl="1">
-    <Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ ui.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column m-0' : ''}`">
+    <Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ ui.isSmall ? 'o-mail-systrayFullscreenDropdownMenu start-0 w-100 mh-100 d-flex flex-column m-0' : ''}`">
         <t t-set-slot="toggler">
             <i class="fa fa-lg fa-comments" role="img" aria-label="Messages" t-on-click="() => store.discuss.activeTab = ui.isSmall and store.discuss.activeTab === 'mailbox' ? 'all' : store.discuss.activeTab"></i>
             <span t-if="counter" class="o-mail-MessagingMenu-counter badge rounded-pill"><t t-esc="counter"/></span>