From a7f51fa66607f87b15d0cfd4912e22f3592cec58 Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Wed, 24 May 2023 15:27:15 +0200
Subject: [PATCH] [FIX] devtools: fix context menus flickering

This commit makes it so the position of the context menu doesn't require
an additional render to apply so it fixes the flickering.
---
 .../components_tab/details_window/details_window.xml        | 2 +-
 .../object_tree_element/object_tree_element.xml             | 2 +-
 .../components_tab/tree_element/tree_element.xml            | 2 +-
 .../devtools_window/profiler_tab/event/event.xml            | 2 +-
 .../devtools_window/profiler_tab/event_node/event_node.xml  | 4 ++--
 tools/devtools/src/devtools_app/store/store.js              | 6 ++----
 6 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml
index 5768e923..5fff5d1e 100644
--- a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/details_window.xml
@@ -72,7 +72,7 @@
         </t>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', store.activeComponent.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="store.activeComponent.path.length !== 1">
diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml
index 3f8e8a83..ec84bd88 100644
--- a/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/details_window/object_tree_element/object_tree_element.xml
@@ -30,7 +30,7 @@
         </t>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+    <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
       <ul class="my-1">
         <li t-on-click="() => this.store.logObjectInConsole(this.props.object.path)" class="custom-menu-item py-1 px-4 text-nowrap">Store as global variable</li>
         <t t-if='props.object.contentType == "function"'>
diff --git a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
index 5ffdfff7..c126b5da 100644
--- a/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/components_tab/tree_element/tree_element.xml
@@ -26,7 +26,7 @@
         <span t-if="props.component.depth">&gt;</span>
         <span class="version" t-else="">owl=<t t-esc="props.component.version"/></span>
       </div>
-      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="contextmenu">
+      <div t-if="store.contextMenu.activeMenu === contextMenuId" class="custom-menu" t-ref="contextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, true)" class="custom-menu-item py-1 px-4">Expand children</li>
           <li t-on-click.stop="() => this.store.toggleComponentAndChildren(props.component, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
diff --git a/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml b/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml
index 24981a7f..3ad8f2ea 100644
--- a/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event/event.xml
@@ -43,7 +43,7 @@
           </span>
         </div>
       </t>
-      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+      <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
         <ul class="my-1">
           <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
           <t t-if="props.event.path.length !== 1">
diff --git a/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml b/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml
index b90787d0..caa7e565 100644
--- a/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml
+++ b/tools/devtools/src/devtools_app/devtools_window/profiler_tab/event_node/event_node.xml
@@ -28,14 +28,14 @@
         </span>
       </div>
     </div>
-    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="nodeContextMenu">
+    <div t-if="store.contextMenu.activeMenu === nodeContextMenuId" class="custom-menu" t-ref="nodeContextMenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, true)" class="custom-menu-item py-1 px-4">Expand children</li>
         <li t-on-click.stop="() => this.store.toggleEventAndChildren(props.event, false)" class="custom-menu-item py-1 px-4">Fold all children</li>
         <li t-on-click.stop="() => this.store.foldDirectChildren(props.event)" class="custom-menu-item py-1 px-4">Fold direct children</li>
       </ul>
     </div>
-    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-attf-style="top: {{store.contextMenu.top}}; left: {{store.contextMenu.left}}" t-ref="componentContextmenu">
+    <div t-if="store.contextMenu.activeMenu === componentContextMenuId" class="custom-menu" t-ref="componentContextmenu">
       <ul class="my-1">
         <li t-on-click.stop="() => this.store.inspectComponent('source', props.event.path)" class="custom-menu-item py-1 px-4">Inspect source code</li>
         <t t-if="props.event.path.length !== 1">
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js
index 8523b0ce..26898b66 100644
--- a/tools/devtools/src/devtools_app/store/store.js
+++ b/tools/devtools/src/devtools_app/store/store.js
@@ -14,8 +14,6 @@ export const store = reactive({
     componentsToggleBlacklist: new Set(),
   },
   contextMenu: {
-    top: 0,
-    left: 0,
     id: 0,
     activeMenu: -1,
     // Opens the context menu corresponding with the given menu html element
@@ -30,9 +28,9 @@ export const store = reactive({
       if (y + menuHeight > window.innerHeight) {
         y = window.innerHeight - menuHeight;
       }
-      this.left = x + "px";
+      menu.style.left = x + "px";
       // Need 25px offset because of the main navbar from the browser devtools
-      this.top = y - 25 + "px";
+      menu.style.top = y - 25 + "px";
     },
     // Close the currently displayed context menu
     close() {