[Editor] Add a new dialog for alt-text settings (bug 1909604)

This patch adds a new entry in the secondary menu in order to open a dialog to let the user: - disables the alt-text generation thanks to a ML model; - deletes the alt-text model downloaded in Firefox; - disabled the new alt-text flow.
mozilla · Aug 1, 2024 · c68695d · c68695d
1 parent 63371ea
commit c68695d
Show file tree

Hide file tree

Showing 16 changed files with 587 additions and 49 deletions.
diff --git a/extensions/chromium/preferences_schema.json b/extensions/chromium/preferences_schema.json
@@ -59,6 +59,14 @@
       "type": "boolean",
       "default": true
     },
+    "enableAltTextModelDownload": {
+      "type": "boolean",
+      "default": true
+    },
+    "enableNewAltTextWhenAddingImage": {
+      "type": "boolean",
+      "default": true
+    },
     "altTextLearnMoreUrl": {
       "type": "string",
       "default": ""

diff --git a/l10n/en-US/viewer.ftl b/l10n/en-US/viewer.ftl
@@ -446,7 +446,7 @@ pdfjs-editor-new-alt-text-error-close-button = Close
 #   $totalSize (Number) - the total size (in MB) of the AI model.
 #   $downloadedSize (Number) - the downloaded size (in MB) of the AI model.
 #   $percent (Number) - the percentage of the downloaded size.
-pdfjs-editor-new-alt-text-ai-model-downloading-progress =
+pdfjs-editor-new-alt-text-ai-model-downloading-progress = Downloading alt text AI model ({ $downloadedSize } of { $totalSize } MB)
     .aria-valuemin = 0
     .aria-valuemax = { $totalSize }
     .aria-valuenow = { $downloadedSize }
@@ -465,3 +465,24 @@ pdfjs-editor-new-alt-text-to-review-button-label = Review alt text
 # Variables:
 #   $generatedAltText (String) - the generated alt-text.
 pdfjs-editor-new-alt-text-generated-alt-text-with-disclaimer = Created automatically: { $generatedAltText }
+
+## Image alt-text settings
+
+pdfjs-editor-alt-text-settings-dialog-label = Image alt text settings
+pdfjs-editor-alt-text-settings-automatic-title = Automatic alt text
+pdfjs-editor-alt-text-settings-create-model-button-label = Create alt text automatically
+pdfjs-editor-alt-text-settings-create-model-description = Suggests descriptions to help people who can’t see the image or when the image doesn’t load.
+
+# Variables:
+#   $totalSize (Number) - the total size (in MB) of the AI model.
+pdfjs-editor-alt-text-settings-download-model-label = Alt text AI model ({ $totalSize } MB)
+
+pdfjs-editor-alt-text-settings-ai-model-description = Runs locally on your device so your data stays private. Required for automatic alt text.
+pdfjs-editor-alt-text-settings-delete-model-button = Delete
+pdfjs-editor-alt-text-settings-download-model-button = Download
+pdfjs-editor-alt-text-settings-downloading-model-button = Downloading…
+
+pdfjs-editor-alt-text-settings-editor-title = Alt text editor
+pdfjs-editor-alt-text-settings-show-dialog-button-label = Show alt text editor right away when adding an image
+pdfjs-editor-alt-text-settings-show-dialog-description = Helps you make sure all your images have alt text.
+pdfjs-editor-alt-text-settings-close-button = Close
diff --git a/src/display/editor/stamp.js b/src/display/editor/stamp.js
@@ -126,7 +126,11 @@ class StampEditor extends AnnotationEditor {
     if (!this.#canvas) {
       return;
     }
-    if (this._uiManager.useNewAltTextFlow && this.#bitmap) {
+    if (
+      this._uiManager.useNewAltTextWhenAddingImage &&
+      this._uiManager.useNewAltTextFlow &&
+      this.#bitmap
+    ) {
       this._editToolbar.hide();
       this._uiManager.editAltText(this, /* firstTime = */ true);
     } else {
@@ -341,7 +345,10 @@ class StampEditor extends AnnotationEditor {
     this._uiManager.enableWaiting(false);
     const canvas = (this.#canvas = document.createElement("canvas"));
     div.append(canvas);
-    if (!this._uiManager.useNewAltTextFlow) {
+    if (
+      !this._uiManager.useNewAltTextWhenAddingImage ||
+      !this._uiManager.useNewAltTextFlow
+    ) {
       div.hidden = false;
     }
     this.#drawBitmap(width, height);

diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js
@@ -564,6 +564,8 @@ class AnnotationEditorUIManager {
 
   #enableUpdatedAddImage = false;
 
+  #enableNewAltTextWhenAddingImage = false;
+
   #filterFactory = null;
 
   #focusMainContainerTimeoutId = null;
@@ -616,6 +618,8 @@ class AnnotationEditorUIManager {
 
   #boundOnScaleChanging = this.onScaleChanging.bind(this);
 
+  #boundOnSetPreference = this.onSetPreference.bind(this);
+
   #boundOnRotationChanging = this.onRotationChanging.bind(this);
 
   #previousStates = {
@@ -782,6 +786,7 @@ class AnnotationEditorUIManager {
     highlightColors,
     enableHighlightFloatingButton,
     enableUpdatedAddImage,
+    enableNewAltTextWhenAddingImage,
     mlManager
   ) {
     this._signal = this.#abortController.signal;
@@ -793,6 +798,7 @@ class AnnotationEditorUIManager {
     this._eventBus._on("pagechanging", this.#boundOnPageChanging);
     this._eventBus._on("scalechanging", this.#boundOnScaleChanging);
     this._eventBus._on("rotationchanging", this.#boundOnRotationChanging);
+    this._eventBus._on("setpreference", this.#boundOnSetPreference);
     this.#addSelectionListener();
     this.#addDragAndDropListeners();
     this.#addKeyboardManager();
@@ -802,6 +808,7 @@ class AnnotationEditorUIManager {
     this.#highlightColors = highlightColors || null;
     this.#enableHighlightFloatingButton = enableHighlightFloatingButton;
     this.#enableUpdatedAddImage = enableUpdatedAddImage;
+    this.#enableNewAltTextWhenAddingImage = enableNewAltTextWhenAddingImage;
     this.#mlManager = mlManager || null;
     this.viewParameters = {
       realScale: PixelsPerInch.PDF_TO_CSS_UNITS,
@@ -871,6 +878,10 @@ class AnnotationEditorUIManager {
     return this.#enableUpdatedAddImage;
   }
 
+  get useNewAltTextWhenAddingImage() {
+    return this.#enableNewAltTextWhenAddingImage;
+  }
+
   get hcmFilter() {
     return shadow(
       this,
@@ -944,6 +955,13 @@ class AnnotationEditorUIManager {
     });
   }
 
+  onSetPreference({ name, value }) {
+    if (name !== "enableNewAltTextWhenAddingImage") {
+      return;
+    }
+    this.#enableNewAltTextWhenAddingImage = value;
+  }
+
   onPageChanging({ pageNumber }) {
     this.#currentPageIndex = pageNumber - 1;
   }

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -1349,3 +1349,59 @@
     }
   }
 }
+
+#altTextSettingsDialog {
+  padding: 16px;
+
+  #altTextSettingsContainer {
+    display: flex;
+    width: 573px;
+    flex-direction: column;
+    gap: 16px;
+
+    .mainContainer {
+      gap: 16px;
+    }
+
+    .description {
+      color: var(--text-secondary-color);
+    }
+
+    #aiModelSettings {
+      display: flex;
+      flex-direction: row;
+      gap: 12px;
+
+      &.download {
+        #deleteModelButton {
+          display: none;
+        }
+      }
+
+      &:not(.download) {
+        #downloadModelButton {
+          display: none;
+        }
+      }
+    }
+
+    #automaticAltText,
+    #altTextEditor {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    #createModelDescription,
+    #aiModelSettings,
+    #showAltTextDialogDescription {
+      padding-inline-start: 40px;
+    }
+
+    #automaticSettings {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  }
+}
diff --git a/web/app.js b/web/app.js
@@ -59,12 +59,15 @@ import {
 import { AppOptions, OptionKind } from "./app_options.js";
 import { EventBus, FirefoxEventBus } from "./event_utils.js";
 import { ExternalServices, initCom, MLManager } from "web-external_services";
+import {
+  ImageAltTextSettings,
+  NewAltTextManager,
+} from "web-new_alt_text_manager";
 import { LinkTarget, PDFLinkService } from "./pdf_link_service.js";
 import { AltTextManager } from "web-alt_text_manager";
 import { AnnotationEditorParams } from "web-annotation_editor_params";
 import { CaretBrowsingMode } from "./caret_browsing.js";
 import { DownloadManager } from "web-download_manager";
-import { NewAltTextManager } from "web-new_alt_text_manager";
 import { OverlayManager } from "./overlay_manager.js";
 import { PasswordPrompt } from "./password_prompt.js";
 import { PDFAttachmentViewer } from "web-pdf_attachment_viewer";
@@ -151,6 +154,8 @@ const PDFViewerApplication = {
   l10n: null,
   /** @type {AnnotationEditorParams} */
   annotationEditorParams: null,
+  /** @type {ImageAltTextSettings} */
+  imageAltTextSettings: null,
   isInitialViewSet: false,
   isViewerEmbedded: window.parent !== window,
   url: "",
@@ -206,17 +211,23 @@ const PDFViewerApplication = {
       if (mode) {
         document.documentElement.classList.add(mode);
       }
-      if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
-        if (AppOptions.get("enableFakeMLManager")) {
-          this.mlManager =
-            MLManager.getFakeMLManager?.({
-              enableGuessAltText: AppOptions.get("enableGuessAltText"),
-            }) || null;
-        }
+      // if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) {
+      if (AppOptions.get("enableFakeMLManager")) {
+        this.mlManager =
+          MLManager.getFakeMLManager?.({
+            enableGuessAltText: AppOptions.get("enableGuessAltText"),
+            enableAltTextModelDownload: AppOptions.get(
+              "enableAltTextModelDownload"
+            ),
+          }) || null;
       }
+      // }
     } else if (AppOptions.get("enableAltText")) {
       // We want to load the image-to-text AI engine as soon as possible.
       this.mlManager = new MLManager({
+        enableAltTextModelDownload: AppOptions.get(
+          "enableAltTextModelDownload"
+        ),
         enableGuessAltText: AppOptions.get("enableGuessAltText"),
         altTextLearnMoreUrl: AppOptions.get("altTextLearnMoreUrl"),
       });
@@ -390,12 +401,12 @@ const PDFViewerApplication = {
         externalServices,
         AppOptions.get("isInAutomation")
       );
-      if (this.mlManager) {
-        this.mlManager.eventBus = eventBus;
-      }
     } else {
       eventBus = new EventBus();
     }
+    if (this.mlManager) {
+      this.mlManager.eventBus = eventBus;
+    }
     this.eventBus = eventBus;
 
     this.overlayManager = new OverlayManager();
@@ -445,7 +456,11 @@ const PDFViewerApplication = {
     let altTextManager;
     if (AppOptions.get("enableUpdatedAddImage")) {
       altTextManager = appConfig.newAltTextDialog
-        ? new NewAltTextManager(appConfig.newAltTextDialog, this.overlayManager)
+        ? new NewAltTextManager(
+            appConfig.newAltTextDialog,
+            this.overlayManager,
+            eventBus
+          )
         : null;
     } else {
       altTextManager = appConfig.altTextDialog
@@ -479,6 +494,9 @@ const PDFViewerApplication = {
         "enableHighlightFloatingButton"
       ),
       enableUpdatedAddImage: AppOptions.get("enableUpdatedAddImage"),
+      enableNewAltTextWhenAddingImage: AppOptions.get(
+        "enableNewAltTextWhenAddingImage"
+      ),
       imageResourcesPath: AppOptions.get("imageResourcesPath"),
       enablePrintAutoRotate: AppOptions.get("enablePrintAutoRotate"),
       maxCanvasPixels: AppOptions.get("maxCanvasPixels"),
@@ -539,6 +557,15 @@ const PDFViewerApplication = {
       }
     }
 
+    if (appConfig.secondaryToolbar?.imageAltTextSettingsButton) {
+      this.imageAltTextSettings = new ImageAltTextSettings(
+        appConfig.altTextSettingsDialog,
+        this.overlayManager,
+        eventBus,
+        this.mlManager
+      );
+    }
+
     if (appConfig.documentProperties) {
       this.pdfDocumentProperties = new PDFDocumentProperties(
         appConfig.documentProperties,
@@ -579,6 +606,12 @@ const PDFViewerApplication = {
     }
 
     if (appConfig.secondaryToolbar) {
+      if (AppOptions.get("enableAltText")) {
+        appConfig.secondaryToolbar.imageAltTextSettingsButton?.classList.remove(
+          "hidden"
+        );
+      }
+
       this.secondaryToolbar = new SecondaryToolbar(
         appConfig.secondaryToolbar,
         eventBus
@@ -1914,6 +1947,9 @@ const PDFViewerApplication = {
     eventBus._on("scrollmodechanged", webViewerScrollModeChanged, { signal });
     eventBus._on("switchspreadmode", webViewerSwitchSpreadMode, { signal });
     eventBus._on("spreadmodechanged", webViewerSpreadModeChanged, { signal });
+    eventBus._on("imagealttextsettings", webViewerImageAltTextSettings, {
+      signal,
+    });
     eventBus._on("documentproperties", webViewerDocumentProperties, { signal });
     eventBus._on("findfromurlhash", webViewerFindFromUrlHash, { signal });
     eventBus._on("updatefindmatchescount", webViewerUpdateFindMatchesCount, {
@@ -1934,6 +1970,12 @@ const PDFViewerApplication = {
         { signal }
       );
       eventBus._on("reporttelemetry", webViewerReportTelemetry, { signal });
+    }
+    if (
+      typeof PDFJSDev === "undefined" ||
+      PDFJSDev.test("TESTING") ||
+      PDFJSDev.test("MOZCENTRAL")
+    ) {
       eventBus._on("setpreference", webViewerSetPreference, { signal });
     }
   },
@@ -2470,6 +2512,15 @@ function webViewerDocumentProperties() {
   PDFViewerApplication.pdfDocumentProperties?.open();
 }
 
+async function webViewerImageAltTextSettings() {
+  PDFViewerApplication.imageAltTextSettings?.open({
+    enableGuessAltText: AppOptions.get("enableGuessAltText"),
+    enableNewAltTextWhenAddingImage: AppOptions.get(
+      "enableNewAltTextWhenAddingImage"
+    ),
+  });
+}
+
 function webViewerFindFromUrlHash(evt) {
   PDFViewerApplication.eventBus.dispatch("find", {
     source: evt.source,

diff --git a/web/app_options.js b/web/app_options.js
@@ -187,7 +187,17 @@ const defaultOptions = {
   },
   enableAltText: {
     /** @type {boolean} */
-    value: false,
+    value: true,
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  },
+  enableAltTextModelDownload: {
+    /** @type {boolean} */
+    value: true,
+    kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
+  },
+  enableNewAltTextWhenAddingImage: {
+    /** @type {boolean} */
+    value: true,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
   enableGuessAltText: {
@@ -231,7 +241,7 @@ const defaultOptions = {
     // in Firefox release, but it has to be temporary.
     // TODO: remove it when unnecessary.
     /** @type {boolean} */
-    value: false,
+    value: true,
     kind: OptionKind.VIEWER + OptionKind.PREFERENCE,
   },
   externalLinkRel: {