From 244571b4b463e838202ca62198fb2e7d4bf39cc2 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Thu, 23 Dec 2021 13:41:18 +0000
Subject: [PATCH] [FIX] web: debug profiling menu design

This commit fixes the profiling menu item design, simplify the css and
removes several lines of vendor-prefix animations no longer necessary.
This commit is part of v16 overall restyle (task-2704984).

task-2712151

Part-of: odoo/odoo#82434
---
 .../core/debug/profiling/profiling_item.scss  |  32 ++--
 .../core/debug/profiling/profiling_item.xml   |  92 +++++-----
 .../core/debug/profiling/profiling_service.js |   6 +-
 .../web/static/src/legacy/scss/animation.scss | 160 ++++--------------
 4 files changed, 96 insertions(+), 194 deletions(-)

diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.scss b/addons/web/static/src/core/debug/profiling/profiling_item.scss
index 8644c3e1e5e..b0a28c5ef2d 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.scss
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.scss
@@ -1,25 +1,17 @@
-.o_debug_profiling_item {
-    .o_profiling_switch {
-        padding-top: 3px;
-        padding-bottom: 3px;
-        .custom-switch {
-            display: inline-block;
-        }
-        .custom-control-label {
-            cursor: pointer;
-        }
-        .o_open_profiling {
-            padding-top: 3px;
-        }
+.o_debug_manager {
+    .dropdown-menu .o_debug_profiling_item_wrapper.dropdown-item.focus {
+        background: inherit;
+    }
+
+    .o_debug_profiling_item {
+        cursor: auto;
+    }
+
+    .custom-switch {
+        cursor: pointer;
     }
-}
 
-.o_debug_manager .fa-bug {
-    position: relative;
     .o_recording {
-        position: absolute;
-        bottom: -0.1em;
-        right: -0.4em;
-        font-size: 0.8em;
+        animation: 2s flash infinite;
     }
 }
diff --git a/addons/web/static/src/core/debug/profiling/profiling_item.xml b/addons/web/static/src/core/debug/profiling/profiling_item.xml
index d8c64358da1..3ff67c61101 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_item.xml
+++ b/addons/web/static/src/core/debug/profiling/profiling_item.xml
@@ -2,53 +2,55 @@
 <templates xml:space="preserve">
 
     <t t-name="web.DebugMenu.ProfilingItem" owl="1">
-        <DropdownItem>
-            <div class="o_debug_profiling_item">
-                <span class="o_profiling_switch">
-                    <span class="custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleProfiling()">
-                        <input type="checkbox" class="custom-control-input" id="enable_profiling" t-att-checked="profiling.state.isEnabled"/>
-                        <label class="custom-control-label">
-                            Enable profiling
-                            <span t-if="profiling.state.isEnabled" class="profiling_items text-danger fa fa-circle"></span>
-                        </label>
+        <DropdownItem class="o_debug_profiling_item_wrapper">
+            <div class="o_debug_profiling_item d-flex justify-content-between">
+                <div class="align-self-center">
+                    <div t-if="profiling.state.isEnabled" class="alert alert-info py-2 mr-3">Recording...</div>
+                    <span class="o_profiling_switch">
+                        <span class="custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleProfiling()">
+                            <input type="checkbox" class="custom-control-input" id="enable_profiling" t-att-checked="profiling.state.isEnabled"/>
+                            <label class="custom-control-label">Enable profiling</label>
+                        </span>
                     </span>
-                    <i class="o_open_profiling float-right fa fa-list fa-lg" t-on-click="openProfiles"/>
-                </span>
-                <t t-if="profiling.state.isEnabled">
-                    <span class="o_profiling_switch custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleCollector('sql')">
-                        <input type="checkbox" class="custom-control-input" id="profile_sql"
-                            t-att-checked="profiling.isCollectorEnabled('sql')"/>
-                        <label class="custom-control-label" for="profile_sql">Record sql</label>
-                    </span>
-                    <span class="o_profiling_switch custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleCollector('traces_async')">
-                        <input type="checkbox" class="custom-control-input" id="profile_traces_async"
-                            t-att-checked="profiling.isCollectorEnabled('traces_async')"/>
-                        <label class="custom-control-label" for="profile_traces_async">Record traces</label>
-                    </span>
-                    <div t-if="profiling.isCollectorEnabled('traces_async')" class="input-group input-group-sm" t-on-click.stop.prevent="">
-                        <div class="input-group-prepend">
-                            <div class="input-group-text">Interval</div>
+                    <t t-if="profiling.state.isEnabled">
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('sql')">
+                            <input type="checkbox" class="custom-control-input" id="profile_sql"
+                                t-att-checked="profiling.isCollectorEnabled('sql')"/>
+                            <label class="custom-control-label" for="profile_sql">Record sql</label>
+                        </span>
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('traces_async')">
+                            <input type="checkbox" class="custom-control-input" id="profile_traces_async"
+                                t-att-checked="profiling.isCollectorEnabled('traces_async')"/>
+                            <label class="custom-control-label" for="profile_traces_async">Record traces</label>
+                        </span>
+                        <div t-if="profiling.isCollectorEnabled('traces_async')" class="input-group input-group-sm mt-2" t-on-click.stop.prevent="">
+                            <div class="input-group-prepend">
+                                <div class="input-group-text">Interval</div>
+                            </div>
+                            <select class="profile_param form-control" t-on-change="changeParam('traces_async_interval')">
+                                <t t-set="interval" t-value="profiling.state.params.traces_async_interval"/>
+                                <option value="">Default</option>
+                                <option value="0.001" t-att-selected="interval === '0.001'">0.001</option>
+                                <option value="0.01" t-att-selected="interval === '0.01'">0.01</option>
+                                <option value="0.1" t-att-selected="interval === '0.1'">0.1</option>
+                                <option value="1" t-att-selected="interval === '1'">1</option>
+                            </select>
                         </div>
-                        <select class="profile_param form-control" t-on-change="changeParam('traces_async_interval')">
-                            <t t-set="interval" t-value="profiling.state.params.traces_async_interval"/>
-                            <option value="">Default</option>
-                            <option value="0.001" t-att-selected="interval === '0.001'">0.001</option>
-                            <option value="0.01" t-att-selected="interval === '0.01'">0.01</option>
-                            <option value="0.1" t-att-selected="interval === '0.1'">0.1</option>
-                            <option value="1" t-att-selected="interval === '1'">1</option>
-                        </select>
-                    </div>
-                    <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control custom-switch" t-on-click.stop.prevent="toggleParam('execution_context_qweb')">
-                        <input type="checkbox" class="custom-control-input" id="profile_execution_context_qweb"
-                            t-att-checked="!!profiling.state.params.execution_context_qweb"/>
-                        <label class="custom-control-label" for="profile_execution_context_qweb">Add qweb directive context</label>
-                    </span>
-                    <span class="o_profiling_switch custom-control custom-switch" t-on-click.stop.prevent="profiling.toggleCollector('qweb')">
-                        <input type="checkbox" class="custom-control-input" id="profile_qweb"
-                            t-att-checked="profiling.isCollectorEnabled('qweb')"/>
-                        <label class="custom-control-label" for="profile_qweb">Record qweb</label>
-                    </span>
-                </t>
+                        <span t-if="profiling.isCollectorEnabled('sql') || profiling.isCollectorEnabled('traces_async')" class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="toggleParam('execution_context_qweb')">
+                            <input type="checkbox" class="custom-control-input" id="profile_execution_context_qweb"
+                                t-att-checked="!!profiling.state.params.execution_context_qweb"/>
+                            <label class="custom-control-label" for="profile_execution_context_qweb">Add qweb directive context</label>
+                        </span>
+                        <span class="o_profiling_switch custom-control custom-switch mt-2" t-on-click.stop.prevent="profiling.toggleCollector('qweb')">
+                            <input type="checkbox" class="custom-control-input" id="profile_qweb"
+                                t-att-checked="profiling.isCollectorEnabled('qweb')"/>
+                            <label class="custom-control-label" for="profile_qweb">Record qweb</label>
+                        </span>
+                    </t>
+                </div>
+                <a href="#" t-attf-class="btn btn-light align-self-baseline {{profiling.state.isEnabled ? 'py-2' : ''}}">
+                    <i class="o_open_profiling oi oi-launch" t-on-click="openProfiles"/>
+                </a>
             </div>
         </DropdownItem>
     </t>
diff --git a/addons/web/static/src/core/debug/profiling/profiling_service.js b/addons/web/static/src/core/debug/profiling/profiling_service.js
index e0ee28ab286..2298e6cd469 100644
--- a/addons/web/static/src/core/debug/profiling/profiling_service.js
+++ b/addons/web/static/src/core/debug/profiling/profiling_service.js
@@ -21,10 +21,10 @@ const profilingService = {
 
         let recordingIcon = null;
         function updateDebugIcon() {
-            const debugItem = document.querySelector(".o_main_navbar .o_debug_manager .fa-bug");
+            const debugItem = document.querySelector(".o_debug_manager .dropdown-toggle");
             if (state.isEnabled) {
-                recordingIcon = document.createElement("span");
-                recordingIcon.classList.add("o_recording", "text-danger", "fa", "fa-circle");
+                recordingIcon = document.createElement("i");
+                recordingIcon.classList.add("o_recording", "badge", "badge-pill", "d-inline", "p-2", "bg-danger", "border");
                 debugItem.appendChild(recordingIcon);
             } else if (recordingIcon) {
                 debugItem.removeChild(recordingIcon);
diff --git a/addons/web/static/src/legacy/scss/animation.scss b/addons/web/static/src/legacy/scss/animation.scss
index d65a509bcad..9a410103045 100644
--- a/addons/web/static/src/legacy/scss/animation.scss
+++ b/addons/web/static/src/legacy/scss/animation.scss
@@ -15,132 +15,40 @@
     }
 }
 
-@-moz-keyframes markAnim {
-    0% {
-        opacity: 0;
-        -moz-transform: scaleX(0.50) scaleY(0.50);
-    }
-    30% {
-        opacity: 1;
-        -moz-transform: scaleX(1.00) scaleY(1.00);
-    }
-    100% {
-        opacity: 0;
-        -moz-transform: scaleX(1.00) scaleY(1.00);
-    }
-}
-
-@-webkit-keyframes markAnim {
-    0% {
-        opacity: 0;
-        -webkit-transform: scaleX(0.50) scaleY(0.50);
-    }
-    30% {
-        opacity: 1;
-        -webkit-transform: scaleX(1.00) scaleY(1.00);
-    }
-    100% {
-        opacity: 0;
-        -webkit-transform: scaleX(1.00) scaleY(1.00);
-    }
-}
-
-@-o-keyframes markAnim {
-    0% {
-        opacity: 0;
-        -o-transform: scaleX(0.50) scaleY(0.50);
-    }
-    30% {
-        opacity: 1;
-        -o-transform: scaleX(1.00) scaleY(1.00);
-    }
-    100% {
-        opacity: 0;
-        -o-transform: scaleX(1.00) scaleY(1.00);
-    }
-}
-
-@-ms-keyframes markAnim {
-    0% {
-        opacity: 0;
-        -ms-transform: scaleX(0.50) scaleY(0.50);
-    }
-    30% {
-        opacity: 1;
-        -ms-transform: scaleX(1.00) scaleY(1.00);
-    }
-    100% {
-        opacity: 0;
-        -ms-transform: scaleX(1.00) scaleY(1.00);
-    }
-}
-
 // 'bounce' effect
-@-webkit-keyframes bounceIn {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-            transform: scale3d(.3, .3, .3);
-  }
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-            transform: scale3d(1.1, 1.1, 1.1);
-  }
-  40% {
-    -webkit-transform: scale3d(.9, .9, .9);
-            transform: scale3d(.9, .9, .9);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-            transform: scale3d(1.03, 1.03, 1.03);
-  }
-  80% {
-    -webkit-transform: scale3d(.97, .97, .97);
-            transform: scale3d(.97, .97, .97);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale3d(1, 1, 1);
-            transform: scale3d(1, 1, 1);
-  }
-}
-
 @keyframes bounceIn {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-  0% {
-    opacity: 0;
-    -webkit-transform: scale3d(.3, .3, .3);
-            transform: scale3d(.3, .3, .3);
-  }
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-            transform: scale3d(1.1, 1.1, 1.1);
-  }
-  40% {
-    -webkit-transform: scale3d(.9, .9, .9);
-            transform: scale3d(.9, .9, .9);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-            transform: scale3d(1.03, 1.03, 1.03);
-  }
-  80% {
-    -webkit-transform: scale3d(.97, .97, .97);
-            transform: scale3d(.97, .97, .97);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: scale3d(1, 1, 1);
-            transform: scale3d(1, 1, 1);
-  }
+    0%, 20%, 40%, 60%, 80%, 100% {
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+    0% {
+        opacity: 0;
+        transform: scale3d(.3, .3, .3);
+    }
+    20% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    40% {
+        transform: scale3d(.9, .9, .9);
+    }
+    60% {
+        opacity: 1;
+        transform: scale3d(1.03, 1.03, 1.03);
+    }
+    80% {
+        transform: scale3d(.97, .97, .97);
+    }
+    100% {
+        opacity: 1;
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes flash {
+    from, 50%, to {
+        opacity: 1;
+    }
+
+    25%, 75% {
+        opacity: 0;
+    }
 }