From 1fcecb153b406fbc87aa27f8169a26fc79ad55a7 Mon Sep 17 00:00:00 2001
From: Meera Murthy <colorcodedcrayons@gmail.com>
Date: Fri, 19 Jul 2024 15:11:22 +0000
Subject: [PATCH] Bug 1881259 - [translations] Ensure Secondary Translation
 Settings interacts with Preferences.
 r=nordzilla,fluent-reviewers,settings-reviewers,desktop-theme-reviewers,translations-reviewers,bolsson,dao,Gijs

Differential Revision: https://phabricator.services.mozilla.com/D203097
---
 .../preferences/translations.inc.xhtml        |    2 +-
 .../components/preferences/translations.js    | 1133 ++++++++++++++---
 ...nslations_about_preferences_settings_ui.js |  496 +++++++-
 browser/locales-preview/translations.ftl      |    9 +
 .../shared/preferences/translations.css       |   17 +-
 .../actors/TranslationsParent.sys.mjs         |   52 +-
 .../translations/tests/browser/shared-head.js |   12 +
 7 files changed, 1463 insertions(+), 258 deletions(-)

diff --git a/browser/components/preferences/translations.inc.xhtml b/browser/components/preferences/translations.inc.xhtml
index 1143cbc6d078..c7f27b45a59d 100644
--- a/browser/components/preferences/translations.inc.xhtml
+++ b/browser/components/preferences/translations.inc.xhtml
@@ -68,7 +68,7 @@
       <h3 class="translations-settings-language-header" data-l10n-id="translations-settings-language-header"></h3>
       <div class="translations-settings-language-list">
         <div class="translations-settings-language">
-          <moz-button class="translations-settings-download-icon" type="ghost icon"
+          <moz-button class="translations-settings-download-icon translations-settings-manage-downloaded-language-button" type="ghost icon"
                       aria-label="translations-settings-download-all-languages"></moz-button>
           <!--  The option to "All languages" is added here.
                 In translations.js the option to download individual languages is
diff --git a/browser/components/preferences/translations.js b/browser/components/preferences/translations.js
index 1bfa021d5968..172b71dfad73 100644
--- a/browser/components/preferences/translations.js
+++ b/browser/components/preferences/translations.js
@@ -4,12 +4,63 @@
 
 /* import-globals-from preferences.js */
 
