[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
This commit is contained in:
stefanorigano (SRI)
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user