Merge pull request #10694 from akx/tooltipsies

Tooltip fixes & optimizations
This commit is contained in:
AUTOMATIC1111 2023-05-27 19:54:09 +03:00 committed by GitHub
commit 0666f7c597
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -116,17 +116,25 @@ var titles = {
"Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction." "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
}; };
function updateTooltipForSpan(span) { function updateTooltip(element) {
if (span.title) return; // already has a title if (element.title) return; // already has a title
let tooltip = localization[titles[span.textContent]] || titles[span.textContent]; let text = element.textContent;
let tooltip = localization[titles[text]] || titles[text];
if (!tooltip) { if (!tooltip) {
tooltip = localization[titles[span.value]] || titles[span.value]; let value = element.value;
if (value) tooltip = localization[titles[value]] || titles[value];
} }
if (!tooltip) { if (!tooltip) {
for (const c of span.classList) { // Gradio dropdown options have `data-value`.
let dataValue = element.dataset.value;
if (dataValue) tooltip = localization[titles[dataValue]] || titles[dataValue];
}
if (!tooltip) {
for (const c of element.classList) {
if (c in titles) { if (c in titles) {
tooltip = localization[titles[c]] || titles[c]; tooltip = localization[titles[c]] || titles[c];
break; break;
@ -135,34 +143,53 @@ function updateTooltipForSpan(span) {
} }
if (tooltip) { if (tooltip) {
span.title = tooltip; element.title = tooltip;
} }
} }
function updateTooltipForSelect(select) { // Nodes to check for adding tooltips.
if (select.onchange != null) return; const tooltipCheckNodes = new Set();
// Timer for debouncing tooltip check.
let tooltipCheckTimer = null;
select.onchange = function() { function processTooltipCheckNodes() {
select.title = localization[titles[select.value]] || titles[select.value] || ""; for (const node of tooltipCheckNodes) {
}; updateTooltip(node);
}
tooltipCheckNodes.clear();
} }
var observedTooltipElements = {SPAN: 1, BUTTON: 1, SELECT: 1, P: 1}; onUiUpdate(function(mutationRecords) {
for (const record of mutationRecords) {
onUiUpdate(function(m) { if (record.type === "childList" && record.target.classList.contains("options")) {
m.forEach(function(record) { // This smells like a Gradio dropdown menu having changed,
record.addedNodes.forEach(function(node) { // so let's enqueue an update for the input element that shows the current value.
if (observedTooltipElements[node.tagName]) { let wrap = record.target.parentNode;
updateTooltipForSpan(node); let input = wrap?.querySelector("input");
if (input) {
input.title = ""; // So we'll even have a chance to update it.
tooltipCheckNodes.add(input);
} }
if (node.tagName == "SELECT") { }
updateTooltipForSelect(node); for (const node of record.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE && !node.classList.contains("hide")) {
if (!node.title) {
if (
node.tagName === "SPAN" ||
node.tagName === "BUTTON" ||
node.tagName === "P" ||
node.tagName === "INPUT" ||
(node.tagName === "LI" && node.classList.contains("item")) // Gradio dropdown item
) {
tooltipCheckNodes.add(node);
}
}
node.querySelectorAll('span, button, p').forEach(n => tooltipCheckNodes.add(n));
} }
}
if (node.querySelectorAll) { }
node.querySelectorAll('span, button, select, p').forEach(updateTooltipForSpan); if (tooltipCheckNodes.size) {
node.querySelectorAll('select').forEach(updateTooltipForSelect); clearTimeout(tooltipCheckTimer);
} tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000);
}); }
});
}); });