From 59c49b58332ad735eba8250e7dec396a3bc07810 Mon Sep 17 00:00:00 2001
From: "Julien Carion (juca)" <juca@odoo.com>
Date: Wed, 14 Jun 2023 16:10:57 +0200
Subject: [PATCH] [IMP] devtools: add border for new animation frame

This commit adds a colored border between events in list view when
a new animation frame was created.
---
 .../devtools_app/devtools_window/profiler_tab/event/event.xml | 2 +-
 tools/devtools/src/devtools_app/store/store.js                | 2 ++
 tools/devtools/src/main.css                                   | 4 ++++
 3 files changed, 7 insertions(+), 1 deletion(-)

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 3ad8f2ea..4c152e3a 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
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
   <t t-name="devtools.Event" owl="1">
-    <div class="event-container">
+    <div class="event-container" t-att-class="{ 'event-last': props.event.isLast }">
       <div class="my-0 p-0 object-line" t-on-click.stop="toggleDisplay">
         <div class="ps-2 text-nowrap">
           <i class="fa px-1 pointer-icon caret"
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js
index 1e42d77f..ed5236ef 100644
--- a/tools/devtools/src/devtools_app/store/store.js
+++ b/tools/devtools/src/devtools_app/store/store.js
@@ -784,6 +784,7 @@ function loadEvents(events) {
     }
     event.origin = null;
     event.toggled = false;
+    event.isLast = false;
     // Logic to retrace the origin of the event if it is not a root render event
     if (!event.type.includes("render")) {
       for (let i = store.events.length - 1; i >= 0; i--) {
@@ -833,6 +834,7 @@ function loadEvents(events) {
     // Make sure we add the event while keeping the whole list ordered by id
     addEventSorted(event);
   }
+  store.events[store.events.length - 1].isLast = true;
 }
 
 // Deselect component and remove highlight on all children
diff --git a/tools/devtools/src/main.css b/tools/devtools/src/main.css
index 83b0676b..bb0c0748 100644
--- a/tools/devtools/src/main.css
+++ b/tools/devtools/src/main.css
@@ -133,6 +133,10 @@
   font-size: 11px;
 }
 
+.event-last {
+  border-bottom: 3px solid rgb(225, 154, 0);
+}
+
 .getter-content:hover {
   text-decoration: underline;
 }