diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -71,10 +71,11 @@
   <link rel="localization" href="browser/ipProtection.ftl"/>
   <link rel="localization" href="browser/menubar.ftl"/>
   <link rel="localization" href="browser/openTabs.ftl"/>
   <link rel="localization" href="browser/originControls.ftl"/>
   <link rel="localization" href="browser/panelUI.ftl"/>
+  <link rel="localization" href="browser/permissions.ftl"/>
   <link rel="localization" href="browser/places.ftl"/>
   <link rel="localization" href="browser/preferences/containers.ftl"/>
   <link rel="localization" href="browser/protectionsPanel.ftl"/>
   <link rel="localization" href="browser/reportBrokenSite.ftl"/>
   <link rel="localization" href="browser/screenshots.ftl"/>
diff --git a/browser/base/content/popup-notifications.inc.xhtml b/browser/base/content/popup-notifications.inc.xhtml
--- a/browser/base/content/popup-notifications.inc.xhtml
+++ b/browser/base/content/popup-notifications.inc.xhtml
@@ -11,10 +11,24 @@
            orient="vertical"
            noautofocus="true"
            role="alert"
            remote="true"/>
 
+    <popupnotification id="speech-recognition-model-download-notification" hidden="true">
+      <popupnotificationfooter id="speech-recognition-model-download-progress-content" orient="vertical" hidden="true">
+        <html:progress id="speech-recognition-model-download-progress"
+                       class="speech-recognition-model-download-progress"
+                       max="100"
+                       value="0"/>
+        <description id="speech-recognition-model-download-progress-status"/>
+        <html:div id="speech-recognition-model-download-progress-row">
+          <html:moz-button id="speech-recognition-model-download-cancel"
+                           data-l10n-id="speech-recognition-model-download-cancel"/>
+        </html:div>
+      </popupnotificationfooter>
+    </popupnotification>
+
     <popupnotification id="webRTC-shareDevices-notification" hidden="true"
                        descriptionid="webRTC-shareDevices-notification-description">
       <popupnotificationcontent id="webRTC-selectCamera" orient="vertical">
         <label id="webRTC-selectCamera-label"
                data-l10n-id="popup-select-camera-device"
