riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

stack traces in the brush editor

Browse source 
after 35 thousand years it's finally here
good erro message
This commit is contained in:
りき萌 2025-06-25 20:51:34 +02:00
parent c1612b2a94
commit e49885c83a
11 changed files with 710 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

92
static/index.css
View file

@ -1,7 +1,7 @@
/* index.css - styles for index.html and generally main parts of the app
For shared styles (such as color definitions) check out base.css. */
* {
html {
/* On the main page, we don't really want to permit selecting things.
It comes off as janky-looking. */
user-select: none;
@ -412,22 +412,47 @@ rkgk-code-editor {
& > .squiggle-error {
text-decoration-color: var(--color-error);
&.squiggle-colored {
--color: oklch(40% 100% calc(var(--color-index) * 300));
text-decoration-color: var(--color);
background-color: oklch(from var(--color) 60% c h / 0.13);
&.squiggle-highlighted {
--highlight-color-index: var(--color-index);
text-decoration: none;
background-color: oklch(
40% 100% calc(var(--highlight-color-index) * 300)
);
color: white;
font-weight: bold;
}
}
}
}
}
& > .layer-syntax {
white-space: pre-wrap;
}
& > textarea {
display: block;
width: calc(100% - var(--gutter-width));
margin: 0;
margin-left: var(--gutter-width);
padding: 0;
box-sizing: border-box;
border: none;
overflow: hidden;
resize: none;
white-space: pre-wrap;
border: none;
background: none;
color: transparent;
caret-color: var(--color-text);
&:focus {
/* The outline is displayed on the parent element to also surround the gutter. */
@ -490,6 +515,67 @@ rkgk-brush-editor.rkgk-panel {
margin: 0;
color: var(--color-error);
white-space: pre-wrap;
user-select: text;
max-height: 20em;
overflow-y: auto;
}
}
rkgk-brush-editor-error-exception {
& > .message {
margin: 4px 0;
}
& > .stack-trace {
margin: 0;
margin-left: 4ch;
color: var(--color-text);
& > li {
&::marker {
color: var(--color-text-dim);
}
& > button.function-name {
border: none;
border-radius: 0;
padding: 0;
background: none;
user-select: text;
font-weight: bold;
&:not(:disabled) {
text-decoration: underline;
cursor: pointer;
}
&:disabled {
opacity: 100%;
}
&.source-link {
--color-index: 0; /* set by JavaScript */
--color: oklch(40% 100% calc(var(--color-index) * 300));
color: var(--color);
&:hover {
text-decoration: none;
background-color: var(--color);
color: white;
}
}
}
& > .system {
color: var(--color-text-dim);
}
}
}
}