-ChromeUtils.defineESModuleGetters(this, {
-  TranslationsParent: "resource://gre/actors/TranslationsParent.sys.mjs",
-});
+/**
+ * The permission type to give to Services.perms for Translations.
+ */
+const TRANSLATIONS_PERMISSION = "translations";
+
+/**
+ * The list of BCP-47 language tags that will trigger auto-translate.
+ */
+const ALWAYS_TRANSLATE_LANGS_PREF =
+  "browser.translations.alwaysTranslateLanguages";
+
+/**
+ * The list of BCP-47 language tags that will prevent auto-translate.
+ */
+const NEVER_TRANSLATE_LANGS_PREF =
+  "browser.translations.neverTranslateLanguages";
 
 let gTranslationsPane = {
-  init() {
+  /**
+   * List of languages set in the Always Translate Preferences
+   * @type Array<string>
+   */
+  alwaysTranslateLanguages: [],
+
+  /**
+   * List of languages set in the Never Translate Preferences
+   * @type Array<string>
+   */
+  neverTranslateLanguages: [],
+
+  /**
+   * List of languages set in the Never Translate Site Preferences
+   * @type Array<string>
+   */
+  neverTranslateSites: [],
+
+  /**
+   * A mapping from the language tag to the current download phase for that language
+   * and it's download size.
+   * @type {Map<string, {downloadPhase: "downloaded" | "uninstalled" | "loading", size: number}>}
+   */
+  downloadPhases: new Map(),
+
+  /**
+   * Object with details of languages supported by the browser namely
+   * languagePairs, fromLanguages, toLanguages
+   * @type {object} supportedLanguages
+   */
+  supportedLanguages: {},
+
+  /**
+   * List of languages names supported along with their tags (BCP 47 locale identifiers).
+   * @type Array<{ langTag: string, displayName: string}>
+   */
+  supportedLanguageTagsNames: [],
+
+  async init() {
     document
       .getElementById("translations-settings-back-button")
       .addEventListener("click", function () {
@@ -18,27 +69,66 @@ let gTranslationsPane = {
 
     document
       .getElementById("translations-settings-always-translate-list")
-      .addEventListener("command", this.addAlwaysLanguage);
+      .addEventListener("command", this);
 
     document
       .getElementById("translations-settings-never-translate-list")
-      .addEventListener("command", this.addNeverLanguage);
+      .addEventListener("command", this);
 
+    // Get the settings from the preferences into the translations.js
+    this.supportedLanguages = await TranslationsParent.getSupportedLanguages();
+    this.supportedLanguageTagsNames = TranslationsParent.getLanguageList(
+      this.supportedLanguages
+    );
+    this.alwaysTranslateLanguages =
+      TranslationsParent.getAlwaysTranslateLanguages();
+    this.neverTranslateLanguages =
+      TranslationsParent.getNeverTranslateLanguages();
+
+    this.neverTranslateSites = TranslationsParent.listNeverTranslateSites();
+
+    // Deploy observers
+    Services.obs.addObserver(this, "perm-changed");
+    Services.obs.addObserver(
+      this,
+      "translations:always-translate-languages-changed"
+    );
+    Services.obs.addObserver(
+      this,
+      "translations:never-translate-languages-changed"
+    );
+    window.addEventListener("unload", () => this.removeObservers());
+
+    // Build the HTML elements
     this.buildLanguageDropDowns();
+    this.populateLanguageList(ALWAYS_TRANSLATE_LANGS_PREF);
+    this.populateLanguageList(NEVER_TRANSLATE_LANGS_PREF);
+    this.populateSiteList();
+
+    await this.initDownloadInfo();
     this.buildDownloadLanguageList();
+
+    // The translations settings page takes a long time to initialize
+    // This event can be used to wait until the initialization is done.
+    document.dispatchEvent(
+      new CustomEvent("translationsSettingsInit", {
+        bubbles: true,
+        cancelable: true,
+      })
+    );
   },
 
   /**
-   * Populate the Drop down list with the list of supported languages
+   * Populate the Drop down list in <menupopup> with the list of supported languages
    * for the user to choose languages to add to Always translate and
    * Never translate settings list.
    */
-  async buildLanguageDropDowns() {
-    const { fromLanguages } = await TranslationsParent.getSupportedLanguages();
-    let alwaysLangPopup = document.getElementById(
+  buildLanguageDropDowns() {
+    const { fromLanguages } = this.supportedLanguages;
+    const alwaysLangPopup = document.getElementById(
       "translations-settings-always-translate-popup"
     );
-    let neverLangPopup = document.getElementById(
+    const neverLangPopup = document.getElementById(
       "translations-settings-never-translate-popup"
     );
 
@@ -54,117 +144,546 @@ let gTranslationsPane = {
     }
   },
 
+  /**
+   * Initializes the downloadPhases by checking the download status of each language.
+   *
+   * @see gTranslationsPane.downloadPhases
+   */
+  async initDownloadInfo() {
+    let downloadCount = 0;
+    let allDownloadSize = 0;
+
+    this.downloadPhases = new Map();
+    for (const language of this.supportedLanguageTagsNames) {
+      let downloadSize = await TranslationsParent.getLanguageSize(
+        language.langTag
+      );
+      allDownloadSize += downloadSize;
+      const hasAllFilesForLanguage =
+        await TranslationsParent.hasAllFilesForLanguage(language.langTag);
+      const downloadPhase = hasAllFilesForLanguage
+        ? "downloaded"
+        : "uninstalled";
+      this.downloadPhases.set(language.langTag, {
+        downloadPhase,
+        size: downloadSize,
+      });
+      downloadCount += downloadPhase === "downloaded" ? 1 : 0;
+    }
+    const allDownloadPhase =
+      downloadCount === this.supportedLanguageTagsNames.length
+        ? "downloaded"
+        : "uninstalled";
+    this.downloadPhases.set("all", {
+      downloadPhase: allDownloadPhase,
+      size: allDownloadSize,
+    });
+  },
+
   /**
    * Show a list of languages for the user to be able to install
    * and uninstall language models for local translation.
    */
-  async buildDownloadLanguageList() {
-    const supportedLanguages = await TranslationsParent.getSupportedLanguages();
-    const languageList = TranslationsParent.getLanguageList(supportedLanguages);
-
-    let installList = document.querySelector(
-      ".translations-settings-language-list"
+  buildDownloadLanguageList() {
+    const installList = document.querySelector(
+      "#translations-settings-download-section .translations-settings-language-list"
     );
 
+    function createSizeElement(downloadSize) {
+      const languageSize = document.createElement("span");
+      languageSize.classList.add("translations-settings-download-size");
+      const [size, units] = DownloadUtils.convertByteUnits(downloadSize);
+
+      document.l10n.setAttributes(
+        languageSize,
+        "translations-settings-download-size",
+        {
+          size: size + " " + units,
+        }
+      );
+      return languageSize;
+    }
+
     // The option to download "All languages" is added in xhtml.
     // Here the option to download individual languages is dynamically added
     // based on the supported language list
-    installList
-      .querySelector("moz-button")
-      .addEventListener("click", installLanguage);
+    const allLangElement = installList.children[0];
+    let allLangButton = allLangElement.querySelector("moz-button");
 
-    for (const language of languageList) {
-      const languageElement = document.createElement("div");
-      languageElement.classList.add("translations-settings-language");
+    allLangButton.addEventListener("click", this);
 
-      const languageLabel = document.createElement("label");
-      languageLabel.textContent = language.displayName;
-      languageLabel.setAttribute("value", language.langTag);
-      // Using the language tag suffix to create unique id for each language
-      languageLabel.id = "translations-settings-download-" + language.langTag;
+    for (const language of this.supportedLanguageTagsNames) {
+      const downloadSize = this.downloadPhases.get(language.langTag).size;
 
-      const installButton = document.createElement("moz-button");
-      installButton.classList.add("translations-settings-download-icon");
-      installButton.setAttribute("type", "ghost icon");
-      installButton.addEventListener("click", installLanguage);
-      installButton.setAttribute("aria-label", languageLabel.id);
+      const languageSize = createSizeElement(downloadSize);
 
-      languageElement.appendChild(installButton);
-      languageElement.appendChild(languageLabel);
+      const languageLabel = this.createLangLabel(
+        language.displayName,
+        language.langTag,
+        "translations-settings-download-" + language.langTag
+      );
+
+      const isDownloaded =
+        this.downloadPhases.get(language.langTag).downloadPhase ===
+        "downloaded";
+
+      const mozButton = isDownloaded
+        ? this.createIconButton(
+            [
+              "translations-settings-delete-icon",
+              "translations-settings-manage-downloaded-language-button",
+            ],
+            languageLabel.id
+          )
+        : this.createIconButton(
+            [
+              "translations-settings-download-icon",
+              "translations-settings-manage-downloaded-language-button",
+            ],
+            languageLabel.id
+          );
+
+      const languageElement = this.createLangElement([
+        mozButton,
+        languageLabel,
+        languageSize,
+      ]);
       installList.appendChild(languageElement);
     }
+
+    // Updating "All Language" download button according to the state
+    if (this.downloadPhases.get("all").downloadPhase === "downloaded") {
+      this.changeButtonState(
+        allLangButton,
+        "translations-settings-download-icon",
+        "translations-settings-delete-icon"
+      );
+    }
+
+    const allDownloadSize = this.downloadPhases.get("all").size;
+    const languageSize = createSizeElement(allDownloadSize);
+
+    allLangElement.appendChild(languageSize);
+  },
+
+  handleEvent(event) {
+    const eventNode = event.target;
+    const eventNodeParent = eventNode.parentNode;
+    const eventNodeClassList = eventNode.classList;
+    switch (event.type) {
+      case "command":
+        if (
+          eventNodeParent.id === "translations-settings-always-translate-popup"
+        ) {
+          this.addAlwaysLanguage(event);
+        } else if (
+          eventNodeParent.id === "translations-settings-never-translate-popup"
+        ) {
+          this.addNeverLanguage(event);
+        }
+        break;
+      case "click":
+        if (eventNodeClassList.contains("translations-settings-site-button")) {
+          this.deleteNeverTranslateSite(event);
+        } else if (
+          eventNodeClassList.contains(
+            "translations-settings-language-never-button"
+          )
+        ) {
+          this.deleteNeverTranslateLanguage(event);
+        } else if (
+          eventNodeClassList.contains(
+            "translations-settings-language-always-button"
+          )
+        ) {
+          this.deleteAlwaysTranslateLanguage(event);
+        } else if (
+          eventNodeClassList.contains(
+            "translations-settings-manage-downloaded-language-button"
+          )
+        ) {
+          if (
+            eventNodeClassList.contains("translations-settings-download-icon")
+          ) {
+            if (
+              eventNodeParent.querySelector("label").id ===
+              "translations-settings-download-all-languages"
+            ) {
+              this.handleInstallAll(event);
+            } else {
+              this.installLanguage(event);
+            }
+          } else if (
+            eventNodeClassList.contains("translations-settings-delete-icon")
+          ) {
+            if (
+              eventNodeParent.querySelector("label").id ===
+              "translations-settings-download-all-languages"
+            ) {
+              this.handleUninstallAll(event);
+            } else {
+              this.unInstallLanguage(event);
+            }
+          }
+        }
+        break;
+    }
   },
 
   /**
    * Event handler when the user wants to add a language to
-   * Always translate settings list.
+   * Always translate settings preferences list.
+   * @param {Event} event
    */
-  addAlwaysLanguage(event) {
-    /* TODO:
-    The function addLanguage adds the HTML element.
-    It will be moved to the observer in the next Bug - 1881259 .
-    It is here just to test the UI.
-    For now a language can be added multiple times.
+  async addAlwaysLanguage(event) {
+    // After a language is selected the menulist button display will be set to the
+    // selected langauge. After processing the button event the
+    // data-l10n-id of the menulist button is restored to "Add Language"
+    const menuList = document
+      .getElementById("translations-settings-always-translate-section")
+      .querySelector("menulist");
 
-    In the next bug we will maintain a local state of preferences.
-    When a language is added or removed, the user event updates the preferences in the Services,
-    This triggers the observer which compares the preferences in the local state and the
-    preferences in the Services and adds or removes the language in the local state and updates the
-     UI to reflect the updated Preferences in the Services.
-    */
-    addLanguage(
-      event,
-      "translations-settings-always-translate-section",
-      deleteAlwaysLanguage
+    TranslationsParent.addLangTagToPref(
+      event.target.getAttribute("value"),
+      ALWAYS_TRANSLATE_LANGS_PREF
     );
+    await document.l10n.translateElements([menuList]);
   },
 
   /**
    * Event handler when the user wants to add a language to
-   * Never translate settings list.
+   * Never translate settings preferences list.
+   * @param {Event} event
    */
-  addNeverLanguage(event) {
-    /* TODO:
-    The function addLanguage adds the HTML element.
-    It will be moved to the observer in the next Bug - 1881259 .
-    It is here just to test the UI.
-    For now a language can be added multiple times.
+  async addNeverLanguage(event) {
+    // After a language is selected the menulist button display will be set to the
+    // selected langauge. After processing the button event the
+    // data-l10n-id of the menulist button is restored to "Add Language"
+    const menuList = document
+      .getElementById("translations-settings-never-translate-section")
+      .querySelector("menulist");
 
-    In the next bug we will maintain a local state of preferences.
-    When a language is added or removed, the user event updates the preferences in the Services,
-    This triggers the observer which compares the preferences in the local state and the
-    preferences in the Services and adds or removes the language in the local state and updates the
-     UI to reflect the updated Preferences in the Services.
-    */
-    addLanguage(
-      event,
-      "translations-settings-never-translate-section",
-      deleteNeverLanguage
+    TranslationsParent.addLangTagToPref(
+      event.target.getAttribute("value"),
+      NEVER_TRANSLATE_LANGS_PREF
+    );
+    await document.l10n.translateElements([menuList]);
+  },
+
+  /**
+   * Finds the langauges added and/or removed in the
+   * Always/Never translate lists.
+   * @param {Array<string>} currentSet
+   * @param {Array<string>} newSet
+   * @returns {Object} {Array<string>, Array<string>}
+   */
+  setDifference(currentSet, newSet) {
+    const added = newSet.filter(lang => !currentSet.includes(lang));
+    const removed = currentSet.filter(lang => !newSet.includes(lang));
+    return { added, removed };
+  },
+
+  /**
+   * Builds HTML elements for the Always/Never translate list
+   * According to the preference setting
+   * @param {string} pref name of the preference for which the HTML is built
+   */
+  populateLanguageList(pref) {
+    // sectionId: HTML ID of the section, Always/Never translate to be populated
+    // curLangTags: List of Language tag set in the the preference, Always/Never translate to be populated
+    // otherPref: name of the preference other than "pref" Never/Always
+    // when a language is added to "pref" remove the same from otherPref(if it exists)
+    const { sectionId, curLangTags, otherPref } =
+      pref === NEVER_TRANSLATE_LANGS_PREF
+        ? {
+            sectionId: "translations-settings-never-translate-section",
+            curLangTags: Array.from(this.neverTranslateLanguages),
+            otherPref: ALWAYS_TRANSLATE_LANGS_PREF,
+          }
+        : {
+            sectionId: "translations-settings-always-translate-section",
+            curLangTags: Array.from(this.alwaysTranslateLanguages),
+            otherPref: NEVER_TRANSLATE_LANGS_PREF,
+          };
+
+    const updatedLangTags =
+      pref === NEVER_TRANSLATE_LANGS_PREF
+        ? Array.from(TranslationsParent.getNeverTranslateLanguages())
+        : Array.from(TranslationsParent.getAlwaysTranslateLanguages());
+
+    const { added, removed } = this.setDifference(curLangTags, updatedLangTags);
+
+    const translateSection = document.getElementById(sectionId);
+    const languageList = translateSection.querySelector(
+      ".translations-settings-language-list label"
+    );
+
+    for (const lang of removed) {
+      this.removeLanguage(lang, sectionId);
+    }
+
+    // if a language is added to Always translate list,
+    // remove it from Never translate list and vice-versa
+    if (languageList) {
+      for (const lang of added) {
+        this.addLanguage(lang, sectionId);
+        // Remove from other list
+        TranslationsParent.removeLangTagFromPref(lang, otherPref);
+      }
+    } else {
+      // if languageList does not exist then this is the initialization
+      // phase. Add all languages from the latest preferences
+      for (const lang of updatedLangTags) {
+        this.addLanguage(lang, sectionId);
+        // Remove from other list
+        TranslationsParent.removeLangTagFromPref(lang, otherPref);
+      }
+    }
+    // Update state for neverTranslateLanguages/alwaysTranslateLanguages
+    if (pref === NEVER_TRANSLATE_LANGS_PREF) {
+      this.neverTranslateLanguages = updatedLangTags;
+    } else {
+      this.alwaysTranslateLanguages = updatedLangTags;
+    }
+  },
+
+  /**
+   * Adds a site to Never translate site list
+   * @param {string} site
+   */
+  addSite(site) {
+    const translateSection = document.getElementById(
+      "translations-settings-never-sites-section"
+    );
+    let languageList = translateSection.querySelector(
+      ".translations-settings-language-list"
+    );
+
+    // While adding the first language, add the Header and language List div
+    if (!languageList) {
+      languageList = this.addLanguageList(translateSection, languageList);
+    }
+
+    // Label and textContent of the added site element is the same
+    const languageLabel = this.createLangLabel(
+      site,
+      site,
+      "translations-settings-" + site
+    );
+
+    const mozButton = this.createIconButton(
+      [
+        "translations-settings-delete-icon",
+        "translations-settings-site-button",
+      ],
+      languageLabel.id
+    );
+
+    const languageElement = this.createLangElement([mozButton, languageLabel]);
+    languageList.insertBefore(languageElement, languageList.firstChild);
+  },
+
+  /**
+   * Removes a site from Never translate site list
+   * @param {string} site
+   */
+  removeSite(site) {
+    const translateSection = document.getElementById(
+      "translations-settings-never-sites-section"
+    );
+    const languageList = translateSection.querySelector(
+      ".translations-settings-language-list"
+    );
+
+    const langSite = languageList.querySelector(`label[value="${site}"]`);
+
+    langSite.parentNode.remove();
+    if (!languageList.childElementCount) {
+      // If there is no language in the list remove the
+      // Language Header and language list div
+      languageList.parentNode.remove();
+    }
+  },
+
+  /**
+   * Builds HTML elements for the Never translate Site list
+   * According to the permissions setting
+   */
+  populateSiteList() {
+    const siteList = TranslationsParent.listNeverTranslateSites();
+    for (const site of siteList) {
+      this.addSite(site);
+    }
+    this.neverTranslateSites = siteList;
+  },
+
+  /**
+   * Oberver
+   * @param {string} subject Notification specific interface pointer.
+   * @param {string} topic nsPref:changed/perm-changed
+   * @param {string} data cleared/changed/added/deleted
+   */
+  observe(subject, topic, data) {
+    if (topic === "perm-changed") {
+      if (data === "cleared") {
+        const translateSection = document.getElementById(
+          "translations-settings-never-sites-section"
+        );
+        const languageList = translateSection.querySelector(
+          ".translations-settings-language-list"
+        );
+        this.neverTranslateSites = [];
+        if (languageList) {
+          languageList.parentNode.remove();
+        }
+      } else {
+        const perm = subject.QueryInterface(Ci.nsIPermission);
+        if (perm.type != TRANSLATIONS_PERMISSION) {
+          // The updated permission was not for Translations, nothing to do.
+          return;
+        }
+        if (data === "added") {
+          if (perm.capability != Services.perms.DENY_ACTION) {
+            // We are only showing data for sites we should never translate.
+            // If the permission is not DENY_ACTION, we don't care about it here.
+            return;
+          }
+          this.neverTranslateSites =
+            TranslationsParent.listNeverTranslateSites();
+          this.addSite(perm.principal.origin);
+        } else if (data === "deleted") {
+          this.neverTranslateSites =
+            TranslationsParent.listNeverTranslateSites();
+          this.removeSite(perm.principal.origin);
+        }
+      }
+    } else if (topic === "translations:never-translate-languages-changed") {
+      this.populateLanguageList(NEVER_TRANSLATE_LANGS_PREF);
+    } else if (topic === "translations:always-translate-languages-changed") {
+      this.populateLanguageList(ALWAYS_TRANSLATE_LANGS_PREF);
+    }
+  },
+
+  /**
+   * Removes Observers
+   */
+  removeObservers() {
+    Services.obs.removeObserver(this, "perm-changed");
+    Services.obs.removeObserver(
+      this,
+      "translations:always-translate-languages-changed"
+    );
+    Services.obs.removeObserver(
+      this,
+      "translations:never-translate-languages-changed"
     );
   },
-};
 
-/**
- * Function to add a language selected by the user to the list of
- * Always/Never translate settings list.
- */
-async function addLanguage(event, listClass, delHandler) {
-  const translatePrefix =
-    listClass === "translations-settings-never-translate-section"
-      ? "never"
-      : "always";
-  let translateSection = document.getElementById(listClass);
-  let languageList = translateSection.querySelector(
-    ".translations-settings-language-list"
-  );
+  /**
+   * Create a div HTML element representing a language.
+   * @param {Array} langChildren
+   * @returns {Element} div HTML element
+   */
+  createLangElement(langChildren) {
+    const languageElement = document.createElement("div");
+    languageElement.classList.add("translations-settings-language");
+    for (const child of langChildren) {
+      languageElement.appendChild(child);
+    }
+    return languageElement;
+  },
 
-  // While adding the first language, add the Header and language List div
-  if (!languageList) {
-    let languageCard = document.createElement("div");
+  /**
+   * Creates a moz-button element as icon
+   * @param {string} className
+   * @param {string} ariaLabelId
+   * @returns {Element} HTML element of type Moz-Button
+   */
+  createIconButton(classNames, ariaLabelId) {
+    const mozButton = document.createElement("moz-button");
+
+    for (const className of classNames) {
+      mozButton.classList.add(className);
+    }
+    mozButton.setAttribute("type", "ghost icon");
+    // TODO (1888684): Update the aria-label using Fluent strings
+    // Note: aria-labelledby cannot be used as the id is not available for the shadow DOM element
+    mozButton.setAttribute("aria-label", ariaLabelId);
+    mozButton.addEventListener("click", this);
+    return mozButton;
+  },
+
+  /**
+   * Adds a language selected by the user to the list of
+   * Always/Never translate settings list in the HTML.
+   * @param {string} langTag
+   * @param {string} sectionId
+   */
+  addLanguage(langTag, sectionId) {
+    const translatePrefix =
+      sectionId === "translations-settings-never-translate-section"
+        ? "never"
+        : "always";
+    const translateSection = document.getElementById(sectionId);
+    let languageList = translateSection.querySelector(
+      ".translations-settings-language-list"
+    );
+
+    // While adding the first language, add the Header and language List div
+    if (!languageList) {
+      languageList = this.addLanguageList(translateSection, languageList);
+    }
+
+    const languageLabel = this.createLangLabel(
+      TranslationsParent.getLanguageDisplayName(langTag),
+      langTag,
+      "translations-settings-language-" + translatePrefix + "-" + langTag
+    );
+
+    const mozButton = this.createIconButton(
+      [
+        "translations-settings-delete-icon",
+        "translations-settings-language-" + translatePrefix + "-button",
+      ],
+      languageLabel.id
+    );
+
+    const languageElement = this.createLangElement([mozButton, languageLabel]);
+    // Add the language after the Language Header
+    languageList.insertBefore(languageElement, languageList.firstChild);
+  },
+
+  /**
+   * Creates a label HTML element representing
+   * a language
+   * @param {string} textContent
+   * @param {string} value
+   * @param {string} id
+   * @returns {Element} HTML element of type label
+   */
+  createLangLabel(textContent, value, id) {
+    const languageLabel = document.createElement("label");
+    languageLabel.textContent = textContent;
+    languageLabel.setAttribute("value", value);
+    languageLabel.id = id;
+    return languageLabel;
+  },
+
+  /**
+   * The language list in different sections of the translations setting is
+   * added only when languages/sites are added in the respective setting.
+   * This function creates and returns the language list element a HTML section
+   *
+   * @param {string} translateSection
+   * @param {Array} languageList
+   * @returns {Element} Language list element a HTML section
+   */
+  addLanguageList(translateSection, languageList) {
+    const languageCard = document.createElement("div");
     languageCard.classList.add("translations-settings-languages-card");
     translateSection.appendChild(languageCard);
 
-    let languageHeader = document.createElement("h3");
+    const languageHeader = document.createElement("h3");
     languageCard.appendChild(languageHeader);
     languageHeader.setAttribute(
       "data-l10n-id",
@@ -175,111 +694,357 @@ async function addLanguage(event, listClass, delHandler) {
     languageList = document.createElement("div");
     languageList.classList.add("translations-settings-language-list");
     languageCard.appendChild(languageList);
-  }
-  const languageElement = document.createElement("div");
-  languageElement.classList.add("translations-settings-language");
-  // Add the language after the Language Header
-  languageList.insertBefore(languageElement, languageList.firstChild);
+    return languageList;
+  },
 
-  const languageLabel = document.createElement("label");
-  languageLabel.textContent = event.target.getAttribute("label");
-  languageLabel.setAttribute("value", event.target.getAttribute("value"));
-  // Using the language tag suffix to create unique id for each language
-  // add prefix for the always/never translate
-  languageLabel.id =
-    "translations-settings-language-" +
-    translatePrefix +
-    "-" +
-    event.target.getAttribute("value");
+  /**
+   * Deletes a language currently in the always/never translate language list
+   * from the DOM. Invoked in response to changes in the relevant preferences.
+   * @param {string} lang
+   * @param {string} sectionId
+   */
+  removeLanguage(lang, sectionId) {
+    const translateSection = document.getElementById(sectionId);
+    const languageList = translateSection.querySelector(
+      ".translations-settings-language-list"
+    );
+    if (languageList) {
+      const langElem = languageList.querySelector(`label[value=${lang}]`);
+      if (langElem) {
+        langElem.parentNode.remove();
+        if (!languageList.childElementCount) {
+          // If there is no language in the list remove the
+          // Language Header and language list div
+          languageList.parentNode.remove();
+        }
+      }
+    }
+  },
 
-  const delButton = document.createElement("moz-button");
-  delButton.classList.add("translations-settings-delete-icon");
-  delButton.setAttribute("type", "ghost icon");
-  delButton.addEventListener("click", delHandler);
-  delButton.setAttribute("aria-label", languageLabel.id);
+  /**
+   * Event Handler to delete a language selected by the user from the list of
+   * Always translate settings list in Preferences.
+   * @param {Event} event
+   */
+  deleteAlwaysTranslateLanguage(event) {
+    TranslationsParent.removeLangTagFromPref(
+      event.target.parentNode.querySelector("label").getAttribute("value"),
+      ALWAYS_TRANSLATE_LANGS_PREF
+    );
+  },
 
-  languageElement.appendChild(delButton);
-  languageElement.appendChild(languageLabel);
+  /**
+   * Event Handler to delete a language selected by the user from the list of
+   * Never translate settings list in Preferences.
+   * @param {Event} event
+   */
+  deleteNeverTranslateLanguage(event) {
+    TranslationsParent.removeLangTagFromPref(
+      event.target.parentNode.querySelector("label").getAttribute("value"),
+      NEVER_TRANSLATE_LANGS_PREF
+    );
+  },
 
-  /*  After a language is selected the menulist button display will be set to the
-      selected langauge. After processing the button event the
-      data-l10n-id of the menulist button is restored to "Add Language" */
-  const menuList = translateSection.querySelector("menulist");
-  await document.l10n.translateElements([menuList]);
-}
+  /**
+   * Deletes the site chosen by the user in the HTML
+   * from the Never Translate Site Permission
+   * @param {Event} event
+   */
+  deleteNeverTranslateSite(event) {
+    TranslationsParent.setNeverTranslateSiteByOrigin(
+      false,
+      event.target.parentNode.querySelector("label").getAttribute("value")
+    );
+  },
+  /**
+   * Record the download phase downloaded/loading/uninstalled for
+   * given language in the local data.
+   * @param {string} langTag
+   * @param {string} downloadPhase
+   */
+  updateDownloadPhase(langTag, downloadPhase) {
+    this.downloadPhases.set(langTag, { downloadPhase });
+  },
+  /**
+   * Remove the existing download language elements and rebuild
+   * the download language elements in the HTML by getting the download
+   * status of all languages from the browser records.
+   */
+  reloadDownloadPhases() {
+    // buildDownloadLanguageList will reset the download phases
+    const installList = document.querySelector(
+      "#translations-settings-download-section .translations-settings-language-list"
+    );
 
-/**
- * Event Handler to delete a language selected by the user from the list of
- * Always translate settings list.
- */
-function deleteAlwaysLanguage(event) {
-  /* TODO:
-  The function removeLanguage removes the HTML element.
-  It will be moved to the observer in the next Bug - 1881259 .
-  It is here just to test the UI.
+    while (installList.firstElementChild) {
+      installList.firstElementChild.remove();
+    }
+    this.buildDownloadLanguageList();
+  },
 
-  In the next bug we will maintain a local state of preferences.
-  When a language is added or removed, the user event updates the preferences in the Services,
-  This triggers the observer which compares the preferences in the local state and the
-  preferences in the Services and adds or removes the language in the local state and updates the
-    UI to reflect the updated Preferences in the Services.
-    */
-  removeLanguage(event);
-}
+  /**
+   * Event Handler to install a language model selected by the user through HTML
+   * @param {Event} event
+   */
+  async installLanguage(event) {
+    let eventButton = event.target;
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-download-icon",
+      "translations-settings-loading-icon"
+    );
 
-/**
- * Event Handler to delete a language selected by the user from the list of
- * Never translate settings list.
- */
-function deleteNeverLanguage(event) {
-  /* TODO:
-  The function removeLanguage removes the HTML element.
-  It will be moved to the observer in the next Bug - 1881259 .
-  It is here just to test the UI.
+    const langTag = eventButton.parentNode
+      .querySelector("label")
+      .getAttribute("value");
 
-  In the next bug we will maintain a local state of preferences.
-  When a language is added or removed, the user event updates the preferences in the Services,
-  This triggers the observer which compares the preferences in the local state and the
-  preferences in the Services and adds or removes the language in the local state and updates the
-    UI to reflect the updated Preferences in the Services.
-  */
-  removeLanguage(event);
-}
+    this.updateDownloadPhase(langTag, "loading");
 
-/**
- * Function to delete a language selected by the user from the list of
- * Always/Never translate settings list.
- */
-function removeLanguage(event) {
-  /* Langauge section moz-card -parent of-> Language card -parent of->
-  Language heading and Language list -parent of->
-  Language Element -parent of-> language button and label
-  */
-  let languageCard = event.target.parentNode.parentNode.parentNode;
-  event.target.parentNode.remove();
-  if (languageCard.children[1].childElementCount === 0) {
-    // If there is no language in the list remove the
-    // Language Header and language list div
-    languageCard.remove();
-  }
-}
+    // TODO (1907591): Implement error handling
+    // The correct state for the download button in case of a download error
+    // needs to be determined and implemented.
+    try {
+      await TranslationsParent.downloadLanguageFiles(langTag);
+    } catch (error) {
+      this.changeButtonState(
+        eventButton,
+        "translations-settings-loading-icon",
+        "translations-settings-download-icon"
+      );
+      this.updateDownloadPhase(langTag, "uninstalled");
+      console.error(error);
+      return;
+    }
 
-/**
- * Event Handler to install a language model selected by the user
- */
-function installLanguage(event) {
-  event.target.classList.remove("translations-settings-download-icon");
-  event.target.classList.add("translations-settings-delete-icon");
-  event.target.removeEventListener("click", installLanguage);
-  event.target.addEventListener("click", unInstallLanguage);
-}
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-loading-icon",
+      "translations-settings-delete-icon"
+    );
+    this.updateDownloadPhase(langTag, "downloaded");
 
-/**
- * Event Handler to install a language model selected by the user
- */
-function unInstallLanguage(event) {
-  event.target.classList.remove("translations-settings-delete-icon");
-  event.target.classList.add("translations-settings-download-icon");
-  event.target.removeEventListener("click", unInstallLanguage);
-  event.target.addEventListener("click", installLanguage);
-}
+    // If all languages are installed, change "All Languages" to downloaded
+    const haveUninstalledItem = [...this.downloadPhases].some(
+      ([k, v]) => v.downloadPhase != "downloaded" && k != "all"
+    );
+    if (
+      !haveUninstalledItem &&
+      this.downloadPhases.get("all").downloadPhase !== "downloaded"
+    ) {
+      this.changeButtonState(
+        event.target.parentNode.parentNode.children[0].querySelector(
+          "moz-button"
+        ),
+        "translations-settings-download-icon",
+        "translations-settings-delete-icon"
+      );
+      this.updateDownloadPhase("all", "downloaded");
+    }
+  },
+
+  /**
+   * Event Handler to install a language model selected by the user through HTML
+   * @param {Event} event
+   */
+  async unInstallLanguage(event) {
+    let eventButton = event.target;
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-delete-icon",
+      "translations-settings-loading-icon"
+    );
+
+    const langTag = eventButton.parentNode
+      .querySelector("label")
+      .getAttribute("value");
+    this.updateDownloadPhase(langTag, "loading");
+
+    // TODO (1907591): Implement error handling
+    // The correct state for the download button in case of a uninstall error
+    // needs to be determined and implemented.
+    try {
+      await TranslationsParent.deleteLanguageFiles(langTag);
+    } catch (error) {
+      // The download phases are invalidated with the error and must be reloaded.
+      this.changeButtonState(
+        eventButton,
+        "translations-settings-loading-icon",
+        "translations-settings-delete-icon"
+      );
+      this.updateDownloadPhase(langTag, "uninstalled");
+      console.error(error);
+      return;
+    }
+
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-loading-icon",
+      "translations-settings-download-icon"
+    );
+    this.updateDownloadPhase(langTag, "uninstalled");
+
+    // If >=1 languages are uninstalled change "All Languages" state to uninstalled
+    if (this.downloadPhases.get("all").downloadPhase === "downloaded") {
+      this.changeButtonState(
+        event.target.parentNode.parentNode.children[0].querySelector(
+          "moz-button"
+        ),
+        "translations-settings-delete-icon",
+        "translations-settings-download-icon"
+      );
+      this.updateDownloadPhase("all", "uninstalled");
+    }
+  },
+
+  /**
+   * Event Handler to install all language models
+   * @param {Event} event
+   */
+  async handleInstallAll(event) {
+    // Disable all buttons and show loading icon
+    this.disableDownloadButtons();
+    let eventButton = event.target;
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-download-icon",
+      "translations-settings-loading-icon"
+    );
+    this.updateDownloadPhase("all", "loading");
+
+    // TODO (1907591): Implement error handling
+    // The correct state for the download button in case of a download error
+    // needs to be determined and implemented.
+    try {
+      await TranslationsParent.downloadAllFiles();
+      this.updateDownloadPhase("all", "downloaded");
+
+      this.changeButtonState(
+        eventButton,
+        "translations-settings-loading-icon",
+        "translations-settings-delete-icon"
+      );
+      this.updateAllLanguageDownloadButtons("downloaded");
+    } catch (error) {
+      await this.reloadDownloadPhases();
+      console.error(error);
+    }
+  },
+
+  /**
+   * Event Handler to uninstall all language models
+   * @param {Event} event
+   */
+  async handleUninstallAll(event) {
+    let eventButton = event.target;
+    this.disableDownloadButtons();
+    this.changeButtonState(
+      eventButton,
+      "translations-settings-delete-icon",
+      "translations-settings-loading-icon"
+    );
+    this.updateDownloadPhase("all", "loading");
+
+    // TODO (1907591): Implement error handling
+    // The correct state for the download button in case of a uninstall error
+    // needs to be determined and implemented.
+    try {
+      await TranslationsParent.deleteAllLanguageFiles();
+      this.changeButtonState(
+        eventButton,
+        "translations-settings-loading-icon",
+        "translations-settings-download-icon"
+      );
+      this.updateDownloadPhase("all", "uninstalled");
+      this.updateAllLanguageDownloadButtons("uninstalled");
+    } catch (error) {
+      await this.reloadDownloadPhases();
+      console.error(error);
+    }
+  },
+
+  /**
+   * Disables the buttons to install/uninstall inidividual languages
+   * when "all languages" are installed/uninstalled.
+   * This is done to ensure that no individual languages are installed/uninstalled
+   * when the install/uninstall operations for "all languages" is progress.
+   */
+  disableDownloadButtons() {
+    const installList = document.querySelector(
+      "#translations-settings-download-section .translations-settings-language-list"
+    );
+    // Disable all elements except the first one which is "All langauges"
+    for (const langElem of installList.querySelectorAll(
+      ".translations-settings-language:not(:first-child)"
+    )) {
+      const langButton = langElem.querySelector("moz-button");
+      langButton.setAttribute("disabled", "true");
+    }
+  },
+
+  /**
+   * Changes the state of all individual language buttons as downloaded/uninstalled
+   * based on the download state of "All Language" status
+   * changes the icon of individual language buttons:
+   * from "download" icon to "delete" icon if "All Language" is downloaded.
+   * from "delete" icon to "download" icon if "All Language" is uninstalled.
+   * @param {string} allLanguageDownloadStatus "All Language" status: downloaded/uninstalled
+   */
+  updateAllLanguageDownloadButtons(allLanguageDownloadStatus) {
+    const installList = document.querySelector(
+      "#translations-settings-download-section .translations-settings-language-list"
+    );
+
+    // Change the state of all individual language buttons except the first one which is "All langauges"
+    for (const langElem of installList.querySelectorAll(
+      ".translations-settings-language:not(:first-child)"
+    )) {
+      let langButton = langElem.querySelector("moz-button");
+      const langLabel = langElem.querySelector("label");
+      const downloadPhase = this.downloadPhases.get(
+        langLabel.getAttribute("value")
+      ).downloadPhase;
+
+      langButton.removeAttribute("disabled");
+
+      if (
+        downloadPhase !== "downloaded" &&
+        allLanguageDownloadStatus === "downloaded"
+      ) {
+        this.changeButtonState(
+          langButton,
+          downloadPhase === "loading"
+            ? "translations-settings-loading-icon"
+            : "translations-settings-download-icon",
+          "translations-settings-delete-icon"
+        );
+        this.updateDownloadPhase(langLabel.getAttribute("value"), "downloaded");
+      } else if (
+        downloadPhase === "downloaded" &&
+        allLanguageDownloadStatus === "uninstalled"
+      ) {
+        this.changeButtonState(
+          langButton,
+          "translations-settings-delete-icon",
+          "translations-settings-download-icon"
+        );
+        this.updateDownloadPhase(
+          langLabel.getAttribute("value"),
+          "uninstalled"
+        );
+      }
+    }
+  },
+
+  /**
+   * Changes the State of the Button with icons
+   * change the CSS class to change the icons to download/loading/uninstalled
+   * also change the button event according to the state
+   * @param {Element} langButton HTML button element
+   * @param {string} prevCssClass CSS class that represents the icon based on button's previous state
+   * @param {string} curCssClass CSS class that represents the icon based on button's current state
+   */
+  changeButtonState(langButton, prevCssClass, curCssClass) {
+    langButton.classList.remove(prevCssClass);
+    langButton.classList.add(curCssClass);
+  },
+};
diff --git a/browser/components/translations/tests/browser/browser_translations_about_preferences_settings_ui.js b/browser/components/translations/tests/browser/browser_translations_about_preferences_settings_ui.js
index 39495a823c41..6b6dff32475c 100644
--- a/browser/components/translations/tests/browser/browser_translations_about_preferences_settings_ui.js
+++ b/browser/components/translations/tests/browser/browser_translations_about_preferences_settings_ui.js
@@ -53,7 +53,7 @@ add_task(async function test_translations_settings_pane_elements() {
     },
   });
 
-  const promise = BrowserTestUtils.waitForEvent(
+  const paneEvent = BrowserTestUtils.waitForEvent(
     document,
     "paneshown",
     false,
@@ -61,7 +61,7 @@ add_task(async function test_translations_settings_pane_elements() {
   );
 
   click(backButton);
-  await promise;
+  await paneEvent;
 
   assertVisibility({
     message: "Expect paneGeneral elements to be visible.",
@@ -104,19 +104,56 @@ add_task(async function test_translations_settings_always_translate() {
     await TranslationsSettingsTestUtils.openAboutPreferencesTranslationsSettingsPane(
       settingsButton
     );
+
   let alwaysTranslateSection = document.getElementById(
     "translations-settings-always-translate-section"
   );
   await testLanguageList(alwaysTranslateSection, translateAlwaysMenuList);
+  await testLanguageListWithPref(alwaysTranslateSection);
 
   await cleanup();
 });
 
+add_task(async function test_translations_settings_never_translate() {
+  const {
+    cleanup,
+    elements: { settingsButton },
+  } = await setupAboutPreferences(LANGUAGE_PAIRS, {
+    prefs: [["browser.translations.newSettingsUI.enable", true]],
+  });
+
+  const document = gBrowser.selectedBrowser.contentDocument;
+  assertVisibility({
+    message: "Expect paneGeneral elements to be visible.",
+    visible: { settingsButton },
+  });
+
+  const { translateNeverMenuList } =
+    await TranslationsSettingsTestUtils.openAboutPreferencesTranslationsSettingsPane(
+      settingsButton
+    );
+
+  let neverTranslateSection = document.getElementById(
+    "translations-settings-never-translate-section"
+  );
+  await testLanguageList(neverTranslateSection, translateNeverMenuList);
+  await testLanguageListWithPref(neverTranslateSection);
+  await cleanup();
+});
+function getLangsFromPref(pref) {
+  let rawLangs = Services.prefs.getCharPref(pref);
+  if (!rawLangs) {
+    return [];
+  }
+  let langArr = rawLangs.split(",");
+  return langArr;
+}
+
 async function testLanguageList(translateSection, menuList) {
-  const sectionName =
+  const { sectionName, pref } =
     translateSection.id === "translations-settings-always-translate-section"
-      ? "Always"
-      : "Never";
+      ? { sectionName: "Always", pref: ALWAYS_TRANSLATE_LANGS_PREF }
+      : { sectionName: "Never", pref: NEVER_TRANSLATE_LANGS_PREF };
 
   is(
     translateSection.querySelector(".translations-settings-languages-card"),
@@ -124,25 +161,31 @@ async function testLanguageList(translateSection, menuList) {
     `Language list not present in ${sectionName} Translate list`
   );
 
-  for (let i = 0; i < menuList.children[0].children.length; i++) {
-    menuList.value = menuList.children[0].children[i].value;
-
-    let clickMenu = BrowserTestUtils.waitForEvent(menuList, "command");
-    menuList.dispatchEvent(new Event("command"));
+  const menuOptions = menuList.querySelector("menupopup").children;
+  for (const option of menuOptions) {
+    let clickMenu = BrowserTestUtils.waitForEvent(option, "command");
+    option.doCommand();
     await clickMenu;
 
     /** Languages are always added on the top, so check the firstChild
      * for newly added languages.
-     * the firstChild.lastChild.innerText is the language display name
+     * the firstChild.querySelector("label").innerText is the language display name
      * which is compared with the menulist display name that is selected
      */
+    let langElem = translateSection.querySelector(
+      ".translations-settings-language-list"
+    ).firstChild;
+    const displayName = getIntlDisplayName(option.value);
     is(
-      translateSection.querySelector(".translations-settings-language-list")
-        .firstChild.lastChild.innerText,
-      getIntlDisplayName(menuList.children[0].children[i].value),
-      `Language list has element ${getIntlDisplayName(
-        menuList.children[0].children[i].value
-      )}`
+      langElem.querySelector("label").innerText,
+      displayName,
+      `Language list has element ${displayName}`
+    );
+
+    const langTag = langElem.querySelector("label").getAttribute("value");
+    ok(
+      getLangsFromPref(pref).includes(langTag),
+      `Perferences contains ${langTag}`
     );
   }
   /** The test cases has 4 languages, so check if 4 languages are added to the list */
@@ -157,13 +200,19 @@ async function testLanguageList(translateSection, menuList) {
 
   for (let i = 0; i < langNum; i++) {
     // Delete the first language in the list
-    let langName = languagelist.children[0].lastChild.innerText;
-    let langButton = languagelist.children[0].querySelector("moz-button");
-
+    let langElem = languagelist.children[0];
+    let langName = langElem.querySelector("label").innerText;
+    const langTag = langElem.querySelector("label").getAttribute("value");
+    let langButton = langElem.querySelector("moz-button");
     let clickButton = BrowserTestUtils.waitForEvent(langButton, "click");
     langButton.click();
     await clickButton;
 
+    ok(
+      !getLangsFromPref(pref).includes(langTag),
+      `Perferences does not contain ${langTag}`
+    );
+
     if (i < langNum - 1) {
       is(
         languagelist.childElementCount,
@@ -181,40 +230,109 @@ async function testLanguageList(translateSection, menuList) {
   }
 }
 
-add_task(async function test_translations_settings_never_translate() {
-  const {
-    cleanup,
-    elements: { settingsButton },
-  } = await setupAboutPreferences(LANGUAGE_PAIRS, {
-    prefs: [["browser.translations.newSettingsUI.enable", true]],
-  });
+async function testLanguageListWithPref(translateSection) {
+  const langs = [
+    "fr",
+    "de",
+    "en",
+    "es",
+    "fr,de",
+    "fr,en",
+    "fr,es",
+    "de,en",
+    "de,en,es",
+    "es,fr,en",
+    "en,es,fr,de",
+  ];
+  const { sectionName, pref } =
+    translateSection.id === "translations-settings-always-translate-section"
+      ? { sectionName: "Always", pref: ALWAYS_TRANSLATE_LANGS_PREF }
+      : { sectionName: "Never", pref: NEVER_TRANSLATE_LANGS_PREF };
 
-  const document = gBrowser.selectedBrowser.contentDocument;
-
-  assertVisibility({
-    message: "Expect paneGeneral elements to be visible.",
-    visible: { settingsButton },
-  });
-
-  const { translateNeverMenuList } =
-    await TranslationsSettingsTestUtils.openAboutPreferencesTranslationsSettingsPane(
-      settingsButton
-    );
-  let neverTranslateSection = document.getElementById(
-    "translations-settings-never-translate-section"
+  is(
+    translateSection.querySelector(".translations-settings-languages-card"),
+    null,
+    `Language list not present in ${sectionName} Translate list`
   );
-  await testLanguageList(neverTranslateSection, translateNeverMenuList);
-  await cleanup();
-});
+
+  for (const langOptions of langs) {
+    Services.prefs.setCharPref(pref, langOptions);
+
+    /** Languages are always added on the top, so check the firstChild
+     * for newly added languages.
+     * the firstChild.querySelector("label").innerText is the language display name
+     * which is compared with the menulist display name that is selected
+     */
+
+    const langsAdded = langOptions.split(",");
+    is(
+      translateSection.querySelector(".translations-settings-language-list")
+        .childElementCount,
+      langsAdded.length,
+      `Language list has ${langsAdded.length} elements `
+    );
+
+    let langsAddedHtml = Array.from(
+      translateSection
+        .querySelector(".translations-settings-language-list")
+        .querySelectorAll("label")
+    );
+
+    for (const lang of langsAdded) {
+      const langFind = langsAddedHtml
+        .find(el => el.getAttribute("value") === lang)
+        .getAttribute("value");
+      is(langFind, lang, `Language list has element ${lang}`);
+    }
+  }
+
+  Services.prefs.setCharPref(pref, "");
+  is(
+    translateSection.querySelector(".translations-settings-languages-card"),
+    null,
+    `All removed from ${sectionName} Translate`
+  );
+}
 
 add_task(async function test_translations_settings_download_languages() {
   const {
     cleanup,
+    remoteClients,
     elements: { settingsButton },
   } = await setupAboutPreferences(LANGUAGE_PAIRS, {
     prefs: [["browser.translations.newSettingsUI.enable", true]],
   });
 
+  const frenchModels = [
+    "lex.50.50.enfr.s2t.bin",
+    "lex.50.50.fren.s2t.bin",
+    "model.enfr.intgemm.alphas.bin",
+    "model.fren.intgemm.alphas.bin",
+    "vocab.enfr.spm",
+    "vocab.fren.spm",
+  ];
+
+  const allModels = [
+    "lex.50.50.enes.s2t.bin",
+    "lex.50.50.enfr.s2t.bin",
+    "lex.50.50.enuk.s2t.bin",
+    "lex.50.50.esen.s2t.bin",
+    "lex.50.50.fren.s2t.bin",
+    "lex.50.50.uken.s2t.bin",
+    "model.enes.intgemm.alphas.bin",
+    "model.enfr.intgemm.alphas.bin",
+    "model.enuk.intgemm.alphas.bin",
+    "model.esen.intgemm.alphas.bin",
+    "model.fren.intgemm.alphas.bin",
+    "model.uken.intgemm.alphas.bin",
+    "vocab.enes.spm",
+    "vocab.enfr.spm",
+    "vocab.enuk.spm",
+    "vocab.esen.spm",
+    "vocab.fren.spm",
+    "vocab.uken.spm",
+  ];
+
   assertVisibility({
     message: "Expect paneGeneral elements to be visible.",
     visible: { settingsButton },
@@ -229,43 +347,283 @@ add_task(async function test_translations_settings_download_languages() {
     ".translations-settings-language-list"
   );
 
-  for (let i = 0; i < langList.children.length; i++) {
+  // Test French language model install and uninstall function
+
+  let langFr = Array.from(langList.querySelectorAll("label")).find(
+    el => el.getAttribute("value") === "fr"
+  );
+
+  let clickButton = BrowserTestUtils.waitForEvent(
+    langFr.parentNode.querySelector("moz-button"),
+    "click"
+  );
+  langFr.parentNode.querySelector("moz-button").click();
+  await clickButton;
+
+  Assert.deepEqual(
+    await remoteClients.translationModels.resolvePendingDownloads(
+      frenchModels.length
+    ),
+    frenchModels,
+    "French models were downloaded."
+  );
+
+  if (
+    !langFr.parentNode
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-delete-icon")
+  ) {
+    await BrowserTestUtils.waitForMutationCondition(
+      langFr.parentNode.querySelector("moz-button"),
+      { attributes: true, attributeFilter: ["class"] },
+      () =>
+        langFr.parentNode
+          .querySelector("moz-button")
+          .classList.contains("translations-settings-delete-icon")
+    );
+  }
+
+  ok(
+    langFr.parentNode
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-delete-icon"),
+    "Delete icon is visible"
+  );
+
+  langFr.parentNode.querySelector("moz-button").click();
+  await clickButton;
+
+  if (
+    !langFr.parentNode
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-download-icon")
+  ) {
+    await BrowserTestUtils.waitForMutationCondition(
+      langFr.parentNode.querySelector("moz-button"),
+      { attributes: true, attributeFilter: ["class"] },
+      () =>
+        langFr.parentNode
+          .querySelector("moz-button")
+          .classList.contains("translations-settings-download-icon")
+    );
+  }
+  ok(
+    langFr.parentNode
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-download-icon"),
+    "Download icon is visible"
+  );
+
+  // Test "All language" models install and uninstall function
+  // Download "All languages" is the first child
+  let langAll = langList.children[0];
+
+  let clickButtonAll = BrowserTestUtils.waitForEvent(
+    langAll.querySelector("moz-button"),
+    "click"
+  );
+  langAll.querySelector("moz-button").click();
+  await clickButtonAll;
+
+  Assert.deepEqual(
+    await remoteClients.translationModels.resolvePendingDownloads(
+      allModels.length
+    ),
+    allModels,
+    "All models were downloaded."
+  );
+  Assert.deepEqual(
+    await remoteClients.translationsWasm.resolvePendingDownloads(1),
+    ["bergamot-translator"],
+    "Wasm was downloaded."
+  );
+
+  if (
+    !langAll
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-delete-icon")
+  ) {
+    await BrowserTestUtils.waitForMutationCondition(
+      langAll.querySelector("moz-button"),
+      { attributes: true, attributeFilter: ["class"] },
+      () =>
+        langAll
+          .querySelector("moz-button")
+          .classList.contains("translations-settings-delete-icon")
+    );
+  }
+
+  ok(
+    langAll
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-delete-icon"),
+    "Delete icon is visible"
+  );
+
+  langAll.querySelector("moz-button").click();
+  await clickButton;
+
+  if (
+    !langAll
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-download-icon")
+  ) {
+    await BrowserTestUtils.waitForMutationCondition(
+      langAll.querySelector("moz-button"),
+      { attributes: true, attributeFilter: ["class"] },
+      () =>
+        langAll
+          .querySelector("moz-button")
+          .classList.contains("translations-settings-download-icon")
+    );
+  }
+  ok(
+    langAll
+      .querySelector("moz-button")
+      .classList.contains("translations-settings-download-icon"),
+    "Download icon is visible"
+  );
+
+  await cleanup();
+});
+
+const { PermissionTestUtils } = ChromeUtils.importESModule(
+  "resource://testing-common/PermissionTestUtils.sys.mjs"
+);
+
+add_task(async function test_translations_settings_never_translate_site() {
+  const {
+    cleanup,
+    elements: { settingsButton },
+  } = await setupAboutPreferences(LANGUAGE_PAIRS, {
+    prefs: [["browser.translations.newSettingsUI.enable", true]],
+  });
+
+  const document = gBrowser.selectedBrowser.contentDocument;
+
+  // const openTranslationsSettings =
+  await TranslationsSettingsTestUtils.openAboutPreferencesTranslationsSettingsPane(
+    settingsButton
+  );
+
+  let neverTranslateSitesSection = document.getElementById(
+    "translations-settings-never-sites-section"
+  );
+  let siteList = neverTranslateSitesSection.querySelector(
+    ".translations-settings-language-list"
+  );
+
+  info("Ensuring the list of never-translate sites is empty");
+  is(
+    getNeverTranslateSitesFromPerms().length,
+    0,
+    "The list of never-translate sites is empty"
+  );
+
+  is(siteList, null, "The never-translate sites html list is empty");
+
+  info("Adding sites to the neverTranslateSites perms");
+  await PermissionTestUtils.add(
+    "https://example.com",
+    TRANSLATIONS_PERMISSION,
+    Services.perms.DENY_ACTION
+  );
+  await PermissionTestUtils.add(
+    "https://example.org",
+    TRANSLATIONS_PERMISSION,
+    Services.perms.DENY_ACTION
+  );
+  await PermissionTestUtils.add(
+    "https://example.net",
+    TRANSLATIONS_PERMISSION,
+    Services.perms.DENY_ACTION
+  );
+
+  is(
+    getNeverTranslateSitesFromPerms().length,
+    3,
+    "The list of never-translate sites has 3 elements"
+  );
+
+  siteList = neverTranslateSitesSection.querySelector(
+    ".translations-settings-language-list"
+  );
+
+  is(
+    siteList.childElementCount,
+    3,
+    "The never-translate sites html list has 3 elements"
+  );
+
+  const permissionsUrls = [
+    "https://example.com",
+    "https://example.org",
+    "https://example.net",
+  ];
+
+  const siteNum = siteList.children.length;
+  for (let i = siteNum; i > 0; i--) {
     is(
-      langList.children[i]
-        .querySelector("moz-button")
-        .classList.contains("translations-settings-download-icon"),
-      true,
-      "Download icon is visible"
+      siteList.children[i - 1].querySelector("label").textContent,
+      permissionsUrls[permissionsUrls.length - i],
+      `Never translate URL ${
+        permissionsUrls[permissionsUrls.length - i]
+      } is added`
+    );
+  }
+
+  for (let i = 0; i < siteNum; i++) {
+    // Delete the first site in the list
+    let siteElem = siteList.children[0];
+    // Delete the first language in the list
+    let siteName = siteElem.querySelector("label").innerText;
+    let siteButton = siteElem.querySelector("moz-button");
+
+    ok(
+      siteList.querySelector(`label[value="${siteName}"]`),
+      `Site ${siteName} present in the Never transalate site list`
     );
 
-    let clickButton = BrowserTestUtils.waitForEvent(
-      langList.children[i].querySelector("moz-button"),
-      "click"
+    ok(
+      getNeverTranslateSitesFromPerms().find(p => p.origin === siteName),
+      `Site ${siteName} present in the Never transalate site permissions list`
     );
-    langList.children[i].querySelector("moz-button").click();
+
+    let clickButton = BrowserTestUtils.waitForEvent(siteButton, "click");
+    siteButton.click();
     await clickButton;
 
-    is(
-      langList.children[i]
-        .querySelector("moz-button")
-        .classList.contains("translations-settings-delete-icon"),
-      true,
-      "Delete icon is visible"
+    ok(
+      !siteList.querySelector(`label[value="${siteName}"]`),
+      `Site ${siteName} removed successfully from the Never transalate site list`
     );
 
-    clickButton = BrowserTestUtils.waitForEvent(
-      langList.children[i].querySelector("moz-button"),
-      "click"
+    ok(
+      !getNeverTranslateSitesFromPerms().find(p => p.origin === siteName),
+      `Site ${siteName} removed from successfully from the Never transalate site permissions list`
     );
-    langList.children[i].querySelector("moz-button").click();
-    await clickButton;
 
+    if (i < siteNum - 1) {
+      is(
+        siteList.childElementCount,
+        siteNum - i - 1,
+        `${siteName} removed from Never Translate Site`
+      );
+    } else {
+      /** Check if the language list card is removed after removing the last language */
+      is(
+        neverTranslateSitesSection.querySelector(
+          ".translations-settings-languages-card"
+        ),
+        null,
+        `${siteName} removed from Never Translate Site`
+      );
+    }
+    const siteLen = siteNum - i - 1;
     is(
-      langList.children[i]
-        .querySelector("moz-button")
-        .classList.contains("translations-settings-download-icon"),
-      true,
-      "Download icon is visible"
+      getNeverTranslateSitesFromPerms().length,
+      siteLen,
+      `There are ${siteLen} site in Never translate site`
     );
   }
   await cleanup();
diff --git a/browser/locales-preview/translations.ftl b/browser/locales-preview/translations.ftl
index fa0d0a7faf25..170ef62264e9 100644
--- a/browser/locales-preview/translations.ftl
+++ b/browser/locales-preview/translations.ftl
@@ -21,4 +21,13 @@ translations-settings-never-sites-description = To add to this list, visit a sit
 translations-settings-download-languages = Download languages
 translations-settings-download-all-languages = All languages
 translations-settings-download-languages-link = Learn more about downloading languages
+# Variables:
+#   $size (number) - The size of the download in megabites
+translations-settings-download-size = ({ $size })
 translations-settings-language-header = Language
+translations-settings-language-download-error =
+    .heading = Download Error
+    .message = Language download failed. Try again.
+translations-settings-language-remove-error =
+    .heading = Remove Error
+    .message = Failed to remove language. Try again.
diff --git a/browser/themes/shared/preferences/translations.css b/browser/themes/shared/preferences/translations.css
index ddc55993a880..6781974acef3 100644
--- a/browser/themes/shared/preferences/translations.css
+++ b/browser/themes/shared/preferences/translations.css
@@ -34,7 +34,6 @@
   display: flex;
   flex-direction: column;
   max-height: calc( 7 * var(--space-xlarge));
-  overflow: auto;
   padding-inline: calc( 2 * var(--space-small));
 }
 
@@ -44,6 +43,10 @@
   font-weight: var(--font-weight-bold);
 }
 
+.translations-settings-language-list {
+  overflow: auto;
+}
+
 .translations-settings-language {
   display: flex;
   align-items: center;
@@ -53,7 +56,9 @@
     margin: 0px calc( 2 * var(--space-small));
   }
 }
-
+.translations-settings-language-error {
+  flex: 100%;
+}
 .translations-settings-download-icon[type~="icon"]::part(button) {
   background-image: url(chrome://browser/skin/downloads/downloads.svg);
 }
@@ -61,3 +66,11 @@
 .translations-settings-delete-icon[type~="icon"]::part(button) {
   background-image: url(chrome://global/skin/icons/delete.svg);
 }
+
+.translations-settings-loading-icon[type~="icon"]::part(button) {
+  background-image: url(chrome://global/skin/icons/loading.svg);
+}
+
+.translations-settings-download-size {
+  color: var(--color-gray-60);
+}
diff --git a/toolkit/components/translations/actors/TranslationsParent.sys.mjs b/toolkit/components/translations/actors/TranslationsParent.sys.mjs
index 90e68dd0ec71..05cde6596639 100644
--- a/toolkit/components/translations/actors/TranslationsParent.sys.mjs
+++ b/toolkit/components/translations/actors/TranslationsParent.sys.mjs
@@ -100,7 +100,11 @@ XPCOMUtils.defineLazyPreferenceGetter(
   "alwaysTranslateLangTags",
   ALWAYS_TRANSLATE_LANGS_PREF,
   /* aDefaultPrefValue */ "",
-  /* onUpdate */ null,
+  /* onUpdate */ () =>
+    Services.obs.notifyObservers(
+      null,
+      "translations:always-translate-languages-changed"
+    ),
   /* aTransform */ rawLangTags =>
     rawLangTags ? new Set(rawLangTags.split(",")) : new Set()
 );
@@ -113,7 +117,11 @@ XPCOMUtils.defineLazyPreferenceGetter(
   "neverTranslateLangTags",
   NEVER_TRANSLATE_LANGS_PREF,
   /* aDefaultPrefValue */ "",
-  /* onUpdate */ null,
+  /* onUpdate */ () =>
+    Services.obs.notifyObservers(
+      null,
+      "translations:never-translate-languages-changed"
+    ),
   /* aTransform */ rawLangTags =>
     rawLangTags ? new Set(rawLangTags.split(",")) : new Set()
 );
@@ -1155,6 +1163,21 @@ export class TranslationsParent extends JSWindowActorParent {
       .sort((a, b) => a.displayName.localeCompare(b.displayName));
   }
 
+  /**
+   * Get the display name for the given language Tag.
+   *
+   * @param {string} langTag
+   * @returns {string}
+   */
+  static getLanguageDisplayName(langTag) {
+    // Services.intl.getLanguageDisplayNames takes a list of language codes and
+    // returns a list of correspoding display names. Hence the langTag is sent as a list
+    let displayName = Services.intl.getLanguageDisplayNames(undefined, [
+      langTag,
+    ]);
+    return displayName[0];
+  }
+
   /**
    * @param {object} event
    * @param {object} event.data
@@ -2063,6 +2086,23 @@ export class TranslationsParent extends JSWindowActorParent {
     return results;
   }
 
+  static async getLanguageSize(language) {
+    const records = [
+      ...(await TranslationsParent.#getTranslationModelRecords()).values(),
+    ];
+
+    let downloadSize = 0;
+    await Promise.all(
+      records.map(async record => {
+        if (record.fromLang !== language && record.toLang !== language) {
+          return;
+        }
+        downloadSize += parseInt(record.attachment.size);
+      })
+    );
+    return downloadSize;
+  }
+
   /**
    * Gets the expected download size that will occur (if any) if translate is called on two given languages for display purposes.
    *
@@ -2713,6 +2753,14 @@ export class TranslationsParent extends JSWindowActorParent {
     return true;
   }
 
+  static getAlwaysTranslateLanguages() {
+    return lazy.alwaysTranslateLangTags;
+  }
+
+  static getNeverTranslateLanguages() {
+    return lazy.neverTranslateLangTags;
+  }
+
   /**
    * Toggle the automatically popup pref, which will either
    * enable or disable translations being offered to the user.
diff --git a/toolkit/components/translations/tests/browser/shared-head.js b/toolkit/components/translations/tests/browser/shared-head.js
index f33d7b754955..0111579379a4 100644
--- a/toolkit/components/translations/tests/browser/shared-head.js
+++ b/toolkit/components/translations/tests/browser/shared-head.js
@@ -1215,6 +1215,14 @@ async function setupAboutPreferences(
     true // waitForLoad
   );
 
+  let initTranslationsEvent;
+  if (Services.prefs.getBoolPref("browser.translations.newSettingsUI.enable")) {
+    initTranslationsEvent = BrowserTestUtils.waitForEvent(
+      document,
+      "translationsSettingsInit"
+    );
+  }
+
   const { remoteClients, removeMocks } = await createAndMockRemoteSettings({
     languagePairs,
   });
@@ -1227,6 +1235,10 @@ async function setupAboutPreferences(
 
   const elements = await selectAboutPreferencesElements();
 
+  if (Services.prefs.getBoolPref("browser.translations.newSettingsUI.enable")) {
+    await initTranslationsEvent;
+  }
+
   async function cleanup() {
     await closeAllOpenPanelsAndMenus();
     await loadBlankPage();