diff --git a/browser/base/content/test/permissions/browser_speech_recognition_model_download_prompt.js b/browser/base/content/test/permissions/browser_speech_recognition_model_download_prompt.js
new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/permissions/browser_speech_recognition_model_download_prompt.js
@@ -0,0 +1,315 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verify that SpeechRecognition.install() shows a permission doorhanger and
+// that accepting it resolves the promise with true, while dismissing (via the
+// Not Now button or the Escape key) resolves with false and removes the
+// notification. Also verifies the prompt is skipped entirely once the model
+// is already installed.
+
+const ORIGIN = "https://example.com";
+const PAGE =
+  getRootDirectory(gTestPath).replace("chrome://mochitests/content", ORIGIN) +
+  "empty.html";
+
+async function triggerInstall(browser) {
+  await SpecialPowers.spawn(browser, [], () => {
+    // install() requires transient user activation (it can trigger a large
+    // download); synthesize it since this call isn't from a real user gesture.
+    content.document.notifyUserGestureActivation();
+    // Do not await — we need to return immediately so the popup can appear.
+    content.SpeechRecognition.install({
+      langs: ["en-US"],
+      processLocally: true,
+    });
+  });
+}
+
+add_setup(async function () {
+  await SpecialPowers.pushPrefEnv({
+    set: [["media.webspeech.recognition.enable", true]],
+  });
+});
+
+add_task(async function test_install_shows_doorhanger() {
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    let popupShown = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popupshown"
+    );
+
+    await triggerInstall(browser);
+    await popupShown;
+
+    let notification = PopupNotifications.getNotification(
+      "speech-recognition-model-download",
+      browser
+    );
+    ok(notification, "speech-recognition-model-download notification exists");
+
+    // Dismiss without downloading.
+    let popupHidden = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popuphidden"
+    );
+    notification.remove();
+    await popupHidden;
+  });
+});
+
+// Asserts that a content-process install() call resolves with `false`.
+// `installResultPromise` must be the raw promise returned from within a
+// SpecialPowers.spawn task, so the settlement happens in the content process.
+async function assertInstallResolvesFalse(installResultPromise, why) {
+  let result;
+  try {
+    result = await installResultPromise;
+  } catch (e) {
+    ok(false, `install() unexpectedly rejected in content ${why}: ${e}`);
+    throw e;
+  }
+  is(result, false, `install() resolves false in content ${why}`);
+}
+
+async function assertNotificationGone(browser, why) {
+  ok(
+    !PopupNotifications.getNotification(
+      "speech-recognition-model-download",
+      browser
+    ),
+    `notification is actually removed (not just dismissed) ${why}`
+  );
+}
+
+add_task(async function test_install_not_now_resolves_false() {
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    let popupShown = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popupshown"
+    );
+
+    let installResult = SpecialPowers.spawn(browser, [], async () => {
+      content.document.notifyUserGestureActivation();
+      return content.SpeechRecognition.install({
+        langs: ["en-US"],
+        processLocally: true,
+      });
+    });
+
+    await popupShown;
+
+    let notification = PopupNotifications.getNotification(
+      "speech-recognition-model-download",
+      browser
+    );
+    ok(notification, "Notification present before dismissal");
+
+    let popupHidden = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popuphidden"
+    );
+    let popup = document.getElementById(
+      "speech-recognition-model-download-notification"
+    );
+    await popup.secondaryButton.updateComplete;
+    popup.secondaryButton.click();
+    await popupHidden;
+
+    await assertNotificationGone(browser, "after clicking Not Now");
+    await assertInstallResolvesFalse(installResult, "after clicking Not Now");
+  });
+});
+
+// Verify that dismissing the prompt with the Escape key resolves install()
+// with false and removes the notification, same as clicking Not Now.
+add_task(async function test_install_escape_resolves_false() {
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    let popupShown = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popupshown"
+    );
+
+    let installResult = SpecialPowers.spawn(browser, [], async () => {
+      content.document.notifyUserGestureActivation();
+      return content.SpeechRecognition.install({
+        langs: ["en-US"],
+        processLocally: true,
+      });
+    });
+
+    await popupShown;
+
+    let notification = PopupNotifications.getNotification(
+      "speech-recognition-model-download",
+      browser
+    );
+    ok(notification, "Notification present before dismissal");
+
+    let popupHidden = BrowserTestUtils.waitForEvent(
+      PopupNotifications.panel,
+      "popuphidden"
+    );
+    EventUtils.synthesizeKey("KEY_Escape");
+    await popupHidden;
+
+    // Let any pending _update() run before asserting the notification stays gone.
+    await TestUtils.waitForTick();
+    await assertNotificationGone(browser, "after pressing Escape");
+    Assert.notEqual(
+      PopupNotifications.panel.state,
+      "open",
+      "panel did not reopen after Escape"
+    );
+
+    await assertInstallResolvesFalse(installResult, "after pressing Escape");
+  });
+});
+
+add_task(async function test_overlapping_installs_share_prompt_and_result() {
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["browser.ml.modelHub.testing", true],
+      ["media.webspeech.recognition.model-download.prompt.testing", false],
+      ["media.navigator.permission.disabled", false],
+    ],
+  });
+
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    let popupShownCount = 0;
+    let onPopupShown = () => {
+      popupShownCount++;
+    };
+    PopupNotifications.panel.addEventListener("popupshown", onPopupShown);
+
+    try {
+      let popupShown = BrowserTestUtils.waitForEvent(
+        PopupNotifications.panel,
+        "popupshown"
+      );
+
+      await SpecialPowers.spawn(browser, [], () => {
+        content.document.notifyUserGestureActivation();
+        content.overlappingSpeechInstalls = [
+          content.SpeechRecognition.install({
+            langs: ["fr-FR"],
+            processLocally: true,
+          }),
+        ];
+      });
+      await popupShown;
+
+      await SpecialPowers.spawn(browser, [], () => {
+        for (let i = 0; i < 2; i++) {
+          content.document.notifyUserGestureActivation();
+          content.overlappingSpeechInstalls.push(
+            content.SpeechRecognition.install({
+              langs: ["fr-FR"],
+              processLocally: true,
+            })
+          );
+        }
+      });
+
+      await TestUtils.waitForTick();
+      is(popupShownCount, 1, "overlapping install() calls share one prompt");
+
+      let popup = document.getElementById(
+        "speech-recognition-model-download-notification"
+      );
+      await popup.button.updateComplete;
+      popup.button.click();
+
+      let results = await SpecialPowers.spawn(browser, [], () =>
+        Promise.all(content.overlappingSpeechInstalls)
+      );
+      is(
+        results.join(","),
+        "true,true,true",
+        "all overlapping install() calls resolve with the same result"
+      );
+
+      let popupHidden = BrowserTestUtils.waitForEvent(
+        PopupNotifications.panel,
+        "popuphidden"
+      );
+      PopupNotifications.getNotification(
+        "speech-recognition-model-download",
+        browser
+      ).remove();
+      await popupHidden;
+    } finally {
+      PopupNotifications.panel.removeEventListener("popupshown", onPopupShown);
+    }
+  });
+
+  await SpecialPowers.popPrefEnv();
+});
+
+// install() must skip the permission prompt entirely once the model is
+// already installed: there is nothing to download, so nothing to consent to.
+add_task(async function test_install_skips_prompt_when_already_installed() {
+  // Mock backend; auto-allow the first install so the model becomes installed.
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["browser.ml.modelHub.testing", true],
+      ["media.webspeech.recognition.model-download.prompt.testing", true],
+      ["media.navigator.permission.disabled", true],
+    ],
+  });
+
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    await SpecialPowers.spawn(browser, [], () => {
+      content.document.notifyUserGestureActivation();
+      return content.SpeechRecognition.install({
+        langs: ["en-US"],
+        processLocally: true,
+      });
+    });
+    let status = await SpecialPowers.spawn(browser, [], () =>
+      content.SpeechRecognition.available({
+        langs: ["en-US"],
+        processLocally: true,
+      })
+    );
+    is(status, "available", "model reports available after first install");
+  });
+
+  // Real prompt path. The model is now installed, so a second install() must
+  // resolve true without ever showing the permission prompt.
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["media.webspeech.recognition.model-download.prompt.testing", false],
+      ["media.navigator.permission.disabled", false],
+    ],
+  });
+
+  await BrowserTestUtils.withNewTab(PAGE, async browser => {
+    let popupShown = false;
+    let listener = () => {
+      popupShown = true;
+    };
+    PopupNotifications.panel.addEventListener("popupshown", listener);
+
+    let installed = await SpecialPowers.spawn(browser, [], () => {
+      content.document.notifyUserGestureActivation();
+      return content.SpeechRecognition.install({
+        langs: ["en-US"],
+        processLocally: true,
+      });
+    });
+
+    PopupNotifications.panel.removeEventListener("popupshown", listener);
+
+    ok(installed, "install() resolves true for an already-installed model");
+    ok(
+      !popupShown,
+      "install() must not show the prompt when already installed"
+    );
+  });
+
+  // One pop per pushPrefEnv() above, not a copy-paste duplicate.
+  await SpecialPowers.popPrefEnv();
+  await SpecialPowers.popPrefEnv();
+});
diff --git a/browser/locales/en-US/browser/permissions.ftl b/browser/locales/en-US/browser/permissions.ftl
--- a/browser/locales/en-US/browser/permissions.ftl
+++ b/browser/locales/en-US/browser/permissions.ftl
@@ -11,5 +11,17 @@
     .label = Download
     .accesskey = D
 speech-recognition-model-download-not-now =
     .label = Not Now
     .accesskey = N
