rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add minimized debugger

This commit is contained in:
LenAnderson 2024-07-14 16:58:19 -04:00
parent ddce6c4e89
commit 95cc4d3ccb
4 changed files with 122 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/scripts/extensions/quick-reply/html/qrEditor.html
View File

@ -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>

9
public/scripts/extensions/quick-reply/src/QuickReply.js
View File

@ -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;

53
public/scripts/extensions/quick-reply/style.css
View File

@ -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;

64
public/scripts/extensions/quick-reply/style.less
View File

@ -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;
// }
// }
} }
} }