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

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": ""

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,28 @@ 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-image-alt-text-settings-button =
+    .title = Image alt text settings
+pdfjs-image-alt-text-settings-button-label = 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

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

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,17 +786,21 @@ class AnnotationEditorUIManager {
     highlightColors,
     enableHighlightFloatingButton,
     enableUpdatedAddImage,
+    enableNewAltTextWhenAddingImage,
     mlManager
   ) {
-    this._signal = this.#abortController.signal;
+    const signal = (this._signal = this.#abortController.signal);
     this.#container = container;
     this.#viewer = viewer;
     this.#altTextManager = altTextManager;
     this._eventBus = eventBus;
-    this._eventBus._on("editingaction", this.#boundOnEditingAction);
-    this._eventBus._on("pagechanging", this.#boundOnPageChanging);
-    this._eventBus._on("scalechanging", this.#boundOnScaleChanging);
-    this._eventBus._on("rotationchanging", this.#boundOnRotationChanging);
+    this._eventBus._on("editingaction", this.#boundOnEditingAction, { signal });
+    this._eventBus._on("pagechanging", this.#boundOnPageChanging, { signal });
+    this._eventBus._on("scalechanging", this.#boundOnScaleChanging, { signal });
+    this._eventBus._on("rotationchanging", this.#boundOnRotationChanging, {
+      signal,
+    });
+    this._eventBus._on("setpreference", this.#boundOnSetPreference, { signal });
     this.#addSelectionListener();
     this.#addDragAndDropListeners();
     this.#addKeyboardManager();
@@ -802,6 +810,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,
@@ -825,10 +834,6 @@ class AnnotationEditorUIManager {
     this.#abortController = null;
     this._signal = null;
 
-    this._eventBus._off("editingaction", this.#boundOnEditingAction);
-    this._eventBus._off("pagechanging", this.#boundOnPageChanging);
-    this._eventBus._off("scalechanging", this.#boundOnScaleChanging);
-    this._eventBus._off("rotationchanging", this.#boundOnRotationChanging);
     for (const layer of this.#allLayers.values()) {
       layer.destroy();
     }
@@ -871,6 +876,10 @@ class AnnotationEditorUIManager {
     return this.#enableUpdatedAddImage;
   }
 
+  get useNewAltTextWhenAddingImage() {
+    return this.#enableNewAltTextWhenAddingImage;
+  }
+
   get hcmFilter() {
     return shadow(
       this,
@@ -944,6 +953,14 @@ class AnnotationEditorUIManager {
     });
   }
 
+  onSetPreference({ name, value }) {
+    switch (name) {
+      case "enableNewAltTextWhenAddingImage":
+        this.#enableNewAltTextWhenAddingImage = value;
+        break;
+    }
+  }
+
   onPageChanging({ pageNumber }) {
     this.#currentPageIndex = pageNumber - 1;
   }

web/annotation_editor_layer_builder.css

@@ -1349,3 +1349,63 @@
     }
   }
 }
+
+#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: column;
+      gap: 12px;
+
+      button {
+        width: fit-content;
+      }
+
+      &.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;
+    }
+  }
+}

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: "",
@@ -211,13 +216,19 @@ const PDFViewerApplication = {
           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({
         enableGuessAltText: AppOptions.get("enableGuessAltText"),
+        enableAltTextModelDownload: AppOptions.get(
+          "enableAltTextModelDownload"
+        ),
         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,15 @@ const PDFViewerApplication = {
     }
 
     if (appConfig.secondaryToolbar) {
+      if (AppOptions.get("enableAltText")) {
+        appConfig.secondaryToolbar.imageAltTextSettingsButton?.classList.remove(
+          "hidden"
+        );
+        appConfig.secondaryToolbar.imageAltTextSettingsSeparator?.classList.remove(
+          "hidden"
+        );
+      }
+
       this.secondaryToolbar = new SecondaryToolbar(
         appConfig.secondaryToolbar,
         eventBus
@@ -1914,6 +1950,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 +1973,11 @@ const PDFViewerApplication = {
         { signal }
       );
       eventBus._on("reporttelemetry", webViewerReportTelemetry, { signal });
+    }
+    if (
+      typeof PDFJSDev === "undefined" ||
+      PDFJSDev.test("TESTING || MOZCENTRAL")
+    ) {
       eventBus._on("setpreference", webViewerSetPreference, { signal });
     }
   },
@@ -2470,6 +2514,15 @@ function webViewerDocumentProperties() {
   PDFViewerApplication.pdfDocumentProperties?.open();
 }
 
+function webViewerImageAltTextSettings() {
+  PDFViewerApplication.imageAltTextSettings?.open({
+    enableGuessAltText: AppOptions.get("enableGuessAltText"),
+    enableNewAltTextWhenAddingImage: AppOptions.get(
+      "enableNewAltTextWhenAddingImage"
+    ),
+  });
+}
+
 function webViewerFindFromUrlHash(evt) {
   PDFViewerApplication.eventBus.dispatch("find", {
     source: evt.source,