+speech-recognition-model-download-progress-message = Downloading a speech recognition model…
+# $progress (Number) - the model download progress percentage.
+speech-recognition-model-download-progress = Downloading… { $progress }%
+# $progress (Number) - the model download progress percentage.
+# $remaining (String) - estimated remaining download time, already formatted as
+#                       a localized duration, for example "2 min 5 sec".
+speech-recognition-model-download-progress-remaining = Downloading… { $progress }% ({ $remaining } remaining)
+speech-recognition-model-download-cancel =
+    .label = Cancel
+    .accesskey = C
+speech-recognition-model-download-complete-message = Speech recognition model downloaded.
+speech-recognition-model-download-failed-message = Speech recognition model download failed.
diff --git a/browser/modules/PermissionUI.sys.mjs b/browser/modules/PermissionUI.sys.mjs
--- a/browser/modules/PermissionUI.sys.mjs
+++ b/browser/modules/PermissionUI.sys.mjs
@@ -116,10 +116,14 @@
 
 ChromeUtils.defineLazyGetter(lazy, "gFluentStrings", function () {
   return new Localization(["browser/permissions.ftl"], true /* aSync */);
 });
 
+ChromeUtils.defineLazyGetter(lazy, "gDurationFormat", function () {
+  return new Intl.DurationFormat(undefined, { style: "short" });
+});
+
 import { SITEPERMS_ADDON_PROVIDER_PREF } from "resource://gre/modules/addons/siteperms-addon-utils.sys.mjs";
 
 XPCOMUtils.defineLazyPreferenceGetter(
   lazy,
   "sitePermsAddonsProviderEnabled",
@@ -2432,22 +2436,39 @@
   get topLevelPrincipal() {
     return this.request.topLevelPrincipal;
   }
 }
 
