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)

test/integration/stamp_editor_spec.mjs

@@ -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 });
       }
     });
   });

web/new_alt_text_manager.js

@@ -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) {
+      if (!textarea.value) {
-        return;
+        this.#toggleLoading(this.#wasAILoading);
       }
-      this.#toggleLoading(this.#wasAILoading);
+      this.#toggleTitleAndDisclaimer();
     });
     textarea.addEventListener("input", () => {
-      this.#toggleTitle();
+      this.#toggleTitleAndDisclaimer();
-      this.#toggleDisclaimer();
     });
 
     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.#toggleTitleAndDisclaimer();
-      this.#toggleDisclaimer();
     }
   }
 
@@ -210,19 +197,34 @@ class NewAltTextManager {
   }
 
   #toggleAI(value) {
-    this.#dialog.classList.toggle("noAi", !value);
+    if (!this.#uiManager || this.#hasAI === value) {
-    this.#toggleTitle();
-  }
-
-  #toggleDisclaimer(value = null) {
-    if (!this.#uiManager) {
       return;
     }
-    const hidden =
+    this.#hasAI = value;
-      value === null
+    this.#dialog.classList.toggle("noAi", !value);
-        ? !this.#guessedAltText || this.#guessedAltText !== this.#textarea.value
+    this.#toggleTitleAndDisclaimer();
-        : !value;
+  }
-    this.#disclaimer.classList.toggle("hidden", hidden);
+
+  #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.#toggleTitleAndDisclaimer();
-    this.#toggleDisclaimer(true);
 
     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() {