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

debugger

This commit is contained in:
LenAnderson 2024-06-20 15:53:30 -04:00
parent ed8f923b7a
commit 3b6f4dee2c
6 changed files with 103 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -116,17 +116,6 @@
<i class="fa-solid fa-stop"></i>
</div>
</div>
<div id="qr--modal-debugButtons">
<div id="qr--modal-resume" class="qr--modal-debugButton menu_button">
Resume
</div>
<div id="qr--modal-step" class="qr--modal-debugButton menu_button">
Step
</div>
<div id="qr--modal-stepInto" class="qr--modal-debugButton menu_button">
StepInto
</div>
</div>
<div id="qr--modal-executeProgress"></div>
<label class="checkbox_label">
<input type="checkbox" id="qr--modal-executeHide">
@ -134,6 +123,21 @@
</label>
<div id="qr--modal-executeErrors"></div>
<div id="qr--modal-executeResult"></div>
<div id="qr--modal-debugButtons">
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button">
<span class="qr--glyph">▷</span>
</div>
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton qr--glyph-combo menu_button">
<span class="qr--glyph">↷</span><span class="qr--glyph">▪</span>
</div>
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton qr--glyph-combo menu_button">
<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 id="qr--modal-debugState"></div>
</div>
</div>

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

@ -564,6 +564,11 @@ export class QuickReply {
stepIntoBtn.addEventListener('click', ()=>{
this.debugController?.stepInto();
});
/**@type {HTMLElement}*/
const stepOutBtn = dom.querySelector('#qr--modal-stepOut');
stepOutBtn.addEventListener('click', ()=>{
this.debugController?.stepOut();
});
await popupResult;
@ -653,7 +658,7 @@ export class QuickReply {
title.textContent = isCurrent ? 'Current Scope' : 'Parent Scope';
let hi;
title.addEventListener('pointerenter', ()=>{
const loc = this.getEditorPosition(c.executorList[0].start, c.executorList.slice(-1)[0].end);
const loc = this.getEditorPosition(c.executorList[0].start - 1, c.executorList.slice(-1)[0].end);
const layer = this.editorPopup.dlg.getBoundingClientRect();
hi = document.createElement('div');
hi.style.position = 'fixed';

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

@ -262,6 +262,9 @@
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--qrOptions > .qr--ctxEditorActions + h3 + div {
display: none;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor.qr--isExecuting #qr--modal-debugButtons {
display: flex;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor > #qr--main {
flex: 1 1 auto;
display: flex;
@ -376,6 +379,9 @@
border: 1px solid var(--SmartThemeBorderColor);
border-radius: 5px;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor label:has(#qr--modal-executeHide) {
display: none;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeButtons {
display: flex;
gap: 1em;
@ -424,9 +430,21 @@
border-color: #d78872;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons {
display: flex;
display: none;
gap: 1em;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton {
aspect-ratio: 1.25 / 1;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton.qr--glyph-combo {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton.qr--glyph-combo .qr--glyph {
grid-column: 1;
line-height: 0.8;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
--prog: 0;
--progColor: #92befc;
@ -512,7 +530,7 @@
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope {
display: grid;
grid-template-columns: 0fr 1fr;
column-gap: 1em;
column-gap: 0em;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--title {
grid-column: 1 / 3;
@ -526,6 +544,14 @@
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe {
display: contents;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 2) .qr--key,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 2) .qr--key,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 2) .qr--key,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var:nth-child(2n + 2) .qr--val,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro:nth-child(2n + 2) .qr--val,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe:nth-child(2n + 2) .qr--val {
background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--var.qr--isHidden .qr--key,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--macro.qr--isHidden .qr--key,
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--pipe.qr--isHidden .qr--key,
@ -536,6 +562,7 @@
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key {
margin-left: 0.5em;
padding-right: 1em;
}
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugState .qr--scope .qr--key:after {
content: ": ";

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

@ -289,7 +289,9 @@
{
display: none;
}
#qr--modal-debugButtons {
display: flex;
}
}
> #qr--main {
@ -403,6 +405,10 @@
}
}
label:has(#qr--modal-executeHide) {
// hide editor is not working anyways
display: none;
}
#qr--modal-executeButtons {
display: flex;
gap: 1em;
@ -451,8 +457,20 @@
}
}
#qr--modal-debugButtons {
display: flex;
display: none;
gap: 1em;
.qr--modal-debugButton {
aspect-ratio: 1.25 / 1;
&.qr--glyph-combo {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
.qr--glyph {
grid-column: 1;
line-height: 0.8;
}
}
}
}
#qr--modal-executeProgress {
--prog: 0;
@ -538,7 +556,7 @@
.qr--scope {
display: grid;
grid-template-columns: 0fr 1fr;
column-gap: 1em;
column-gap: 0em;
.qr--title {
grid-column: 1 / 3;
font-weight: bold;
@ -548,6 +566,11 @@
}
.qr--var, .qr--macro, .qr--pipe {
display: contents;
&:nth-child(2n + 2) {
.qr--key, .qr--val {
background-color: rgb(from var(--SmartThemeEmColor) r g b / 0.25);
}
}
&.qr--isHidden {
.qr--key, .qr--val {
opacity: 0.5;
@ -556,6 +579,7 @@
}
.qr--key {
margin-left: 0.5em;
padding-right: 1em;
&:after { content: ": "; }
}
.qr--pipe, .qr--macro {

113
public/scripts/slash-commands/SlashCommandClosure.js
View File

@ -104,7 +104,7 @@ export class SlashCommandClosure {
const gen = closure.executeDirect();
let step;
while (!step?.done) {
step = await gen.next(this.debugController?.isStepping ?? false);
step = await gen.next(this.debugController?.testStepping(this) ?? false);
if (!(step.value instanceof SlashCommandClosureResult) && this.debugController) {
this.debugController.isStepping = await this.debugController.awaitBreakPoint(step.value.closure, step.value.executor);
}
@ -117,7 +117,7 @@ export class SlashCommandClosure {
const gen = closure.executeDirect();
let step;
while (!step?.done) {
step = await gen.next(this.debugController?.isStepping);
step = await gen.next(this.debugController?.testStepping(this));
this.debugController.isStepping = yield step.value;
}
return step.value;
@ -177,111 +177,6 @@ export class SlashCommandClosure {
if (this.executorList.length == 0) {
this.scope.pipe = '';
}
for (const executor of [] ?? this.executorList) {
this.onProgress?.(done, this.commandCount);
if (executor instanceof SlashCommandClosureExecutor) {
const closure = this.scope.getVariable(executor.name);
if (!closure || !(closure instanceof SlashCommandClosure)) throw new Error(`${executor.name} is not a closure.`);
closure.scope.parent = this.scope;
closure.providedArgumentList = executor.providedArgumentList;
const result = await closure.execute();
this.scope.pipe = result.pipe;
} else {
/**@type {import('./SlashCommand.js').NamedArguments} */
let args = {
_scope: this.scope,
_parserFlags: executor.parserFlags,
_abortController: this.abortController,
_hasUnnamedArgument: executor.unnamedArgumentList.length > 0,
};
let value;
// substitute named arguments
for (const arg of executor.namedArgumentList) {
if (arg.value instanceof SlashCommandClosure) {
/**@type {SlashCommandClosure}*/
const closure = arg.value;
closure.scope.parent = this.scope;
if (closure.executeNow) {
args[arg.name] = (await closure.execute())?.pipe;
} else {
args[arg.name] = closure;
}
} else {
args[arg.name] = this.substituteParams(arg.value);
}
// unescape named argument
if (typeof args[arg.name] == 'string') {
args[arg.name] = args[arg.name]
?.replace(/\\\{/g, '{')
?.replace(/\\\}/g, '}')
;
}
}
// substitute unnamed argument
if (executor.unnamedArgumentList.length == 0) {
if (executor.injectPipe) {
value = this.scope.pipe;
args._hasUnnamedArgument = this.scope.pipe !== null && this.scope.pipe !== undefined;
}
} else {
value = [];
for (let i = 0; i < executor.unnamedArgumentList.length; i++) {
let v = executor.unnamedArgumentList[i].value;
if (v instanceof SlashCommandClosure) {
/**@type {SlashCommandClosure}*/
const closure = v;
closure.scope.parent = this.scope;
if (closure.executeNow) {
v = (await closure.execute())?.pipe;
} else {
v = closure;
}
} else {
v = this.substituteParams(v);
}
value[i] = v;
}
if (!executor.command.splitUnnamedArgument) {
if (value.length == 1) {
value = value[0];
} else if (!value.find(it=>it instanceof SlashCommandClosure)) {
value = value.join('');
}
}
}
// unescape unnamed argument
if (typeof value == 'string') {
value = value
?.replace(/\\\{/g, '{')
?.replace(/\\\}/g, '}')
;
} else if (Array.isArray(value)) {
value = value.map(v=>{
if (typeof v == 'string') {
return v
?.replace(/\\\{/g, '{')
?.replace(/\\\}/g, '}');
}
return v;
});
}
let abortResult = await this.testAbortController();
if (abortResult) {
return abortResult;
}
executor.onProgress = (subDone, subTotal)=>this.onProgress?.(done + subDone, this.commandCount);
this.scope.pipe = await executor.command.callback(args, value ?? '');
this.#lintPipe(executor.command);
done += executor.commandCount;
this.onProgress?.(done, this.commandCount);
abortResult = await this.testAbortController();
if (abortResult) {
return abortResult;
}
}
}
const stepper = this.executeStep();
let step;
while (!step?.done) {
@ -296,7 +191,7 @@ export class SlashCommandClosure {
step = await stepper.next();
this.debugController.isStepping = yield { closure:this, executor:step.value };
}
} else if (!step.done && this.debugController?.isStepping) {
} else if (!step.done && this.debugController?.testStepping(this)) {
this.debugController.isSteppingInto = false;
this.debugController.isStepping = yield { closure:this, executor:step.value };
}
@ -415,7 +310,7 @@ export class SlashCommandClosure {
return abortResult;
}
executor.onProgress = (subDone, subTotal)=>this.onProgress?.(done + subDone, this.commandCount);
const isStepping = this.debugController?.isStepping;
const isStepping = this.debugController?.testStepping(this);
if (this.debugController) {
this.debugController.isStepping = false || this.debugController.isSteppingInto;
}

22
public/scripts/slash-commands/SlashCommandDebugController.js
View File

@ -3,8 +3,10 @@ import { SlashCommandExecutor } from './SlashCommandExecutor.js';
export class SlashCommandDebugController {
/**@type {SlashCommandClosure[]} */ stack = [];
/**@type {boolean[]} */ stepStack = [];
/**@type {boolean} */ isStepping = false;
/**@type {boolean} */ isSteppingInto = false;
/**@type {boolean} */ isSteppingOut = false;
/**@type {Promise<boolean>} */ continuePromise;
/**@type {(boolean)=>void} */ continueResolver;
@ -14,11 +16,22 @@ export class SlashCommandDebugController {
testStepping(closure) {
return this.stepStack[this.stack.indexOf(closure)];
}
down(closure) {
this.stack.push(closure);
if (this.stepStack.length < this.stack.length) {
this.stepStack.push(this.isSteppingInto);
}
}
up() {
this.stack.pop();
this.stepStack.pop();
}
@ -26,16 +39,25 @@ export class SlashCommandDebugController {
resume() {
this.continueResolver?.(false);
this.continuePromise = null;
this.stepStack.forEach((_,idx)=>this.stepStack[idx] = false);
}
step() {
this.stepStack[this.stepStack.length - 1] = true;
this.continueResolver?.(true);
this.continuePromise = null;
}
stepInto() {
this.isSteppingInto = true;
this.stepStack.forEach((_,idx)=>this.stepStack[idx] = true);
this.continueResolver?.(true);
this.continuePromise = null;
}
stepOut() {
this.isSteppingOut = true;
this.stepStack[this.stepStack.length - 1] = false;
this.continueResolver?.(false);
this.continuePromise = null;
}
async awaitContinue() {
this.continuePromise ??= new Promise(resolve=>{