+// How long the final message stays up before the prompt goes away by itself.
+// The completion message confirms progress the user has been watching for a
+// while, and the model also shows up in about:addons, so it can be brief. The
+// failure message is the only place that outcome is surfaced, so it gets the
+// five seconds WCAG 2.2.1 uses in its "toast" example.
+const MODEL_DOWNLOAD_COMPLETE_TIMEOUT_MS = 2000;
+const MODEL_DOWNLOAD_FAILED_TIMEOUT_MS = 5000;
+
 class SpeechRecognitionModelDownloadPermissionPrompt extends PermissionPromptForRequest {
   #sizeMB;
+  #progressToken;
+  #downloadStartedAt;
+  #notification;
+  #renderedPercent;
   #requestSettled = false;
+  #observingProgress = false;
 
   constructor(request) {
     super();
     this.request = request;
     let types = request.types.QueryInterface(Ci.nsIArray);
     let perm = types.queryElementAt(0, Ci.nsIContentPermissionType);
     this.#sizeMB = perm.options.length
       ? perm.options.queryElementAt(0, Ci.nsISupportsString).data
       : null;
+    this.#progressToken =
+      perm.options.length > 1
+        ? perm.options.queryElementAt(1, Ci.nsISupportsString).data
+        : null;
   }
 
   get type() {
     return "speech-recognition-model-download";
   }
@@ -2495,24 +2516,30 @@
     return [
       {
         label: allowMessage.label,
         accessKey: allowMessage.accesskey,
         action: lazy.SitePermissions.ALLOW,
+        keepOpen: !!this.#progressToken,
         callback: () => {
+          this.#showProgress();
           this.allow();
         },
       },
       {
         label: notNowMessage.label,
         accessKey: notNowMessage.accesskey,
         action: lazy.SitePermissions.BLOCK,
-        dismiss: true,
         callback: () => this.cancel(),
       },
     ];
   }
 
+  onAfterShow() {
+    this.#stopObservingProgress();
+    this.#notification = null;
+  }
+
   allow(choices) {
     if (this.#requestSettled) {
       return;
     }
     this.#requestSettled = true;
@@ -2524,10 +2551,208 @@
       return;
     }
     this.#requestSettled = true;
     super.cancel();
   }
