1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 22:58:07 +02:00

Merge pull request #18670 from calixteman/bug1911764

[Editor] Remove the disclaimer when the user is editing the alt-text in the new alt-text modal (bug 1911764)
This commit is contained in:
calixteman 2024-09-04 13:41:18 +02:00 committed by GitHub
commit 1cdaaadf2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 81 additions and 38 deletions

View file

@ -1050,6 +1050,50 @@ describe("Stamp Editor", () => {
tooltipSelector
);
expect(tooltipText).toEqual("Hello World");
// Click on the Review button.
await page.click(buttonSelector);
await page.waitForSelector("#newAltTextDialog", { visible: true });
await page.click("#newAltTextCreateAutomaticallyButton");
await page.click("#newAltTextCancel");
await page.waitForSelector("#newAltTextDialog", { visible: false });
}
});
it("must check the new alt text flow (part 2)", async () => {
// Run sequentially to avoid clipboard issues.
for (const [, page] of pages) {
await switchToStamp(page);
// Add an image.
await copyImage(page, "../images/firefox_logo.png", 0);
const editorSelector = getEditorSelector(0);
await page.waitForSelector(editorSelector);
await waitForSerialized(page, 1);
// Wait for the dialog to be visible.
await page.waitForSelector("#newAltTextDialog", { visible: true });
// Wait for the spinner to be visible.
await page.waitForSelector("#newAltTextDescriptionContainer.loading");
// Check we've the disclaimer.
await page.waitForSelector("#newAltTextDisclaimer", { visible: true });
// Click in the textarea in order to stop the guessing.
await page.click("#newAltTextDescriptionTextarea");
await page.waitForFunction(() =>
document
.getElementById("newAltTextTitle")
.textContent.startsWith("Add ")
);
// Check we haven't the disclaimer.
await page.waitForSelector("#newAltTextDisclaimer", { visible: false });
// Click on the Not Now button.
await page.click("#newAltTextNotNow");
await page.waitForSelector("#newAltTextDialog", { visible: false });
}
});
});

View file

@ -40,6 +40,8 @@ class NewAltTextManager {
#guessedAltText;
#hasAI = false;
#isEditing = null;
#imagePreview;
@ -128,16 +130,16 @@ class NewAltTextManager {
textarea.addEventListener("focus", () => {
this.#wasAILoading = this.#isAILoading;
this.#toggleLoading(false);
this.#toggleTitleAndDisclaimer();
});
textarea.addEventListener("blur", () => {
if (textarea.value) {
return;
if (!textarea.value) {
this.#toggleLoading(this.#wasAILoading);
}
this.#toggleLoading(this.#wasAILoading);
this.#toggleTitleAndDisclaimer();
});
textarea.addEventListener("input", () => {
this.#toggleTitle();
this.#toggleDisclaimer();
this.#toggleTitleAndDisclaimer();
});
eventBus._on("enableguessalttext", ({ value }) => {
@ -169,20 +171,6 @@ class NewAltTextManager {
this.#dialog.classList.toggle("error", value);
}
#toggleTitle() {
const isEditing = this.#isAILoading || !!this.#textarea.value;
if (this.#isEditing === isEditing) {
return;
}
this.#isEditing = isEditing;
this.#title.setAttribute(
"data-l10n-id",
isEditing
? "pdfjs-editor-new-alt-text-dialog-edit-label"
: "pdfjs-editor-new-alt-text-dialog-add-label"
);
}
async #toggleGuessAltText(value, isInitial = false) {
if (!this.#uiManager) {
return;
@ -199,8 +187,7 @@ class NewAltTextManager {
} else {
this.#toggleLoading(false);
this.#isAILoading = false;
this.#toggleTitle();
this.#toggleDisclaimer();
this.#toggleTitleAndDisclaimer();
}
}
@ -210,19 +197,34 @@ class NewAltTextManager {
}
#toggleAI(value) {
this.#dialog.classList.toggle("noAi", !value);
this.#toggleTitle();
}
#toggleDisclaimer(value = null) {
if (!this.#uiManager) {
if (!this.#uiManager || this.#hasAI === value) {
return;
}
const hidden =
value === null
? !this.#guessedAltText || this.#guessedAltText !== this.#textarea.value
: !value;
this.#disclaimer.classList.toggle("hidden", hidden);
this.#hasAI = value;
this.#dialog.classList.toggle("noAi", !value);
this.#toggleTitleAndDisclaimer();
}
#toggleTitleAndDisclaimer() {
// Disclaimer is visible when the AI is loading or the user didn't change
// the guessed alt text.
const visible =
this.#isAILoading ||
(this.#guessedAltText && this.#guessedAltText === this.#textarea.value);
this.#disclaimer.hidden = !visible;
// The title changes depending if the text area is empty or not.
const isEditing = this.#isAILoading || !!this.#textarea.value;
if (this.#isEditing === isEditing) {
return;
}
this.#isEditing = isEditing;
this.#title.setAttribute(
"data-l10n-id",
isEditing
? "pdfjs-editor-new-alt-text-dialog-edit-label"
: "pdfjs-editor-new-alt-text-dialog-add-label"
);
}
async #mlGuessAltText(isInitial) {
@ -245,14 +247,11 @@ class NewAltTextManager {
if (this.#previousAltText === null && this.#guessedAltText) {
// We have a guessed alt text and the user didn't change it.
this.#addAltText(this.#guessedAltText);
this.#toggleDisclaimer();
this.#toggleTitle();
return;
}
this.#toggleLoading(true);
this.#toggleTitle();
this.#toggleDisclaimer(true);
this.#toggleTitleAndDisclaimer();
let hasError = false;
try {
@ -276,11 +275,10 @@ class NewAltTextManager {
}
this.#toggleLoading(false);
this.#toggleTitleAndDisclaimer();
if (hasError && this.#uiManager) {
this.#toggleError(true);
this.#toggleTitle();
this.#toggleDisclaimer();
}
}
@ -289,6 +287,7 @@ class NewAltTextManager {
return;
}
this.#textarea.value = altText;
this.#toggleTitleAndDisclaimer();
}
#setProgress() {