Display features for PNG Info tab

Text on PNG Info tab is parsed and colorized in a way that makes it easier to read.  Parameter values can be copied by clicking on them.
- High performance regex used for parsing
- Normal values are displayed in blue, but string content is displayed in orange to improve readability (i.e. adetailer prompts)
- Clicking to copy uses a pointer cursor and a green color animation to show something is happening
- Color choices configured differently for dark mode in order to optimize readability
- Copying strings with \n automatically converts to newlines during copy operation
- Settings that don't follow normal conventions are not parsed, but displayed in the old style (i.e. dynamic prompt templates)
- If there are parsing issues (or exceptions), defaults to the old display mode
This commit is contained in:
MarcusNyne 2024-08-19 17:26:56 -04:00
parent 82a973c043
commit efa87a6abe
4 changed files with 178 additions and 5 deletions

View file

@ -212,3 +212,17 @@ function uiElementInSight(el) {
return isOnScreen;
}
function uiCopyElementText(el) {
text = el.innerText
if (text.startsWith('"')) {
text = text.substring(1, text.length-1).replace('\\n', '\n')
}
navigator.clipboard.writeText(text)
el.classList.remove('animate');
setTimeout(() => {
el.classList.add('animate');
}, 0);
}