+
+  observe(_subject, topic, data) {
+    if (topic != "ml-model-download-progress") {
+      return;
+    }
+
+    let progress;
+    try {
+      progress = JSON.parse(data);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
+
+    if (progress.token != this.#progressToken) {
+      return;
+    }
+
+    this.#updateProgress(progress);
+  }
+
+  /**
+   * The <popupnotification> element showing this prompt, or null if it isn't
+   * in the document (yet).
+   */
+  #notificationElement() {
+    // this.browser reads request.element, which throws once the request has
+    // been settled: prefer the browser the notification holds on to, which
+    // also follows the tab when it is moved to another window.
+    let browser = this.#notification?.browser ?? this.browser;
+    return (
+      browser.documentGlobal?.document.getElementById(
+        `${this.notificationID}-notification`
+      ) ?? null
+    );
+  }
+
+  #showProgress() {
+    if (!this.#progressToken) {
+      return;
+    }
+
+    let browser = this.browser;
+    this.#notification =
+      browser.documentGlobal.PopupNotifications.getNotification(
+        this.notificationID,
+        browser
+      );
+
+    let notificationEl = this.#notificationElement();
+    if (!notificationEl) {
+      return;
+    }
+
+    this.#downloadStartedAt = ChromeUtils.now();
+    this.#applyProgressUI(notificationEl);
+
+    Services.obs.addObserver(this, "ml-model-download-progress");
+    this.#observingProgress = true;
+    this.#updateProgress({ progress: 0, totalLoaded: 0, total: 0 });
+  }
+
+  #onCancelClick = () => {
+    Cc["@mozilla.org/ml-modelhub;1"]
+      .getService(Ci.nsIMLModelHub)
+      .cancelDownload(this.#progressToken);
+    this.cancel();
+    this.#notification?.remove();
+  };
+
+  /**
+   * Turns the prompt into a progress indicator: the actions are replaced by
+   * the progress bar and its own Cancel button. Applied again if the element
+   * is re-rendered while the download is running, for example because the tab
+   * moved to another window, which uses that window's element.
+   */
+  #applyProgressUI(notificationEl) {
+    // PopupNotifications only ever renders `message` as the label, so this has
+    // to be a plain string, and both it and the label it already rendered need
+    // updating.
+    let message = lazy.gFluentStrings.formatValueSync(
+      "speech-recognition-model-download-progress-message"
+    );
+    this.#notification.message = message;
+    notificationEl.setAttribute("label", message);
+    notificationEl.removeAttribute("name");
+    notificationEl.removeAttribute("endlabel");
+    this.#notification.mainAction.disabled = true;
+    notificationEl.button.disabled = true;
+    notificationEl.secondaryButton.disabled = true;
+    notificationEl.toggleAttribute("model-download-in-progress", true);
+
+    notificationEl.querySelector(
+      "#speech-recognition-model-download-progress-content"
+    ).hidden = false;
+
+    notificationEl
+      .querySelector("#speech-recognition-model-download-cancel")
+      // Adding the same listener twice is a no-op, so re-applying is safe.
+      .addEventListener("click", this.#onCancelClick, { once: true });
+  }
+
+  #updateProgress(progress) {
+    let notificationEl = this.#notificationElement();
+    if (!notificationEl) {
+      return;
+    }
+
+    if (!notificationEl.hasAttribute("model-download-in-progress")) {
+      this.#applyProgressUI(notificationEl);
+    }
+
+    // The download reports progress for every chunk it receives, which is far
+    // more often than the percentage the user sees changes: only touch the DOM
+    // when it does.
+    let percent = Math.floor(
+      Math.max(0, Math.min(100, progress.progress ?? 0))
+    );
+    if (percent == this.#renderedPercent && !progress.done) {
+      return;
+    }
+    this.#renderedPercent = percent;
+
+    let progressEl = notificationEl.querySelector(
+      "#speech-recognition-model-download-progress"
+    );
+    let statusEl = notificationEl.querySelector(
+      "#speech-recognition-model-download-progress-status"
+    );
+
+    progressEl.value = percent;
+    this.#setProgressStatus(statusEl, progress, percent);
+
+    if (!progress.done) {
+      return;
+    }
+
+    this.#stopObservingProgress();
+
+    let message = lazy.gFluentStrings.formatValueSync(
+      progress.ok
+        ? "speech-recognition-model-download-complete-message"
+        : "speech-recognition-model-download-failed-message"
+    );
+    this.#notification.message = message;
+    notificationEl.setAttribute("label", message);
+    progressEl.value = progress.ok ? 100 : percent;
+    statusEl.removeAttribute("data-l10n-id");
+    statusEl.textContent = "";
+    notificationEl.querySelector(
+      "#speech-recognition-model-download-progress-row"
+    ).hidden = true;
+
+    lazy.setTimeout(
+      () => this.#notification?.remove(),
+      progress.ok
+        ? MODEL_DOWNLOAD_COMPLETE_TIMEOUT_MS
+        : MODEL_DOWNLOAD_FAILED_TIMEOUT_MS
+    );
+  }
+
+  #setProgressStatus(statusEl, progress, percent) {
+    let l10n = statusEl.ownerDocument.l10n;
+    let elapsedSeconds = (ChromeUtils.now() - this.#downloadStartedAt) / 1000;
+    if (progress.total > 0 && progress.totalLoaded > 0 && elapsedSeconds > 1) {
+      let bytesPerSecond = progress.totalLoaded / elapsedSeconds;
+      let seconds = Math.ceil(
+        (progress.total - progress.totalLoaded) / bytesPerSecond
+      );
+      if (Number.isFinite(seconds) && seconds > 0) {
+        l10n.setAttributes(
+          statusEl,
+          "speech-recognition-model-download-progress-remaining",
+          {
+            progress: percent,
+            remaining: lazy.gDurationFormat.format({
+              // If minutes is zero, pass `undefined` to not show it at all.
+              minutes: Math.floor(seconds / 60) || undefined,
+              seconds: seconds % 60,
+            }),
+          }
+        );
+        return;
+      }
+    }
+
+    l10n.setAttributes(statusEl, "speech-recognition-model-download-progress", {
+      progress: percent,
+    });
+  }
+
+  #stopObservingProgress() {
+    if (!this.#observingProgress) {
+      return;
+    }
+    this.#observingProgress = false;
+    Services.obs.removeObserver(this, "ml-model-download-progress");
+  }
 }
 
 export const PermissionUI = {
   PermissionPromptForRequest,
   GeolocationPermissionPrompt,
diff --git a/browser/modules/test/browser/browser_PermissionUI.js b/browser/modules/test/browser/browser_PermissionUI.js
--- a/browser/modules/test/browser/browser_PermissionUI.js
+++ b/browser/modules/test/browser/browser_PermissionUI.js
@@ -12,19 +12,37 @@
 
 const { PermissionTestUtils } = ChromeUtils.importESModule(
   "resource://testing-common/PermissionTestUtils.sys.mjs"
 );
 
+function setPermissionRequestOptions(request, values) {
+  let options = Cc["@mozilla.org/array;1"].createInstance(Ci.nsIMutableArray);
+  for (let value of values) {
+    let string = Cc["@mozilla.org/supports-string;1"].createInstance(
+      Ci.nsISupportsString
+    );
+    string.data = value;
+    options.appendElement(string);
+  }
+  let type = {
+    options,
+    QueryInterface: ChromeUtils.generateQI(["nsIContentPermissionType"]),
+  };
+  let types = Cc["@mozilla.org/array;1"].createInstance(Ci.nsIMutableArray);
+  types.appendElement(type);
+  request.types = types;
+}
+
 /**
  * Tests the PermissionPromptForRequest prototype to ensure that a prompt
  * can be displayed. Does not test permission handling.
  */
 add_task(async function test_permission_prompt_for_request() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com/",
+      url: "https://example.com/",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       const kTestMessage = "Test message";
       let mainAction = {
@@ -106,19 +124,148 @@
       await removePromise;
     }
   );
 });
 
