add minimized debugger
This commit is contained in:
parent
ddce6c4e89
commit
95cc4d3ccb
|
@ -140,18 +140,13 @@
|
||||||
<div id="qr--modal-executeResult"></div>
|
<div id="qr--modal-executeResult"></div>
|
||||||
|
|
||||||
<div id="qr--modal-debugButtons">
|
<div id="qr--modal-debugButtons">
|
||||||
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button">
|
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button"></div>
|
||||||
<!-- <span class="qr--glyph">▷</span> -->
|
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton menu_button"></div>
|
||||||
</div>
|
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton menu_button"></div>
|
||||||
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton menu_button"></div>
|
||||||
<!-- <span class="qr--glyph">↷</span><span class="qr--glyph">▪</span> -->
|
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton menu_button"></div>
|
||||||
</div>
|
<div title="Minimize" id="qr--modal-minimize" class="qr--modal-debugButton menu_button fa-solid fa-minimize"></div>
|
||||||
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
<div title="Maximize" id="qr--modal-maximize" class="qr--modal-debugButton menu_button fa-solid fa-maximize"></div>
|
||||||
<!-- <span class="qr--glyph">↓</span><span class="qr--glyph">▪</span> -->
|
|
||||||
</div>
|
|
||||||
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
|
||||||
<!-- <span class="qr--glyph">↑</span><span class="qr--glyph">▪</span> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="qr--modal-debugState"></div>
|
<div id="qr--modal-debugState"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -879,6 +879,15 @@ export class QuickReply {
|
||||||
stepOutBtn.addEventListener('click', ()=>{
|
stepOutBtn.addEventListener('click', ()=>{
|
||||||
this.debugController?.stepOut();
|
this.debugController?.stepOut();
|
||||||
});
|
});
|
||||||
|
/**@type {HTMLElement}*/
|
||||||
|
const minimizeBtn = dom.querySelector('#qr--modal-minimize');
|
||||||
|
minimizeBtn.addEventListener('click', ()=>{
|
||||||
|
this.editorDom.classList.add('qr--minimized');
|
||||||
|
});
|
||||||
|
const maximizeBtn = dom.querySelector('#qr--modal-maximize');
|
||||||
|
maximizeBtn.addEventListener('click', ()=>{
|
||||||
|
this.editorDom.classList.remove('qr--minimized');
|
||||||
|
});
|
||||||
/**@type {boolean}*/
|
/**@type {boolean}*/
|
||||||
let isResizing = false;
|
let isResizing = false;
|
||||||
let resizeStart;
|
let resizeStart;
|
||||||
|
|
|
@ -337,6 +337,54 @@
|
||||||
.popup:has(#qr--modalEditor) {
|
.popup:has(#qr--modalEditor) {
|
||||||
aspect-ratio: unset;
|
aspect-ratio: unset;
|
||||||
}
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) {
|
||||||
|
min-width: unset;
|
||||||
|
min-height: unset;
|
||||||
|
height: auto !important;
|
||||||
|
width: min-content !important;
|
||||||
|
position: absolute;
|
||||||
|
right: 1em;
|
||||||
|
top: 1em;
|
||||||
|
left: unset;
|
||||||
|
bottom: unset;
|
||||||
|
margin: unset;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized)::backdrop {
|
||||||
|
backdrop-filter: unset;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-body {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
height: min-content;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor {
|
||||||
|
max-height: 50vh;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--main,
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--resizeHandle,
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > h3,
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeButtons,
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeProgress {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--qrOptions {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugState {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .popup-controls {
|
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .popup-controls {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -585,7 +633,7 @@
|
||||||
width: 2.25em;
|
width: 2.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:after {
|
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:not(.fa-solid):after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 3px;
|
inset: 3px;
|
||||||
|
@ -606,6 +654,9 @@
|
||||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepOut:after {
|
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepOut:after {
|
||||||
mask-image: url('/img/step-out.svg');
|
mask-image: url('/img/step-out.svg');
|
||||||
}
|
}
|
||||||
|
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
|
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
|
||||||
--prog: 0;
|
--prog: 0;
|
||||||
--progColor: #92befc;
|
--progColor: #92befc;
|
||||||
|
|
|
@ -400,6 +400,56 @@
|
||||||
.popup:has(#qr--modalEditor) {
|
.popup:has(#qr--modalEditor) {
|
||||||
aspect-ratio: unset;
|
aspect-ratio: unset;
|
||||||
|
|
||||||
|
&:has(.qr--isExecuting.qr--minimized) {
|
||||||
|
min-width: unset;
|
||||||
|
min-height: unset;
|
||||||
|
height: auto !important;
|
||||||
|
width: min-content !important;
|
||||||
|
position: absolute;
|
||||||
|
right: 1em;
|
||||||
|
top: 1em;
|
||||||
|
left: unset;
|
||||||
|
bottom: unset;
|
||||||
|
margin: unset;
|
||||||
|
padding: 0;
|
||||||
|
&::backdrop {
|
||||||
|
backdrop-filter: unset;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.popup-body {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
height: min-content;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
.popup-content {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
> #qr--modalEditor {
|
||||||
|
max-height: 50vh;
|
||||||
|
> #qr--main,
|
||||||
|
> #qr--resizeHandle,
|
||||||
|
> #qr--qrOptions > h3,
|
||||||
|
> #qr--qrOptions > #qr--modal-executeButtons,
|
||||||
|
> #qr--qrOptions > #qr--modal-executeProgress
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#qr--qrOptions {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
#qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
#qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#qr--modal-debugState {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
&:has(.qr--isExecuting) {
|
&:has(.qr--isExecuting) {
|
||||||
.popup-controls {
|
.popup-controls {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -663,7 +713,7 @@
|
||||||
aspect-ratio: 1.25 / 1;
|
aspect-ratio: 1.25 / 1;
|
||||||
width: 2.25em;
|
width: 2.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:after {
|
&:not(.fa-solid):after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 3px;
|
inset: 3px;
|
||||||
|
@ -684,15 +734,9 @@
|
||||||
&#qr--modal-stepOut:after {
|
&#qr--modal-stepOut:after {
|
||||||
mask-image: url('/img/step-out.svg');
|
mask-image: url('/img/step-out.svg');
|
||||||
}
|
}
|
||||||
// &.qr--glyph-combo {
|
&#qr--modal-maximize {
|
||||||
// display: grid;
|
display: none;
|
||||||
// grid-template-columns: 1fr;
|
}
|
||||||
// grid-template-rows: 1fr 1fr;
|
|
||||||
// .qr--glyph {
|
|
||||||
// grid-column: 1;
|
|
||||||
// line-height: 0.8;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue