Bug 1829691 - Add Translations settings menuitems r=gregtatum,fluent-…

…reviewers,flod

Adds new menuitems to the Translations panel settings
menu for always translate language, never translate
language, and never translate site.

Depends on D177855

Differential Revision: https://phabricator.services.mozilla.com/D177856

browser/components/translations/content/translationsPanel.inc.xhtml

@@ -28,6 +28,21 @@
                        oncommand="TranslationsPanel.openSettingsPopup(this)">
           <image class="translations-panel-gear-icon" />
           <menupopup id="translations-panel-settings-popup">
+            <menuitem class="always-translate-language-menuitem"
+                      data-l10n-id="translations-panel-settings-always-translate-language"
+                      data-l10n-args='{"language": ""}'
+                      type="checkbox"
+                      checked="false"/>
+            <menuitem class="never-translate-language-menuitem"
+                      data-l10n-id="translations-panel-settings-never-translate-language"
+                      data-l10n-args='{"language": ""}'
+                      type="checkbox"
+                      checked="false"/>
+            <menuitem class="never-translate-site-menuitem"
+                      data-l10n-id="translations-panel-settings-never-translate-site"
+                      type="checkbox"
+                      checked="false"/>
+            <menuseparator/>
             <menuitem data-l10n-id="translations-panel-settings-change-source-language"
                       class="translations-panel-change-source"
                       oncommand="TranslationsPanel.showDualView()"/>

browser/components/translations/content/translationsPanel.js

@@ -134,6 +134,21 @@ var TranslationsPanel = new (class {
     return actor;
   }
 
+  /**
+   * Returns the cached, detected language tag of the document if available.
+   * Otherwise, attempts to retrieve the detected language tag for the document.
+   *
+   * @returns {Promise<string | null>} A BCP-47 language tag
+   */
+  async #getDocLangTag() {
+    if (!this.#docLangTag) {
+      const { docLangTag } =
+        await this.#getTranslationsActor().getLangTagsForTranslation();
+      this.#docLangTag = docLangTag;
+    }
+    return this.#docLangTag;
+  }
+
   /**
    * @type {"initialized" | "error" | "uninitialized"}
    */
@@ -318,6 +333,38 @@ var TranslationsPanel = new (class {
     }
   }
 
+  /**
+   * Populates the language-related settings menuitems by adding the
+   * localized display name of the document's detected language tag.
+   */
+  async #populateSettingsMenuItems() {
+    const docLangTag = await this.#getDocLangTag();
+    const displayNames = new Services.intl.DisplayNames(undefined, {
+      type: "language",
+    });
+    const docLangDisplayName = displayNames.of(docLangTag);
+
+    const { panel } = this.elements;
+
+    const alwaysTranslateMenuItems = panel.querySelectorAll(
+      ".always-translate-language-menuitem"
+    );
+    const neverTranslateMenuItems = panel.querySelectorAll(
+      ".never-translate-language-menuitem"
+    );
+
+    for (const menuitem of alwaysTranslateMenuItems) {
+      document.l10n.setArgs(menuitem, {
+        language: docLangDisplayName,
+      });
+    }
+    for (const menuitem of neverTranslateMenuItems) {
+      document.l10n.setArgs(menuitem, {
+        language: docLangDisplayName,
+      });
+    }
+  }
+
   /**
    * Configures the panel for the user to reset the page after it has been translated.
    *
@@ -394,6 +441,7 @@ var TranslationsPanel = new (class {
       });
     }
 
+    this.#populateSettingsMenuItems();
     PanelMultiView.openPopup(panel, button, {
       position: "bottomright topright",
       triggerEvent: event,
@@ -407,7 +455,8 @@ var TranslationsPanel = new (class {
     PanelMultiView.hidePopup(this.elements.panel);
 
     const actor = this.#getTranslationsActor();
-    actor.translate(this.#docLangTag, this.elements.defaultToMenuList.value);
+    const docLangTag = await this.#getDocLangTag();
+    actor.translate(docLangTag, this.elements.defaultToMenuList.value);
   }
 
   /**
@@ -431,7 +480,8 @@ var TranslationsPanel = new (class {
     PanelMultiView.hidePopup(this.elements.panel);
 
     const actor = this.#getTranslationsActor();
-    actor.translate(this.#docLangTag, this.elements.revisitMenuList.value);
+    const docLangTag = await this.#getDocLangTag();
+    actor.translate(docLangTag, this.elements.revisitMenuList.value);
   }
 
   onCancel() {
@@ -458,11 +508,11 @@ var TranslationsPanel = new (class {
   /**
    * Handle the restore button being clicked.
    */
-  onRestore() {
+  async onRestore() {
     const { panel } = this.elements;
     PanelMultiView.hidePopup(panel);
-
-    this.#getTranslationsActor().restorePage();
+    const docLangTag = await this.#getDocLangTag();
+    this.#getTranslationsActor().restorePage(docLangTag);
   }
 
   /**

browser/locales-preview/translations.ftl

@@ -47,6 +47,22 @@ translations-panel-error-translating = There was a problem translating. Please t
 translations-panel-error-load-languages = Couldn’t load languages
 translations-panel-error-load-languages-hint = Check your internet connection and try again.
 
+# Text displayed for the option to always translate a given language
+# Variables:
+#   $language (string) - The localized display name of the detected language
+translations-panel-settings-always-translate-language =
+  .label = Always translate { $language }
+
+# Text displayed for the option to never translate a given language
+# Variables:
+#   $language (string) - The localized display name of the detected language
+translations-panel-settings-never-translate-language =
+  .label = Never translate { $language }
+
+# Text displayed for the option to never translate this website
+translations-panel-settings-never-translate-site =
+  .label = Never translate this site
+
 ## The translation panel appears from the url bar, and this view is the "dual" translate
 ## view that lets you choose a source language and target language for translation