+add_task(async function test_speech_recognition_model_download_progress() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["security.notification_enable_delay", 0]],
+  });
+
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: "https://example.com/",
+    },
+    async function (browser) {
+      const progressToken = "test-speech-model-download";
+      let request = makeMockPermissionRequest(browser);
+      setPermissionRequestOptions(request, ["123", progressToken]);
+      let elementAvailable = true;
+      Object.defineProperty(request, "element", {
+        configurable: true,
+        get() {
+          if (!elementAvailable) {
+            throw Components.Exception("", Cr.NS_ERROR_FAILURE);
+          }
+          return browser;
+        },
+      });
+
+      let shownPromise = BrowserTestUtils.waitForEvent(
+        PopupNotifications.panel,
+        "popupshown"
+      );
+      new PermissionUI.SpeechRecognitionModelDownloadPermissionPrompt(
+        request
+      ).prompt();
+      await shownPromise;
+
+      let popup = getPopupNotificationNode();
+      let content = popup.querySelector(
+        "#speech-recognition-model-download-progress-content"
+      );
+      let progress = popup.querySelector(
+        "#speech-recognition-model-download-progress"
+      );
+      let status = popup.querySelector(
+        "#speech-recognition-model-download-progress-status"
+      );
+      let footer = popup.querySelector(".panel-footer");
+
+      Assert.ok(content.hidden, "progress content starts hidden");
+      Assert.ok(BrowserTestUtils.isVisible(footer), "actions start visible");
+
+      await popup.button.updateComplete;
+      popup.button.click();
+
+      await TestUtils.waitForCondition(
+        () => request._allowed,
+        "Waiting for permission allow callback"
+      );
+      elementAvailable = false;
+
+      Assert.ok(PopupNotifications.isPanelOpen, "doorhanger stayed open");
+      Assert.ok(!content.hidden, "progress content is shown");
+      Assert.ok(
+        BrowserTestUtils.isHidden(footer),
+        "actions are replaced by progress"
+      );
+
+      Services.obs.notifyObservers(
+        null,
+        "ml-model-download-progress",
+        JSON.stringify({
+          token: "other-token",
+          progress: 7,
+          totalLoaded: 7,
+          total: 100,
+        })
+      );
+      Assert.equal(progress.value, 0, "wrong token did not update progress");
+
+      Services.obs.notifyObservers(
+        null,
+        "ml-model-download-progress",
+        JSON.stringify({
+          token: progressToken,
+          progress: 42,
+          totalLoaded: 42,
+          total: 100,
+        })
+      );
+      await TestUtils.waitForCondition(
+        () => progress.value == 42,
+        "Waiting for progress update"
+      );
+      // The status text is localized asynchronously by Fluent.
+      await TestUtils.waitForCondition(
+        () => status.textContent.includes("42%"),
+        "Waiting for the status to include the progress percentage"
+      );
+
+      let hiddenPromise = BrowserTestUtils.waitForEvent(
+        PopupNotifications.panel,
+        "popuphidden"
+      );
+      Services.obs.notifyObservers(
+        null,
+        "ml-model-download-progress",
+        JSON.stringify({
+          token: progressToken,
+          progress: 100,
+          totalLoaded: 100,
+          total: 100,
+          done: true,
+          ok: true,
+        })
+      );
+      await hiddenPromise;
+      Assert.ok(
+        !request._cancelled,
+        "accepted download notification removal should not cancel the request"
+      );
+      Assert.ok(
+        !PopupNotifications.getNotification(
+          "speech-recognition-model-download",
+          browser
+        ),
+        "notification was removed after completion"
+      );
+    }
+  );
+});
+
 /**
  * Tests that if the PermissionPrompt sets displayURI to false in popupOptions,
  * then there is no URI shown on the popupnotification.
  */
 add_task(async function test_permission_prompt_for_popupOptions() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com/",
+      url: "https://example.com/",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       const kTestMessage = "Test message";
       let mainAction = {
@@ -183,11 +330,11 @@
  */
 add_task(async function test_with_permission_key() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com",
+      url: "https://example.com",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       const kTestMessage = "Test message";
       const kTestPermissionKey = "test-permission-key";
@@ -397,11 +544,11 @@
  */
 add_task(async function test_on_before_show() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com",
+      url: "https://example.com",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       const kTestMessage = "Test message";
 
@@ -467,11 +614,11 @@
  */
 add_task(async function test_no_request() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com",
+      url: "https://example.com",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       let allowed = false;
       let mainAction = {
@@ -593,11 +740,11 @@
  */
 add_task(async function test_window_swap() {
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
-      url: "http://example.com",
+      url: "https://example.com",
     },
     async function (browser) {
       const kTestNotificationID = "test-notification";
       const kTestMessage = "Test message";
 
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
--- a/browser/themes/shared/browser-shared.css
+++ b/browser/themes/shared/browser-shared.css
@@ -857,10 +857,49 @@
 
 #addon-progress-notification-progressmeter {
   margin: var(--space-xxsmall) var(--space-xsmall);
 }
 
+#speech-recognition-model-download-notification[model-download-in-progress] {
+  .panel-footer {
+    display: none;
+  }
+}
+
+#speech-recognition-model-download-progress-content {
+  width: 100%;
+  margin: var(--space-small) var(--panel-padding) var(--panel-padding);
+}
+
+/* Same track as the download progress meter, see
+ * browser/themes/shared/downloads/progressmeter.css. */
+.speech-recognition-model-download-progress {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--size-item-xsmall);
+  border: none;
+  border-radius: var(--border-radius-xsmall);
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+
+.speech-recognition-model-download-progress::-moz-progress-bar {
+  appearance: none;
+  background-color: var(--color-accent-primary);
+  border-radius: var(--border-radius-xsmall);
+}
+
+#speech-recognition-model-download-progress-status {
+  margin-block-start: var(--space-small);
+}
+
+#speech-recognition-model-download-progress-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-start: var(--space-medium);
+}
+
 #invalid-form-popup {
   white-space: pre-wrap;
   word-break: break-word;
   unicode-bidi: plaintext;