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:
commit
1cdaaadf2d
2 changed files with 81 additions and 38 deletions
|
@ -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 });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue