Adding upstream version 125.0.1.upstream/125.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

71 files changed, 1625 insertions, 394 deletions

diff --git a/toolkit/content/aboutLogging.js b/toolkit/content/aboutLogging.js
index 5aaf0f9ecc..daff10fbec 100644
--- a/toolkit/content/aboutLogging.js
+++ b/toolkit/content/aboutLogging.js
@@ -50,7 +50,7 @@ function moduleEnvVarPresent() {
  *   as markers.
  *
  * [1]: The keys of the `presets` object defined in
- * https://searchfox.org/mozilla-central/source/devtools/client/performance-new/shared/background.jsm.js
+ * https://searchfox.org/mozilla-central/source/devtools/client/performance-new/shared/background.sys.mjs
  */
 
 const gOsSpecificLoggingPresets = (() => {
@@ -74,7 +74,7 @@ const gOsSpecificLoggingPresets = (() => {
 const gLoggingPresets = {
   networking: {
     modules:
-      "timestamp,sync,nsHttp:5,cache2:5,nsSocketTransport:5,nsHostResolver:5",
+      "timestamp,sync,nsHttp:5,cache2:5,nsSocketTransport:5,nsHostResolver:5,EarlyHint:5",
     l10nIds: {
       label: "about-logging-preset-networking-label",
       description: "about-logging-preset-networking-description",
@@ -228,7 +228,6 @@ function populatePresets() {
       $("#log-modules").value = gLoggingPresets[dropdown.value].modules;
     }
     setPresetAndDescription(dropdown.value);
-    setLogModules();
     Services.prefs.setCharPref("logging.config.preset", dropdown.value);
   };
 
@@ -376,7 +375,6 @@ function parseURL() {
     $("#set-log-modules-button").disabled = true;
     $("#logging-preset-dropdown").disabled = true;
     someElementsDisabled = true;
-    setLogModules();
     updateLogModules();
   }
   if (outputTypeOverriden) {
diff --git a/toolkit/content/aboutNetError.mjs b/toolkit/content/aboutNetError.mjs
index 83f40fc479..554553fd62 100644
--- a/toolkit/content/aboutNetError.mjs
+++ b/toolkit/content/aboutNetError.mjs
@@ -430,11 +430,21 @@ function initPage() {
       tryAgain.hidden = true;
       break;
 
-    // Pinning errors are of type nssFailure2
+    // TLS errors and non-overridable certificate errors (e.g. pinning
+    // failures) are of type nssFailure2.
     case "nssFailure2": {
       learnMore.hidden = false;
 
       const errorCode = document.getNetErrorInfo().errorCodeString;
+      RPMRecordTelemetryEvent(
+        "security.ui.tlserror",
+        "load",
+        "abouttlserror",
+        errorCode,
+        {
+          is_frame: (window.parent != window).toString(),
+        }
+      );
       switch (errorCode) {
         case "SSL_ERROR_UNSUPPORTED_VERSION":
         case "SSL_ERROR_PROTOCOL_VERSION_ALERT": {
diff --git a/toolkit/content/aboutSupport.js b/toolkit/content/aboutSupport.js
index f668fd671f..f9f35e7e76 100644
--- a/toolkit/content/aboutSupport.js
+++ b/toolkit/content/aboutSupport.js
@@ -1179,7 +1179,7 @@ var snapshotFormatters = {
         $.new("td", cdmInfo.keySystemName),
         $.new("td", getVideoRobustness(rvArray)),
         $.new("td", getAudioRobustness(rvArray)),
-        $.new("td", getCapabilities(rvArray)),
+        $.new("td", getCapabilities(rvArray), null, { colspan: "4" }),
         $.new("td", cdmInfo.clearlead ? "Yes" : "No"),
         $.new("td", cdmInfo.isHDCP22Compatible ? "Yes" : "No"),
       ]);
diff --git a/toolkit/content/aboutSupport.xhtml b/toolkit/content/aboutSupport.xhtml
index d3de7d0019..d19fb64d56 100644
--- a/toolkit/content/aboutSupport.xhtml
+++ b/toolkit/content/aboutSupport.xhtml
@@ -567,13 +567,13 @@
 
         <tbody id="media-content-decryption-modules-tbody">
           <tr>
-            <th colspan="6" class="title-column" data-l10n-id="media-content-decryption-modules-title"/>
+            <th colspan="9" class="title-column" data-l10n-id="media-content-decryption-modules-title"/>
           </tr>
           <tr>
             <th data-l10n-id="media-key-system-name"/>
             <th data-l10n-id="media-video-robustness"/>
             <th data-l10n-id="media-audio-robustness"/>
-            <th data-l10n-id="media-cdm-capabilities"/>
+            <th colspan="4" data-l10n-id="media-cdm-capabilities"/>
             <th data-l10n-id="media-cdm-clear-lead"/>
             <th data-l10n-id="media-hdcp-22-compatible"/>
           </tr>
diff --git a/toolkit/content/aboutwebrtc/aboutWebrtc.mjs b/toolkit/content/aboutwebrtc/aboutWebrtc.mjs
index 3c41a4aa66..7e2c92a4bd 100644
--- a/toolkit/content/aboutwebrtc/aboutWebrtc.mjs
+++ b/toolkit/content/aboutwebrtc/aboutWebrtc.mjs
@@ -230,7 +230,7 @@ class SavePage extends Control {
     ]);
     let FilePicker = makeFilePickerService();
     const lazyFileUtils = lazy.FileUtils;
-    FilePicker.init(window, dialogTitle, FilePicker.modeSave);
+    FilePicker.init(window.browsingContext, dialogTitle, FilePicker.modeSave);
     FilePicker.defaultString = LOGFILE_NAME_DEFAULT;
     const rv = await new Promise(r => FilePicker.open(r));
     if (rv != FilePicker.returnOK && rv != FilePicker.returnReplace) {
diff --git a/toolkit/content/contentAreaUtils.js b/toolkit/content/contentAreaUtils.js
index d9ee83026e..983fd9890d 100644
--- a/toolkit/content/contentAreaUtils.js
+++ b/toolkit/content/contentAreaUtils.js
@@ -11,7 +11,6 @@ var { XPCOMUtils } = ChromeUtils.importESModule(
 
 ChromeUtils.defineESModuleGetters(this, {
   BrowserUtils: "resource://gre/modules/BrowserUtils.sys.mjs",
-  Deprecated: "resource://gre/modules/Deprecated.sys.mjs",
   DownloadLastDir: "resource://gre/modules/DownloadLastDir.sys.mjs",
   DownloadPaths: "resource://gre/modules/DownloadPaths.sys.mjs",
   Downloads: "resource://gre/modules/Downloads.sys.mjs",
@@ -689,7 +688,7 @@ function promiseTargetFile(
     let fp = makeFilePicker();
     let titleKey = aFpP.fpTitleKey || "SaveLinkTitle";
     fp.init(
-      window,
+      window.browsingContext,
       ContentAreaUtils.stringBundle.GetStringFromName(titleKey),
       Ci.nsIFilePicker.modeSave
     );
diff --git a/toolkit/content/customElements.js b/toolkit/content/customElements.js
index 30958a3a31..b0a8f33fe6 100644
--- a/toolkit/content/customElements.js
+++ b/toolkit/content/customElements.js
@@ -818,6 +818,8 @@
     // like the previous Services.scriptloader.loadSubscript() function
     function importCustomElementFromESModule(name) {
       switch (name) {
+        case "moz-button":
+          return import("chrome://global/content/elements/moz-button.mjs");
         case "moz-button-group":
           return import(
             "chrome://global/content/elements/moz-button-group.mjs"
diff --git a/toolkit/content/jar.mn b/toolkit/content/jar.mn
index 8b18c94525..d08037a84a 100644
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -91,10 +91,15 @@ toolkit.jar:
    content/global/elements/message-bar.js      (widgets/message-bar.js)
    content/global/elements/menu.js             (widgets/menu.js)
    content/global/elements/menupopup.js        (widgets/menupopup.js)
+   content/global/elements/moz-button.css    (widgets/moz-button/moz-button.css)
+   content/global/elements/moz-button.mjs    (widgets/moz-button/moz-button.mjs)
    content/global/elements/moz-button-group.css    (widgets/moz-button-group/moz-button-group.css)
    content/global/elements/moz-button-group.mjs    (widgets/moz-button-group/moz-button-group.mjs)
    content/global/elements/moz-card.css         (widgets/moz-card/moz-card.css)
    content/global/elements/moz-card.mjs         (widgets/moz-card/moz-card.mjs)
+   content/global/elements/moz-page-nav.css    (widgets/moz-page-nav/moz-page-nav.css)
+   content/global/elements/moz-page-nav-button.css    (widgets/moz-page-nav/moz-page-nav-button.css)
+   content/global/elements/moz-page-nav.mjs    (widgets/moz-page-nav/moz-page-nav.mjs)
    content/global/elements/moz-five-star.css    (widgets/moz-five-star/moz-five-star.css)
    content/global/elements/moz-five-star.mjs    (widgets/moz-five-star/moz-five-star.mjs)
    content/global/elements/moz-input-box.js    (widgets/moz-input-box.js)
diff --git a/toolkit/content/license.html b/toolkit/content/license.html
index 9e0721906b..e9d2642354 100644
--- a/toolkit/content/license.html
+++ b/toolkit/content/license.html
@@ -104,7 +104,6 @@
       <li><a href="about:license#jquery">jQuery License</a></li>
       <li><a href="about:license#k_exp">k_exp License</a></li>
       <li><a href="about:license#khronos">Khronos group License</a></li>
-      <li><a href="about:license#kiss_fft">Kiss FFT License</a></li>
 #ifdef MOZ_USE_LIBCXX
       <li><a href="about:license#libc++">libc++ License</a></li>
 #endif
@@ -154,9 +153,6 @@
       <li><a href="about:license#validator">Validator License</a></li>
       <li><a href="about:license#vtune">VTune License</a></li>
       <li><a href="about:license#webrtc">WebRTC License</a></li>
-#ifdef MOZ_DEFAULT_BROWSER_AGENT
-      <li><a href="about:license#wintoast">WinToast License</a></li>
-#endif
       <li><a href="about:license#x264">x264 License</a></li>
       <li><a href="about:license#xiph">Xiph.org Foundation License</a></li>
     </ul>
@@ -2041,7 +2037,6 @@ WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
         <li><code>gfx/ots/</code></li>
         <li><code>gfx/ycbcr/</code></li>
         <li><code>ipc/chromium/</code></li>
-        <li><code>media/openmax_dl/</code></li>
         <li><code>toolkit/components/reputationservice/</code></li>
         <li><code>toolkit/components/url-classifier/chromium/</code></li>
         <li><code>tools/profiler/</code></li>
@@ -3116,80 +3111,6 @@ OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 SUCH DAMAGE.
 </pre>
 
-
-    <hr>
-
-    <h1><a id="khronos"></a>Khronos group License</h1>
-
-    <p>This license applies to the following files:</p>
-
-    <ul>
-      <li><code>media/openmax_dl/dl/api/omxtypes.h</code></li>
-      <li><code>media/openmax_dl/dl/sp/api/omxSP.h</code></li>
-    </ul>
-
-<pre>
-Copyright 2005-2008 The Khronos Group Inc. All Rights Reserved.
-
-These materials are protected by copyright laws and contain material
-proprietary to the Khronos Group, Inc.  You may use these materials
-for implementing Khronos specifications, without altering or removing
-any trademark, copyright or other notice from the specification.
-
-Khronos Group makes no, and expressly disclaims any, representations
-or warranties, express or implied, regarding these materials, including,
-without limitation, any implied warranties of merchantability or fitness
-for a particular purpose or non-infringement of any intellectual property.
-Khronos Group makes no, and expressly disclaims any, warranties, express
-or implied, regarding the correctness, accuracy, completeness, timeliness,
-and reliability of these materials.
-
-Under no circumstances will the Khronos Group, or any of its Promoters,
-Contributors or Members or their respective partners, officers, directors,
-employees, agents or representatives be liable for any damages, whether
-direct, indirect, special or consequential damages for lost revenues,
-lost profits, or otherwise, arising from or in connection with these
-materials.
-
-Khronos and OpenMAX are trademarks of the Khronos Group Inc.
-</pre>
-
-    <hr>
-
-    <h1><a id="kiss_fft"></a>Kiss FFT License</h1>
-
-    <p>This license applies to files in the directory
-      <code>media/kiss_fft/</code>.</p>
-
-<pre>
-Copyright (c) 2003-2010 Mark Borgerding
-
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright notice,
-      this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright notice,
-      this list of conditions and the following disclaimer in the documentation
-      and/or other materials provided with the distribution.
-    * Neither the author nor the names of any contributors may be used to
-      endorse or promote products derived from this software without specific
-      prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-</pre>
-
     <hr>
 
 #ifdef MOZ_USE_LIBCXX
@@ -3695,9 +3616,6 @@ SOFTWARE.
         <li><code>third_party/rust/synstructure</code></li>
         <li><code>third_party/rust/void</code></li>
         <li><code>js/src/zydis</code> (unless otherwise specified)</li>
-#ifdef MOZ_DEFAULT_BROWSER_AGENT
-        <li><code>third_party/WinToast</code> unless otherwise specified</li>
-#endif
     </ul>
     See the individual LICENSE files or headers for copyright owners.</p>
 
@@ -5645,6 +5563,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     they are referred to below as "Distributable Code":
       <ul>
         <li><var>msvc*.dll</var> (C and C++ runtime libraries)</li>
+        <li><var>vcruntime*.dll</var> (Visual C++ Runtime)</li>
       </ul>
     </p>
 
diff --git a/toolkit/content/tests/browser/browser_about_logging.js b/toolkit/content/tests/browser/browser_about_logging.js
index f458b36e0d..fdf8eab57b 100644
--- a/toolkit/content/tests/browser/browser_about_logging.js
+++ b/toolkit/content/tests/browser/browser_about_logging.js
@@ -110,15 +110,12 @@ add_task(async function testURLParameters() {
           !$("#some-elements-unavailable").hidden,
           "If modules are selected via URL, a warning should be displayed."
         );
-        var inPageSorted = $("#current-log-modules")
-          .innerText.split(",")
-          .sort()
-          .join(",");
-        var inURLSorted = modulesInURL.split(",").sort().join(",");
+        var inInputSorted = $("#log-modules").value.split(",").sort().join(",");
+        var modulesSorted = modulesInURL.split(",").sort().join(",");
         Assert.equal(
-          inPageSorted,
-          inURLSorted,
-          "When selecting modules via URL params, the same modules are reflected in the page."
+          modulesSorted,
+          inInputSorted,
+          "When selecting modules via URL params, the log modules aren't immediately set"
         );
       });
     }
@@ -135,19 +132,16 @@ add_task(async function testURLParameters() {
           !$("#some-elements-unavailable").hidden,
           "If a preset is selected via URL, a warning should be displayed."
         );
-        var inPageSorted = $("#current-log-modules")
-          .innerText.split(",")
-          .sort()
-          .join(",");
+        var inInputSorted = $("#log-modules").value.split(",").sort().join(",");
         var presetSorted = content
           .presets()
           [presetInURL].modules.split(",")
           .sort()
           .join(",");
         Assert.equal(
-          inPageSorted,
+          inInputSorted,
           presetSorted,
-          "When selecting a preset via URL params, the correct log modules are reflected in the page."
+          "When selecting a preset via URL params, the correct log modules are reflected in the input."
         );
       });
     }
diff --git a/toolkit/content/tests/browser/browser_default_audio_filename.js b/toolkit/content/tests/browser/browser_default_audio_filename.js
index c32dda6878..2732c0e434 100644
--- a/toolkit/content/tests/browser/browser_default_audio_filename.js
+++ b/toolkit/content/tests/browser/browser_default_audio_filename.js
@@ -2,7 +2,7 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 registerCleanupFunction(function () {
   MockFilePicker.cleanup();
 });
diff --git a/toolkit/content/tests/browser/browser_default_image_filename.js b/toolkit/content/tests/browser/browser_default_image_filename.js
index 9add704664..0f7847020c 100644
--- a/toolkit/content/tests/browser/browser_default_image_filename.js
+++ b/toolkit/content/tests/browser/browser_default_image_filename.js
@@ -2,7 +2,7 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 const DATA_IMAGE_GIF_URL =
   "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";
 registerCleanupFunction(function () {
diff --git a/toolkit/content/tests/browser/browser_default_image_filename_redirect.js b/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
index a3fdd2d19e..82926b3d44 100644
--- a/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
+++ b/toolkit/content/tests/browser/browser_default_image_filename_redirect.js
@@ -7,7 +7,7 @@
  */
 
 let MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 add_task(async function () {
   // This URL will redirect to doggy.png.
   const URL_FIREBIRD =
diff --git a/toolkit/content/tests/browser/browser_saveImageURL.js b/toolkit/content/tests/browser/browser_saveImageURL.js
index c936b8ef84..0f7bf4b117 100644
--- a/toolkit/content/tests/browser/browser_saveImageURL.js
+++ b/toolkit/content/tests/browser/browser_saveImageURL.js
@@ -5,7 +5,7 @@ const IMAGE_PAGE =
 
 var MockFilePicker = SpecialPowers.MockFilePicker;
 
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 MockFilePicker.returnValue = MockFilePicker.returnCancel;
 
 registerCleanupFunction(function () {
diff --git a/toolkit/content/tests/browser/browser_save_folder_standalone_image.js b/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
index ce45d04fdc..073e71a88b 100644
--- a/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
+++ b/toolkit/content/tests/browser/browser_save_folder_standalone_image.js
@@ -43,7 +43,7 @@ async function clearHistoryAndWait() {
  */
 
 let MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 
 add_task(async function () {
   const IMAGE_URL =
diff --git a/toolkit/content/tests/browser/browser_save_resend_postdata.js b/toolkit/content/tests/browser/browser_save_resend_postdata.js
index 5eb1b1c904..3f3e729dab 100644
--- a/toolkit/content/tests/browser/browser_save_resend_postdata.js
+++ b/toolkit/content/tests/browser/browser_save_resend_postdata.js
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var MockFilePicker = SpecialPowers.MockFilePicker;
-MockFilePicker.init(window);
+MockFilePicker.init(window.browsingContext);
 
 /**
  * Test for bug 471962 <https://bugzilla.mozilla.org/show_bug.cgi?id=471962>:
diff --git a/toolkit/content/tests/browser/datetime/browser.toml b/toolkit/content/tests/browser/datetime/browser.toml
index 6e8580ddc4..747014f386 100644
--- a/toolkit/content/tests/browser/datetime/browser.toml
+++ b/toolkit/content/tests/browser/datetime/browser.toml
@@ -8,8 +8,9 @@ skip-if = [
   "os == 'linux' && fission && socketprocess_networking && !debug", # high frequency intermittent, Bug 1673140
 ]
 
+["browser_datetime_change_event.js"]
+
 ["browser_datetime_datepicker.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked td.outside may not be accessible
 # This file was skipped before new tests were written based on it in Bug 1676068
 skip-if = [
   "tsan", # Frequently times out on TSan
@@ -46,7 +47,6 @@ skip-if = [
 ]
 
 ["browser_datetime_datepicker_min_max.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked TD may not be accessible
 skip-if = [
   "tsan", # Frequently times out on TSan
   "os == 'win' && asan", # fails on asan
@@ -61,7 +61,6 @@ skip-if = [
 ]
 
 ["browser_datetime_datepicker_mousenav.js"]
-fail-if = ["a11y_checks"] # Bug 1854538 clicked td.weekend.outside may not be accessible
 skip-if = [
   "tsan", # Frequently times out on TSan
   "os == 'win' && asan", # fails on asan
diff --git a/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js b/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js
new file mode 100644
index 0000000000..920653778a
--- /dev/null
+++ b/toolkit/content/tests/browser/datetime/browser_datetime_change_event.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+async function open_change_and_expect_one_change_event(page) {
+  await helper.openPicker(page);
+
+  let changeEventPromise = helper.promiseChange();
+
+  // Click the first item (top-left corner) of the calendar
+  helper.click(helper.getElement(DAYS_VIEW).children[0]);
+  await changeEventPromise;
+
+  await helper.closePicker();
+
+  let changeEvents = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    function () {
+      return content.wrappedJSObject.changeEventCount;
+    }
+  );
+  is(changeEvents, 1, "Should've got one change event");
+  await helper.tearDown();
+}
+
+add_task(async function test_change_event_simple() {
+  await open_change_and_expect_one_change_event(`data:text/html,
+    <!doctype html>
+    <script>
+      var changeEventCount = 0;
+    </script>
+    <input type="date" id="date" onchange="changeEventCount++">
+  `);
+});
+
+add_task(async function test_change_event_with_mutation() {
+  await open_change_and_expect_one_change_event(`data:text/html,
+    <!doctype html>
+    <script>
+      var changeEventCount = 0;
+    </script>
+    <input type="date" id="date" onchange="this.value = ''; changeEventCount++">
+  `);
+});
diff --git a/toolkit/content/tests/browser/datetime/head.js b/toolkit/content/tests/browser/datetime/head.js
index bbef72873c..46e2c78af5 100644
--- a/toolkit/content/tests/browser/datetime/head.js
+++ b/toolkit/content/tests/browser/datetime/head.js
@@ -113,15 +113,19 @@ class DateTimeTestHelper {
     EventUtils.synthesizeMouseAtCenter(element, {}, this.frame.contentWindow);
   }
 
-  /**
-   * Close the panel and the tab
-   */
-  async tearDown() {
+  async closePicker() {
     if (this.panel.state != "closed") {
       let pickerClosePromise = this.promisePickerClosed();
       this.panel.hidePopup();
       await pickerClosePromise;
     }
+  }
+
+  /**
+   * Close the panel and the tab
+   */
+  async tearDown() {
+    await this.closePicker();
     BrowserTestUtils.removeTab(this.tab);
     this.tab = null;
   }
diff --git a/toolkit/content/tests/chrome/chrome.toml b/toolkit/content/tests/chrome/chrome.toml
index 70fa12c4b6..3391a2923d 100644
--- a/toolkit/content/tests/chrome/chrome.toml
+++ b/toolkit/content/tests/chrome/chrome.toml
@@ -224,6 +224,8 @@ support-files = [
 
 ["test_menulist_in_popup.xhtml"]
 
+["test_menulist_initial_selection.xhtml"]
+
 ["test_menulist_keynav.xhtml"]
 
 ["test_menulist_null_value.xhtml"]
diff --git a/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml b/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
index b49f8a1d5e..005c6ebffe 100644
--- a/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
+++ b/toolkit/content/tests/chrome/test_autocomplete_mac_caret.xhtml
@@ -57,9 +57,9 @@ function checkKeyCaretTest(key, expectedStart, expectedEnd, result, testid)
       keypressFired = true;
     }
   }
-  SpecialPowers.addSystemEventListener(window, "keypress", listener, false);
+  SpecialPowers.wrap(window).addEventListener("keypress", listener, { mozSystemGroup: true });
   synthesizeKey(key, {});
-  SpecialPowers.removeSystemEventListener(window, "keypress", listener, false);
+  SpecialPowers.wrap(window).removeEventListener("keypress", listener, { mozSystemGroup: true });
   is(keypressFired, result, `${testid} keypress event should${result ? "" : " not"} be fired`);
   is(autocomplete.selectionStart, expectedStart, testid + " selectionStart");
   is(autocomplete.selectionEnd, expectedEnd, testid + " selectionEnd");
diff --git a/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml b/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml
new file mode 100644
index 0000000000..19e9beae67
--- /dev/null
+++ b/toolkit/content/tests/chrome/test_menulist_initial_selection.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
+
+<window title="Menulist Initial Selection Test"
+        onload="setTimeout(runTest, 0)"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+<script>
+<![CDATA[
+SimpleTest.waitForExplicitFinish();
+
+async function runTest() {
+  const panel = document.querySelector("panel");
+  const menulist1 = document.getElementById("menulist1");
+  const menulist2 = document.getElementById("menulist2");
+
+  const panelShown = new Promise(r => panel.addEventListener("popupshown", r, { once: true }));
+  info("opening panel");
+  panel.openPopup(null, { x: 0, y: 0 });
+  await panelShown;
+  info("panel opened");
+
+  is(menulist1.value, "1", "menulist1 should have the first menuitem's value");
+  is(menulist1.label, "One", "menulist1 should have the first menuitem's label");
+
+  is(menulist2.value, "", "menulist2 should not be selected to the first item's value");
+  is(menulist2.label, "None", "menulist2 should not be selected to the first item's value");
+
+  SimpleTest.finish();
+}
+
+]]>
+</script>
+
+<panel>
+  <menulist id="menulist1" value="" label="None">
+    <menupopup id="menulistpopup">
+      <menuitem value="1" label="One"/>
+      <menuitem value="2" label="Two"/>
+      <menuitem value="3" label="Three"/>
+    </menupopup>
+  </menulist>
+  <menulist id="menulist2" value="" label="None" noinitialselection="true">
+    <menupopup id="menulistpopup">
+      <menuitem value="1" label="One"/>
+      <menuitem value="2" label="Two"/>
+      <menuitem value="3" label="Three"/>
+    </menupopup>
+  </menulist>
+</panel>
+
+</window>
diff --git a/toolkit/content/tests/chrome/window_tooltip.xhtml b/toolkit/content/tests/chrome/window_tooltip.xhtml
index 6a573f0bd9..b78075de45 100644
--- a/toolkit/content/tests/chrome/window_tooltip.xhtml
+++ b/toolkit/content/tests/chrome/window_tooltip.xhtml
@@ -15,12 +15,12 @@
 
 <box id="parent" tooltiptext="Box Tooltip" style="margin: 10px">
   <button id="withtext" label="Tooltip Text" tooltiptext="Button Tooltip"
-          style="-moz-appearance: none; padding: 0;"/>
-  <button id="without" label="No Tooltip" style="-moz-appearance: none; padding: 0;"/>
+          style="appearance: none; padding: 0;"/>
+  <button id="without" label="No Tooltip" style="appearance: none; padding: 0;"/>
   <!-- remove the native theme and borders to avoid some platform
        specific sizing differences -->
   <button id="withtooltip" label="Tooltip Element" tooltip="thetooltip"
-          class="plain" style="-moz-appearance: none; padding: 0;"/>
+          class="plain" style="appearance: none; padding: 0;"/>
 </box>
 
 <script class="testbody" type="application/javascript">
diff --git a/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
index fe4a6ee67c..271cf50a79 100644
--- a/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
+++ b/toolkit/content/tests/mochitest/test_autocomplete_change_after_focus.html
@@ -77,7 +77,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=998893
         resolve();
       }
 
-      SpecialPowers.addSystemEventListener(field, "keypress", handleEnter, true);
+      SpecialPowers.wrap(field).addEventListener("keypress", handleEnter, { capture: true, mozSystemGroup: true });
     });
 
     field.focus();
diff --git a/toolkit/content/tests/widgets/chrome.toml b/toolkit/content/tests/widgets/chrome.toml
index af2c778947..18fe0d153a 100644
--- a/toolkit/content/tests/widgets/chrome.toml
+++ b/toolkit/content/tests/widgets/chrome.toml
@@ -22,6 +22,8 @@ skip-if = ["os == 'linux'"] # Bug 1116215
 ["test_menubar.xhtml"]
 skip-if = ["os == 'mac'"]
 
+["test_moz_button.html"]
+
 ["test_moz_button_group.html"]
 
 ["test_moz_card.html"]
@@ -32,6 +34,8 @@ skip-if = ["os == 'mac'"]
 
 ["test_moz_message_bar.html"]
 
+["test_moz_page_nav.html"]
+
 ["test_moz_support_link.html"]
 
 ["test_moz_toggle.html"]
@@ -65,4 +69,5 @@ skip-if = [
   "os == 'android'",
   "os == 'linux' && debug", # Bug 1765783
 ]
+
 ["test_videocontrols_onclickplay.html"]
diff --git a/toolkit/content/tests/widgets/test_moz_button.html b/toolkit/content/tests/widgets/test_moz_button.html
new file mode 100644
index 0000000000..473b2d1a1c
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_button.html
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>MozButton Tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <link rel="stylesheet" href="chrome://global/skin/design-system/tokens-brand.css">
+  <link rel="stylesheet" href="chrome://global/skin/design-system/text-and-typography.css">
+<style>
+.four::part(button),
+.five::part(button),
+.six::part(button) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='context-fill' fill-opacity='context-fill-opacity'%3E%3Cpath d='M3 7 1.5 7l-.5.5L1 9l.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='m8.75 7-1.5 0-.5.5 0 1.5.5.5 1.5 0 .5-.5 0-1.5z'/%3E%3Cpath d='M14.5 7 13 7l-.5.5 0 1.5.5.5 1.5 0L15 9l0-1.5z'/%3E%3C/svg%3E");
+}
+</style>
+  <script>
+    function normalizeColor(val, computedStyles) {
+      if (val.includes("currentColor")) {
+        val = val.replaceAll("currentColor", computedStyles.color);
+      }
+      if (val.startsWith("light-dark")) {
+        let [, light, dark] = val.match(/light-dark\(([^,]+),\s*([^)]+)\)/);
+        if (light && dark) {
+          val = window.matchMedia("(prefers-color-scheme: dark)").matches ? dark : light;
+        }
+      }
+      try {
+        let { r, g, b, a } = InspectorUtils.colorToRGBA(val);
+        return `rgba(${r}, ${g}, ${b}, ${a})`;
+      } catch (e) {
+        info(val);
+        throw e;
+      }
+    }
+
+    function assertButtonPropertiesMatch(el, propertyToCssVar) {
+      let elStyles = getComputedStyle(el.buttonEl);
+      for (let [property, cssVar] of Object.entries(propertyToCssVar)) {
+        let propertyVal = elStyles[property];
+        let cssVarVal = cssVar.startsWith("--") ? elStyles.getPropertyValue(cssVar) : cssVar;
+        if (propertyVal.startsWith("rgb") || propertyVal.startsWith("#") || propertyVal.startsWith("color")) {
+          propertyVal = normalizeColor(propertyVal, elStyles);
+          cssVarVal = normalizeColor(cssVarVal, elStyles);
+        }
+        info(`${propertyVal} == ${cssVarVal}`);
+        is(propertyVal, cssVarVal, `${property} should be ${cssVar}`);
+      }
+    }
+
+    add_task(async function testButtonTypes() {
+      let [...buttons] = document.querySelectorAll("moz-button");
+      let [one, two, three, four, five, six] = buttons;
+
+      await Promise.all(buttons.map(btn => btn.updateComplete));
+
+      is(one.textContent, "Test button", "Text is set");
+      is(two.buttonEl.textContent.trim(), "Test button", "Text is set");
+      is(three.textContent, "Test button", "Text is set");
+
+      assertButtonPropertiesMatch(one, {
+        backgroundColor: "--button-background-color",
+        color: "--button-text-color",
+        height: "--button-min-height",
+      });
+      assertButtonPropertiesMatch(two, {
+        backgroundColor: "--button-background-color",
+        color: "--button-text-color",
+        height: "--button-min-height",
+      });
+      assertButtonPropertiesMatch(three, {
+        backgroundColor: "--button-background-color-primary",
+        color: "--button-text-color-primary",
+        height: "--button-min-height",
+      });
+
+      assertButtonPropertiesMatch(four, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "--button-background-color",
+        fill: "--button-text-color",
+      });
+      assertButtonPropertiesMatch(five, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "transparent",
+        fill: "--button-text-color",
+      });
+      assertButtonPropertiesMatch(six, {
+        width: "--button-size-icon",
+        height: "--button-size-icon",
+        backgroundColor: "transparent",
+        fill: "--button-text-color",
+      });
+
+      buttons.forEach(btn => (btn.size = "small"));
+
+      await Promise.all(buttons.map(btn => btn.updateComplete));
+
+      assertButtonPropertiesMatch(one, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(two, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(three, {
+        height: "--button-min-height-small",
+      });
+      assertButtonPropertiesMatch(four, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+      assertButtonPropertiesMatch(five, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+      assertButtonPropertiesMatch(six, {
+        width: "--button-size-icon-small",
+        height: "--button-size-icon-small",
+      });
+    });
+
+    add_task(async function testA11yAttributes() {
+      let button = document.querySelector("moz-button");
+
+      async function testProperty(propName, jsPropName = propName) {
+        let propValue = `${propName} value`;
+        ok(!button.buttonEl.hasAttribute(propName), `No ${propName} on inner button`);
+        button.setAttribute(propName, propValue);
+
+        await button.updateComplete;
+
+        ok(!button.hasAttribute(propName), `moz-button ${propName} cleared`);
+        is(button.buttonEl.getAttribute(propName), propValue, `${propName} added to inner button`);
+
+        button[jsPropName] = null;
+        await button.updateComplete;
+
+        ok(!button.buttonEl.hasAttribute(propName), `${propName} cleared by setting property`);
+      }
+
+      await testProperty("title");
+      await testProperty("aria-label", "ariaLabel");
+    });
+
+  </script>
+</head>
+<body>
+  <moz-button class="one">Test button</moz-button>
+  <moz-button class="two" label="Test button"></moz-button>
+  <moz-button class="three" type="primary">Test button</moz-button>
+  <moz-button class="four" type="icon"></moz-button>
+  <moz-button class="five" type="icon ghost"></moz-button>
+  <moz-button class="six" type="ghost icon"></moz-button>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_moz_page_nav.html b/toolkit/content/tests/widgets/test_moz_page_nav.html
new file mode 100644
index 0000000000..604df7c024
--- /dev/null
+++ b/toolkit/content/tests/widgets/test_moz_page_nav.html
@@ -0,0 +1,306 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>MozPageNav Tests</title>
+  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
+  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+  <script type="module" src="chrome://global/content/elements/moz-page-nav.mjs"></script>
+</head>
+<style>
+body {
+  display: flex;
+}
+#navigation {
+  width: var(--page-nav-width);
+}
+</style>
+<body>
+  <p id="display"></p>
+  <div id="content">
+    <div id="navigation">
+      <moz-page-nav heading="Heading">
+        <moz-page-nav-button view="view-one" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 1</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-two" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 2</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-three" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 3</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-four" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 4</span>
+        </moz-page-nav-button>
+        <moz-page-nav-button view="view-five" iconSrc="chrome://mozapps/skin/extensions/category-discover.svg">
+          <span class="view-name">View 5</span>
+        </moz-page-nav-button>
+      </moz-page-nav>
+    </div>
+  </div>
+<pre id="test"></pre>
+<script>
+  Services.scriptloader.loadSubScript(
+    "chrome://browser/content/utilityOverlay.js",
+    this
+  );
+  const { BrowserTestUtils } = ChromeUtils.importESModule(
+    "resource://testing-common/BrowserTestUtils.sys.mjs"
+  );
+
+const mozPageNav = document.querySelector("moz-page-nav");
+
+function isActiveElement(expectedActiveEl) {
+    return expectedActiveEl.getRootNode().activeElement == expectedActiveEl;
+  }
+
+  /**
+  * Tests that the first page nav button is selected by default
+  */
+  add_task(async function test_first_item_selected_by_default() {
+    is(
+      mozPageNav.pageNavButtons.length,
+      5,
+      "Five page nav buttons are in the navigation"
+    );
+
+    ok(
+      mozPageNav.pageNavButtons[0].view === mozPageNav.currentView,
+      "The first page nav button is selected by default"
+    )
+  });
+
+  /**
+  * Tests that views are selected when clicked
+  */
+  add_task(async function test_select_view() {
+    let gBrowser = BrowserWindowTracker.getTopWindow().top.gBrowser;
+    let secondViewButton = mozPageNav.pageNavButtons[1];
+    let viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    secondViewButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      secondViewButton.view === mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+
+    let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+    viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    thirdPageNavButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      thirdPageNavButton.view === mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+
+    let firstPageNavButton = mozPageNav.pageNavButtons[0];
+    viewChanged = BrowserTestUtils.waitForEvent(
+      gBrowser,
+      "change-view"
+    );
+
+    firstPageNavButton.buttonEl.click();
+    await viewChanged;
+
+    ok(
+      firstPageNavButton.view === mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+  });
+
+  /**
+  * Tests that categories are keyboard-navigable
+  */
+  add_task(async function test_keyboard_navigation() {
+    const arrowDown = async () => {
+      info("Arrow down");
+      synthesizeKey("KEY_ArrowDown", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowUp = async () => {
+      info("Arrow up");
+      synthesizeKey("KEY_ArrowUp", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowLeft = async () => {
+      info("Arrow left");
+      synthesizeKey("KEY_ArrowLeft", {});
+      await mozPageNav.updateComplete;
+    };
+    const arrowRight = async () => {
+      info("Arrow right");
+      synthesizeKey("KEY_ArrowRight", {});
+      await mozPageNav.updateComplete;
+    };
+
+     // Setting this pref allows the test to run as expected with a keyboard on MacOS
+     await SpecialPowers.pushPrefEnv({
+      set: [["accessibility.tabfocus", 7]],
+    });
+
+    let firstPageNavButton = mozPageNav.pageNavButtons[0];
+    let secondPageNavButton = mozPageNav.pageNavButtons[1];
+    let thirdPageNavButton = mozPageNav.pageNavButtons[2];
+    let fourthPageNavButton = mozPageNav.pageNavButtons[3];
+    let fifthPageNavButton = mozPageNav.pageNavButtons[4];
+
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    firstPageNavButton.buttonEl.focus();
+    await arrowDown();
+    ok(
+      isActiveElement(secondPageNavButton),
+      "The second page nav button is the active element after first arrow down"
+    );
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is selected"
+    )
+    await arrowDown();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is still selected"
+    )
+    await arrowUp();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    await arrowUp();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is still selected"
+    )
+
+    // Test navigation with arrow left/right keys
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    firstPageNavButton.buttonEl.focus();
+    await arrowRight();
+    ok(
+      isActiveElement(secondPageNavButton),
+      "The second page nav button is the active element after first arrow right"
+    );
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is selected"
+    )
+    await arrowRight();
+    is(
+      fifthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fifth page nav button is still selected"
+    )
+    await arrowLeft();
+    is(
+      fourthPageNavButton.view,
+      mozPageNav.currentView,
+      "The fourth page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      thirdPageNavButton.view,
+      mozPageNav.currentView,
+      "The third page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      secondPageNavButton.view,
+      mozPageNav.currentView,
+      "The second page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is selected"
+    )
+    await arrowLeft();
+    is(
+      firstPageNavButton.view,
+      mozPageNav.currentView,
+      "The first page nav button is still selected"
+    )
+
+    await SpecialPowers.popPrefEnv();
+  });
+</script>
+</body>
+</html>
diff --git a/toolkit/content/tests/widgets/test_videocontrols.html b/toolkit/content/tests/widgets/test_videocontrols.html
index 32cd23df6a..076b4350fd 100644
--- a/toolkit/content/tests/widgets/test_videocontrols.html
+++ b/toolkit/content/tests/widgets/test_videocontrols.html
@@ -67,7 +67,7 @@ let expectingEventPromise;
 async function isMuteButtonMuted() {
   const muteButton = getElementWithinVideo(video, "muteButton");
   await new Promise(SimpleTest.executeSoon);
-  return muteButton.getAttribute("muted") === "true";
+  return muteButton.hasAttribute("muted");
 }
 
 async function isVolumeSliderShowingCorrectVolume(expectedVolume) {
diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js
index 28de96c8d7..7109891faf 100644
--- a/toolkit/content/widgets/arrowscrollbox.js
+++ b/toolkit/content/widgets/arrowscrollbox.js
@@ -21,7 +21,7 @@
       return `
       <html:link rel="stylesheet" href="chrome://global/skin/toolbarbutton.css"/>
       <html:link rel="stylesheet" href="chrome://global/skin/arrowscrollbox.css"/>
-      <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false"/>
+      <toolbarbutton id="scrollbutton-up" part="scrollbutton-up" keyNav="false" data-l10n-id="overflow-scroll-button-up"/>
       <spacer part="overflow-start-indicator"/>
       <box class="scrollbox-clip" part="scrollbox-clip" flex="1">
         <scrollbox part="scrollbox" flex="1">
@@ -29,7 +29,7 @@
         </scrollbox>
       </box>
       <spacer part="overflow-end-indicator"/>
-      <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false"/>
+      <toolbarbutton id="scrollbutton-down" part="scrollbutton-down" keyNav="false" data-l10n-id="overflow-scroll-button-down"/>
     `;
     }
 
@@ -43,6 +43,8 @@
       this._scrollButtonDown =
         this.shadowRoot.getElementById("scrollbutton-down");
 
+      MozXULElement.insertFTLIfNeeded("toolkit/global/arrowscrollbox.ftl");
+
       this._arrowScrollAnim = {
         scrollbox: this,
         requestHandle: 0,
@@ -134,6 +136,8 @@
       }
       this.hasConnected = true;
 
+      document.l10n.connectRoot(this.shadowRoot);
+
       if (!this.hasAttribute("smoothscroll")) {
         this.smoothScroll = Services.prefs.getBoolPref(
           "toolkit.scrollbox.smoothScroll",
@@ -639,6 +643,7 @@
         this._scrollTimer.cancel();
         this._scrollTimer = null;
       }
+      document.l10n.disconnectRoot(this.shadowRoot);
     }
 
     on_wheel(event) {
@@ -749,7 +754,7 @@
       }
     }
 
-    on_touchend(event) {
+    on_touchend() {
       this._touchStart = -1;
     }
 
@@ -804,12 +809,12 @@
       this._updateScrollButtonsDisabledState();
     }
 
-    on_scroll(event) {
+    on_scroll() {
       this._isScrolling = true;
       this._updateScrollButtonsDisabledState();
     }
 
-    on_scrollend(event) {
+    on_scrollend() {
       this._isScrolling = false;
       this._destination = 0;
       this._direction = 0;
diff --git a/toolkit/content/widgets/autocomplete-input.js b/toolkit/content/widgets/autocomplete-input.js
index 36105ba4d7..a6fb4b5067 100644
--- a/toolkit/content/widgets/autocomplete-input.js
+++ b/toolkit/content/widgets/autocomplete-input.js
@@ -40,7 +40,7 @@
 
       this.addEventListener(
         "compositionstart",
-        event => {
+        () => {
           if (
             this.mController.input.wrappedJSObject == this.nsIAutocompleteInput
           ) {
@@ -52,7 +52,7 @@
 
       this.addEventListener(
         "compositionend",
-        event => {
+        () => {
           if (
             this.mController.input.wrappedJSObject == this.nsIAutocompleteInput
           ) {
@@ -64,7 +64,7 @@
 
       this.addEventListener(
         "focus",
-        event => {
+        () => {
           this.attachController();
           if (
             window.gBrowser &&
@@ -82,7 +82,7 @@
 
       this.addEventListener(
         "blur",
-        event => {
+        () => {
           if (!this._dontBlur) {
             if (this.forceComplete && this.mController.matchCount >= 1) {
               // If forceComplete is requested, we need to call the enter processing
@@ -625,7 +625,7 @@
       return value;
     }
 
-    onInput(aEvent) {
+    onInput() {
       if (
         !this.mIgnoreInput &&
         this.mController.input.wrappedJSObject == this.nsIAutocompleteInput
diff --git a/toolkit/content/widgets/autocomplete-popup.js b/toolkit/content/widgets/autocomplete-popup.js
index f033511e07..a13ba1bc62 100644
--- a/toolkit/content/widgets/autocomplete-popup.js
+++ b/toolkit/content/widgets/autocomplete-popup.js
@@ -572,7 +572,7 @@
     }
 
     setListeners() {
-      this.addEventListener("popupshowing", event => {
+      this.addEventListener("popupshowing", () => {
         // If normalMaxRows wasn't already set by the input, then set it here
         // so that we restore the correct number when the popup is hidden.
 
@@ -584,14 +584,14 @@
         this.mPopupOpen = true;
       });
 
-      this.addEventListener("popupshown", event => {
+      this.addEventListener("popupshown", () => {
         if (this._adjustHeightOnPopupShown) {
           this._adjustHeightOnPopupShown = false;
           this.adjustHeight();
         }
       });
 
-      this.addEventListener("popuphiding", event => {
+      this.addEventListener("popuphiding", () => {
         var isListActive = true;
         if (this.selectedIndex == -1) {
           isListActive = false;
diff --git a/toolkit/content/widgets/autocomplete-richlistitem.js b/toolkit/content/widgets/autocomplete-richlistitem.js
index ccbd37e132..fddd5b4029 100644
--- a/toolkit/content/widgets/autocomplete-richlistitem.js
+++ b/toolkit/content/widgets/autocomplete-richlistitem.js
@@ -21,7 +21,7 @@
        * This overrides listitem's mousedown handler because we want to set the
        * selected item even when the shift or accel keys are pressed.
        */
-      this.addEventListener("mousedown", event => {
+      this.addEventListener("mousedown", () => {
         // Call this.control only once since it's not a simple getter.
         let control = this.control;
         if (!control || control.disabled) {
@@ -587,7 +587,7 @@
     /**
      * Override _getSearchTokens to have the Learn More text emphasized
      */
-    _getSearchTokens(aSearch) {
+    _getSearchTokens() {
       return [this._learnMoreString.toLowerCase()];
     }
   }
diff --git a/toolkit/content/widgets/browser-custom-element.js b/toolkit/content/widgets/browser-custom-element.js
index e9b29034fa..887f59c742 100644
--- a/toolkit/content/widgets/browser-custom-element.js
+++ b/toolkit/content/widgets/browser-custom-element.js
@@ -872,7 +872,7 @@
       this.webProgress.removeProgressListener(aListener);
     }
 
-    onPageHide(aEvent) {
+    onPageHide() {
       // If we're browsing from the tab crashed UI to a URI that keeps
       // this browser non-remote, we'll handle that here.
       lazy.SessionStore?.maybeExitCrashedState(this);
@@ -1919,7 +1919,7 @@
     // Called immediately after changing remoteness.  If this method returns
     // `true`, Gecko will assume frontend handled resuming the load, and will
     // not attempt to resume the load itself.
-    afterChangeRemoteness(browser, redirectLoadSwitchId) {
+    afterChangeRemoteness() {
       /* no-op unless replaced */
       return false;
     }
diff --git a/toolkit/content/widgets/datetimebox.js b/toolkit/content/widgets/datetimebox.js
index 28b32fddfa..04ed398bd7 100644
--- a/toolkit/content/widgets/datetimebox.js
+++ b/toolkit/content/widgets/datetimebox.js
@@ -5,7 +5,7 @@
 "use strict";
 
 // This is a UA widget. It runs in per-origin UA widget scope,
-// to be loaded by UAWidgetsChild.jsm.
+// to be loaded by UAWidgetsChild.sys.mjs.
 
 /*
  * This is the class of entry. It will construct the actual implementation
diff --git a/toolkit/content/widgets/dialog.js b/toolkit/content/widgets/dialog.js
index 52eb2168f8..c4b25c2f48 100644
--- a/toolkit/content/widgets/dialog.js
+++ b/toolkit/content/widgets/dialog.js
@@ -146,7 +146,7 @@
       if (document.readyState == "complete") {
         this._postLoadInit();
       } else {
-        window.addEventListener("load", event => this._postLoadInit());
+        window.addEventListener("load", () => this._postLoadInit());
       }
     }
 
@@ -521,7 +521,7 @@
       }
 
       var btn = this.getButton(this.defaultButton);
-      if (btn) {
+      if (btn && !btn.hidden) {
         this._doButtonCommand(this.defaultButton);
       }
     }
diff --git a/toolkit/content/widgets/editor.js b/toolkit/content/widgets/editor.js
index 9e5ffb542e..8e014f77af 100644
--- a/toolkit/content/widgets/editor.js
+++ b/toolkit/content/widgets/editor.js
@@ -16,13 +16,13 @@
           "nsIURIContentListener",
           "nsISupportsWeakReference",
         ]),
-        doContent(contentType, isContentPreferred, request, contentHandler) {
+        doContent() {
           return false;
         },
-        isPreferred(contentType, desiredContentType) {
+        isPreferred() {
           return false;
         },
-        canHandleContent(contentType, isContentPreferred, desiredContentType) {
+        canHandleContent() {
           return false;
         },
         loadCookie: null,
diff --git a/toolkit/content/widgets/findbar.js b/toolkit/content/widgets/findbar.js
index 3cbce11771..cdfbd315a7 100644
--- a/toolkit/content/widgets/findbar.js
+++ b/toolkit/content/widgets/findbar.js
@@ -164,7 +164,7 @@
 
       window.addEventListener("unload", this.destroy);
 
-      this._findField.addEventListener("input", event => {
+      this._findField.addEventListener("input", () => {
         // We should do nothing during composition.  E.g., composing string
         // before converting may matches a forward word of expected word.
         // After that, even if user converts the composition string to the
@@ -230,17 +230,17 @@
         }
       });
 
-      this._findField.addEventListener("blur", event => {
+      this._findField.addEventListener("blur", () => {
         // Note: This code used to remove the selection
         // if it matched an editable.
         this.browser.finder.enableSelection();
       });
 
-      this._findField.addEventListener("focus", event => {
+      this._findField.addEventListener("focus", () => {
         this._updateBrowserWithState();
       });
 
-      this._findField.addEventListener("compositionstart", event => {
+      this._findField.addEventListener("compositionstart", () => {
         // Don't close the find toolbar while IME is composing.
         let findbar = this;
         findbar._isIMEComposing = true;
@@ -251,7 +251,7 @@
         }
       });
 
-      this._findField.addEventListener("compositionend", event => {
+      this._findField.addEventListener("compositionend", () => {
         this._isIMEComposing = false;
         if (this.findMode != this.FIND_NORMAL) {
           this._setFindCloseTimeout();
@@ -1307,7 +1307,7 @@
       }
     }
 
-    onHighlightFinished(result) {
+    onHighlightFinished() {
       // Noop.
     }
 
diff --git a/toolkit/content/widgets/menu.js b/toolkit/content/widgets/menu.js
index f787747a01..1a55d799b6 100644
--- a/toolkit/content/widgets/menu.js
+++ b/toolkit/content/widgets/menu.js
@@ -129,7 +129,7 @@
   };
 
   // The <menucaption> element is used for rendering <html:optgroup> inside of <html:select>,
-  // See SelectParentHelper.jsm.
+  // See SelectParentHelper.sys.mjs.
   class MozMenuCaption extends MozMenuBaseMixin(MozXULElement) {
     static get inheritedAttributes() {
       return {
diff --git a/toolkit/content/widgets/menulist.js b/toolkit/content/widgets/menulist.js
index 4e66c030f3..3672d4ccf1 100644
--- a/toolkit/content/widgets/menulist.js
+++ b/toolkit/content/widgets/menulist.js
@@ -289,6 +289,9 @@
     }
 
     setInitialSelection() {
+      if (this.getAttribute("noinitialselection") === "true") {
+        return;
+      }
       var popup = this.menupopup;
       if (popup) {
         var arr = popup.getElementsByAttribute("selected", "true");
diff --git a/toolkit/content/widgets/menupopup.js b/toolkit/content/widgets/menupopup.js
index 31801d6a33..c7448d4f05 100644
--- a/toolkit/content/widgets/menupopup.js
+++ b/toolkit/content/widgets/menupopup.js
@@ -11,16 +11,12 @@
     "resource://gre/modules/AppConstants.sys.mjs"
   );
 
-  // For the non-native context menu styling, we need to know if we need
-  // a gutter for checkboxes. To do this, check whether there are any
-  // radio/checkbox type menuitems in a menupopup when showing it. We use a
-  // system bubbling event listener to ensure we run *after* the "normal"
-  // popupshowing listeners, so (visibility) changes they make to their items
-  // take effect first, before we check for checkable menuitems.
-  Services.els.addSystemEventListener(
-    document,
+  document.addEventListener(
     "popupshowing",
     function (e) {
+      // For the non-native context menu styling, we need to know if we need
+      // a gutter for checkboxes. To do this, check whether there are any
+      // radio/checkbox type menuitems in a menupopup when showing it.
       if (e.target.nodeName == "menupopup") {
         let haveCheckableChild = e.target.querySelector(
           `:scope > menuitem:not([hidden]):is([type=checkbox],[type=radio]${
@@ -33,7 +29,10 @@
         e.target.toggleAttribute("needsgutter", haveCheckableChild);
       }
     },
-    false
+    // we use a system bubbling event listener to ensure we run *after* the
+    // "normal" popupshowing listeners, so (visibility) changes they make to
+    // their items take effect first, before we check for checkable menuitems.
+    { mozSystemGroup: true }
   );
 
   class MozMenuPopup extends MozElements.MozElementMixin(XULPopupElement) {
@@ -74,13 +73,13 @@
 
     initShadowDOM() {
       // Retarget events from shadow DOM arrowscrollbox to the host.
-      this.scrollBox.addEventListener("scroll", ev =>
+      this.scrollBox.addEventListener("scroll", () =>
         this.dispatchEvent(new Event("scroll"))
       );
-      this.scrollBox.addEventListener("overflow", ev =>
+      this.scrollBox.addEventListener("overflow", () =>
         this.dispatchEvent(new Event("overflow"))
       );
-      this.scrollBox.addEventListener("underflow", ev =>
+      this.scrollBox.addEventListener("underflow", () =>
         this.dispatchEvent(new Event("underflow"))
       );
     }
diff --git a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs
index 0706f94762..8bf553c23d 100644
--- a/toolkit/content/widgets/moz-button-group/moz-button-group.mjs
+++ b/toolkit/content/widgets/moz-button-group/moz-button-group.mjs
@@ -44,7 +44,7 @@ export default class MozButtonGroup extends MozLitElement {
     }
   }
 
-  onSlotchange(e) {
+  onSlotchange() {
     for (let child of this.defaultSlotEl.assignedNodes()) {
       if (!(child instanceof Element)) {
         // Text nodes won't support classList or getAttribute.
diff --git a/toolkit/content/widgets/moz-button/moz-button.css b/toolkit/content/widgets/moz-button/moz-button.css
new file mode 100644
index 0000000000..47567df41d
--- /dev/null
+++ b/toolkit/content/widgets/moz-button/moz-button.css
@@ -0,0 +1,142 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  display: inline-block;
+}
+
+button {
+  appearance: none;
+  min-height: var(--button-min-height);
+  color: var(--button-text-color);
+  border: var(--button-border);
+  border-radius: var(--button-border-radius);
+  background-color: var(--button-background-color);
+  padding: var(--button-padding);
+  /* HTML button gets `font: -moz-button` from UA styles,
+   * but we want it to match the root font styling. */
+  font: inherit;
+  font-weight: var(--button-font-weight);
+  /* Ensure font-size isn't overridden by widget styling (e.g. in forms.css) */
+  font-size: var(--button-font-size);
+  width: 100%;
+
+  &[size=small] {
+    min-height: var(--button-min-height-small);
+    font-size: var(--button-font-size-small);
+  }
+
+  &:hover {
+    background-color: var(--button-background-color-hover);
+    border-color: var(--button-border-color-hover);
+    color: var(--button-text-color-hover);
+  }
+
+  &:hover:active {
+    background-color: var(--button-background-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-text-color-active);
+  }
+
+  &:disabled {
+    background-color: var(--button-background-color-disabled);
+    border-color: var(--button-border-color-disabled);
+    color: var(--button-text-color-disabled);
+    opacity: var(--button-opacity-disabled);
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  &[type="primary"] {
+    background-color: var(--button-background-color-primary);
+    border-color: var(--button-border-color-primary);
+    color: var(--button-text-color-primary);
+
+    &:hover {
+      background-color: var(--button-background-color-primary-hover);
+      border-color: var(--button-border-color-primary-hover);
+      color: var(--button-text-color-primary-hover);
+    }
+
+    &:hover:active {
+      background-color: var(--button-background-color-primary-active);
+      border-color: var(--button-border-color-primary-active);
+      color: var(--button-text-color-primary-active);
+    }
+
+    &:disabled {
+      background-color: var(--button-background-color-primary-disabled);
+      border-color: var(--button-border-color-primary-disabled);
+      color: var(--button-text-color-primary-disabled);
+    }
+  }
+
+  &[type="destructive"] {
+    background-color: var(--button-background-color-destructive);
+    border-color: var(--button-border-color-destructive);
+    color: var(--button-text-color-destructive);
+
+    &:hover {
+      background-color: var(--button-background-color-destructive-hover);
+      border-color: var(--button-border-color-destructive-hover);
+      color: var(--button-text-color-destructive-hover);
+    }
+
+    &:hover:active {
+      background-color: var(--button-background-color-destructive-active);
+      border-color: var(--button-border-color-destructive-active);
+      color: var(--button-text-color-destructive-active);
+    }
+
+    &:disabled {
+      background-color: var(--button-background-color-destructive-disabled);
+      border-color: var(--button-border-color-destructive-disabled);
+      color: var(--button-text-color-destructive-disabled);
+    }
+  }
+
+  &[type~=ghost] {
+    background-color: var(--button-background-color-ghost);
+    border-color: var(--button-border-color-ghost);
+    color: var(--button-text-color-ghost);
+
+    &:hover {
+      background-color: var(--button-background-color-ghost-hover);
+      border-color: var(--button-border-color-ghost-hover);
+      color: var(--button-text-color-ghost-hover);
+    }
+
+    &:hover:active {
+      background-color: var(--button-background-color-ghost-active);
+      border-color: var(--button-border-color-ghost-active);
+      color: var(--button-text-color-ghost-active);
+    }
+
+    &:disabled {
+      background-color: var(--button-background-color-ghost-disabled);
+      border-color: var(--button-border-color-ghost-disabled);
+      color: var(--button-text-color-ghost-disabled);
+    }
+  }
+
+  &[type~=icon] {
+    background-size: var(--icon-size-default);
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill, stroke;
+    fill: currentColor;
+    stroke: currentColor;
+    width: var(--button-size-icon);
+    height: var(--button-size-icon);
+    padding: var(--button-padding-icon);
+
+    &[size=small] {
+      width: var(--button-size-icon-small);
+      height: var(--button-size-icon-small);
+    }
+  }
+}
diff --git a/toolkit/content/widgets/moz-button/moz-button.mjs b/toolkit/content/widgets/moz-button/moz-button.mjs
new file mode 100644
index 0000000000..3e7c151e61
--- /dev/null
+++ b/toolkit/content/widgets/moz-button/moz-button.mjs
@@ -0,0 +1,90 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html, ifDefined } from "../vendor/lit.all.mjs";
+import { MozLitElement } from "../lit-utils.mjs";
+
+/**
+ * A button with multiple types and two sizes.
+ *
+ * @tagname moz-button
+ * @property {string} label - The button's label, will be overridden by slotted content.
+ * @property {string} type - The button type.
+ *   Options: default, primary, destructive, icon, icon ghost, ghost.
+ * @property {string} size - The button size.
+ *   Options: default, small.
+ * @property {boolean} disabled - The disabled state.
+ * @property {string} title - The button's title attribute, used in shadow DOM and therefore not as an attribute on moz-button.
+ * @property {string} titleAttribute - Internal, map title attribute to the title JS property.
+ * @property {string} tooltipText - Set the title property, the title attribute will be used first.
+ * @property {string} ariaLabel - The button's arial-label attribute, used in shadow DOM and therefore not as an attribute on moz-button.
+ * @property {string} ariaLabelAttribute - Internal, map aria-label attribute to the ariaLabel JS property.
+ * @property {HTMLButtonElement} buttonEl - The internal button element in the shadow DOM.
+ * @slot default - The button's content, overrides label property.
+ * @fires click - The click event.
+ */
+export default class MozButton extends MozLitElement {
+  static shadowRootOptions = {
+    ...MozLitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static properties = {
+    label: { type: String, reflect: true },
+    type: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    title: { type: String, state: true },
+    titleAttribute: { type: String, attribute: "title", reflect: true },
+    tooltipText: { type: String },
+    ariaLabelAttribute: {
+      type: String,
+      attribute: "aria-label",
+      reflect: true,
+    },
+    ariaLabel: { type: String, state: true },
+  };
+
+  static queries = {
+    buttonEl: "button",
+  };
+
+  constructor() {
+    super();
+    this.type = "default";
+    this.size = "default";
+    this.disabled = false;
+  }
+
+  willUpdate(changes) {
+    if (changes.has("titleAttribute")) {
+      this.title = this.titleAttribute;
+      this.titleAttribute = null;
+    }
+    if (changes.has("ariaLabelAttribute")) {
+      this.ariaLabel = this.ariaLabelAttribute;
+      this.ariaLabelAttribute = null;
+    }
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/elements/moz-button.css"
+      />
+      <button
+        type=${this.type}
+        size=${this.size}
+        ?disabled=${this.disabled}
+        title=${ifDefined(this.title || this.tooltipText)}
+        aria-label=${ifDefined(this.ariaLabel)}
+        part="button"
+      >
+        <slot>${this.label}</slot>
+      </button>
+    `;
+  }
+}
+customElements.define("moz-button", MozButton);
diff --git a/toolkit/content/widgets/moz-button/moz-button.stories.mjs b/toolkit/content/widgets/moz-button/moz-button.stories.mjs
new file mode 100644
index 0000000000..52a459e807
--- /dev/null
+++ b/toolkit/content/widgets/moz-button/moz-button.stories.mjs
@@ -0,0 +1,100 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "../vendor/lit.all.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "./moz-button.mjs";
+
+export default {
+  title: "UI Widgets/Moz Button",
+  component: "moz-button",
+  argTypes: {
+    l10nId: {
+      options: [
+        "moz-button-labelled",
+        "moz-button-titled",
+        "moz-button-aria-labelled",
+      ],
+      control: { type: "select" },
+    },
+    size: {
+      options: ["default", "small"],
+      control: { type: "radio" },
+    },
+  },
+  parameters: {
+    actions: {
+      handles: ["click"],
+    },
+    status: "in-development",
+    fluent: `
+moz-button-labelled = Button
+moz-button-primary = Primary
+moz-button-destructive = Destructive
+moz-button-titled =
+  .title = View logins
+moz-button-aria-labelled =
+  .aria-label = View logins
+`,
+  },
+};
+
+const Template = ({ type, size, l10nId, iconUrl, disabled }) => html`
+  <style>
+    moz-button[type~="icon"]::part(button) {
+      background-image: url("${iconUrl}");
+    }
+  </style>
+  <moz-button
+    data-l10n-id=${l10nId}
+    type=${type}
+    size=${size}
+    ?disabled=${disabled}
+  ></moz-button>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  type: "default",
+  size: "default",
+  l10nId: "moz-button-labelled",
+  iconUrl: "chrome://global/skin/icons/more.svg",
+  disabled: false,
+};
+export const DefaultSmall = Template.bind({});
+DefaultSmall.args = {
+  type: "default",
+  size: "small",
+  l10nId: "moz-button-labelled",
+  iconUrl: "chrome://global/skin/icons/more.svg",
+  disabled: false,
+};
+export const Primary = Template.bind({});
+Primary.args = {
+  ...Default.args,
+  type: "primary",
+  l10nId: "moz-button-primary",
+};
+export const Destructive = Template.bind({});
+Destructive.args = {
+  ...Default.args,
+  type: "destructive",
+  l10nId: "moz-button-destructive",
+};
+export const Icon = Template.bind({});
+Icon.args = {
+  ...Default.args,
+  type: "icon",
+  l10nId: "moz-button-titled",
+};
+export const IconSmall = Template.bind({});
+IconSmall.args = {
+  ...Icon.args,
+  size: "small",
+};
+export const IconGhost = Template.bind({});
+IconGhost.args = {
+  ...Icon.args,
+  type: "icon ghost",
+};
diff --git a/toolkit/content/widgets/moz-input-box.js b/toolkit/content/widgets/moz-input-box.js
index 4704db6dc5..6e7b7b3f29 100644
--- a/toolkit/content/widgets/moz-input-box.js
+++ b/toolkit/content/widgets/moz-input-box.js
@@ -92,7 +92,7 @@
       });
 
       if (this.spellcheck) {
-        this.menupopup.addEventListener("popuphiding", event => {
+        this.menupopup.addEventListener("popuphiding", () => {
           if (this.spellCheckerUI) {
             this.spellCheckerUI.clearSuggestionsFromMenu();
             this.spellCheckerUI.clearDictionaryListFromMenu();
diff --git a/toolkit/content/widgets/moz-label/README.stories.md b/toolkit/content/widgets/moz-label/README.stories.md
index a3492ebefa..f5e4e2dd14 100644
--- a/toolkit/content/widgets/moz-label/README.stories.md
+++ b/toolkit/content/widgets/moz-label/README.stories.md
@@ -3,10 +3,10 @@
 `moz-label` is an extension of the built-in `HTMLLabelElement` that provides accesskey styling and formatting as well as some click handling logic.
 
 ```html story
-<label is="moz-label" accesskey="c" for="check">
+<label is="moz-label" accesskey="c" for="check" style={{ display: "inline-block" }}>
     This is a label with an accesskey:
 </label>
-<input id="check" type="checkbox" defaultChecked />
+<input id="check" type="checkbox" defaultChecked style={{ display: "inline-block" }} />
 ```
 
 Accesskey underlining is enabled by default on Windows and Linux. It is also enabled in Storybook on Mac for demonstrative purposes, but is usually controlled by the `ui.key.menuAccessKey` preference.
diff --git a/toolkit/content/widgets/moz-label/moz-label.mjs b/toolkit/content/widgets/moz-label/moz-label.mjs
index 7812436ecd..cd9144e7cc 100644
--- a/toolkit/content/widgets/moz-label/moz-label.mjs
+++ b/toolkit/content/widgets/moz-label/moz-label.mjs
@@ -103,7 +103,7 @@ class MozTextLabel extends HTMLLabelElement {
     this.formatAccessKey();
   }
 
-  _onClick(event) {
+  _onClick() {
     let controlElement = this.labeledControlElement;
     if (!controlElement || this.disabled) {
       return;
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
index 58f41c28e4..d83de5d29f 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
@@ -69,7 +69,7 @@ export default class MozMessageBar extends MozLitElement {
     this.dismissable = false;
   }
 
-  onSlotchange(e) {
+  onSlotchange() {
     let actions = this.actionsSlotEl.assignedNodes();
     this.actionsEl.classList.toggle("active", actions.length);
   }
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
index 65803eed9f..6f19c45aee 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.stories.mjs
@@ -121,3 +121,9 @@ WithSupportLink.args = {
   hasSupportLink: true,
   hasActionButton: false,
 };
+
+export const WithHeading = Template.bind({});
+WithHeading.args = {
+  ...Default.args,
+  l10nId: "moz-message-bar-message-heading",
+};
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css
new file mode 100644
index 0000000000..2975bb1a7c
--- /dev/null
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav-button.css
@@ -0,0 +1,123 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  border-radius: var(--border-radius-small);
+  &:focus-visible {
+    outline-offset: var(--page-nav-focus-outline-inset);
+  }
+}
+
+button {
+  background-color: var(--page-nav-button-background-color);
+  border: 1px solid var(--page-nav-border-color);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  gap: 12px;
+  align-items: center;
+  font-size: inherit;
+  width: 100%;
+  font-weight: normal;
+  border-radius: var(--page-nav-button-border-radius);
+  color: var(--page-nav-button-text-color);
+  text-align: start;
+  transition: background-color 150ms;
+  padding: var(--page-nav-button-padding);
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+@media not (prefers-contrast) {
+  button {
+    border-inline-start: 2px solid transparent;
+    border-inline-end: none;
+    border-block: none;
+  }
+
+  button:hover,
+  button[selected]:hover {
+    background-color: var(--page-nav-button-background-color-hover);
+  }
+
+  button[selected]:hover {
+    border-inline-start-color: inherit;
+  }
+
+  button[selected],
+  button[selected]:hover {
+    border-inline-start: 2px solid;
+  }
+
+  button[selected]:not(:focus-visible) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  button[selected]:not(:hover) {
+    color: var(--color-accent-primary);
+    background-color: color-mix(in srgb, var(--page-nav-button-background-color-selected) 5%, transparent);
+    border-inline-start-color: var(--color-accent-primary);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  button[selected] {
+    background-color: color-mix(in srgb, var(--page-nav-button-background-color-selected) 12%, transparent);
+  }
+}
+
+button:focus-visible,
+button[selected]:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  border-radius: var(--border-radius-small);
+}
+
+.page-nav-icon {
+  height: 20px;
+  width: 20px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+@media (prefers-contrast) {
+  button {
+    transition: none;
+    border-color: ButtonText;
+    background-color: var(--button-background-color);
+  }
+
+  button:hover {
+    color: SelectedItem;
+  }
+
+  button[selected] {
+    color: SelectedItemText;
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+  }
+}
+
+slot {
+  font-size: var(--font-size-large);
+  margin: 0;
+  padding-inline-start: 0;
+  user-select: none;
+}
+
+@media (max-width: 52rem) {
+  button {
+    grid-template-columns: min-content;
+    justify-content: center;
+    margin-inline: 0;
+  }
+
+  slot {
+    display: none;
+  }
+}
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.css b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
new file mode 100644
index 0000000000..49000f622d
--- /dev/null
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.css
@@ -0,0 +1,76 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:host {
+  --page-nav-button-border-radius: var(--button-border-radius);
+  --page-nav-button-text-color: var(--button-text-color);
+  --page-nav-button-background-color: transparent;
+  --page-nav-button-background-color-hover: var(--button-background-color-hover);
+  --page-nav-button-background-color-selected: var(--color-accent-primary);
+  --page-nav-button-padding: var(--space-small);
+  --page-nav-margin-top: 72px;
+  --page-nav-margin-bottom: 36px;
+  --page-nav-gap: 25px;
+  --page-nav-button-gap: var(--space-xsmall);
+  --page-nav-border-color: var(--border-color);
+  --page-nav-focus-outline-inset: var(--focus-outline-inset);
+  --page-nav-width: 240px;
+  margin-inline-start: 42px;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  width: var(--page-nav-width);
+
+  @media (prefers-reduced-motion) {
+    /* (See Bug 1610081) Setting border-inline-end to add clear differentiation between side navigation and main content area */
+    border-inline-end: 1px solid var(--page-nav-border-color);
+  }
+
+  @media (max-width: 52rem) {
+    grid-template-rows: 1fr auto;
+    --page-nav-width: 118px;
+  }
+}
+
+nav {
+  display: grid;
+  grid-template-rows: min-content 1fr auto;
+  gap: var(--page-nav-gap);
+  margin-block: var(--page-nav-margin-top) var(--page-nav-margin-bottom);
+  height: calc(100vh - var(--page-nav-margin-top) - var(--page-nav-margin-bottom));
+  @media (max-width: 52rem) {
+    grid-template-rows: 1fr auto;
+  }
+}
+
+.page-nav-header {
+  /* Align the header text/icon with the page nav button icons */
+  margin-inline-start: var(--page-nav-button-padding);
+  font-size: var(--font-size-xlarge);
+  font-weight: var(--font-weight-bold);
+  margin-block: 0;
+
+  @media (max-width: 52rem) {
+    display: none;
+  }
+}
+
+.primary-nav-group,
+#secondary-nav-group {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  gap: var(--page-nav-button-gap);
+
+  @media (max-width: 52rem) {
+    justify-content: center;
+    grid-template-columns: min-content;
+  }
+}
+
+@media (prefers-contrast) {
+  .primary-nav-group {
+    gap: var(--space-small);
+  }
+}
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
new file mode 100644
index 0000000000..f998ee735f
--- /dev/null
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.mjs
@@ -0,0 +1,170 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+/**
+ * A grouping of navigation buttons that is displayed at the page level,
+ * intended to change the selected view, provide a heading, and have links
+ * to external resources.
+ *
+ * @tagname moz-page-nav
+ * @property {string} currentView - The currently selected view.
+ * @property {string} heading - A heading to be displayed at the top of the navigation.
+ * @slot [default] - Used to append moz-page-nav-button elements to the navigation.
+ */
+export default class MozPageNav extends MozLitElement {
+  static properties = {
+    currentView: { type: String },
+    heading: { type: String },
+  };
+
+  static queries = {
+    headingEl: "#page-nav-header",
+    primaryNavGroupSlot: ".primary-nav-group slot",
+    secondaryNavGroupSlot: "#secondary-nav-group slot",
+  };
+
+  get pageNavButtons() {
+    return this.primaryNavGroupSlot
+      .assignedNodes()
+      .filter(
+        node => node?.localName === "moz-page-nav-button" && !node.hidden
+      );
+  }
+
+  onChangeView(e) {
+    this.currentView = e.target.view;
+  }
+
+  handleFocus(e) {
+    if (e.key == "ArrowDown" || e.key == "ArrowRight") {
+      e.preventDefault();
+      this.focusNextView();
+    } else if (e.key == "ArrowUp" || e.key == "ArrowLeft") {
+      e.preventDefault();
+      this.focusPreviousView();
+    }
+  }
+
+  focusPreviousView() {
+    let pageNavButtons = this.pageNavButtons;
+    let currentIndex = pageNavButtons.findIndex(b => b.selected);
+    let prev = pageNavButtons[currentIndex - 1];
+    if (prev) {
+      prev.activate();
+      prev.buttonEl.focus();
+    }
+  }
+
+  focusNextView() {
+    let pageNavButtons = this.pageNavButtons;
+    let currentIndex = pageNavButtons.findIndex(b => b.selected);
+    let next = pageNavButtons[currentIndex + 1];
+    if (next) {
+      next.activate();
+      next.buttonEl.focus();
+    }
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/elements/moz-page-nav.css"
+      />
+      <nav>
+        <h1 class="page-nav-header" id="page-nav-header">${this.heading}</h1>
+        <div
+          class="primary-nav-group"
+          role="tablist"
+          aria-orientation="vertical"
+          aria-labelledby="page-nav-header"
+        >
+          <slot
+            @change-view=${this.onChangeView}
+            @keydown=${this.handleFocus}
+          ></slot>
+        </div>
+        <div id="secondary-nav-group" role="group">
+          <slot name="secondary-nav" @keydown=${this.handleFocus}></slot>
+        </div>
+      </nav>
+    `;
+  }
+
+  updated() {
+    let isViewSelected = false;
+    let assignedPageNavButtons = this.pageNavButtons;
+    for (let button of assignedPageNavButtons) {
+      button.selected = button.view == this.currentView;
+      isViewSelected = isViewSelected || button.selected;
+    }
+    if (!isViewSelected && assignedPageNavButtons.length) {
+      // Current page nav has no matching view, reset to the first view.
+      assignedPageNavButtons[0].activate();
+    }
+  }
+}
+customElements.define("moz-page-nav", MozPageNav);
+
+/**
+ * A navigation button intended to change the selected view within a page.
+ *
+ * @tagname moz-page-nav-button
+ * @property {string} iconSrc - The chrome:// url for the icon used for the button.
+ * @property {string} l10nId - The fluent ID for the button's text
+ * @property {boolean} selected - Whether or not the button is currently selected.
+ * @slot [default] - Used to append the l10n string to the button.
+ */
+export class MozPageNavButton extends MozLitElement {
+  static properties = {
+    iconSrc: { type: String },
+    l10nId: { type: String },
+    selected: { type: Boolean },
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+  }
+
+  static queries = {
+    buttonEl: "button",
+  };
+
+  get view() {
+    return this.getAttribute("view");
+  }
+
+  activate() {
+    this.dispatchEvent(
+      new CustomEvent("change-view", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://global/content/elements/moz-page-nav-button.css"
+      />
+      <button
+        aria-selected=${this.selected}
+        tabindex=${this.selected ? 0 : -1}
+        role="tab"
+        ?selected=${this.selected}
+        @click=${this.activate}
+      >
+        <img class="page-nav-icon" src=${this.iconSrc} />
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+customElements.define("moz-page-nav-button", MozPageNavButton);
diff --git a/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs
new file mode 100644
index 0000000000..4ac7b455cf
--- /dev/null
+++ b/toolkit/content/widgets/moz-page-nav/moz-page-nav.stories.mjs
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { html } from "../vendor/lit.all.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "./moz-page-nav.mjs";
+
+export default {
+  title: "UI Widgets/Page Nav",
+  component: "moz-page-nav",
+  parameters: {
+    status: "in-development",
+    actions: {
+      handles: ["change-view"],
+    },
+    fluent: `
+moz-page-nav-button-one = View 1
+  .title = View 1
+moz-page-nav-button-two = View 2
+  .title = View 2
+moz-page-nav-button-three = View 3
+  .title = View 3
+moz-page-link-one = Support Page
+  .title = Support Page
+moz-page-nav-heading =
+  .heading = Heading
+     `,
+  },
+};
+
+const Template = () => html`
+  <style>
+    #page {
+      height: 100%;
+      display: flex;
+
+      @media (max-width: 52rem) {
+        grid-template-columns: 82px 1fr;
+      }
+    }
+    moz-page-nav {
+      margin-inline-start: 10px;
+      --page-nav-margin-top: 10px;
+
+      @media (max-width: 52rem) {
+        margin-inline-start: 0;
+      }
+    }
+  </style>
+  <div id="page">
+    <moz-page-nav data-l10n-id="moz-page-nav-heading" data-l10n-attrs="heading">
+      <moz-page-nav-button
+        view="view-one"
+        data-l10n-id="moz-page-nav-button-one"
+        iconSrc="chrome://browser/skin/preferences/category-general.svg"
+      >
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="view-two"
+        data-l10n-id="moz-page-nav-button-two"
+        iconSrc="chrome://browser/skin/preferences/category-general.svg"
+      >
+      </moz-page-nav-button>
+      <moz-page-nav-button
+        view="view-three"
+        data-l10n-id="moz-page-nav-button-three"
+        iconSrc="chrome://browser/skin/preferences/category-general.svg"
+      >
+      </moz-page-nav-button>
+    </moz-page-nav>
+    <main></main>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/toolkit/content/widgets/moz-support-link/moz-support-link.mjs b/toolkit/content/widgets/moz-support-link/moz-support-link.mjs
index 23f18ac434..9d2d6ffac2 100644
--- a/toolkit/content/widgets/moz-support-link/moz-support-link.mjs
+++ b/toolkit/content/widgets/moz-support-link/moz-support-link.mjs
@@ -82,7 +82,7 @@ export default class MozSupportLink extends HTMLAnchorElement {
     }
   }
 
-  attributeChangedCallback(attrName, oldVal, newVal) {
+  attributeChangedCallback(attrName) {
     if (attrName === "support-page" || attrName === "utm-content") {
       this.#setHref();
     }
diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.css b/toolkit/content/widgets/moz-toggle/moz-toggle.css
index 8b67a81878..2005544181 100644
--- a/toolkit/content/widgets/moz-toggle/moz-toggle.css
+++ b/toolkit/content/widgets/moz-toggle/moz-toggle.css
@@ -38,11 +38,15 @@
   --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
   --toggle-background-color-pressed-active: var(--color-accent-primary-active);
   --toggle-border-color: var(--border-interactive-color);
+  --toggle-border-color-hover: var(--toggle-border-color);
+  --toggle-border-color-active: var(--toggle-border-color);
   --toggle-border-radius: var(--border-radius-circle);
   --toggle-border-width: var(--border-width);
   --toggle-height: var(--size-item-small);
   --toggle-width: var(--size-item-large);
   --toggle-dot-background-color: var(--toggle-border-color);
+  --toggle-dot-background-color-hover: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active: var(--toggle-dot-background-color);
   --toggle-dot-background-color-on-pressed: var(--color-canvas);
   --toggle-dot-margin: 1px;
   --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));
@@ -141,17 +145,6 @@
     background-color: var(--toggle-background-color-disabled);
   }
 
-  .toggle-button {
-    --toggle-dot-background-color: var(--color-accent-primary);
-    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
-    --toggle-dot-background-color-active: var(--color-accent-primary-active);
-    --toggle-dot-background-color-on-pressed: var(--button-background-color);
-    --toggle-background-color-disabled: var(--button-background-color-disabled);
-    --toggle-border-color-hover: var(--border-interactive-color-hover);
-    --toggle-border-color-active: var(--border-interactive-color-active);
-    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
-  }
-
   .toggle-button:enabled:hover {
     border-color: var(--toggle-border-color-hover);
   }
@@ -175,6 +168,24 @@
     border-color: var(--toggle-dot-background-color-hover);
   }
 
+  .toggle-button:hover::before,
+  .toggle-button:active::before {
+    background-color: var(--toggle-dot-background-color-hover);
+  }
+}
+
+@media (forced-colors) {
+  .toggle-button {
+    --toggle-dot-background-color: var(--color-accent-primary);
+    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
+    --toggle-dot-background-color-active: var(--color-accent-primary-active);
+    --toggle-dot-background-color-on-pressed: var(--button-background-color);
+    --toggle-background-color-disabled: var(--button-background-color-disabled);
+    --toggle-border-color-hover: var(--border-interactive-color-hover);
+    --toggle-border-color-active: var(--border-interactive-color-active);
+    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
+  }
+
   .toggle-button[aria-pressed="true"]:enabled::after {
     border: 1px solid var(--button-background-color);
     content: '';
@@ -189,10 +200,4 @@
   .toggle-button[aria-pressed="true"]:enabled:active::after {
     border-color: var(--toggle-border-color-active);
   }
-
-  .toggle-button:hover::before,
-  .toggle-button:hover:active::before,
-  .toggle-button:active::before {
-    background-color: var(--toggle-dot-background-color-hover);
-  }
 }
diff --git a/toolkit/content/widgets/named-deck.js b/toolkit/content/widgets/named-deck.js
index 6b3b7a8835..42c96e278d 100644
--- a/toolkit/content/widgets/named-deck.js
+++ b/toolkit/content/widgets/named-deck.js
@@ -156,7 +156,7 @@
       this.getRootNode().removeEventListener("keypress", this);
     }
 
-    attributeChangedCallback(name, oldVal, newVal) {
+    attributeChangedCallback(name) {
       if (name == "orientation") {
         if (this.isVertical) {
           this.setAttribute("aria-orientation", this.orientation);
diff --git a/toolkit/content/widgets/notificationbox.js b/toolkit/content/widgets/notificationbox.js
index f23fb03a74..0161588853 100644
--- a/toolkit/content/widgets/notificationbox.js
+++ b/toolkit/content/widgets/notificationbox.js
@@ -622,7 +622,7 @@
 
   async function createNotificationMessageElement() {
     await window.ensureCustomElements("moz-message-bar");
-    let MozMessageBar = customElements.get("moz-message-bar");
+    let MozMessageBar = await customElements.whenDefined("moz-message-bar");
     class NotificationMessage extends MozMessageBar {
       static queries = {
         ...MozMessageBar.queries,
diff --git a/toolkit/content/widgets/panel-list/README.stories.md b/toolkit/content/widgets/panel-list/README.stories.md
index b8800e2b5f..3e8617958e 100644
--- a/toolkit/content/widgets/panel-list/README.stories.md
+++ b/toolkit/content/widgets/panel-list/README.stories.md
@@ -6,7 +6,7 @@ children and optional `hr` elements as separators. The `panel-list` will anchor
 itself to the target of the initiating event when opened with
 `panelList.toggle(event)`.
 
-Note: Nested menus are not currently supported. XUL is currently required to
+Note: XUL is currently required to
 support accesskey underlining (although using `moz-label` could change that).
 Shortcuts are not displayed automatically in the `panel-item`.
 
@@ -229,3 +229,23 @@ grow larger than its containing window if needed.
   </html:panel-list>
 </panel>
 ```
+
+### Submenus
+
+`panel-list` supports nested submenus. Submenus can be created by nesting a second `panel-list` in a `panel-item`'s `submenu` slot and specifying a `submenu` attribute on that `panel-item` that points to the nested list's ID. For example:
+
+```html
+<panel-list>
+  <panel-item>No submenu</panel-item>
+  <panel-item>No submenu</panel-item>
+  <panel-item submenu="example-submenu">
+    Has a submenu
+    <panel-list slot="submenu" id="example-submenu">
+      <panel-item>I'm a submenu item!</panel-item>
+      <panel-item>I'm also a submenu item!</panel-item>
+    </panel-list>
+  </panel-item>
+</panel-list>
+```
+
+As of February 2024 submenus are only in use in Firefox View and support for nesting beyond one submenu may be limited.
diff --git a/toolkit/content/widgets/panel-list/panel-list.css b/toolkit/content/widgets/panel-list/panel-list.css
index 4358fc0cf8..619e6919a3 100644
--- a/toolkit/content/widgets/panel-list/panel-list.css
+++ b/toolkit/content/widgets/panel-list/panel-list.css
@@ -26,6 +26,10 @@
   box-sizing: border-box;
 }
 
+:host([has-submenu]) {
+  overflow-y: visible;
+}
+
 :host(:not([slot=submenu])) {
   max-height: 100%;
 }
diff --git a/toolkit/content/widgets/panel-list/panel-list.js b/toolkit/content/widgets/panel-list/panel-list.js
index 1cc1f865c3..2e93b4ddc3 100644
--- a/toolkit/content/widgets/panel-list/panel-list.js
+++ b/toolkit/content/widgets/panel-list/panel-list.js
@@ -308,7 +308,7 @@
     }
 
     addHideListeners() {
-      if (this.hasAttribute("stay-open") && !this.lastAnchorNode.hasSubmenu) {
+      if (this.hasAttribute("stay-open") && !this.lastAnchorNode?.hasSubmenu) {
         // This is intended for inspection in Storybook.
         return;
       }
@@ -631,31 +631,12 @@
       this.#defaultSlot = document.createElement("slot");
       this.#defaultSlot.style.display = "none";
 
-      if (this.hasSubmenu) {
-        this.icon = document.createElement("div");
-        this.icon.setAttribute("class", "submenu-icon");
-        this.label.setAttribute("class", "submenu-label");
-
-        this.button.setAttribute("class", "submenu-container");
-        this.button.appendChild(this.icon);
-
-        this.submenuSlot = document.createElement("slot");
-        this.submenuSlot.name = "submenu";
-
-        this.shadowRoot.append(
-          style,
-          this.button,
-          this.#defaultSlot,
-          this.submenuSlot
-        );
-      } else {
-        this.shadowRoot.append(
-          style,
-          this.button,
-          supportLinkSlot,
-          this.#defaultSlot
-        );
-      }
+      this.shadowRoot.append(
+        style,
+        this.button,
+        supportLinkSlot,
+        this.#defaultSlot
+      );
     }
 
     connectedCallback() {
@@ -664,6 +645,10 @@
         this._l10nRootConnected = true;
       }
 
+      this.panel =
+        this.getRootNode()?.host?.closest("panel-list") ||
+        this.closest("panel-list");
+
       if (!this.#initialized) {
         this.#initialized = true;
         // When click listeners are added to the panel-item it creates a node in
@@ -683,18 +668,28 @@
         });
 
         if (this.hasSubmenu) {
+          this.panel.setAttribute("has-submenu", "");
+          this.icon = document.createElement("div");
+          this.icon.setAttribute("class", "submenu-icon");
+          this.label.setAttribute("class", "submenu-label");
+
+          this.button.setAttribute("class", "submenu-container");
+          this.button.appendChild(this.icon);
+
+          this.submenuSlot = document.createElement("slot");
+          this.submenuSlot.name = "submenu";
+
+          this.shadowRoot.append(this.submenuSlot);
+
           this.setSubmenuContents();
         }
       }
 
-      this.panel =
-        this.getRootNode()?.host?.closest("panel-list") ||
-        this.closest("panel-list");
-
       if (this.panel) {
         this.panel.addEventListener("hidden", this);
         this.panel.addEventListener("shown", this);
       }
+
       if (this.hasSubmenu) {
         this.addEventListener("mouseenter", this);
         this.addEventListener("mouseleave", this);
@@ -762,7 +757,9 @@
 
     setSubmenuContents() {
       this.submenuPanel = this.submenuSlot.assignedNodes()[0];
-      this.shadowRoot.append(this.submenuPanel);
+      if (this.submenuPanel) {
+        this.shadowRoot.append(this.submenuPanel);
+      }
     }
 
     get disabled() {
diff --git a/toolkit/content/widgets/panel-list/panel-list.stories.mjs b/toolkit/content/widgets/panel-list/panel-list.stories.mjs
index 9c5a4cbe1f..db0ab7597c 100644
--- a/toolkit/content/widgets/panel-list/panel-list.stories.mjs
+++ b/toolkit/content/widgets/panel-list/panel-list.stories.mjs
@@ -22,6 +22,9 @@ panel-list-checked = Checked
 panel-list-badged = Badged, look at me
 panel-list-passwords = Passwords
 panel-list-settings = Settings
+submenu-item-one = Submenu Item One
+submenu-item-two = Submenu Item Two
+submenu-item-three = Submenu Item Three
     `,
   },
 };
@@ -36,7 +39,7 @@ function openMenu(event) {
   }
 }
 
-const Template = ({ isOpen, items, wideAnchor }) =>
+const Template = ({ isOpen, items, wideAnchor, hasSubMenu }) =>
   html`
     <style>
       panel-item[icon="passwords"]::part(button) {
@@ -93,22 +96,36 @@ const Template = ({ isOpen, items, wideAnchor }) =>
       ?open=${isOpen}
       ?min-width-from-anchor=${wideAnchor}
     >
-      ${items.map(i =>
-        i == "<hr>"
+      ${items.map((item, index) => {
+        // Always showing submenu on the first item for simplicity.
+        let showSubMenu = hasSubMenu && index == 0;
+        let subMenuId = showSubMenu ? "example-sub-menu" : undefined;
+        return item == "<hr>"
           ? html` <hr /> `
           : html`
               <panel-item
-                icon=${i.icon ?? ""}
-                ?checked=${i.checked}
-                ?badged=${i.badged}
-                accesskey=${ifDefined(i.accesskey)}
-                data-l10n-id=${i.l10nId ?? i}
-              ></panel-item>
-            `
-      )}
+                icon=${item.icon ?? ""}
+                ?checked=${item.checked}
+                ?badged=${item.badged}
+                accesskey=${ifDefined(item.accesskey)}
+                data-l10n-id=${item.l10nId ?? item}
+                submenu=${ifDefined(subMenuId)}
+              >
+                ${showSubMenu ? subMenuTemplate() : ""}
+              </panel-item>
+            `;
+      })}
     </panel-list>
   `;
 
+const subMenuTemplate = () => html`
+  <panel-list slot="submenu" id="example-sub-menu">
+    <panel-item data-l10n-id="submenu-item-one"></panel-item>
+    <panel-item data-l10n-id="submenu-item-two"></panel-item>
+    <panel-item data-l10n-id="submenu-item-three"></panel-item>
+  </panel-list>
+`;
+
 export const Simple = Template.bind({});
 Simple.args = {
   isOpen: false,
@@ -145,3 +162,9 @@ Wide.args = {
   ...Simple.args,
   wideAnchor: true,
 };
+
+export const SubMenu = Template.bind({});
+SubMenu.args = {
+  ...Simple.args,
+  hasSubMenu: true,
+};
diff --git a/toolkit/content/widgets/radio.js b/toolkit/content/widgets/radio.js
index 482323acb9..41e8a945ba 100644
--- a/toolkit/content/widgets/radio.js
+++ b/toolkit/content/widgets/radio.js
@@ -197,7 +197,7 @@
      * @param {DOMNode} child
      *                  The <radio> element that got removed
      */
-    radioUnattached(child) {
+    radioUnattached() {
       // Just invalidate the cache, next time it's fetched it'll get rebuilt.
       this._radioChildren = null;
     }
@@ -481,13 +481,13 @@
 
     constructor() {
       super();
-      this.addEventListener("click", event => {
+      this.addEventListener("click", () => {
         if (!this.disabled) {
           this.control.selectedItem = this;
         }
       });
 
-      this.addEventListener("mousedown", event => {
+      this.addEventListener("mousedown", () => {
         if (!this.disabled) {
           this.control.focusedItem = this;
         }
diff --git a/toolkit/content/widgets/richlistbox.js b/toolkit/content/widgets/richlistbox.js
index 904ef9ceec..01d970e6ed 100644
--- a/toolkit/content/widgets/richlistbox.js
+++ b/toolkit/content/widgets/richlistbox.js
@@ -126,7 +126,7 @@
         }
       });
 
-      this.addEventListener("focus", event => {
+      this.addEventListener("focus", () => {
         if (this.getRowCount() > 0) {
           if (this.currentIndex == -1) {
             this.currentIndex = this.getIndexOfFirstVisibleRow();
diff --git a/toolkit/content/widgets/search-textbox.js b/toolkit/content/widgets/search-textbox.js
index abdcfa2999..b254b2796d 100644
--- a/toolkit/content/widgets/search-textbox.js
+++ b/toolkit/content/widgets/search-textbox.js
@@ -214,7 +214,7 @@
       }
     }
 
-    on_mousedown(event) {
+    on_mousedown() {
       if (!this.hasAttribute("focused")) {
         this.setSelectionRange(0, 0);
         this.focus();
diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
index 997e8413f2..b1b2ddecce 100644
--- a/toolkit/content/widgets/tabbox.js
+++ b/toolkit/content/widgets/tabbox.js
@@ -24,15 +24,15 @@
     }
 
     connectedCallback() {
-      Services.els.addSystemEventListener(document, "keydown", this, false);
+      document.addEventListener("keydown", this, { mozSystemGroup: true });
       window.addEventListener("unload", this.disconnectedCallback, {
         once: true,
       });
     }
 
     disconnectedCallback() {
+      document.removeEventListener("keydown", this, { mozSystemGroup: true });
       window.removeEventListener("unload", this.disconnectedCallback);
-      Services.els.removeSystemEventListener(document, "keydown", this, false);
     }
 
     set handleCtrlTab(val) {
@@ -729,7 +729,7 @@
         direction = 1,
         wrap = false,
         startWithAdjacent = true,
-        filter = tab => true,
+        filter = () => true,
       } = opts;
 
       let tab = startTab;
@@ -804,7 +804,7 @@
       }
     }
 
-    _canAdvanceToTab(aTab) {
+    _canAdvanceToTab() {
       return true;
     }
 
diff --git a/toolkit/content/widgets/text.js b/toolkit/content/widgets/text.js
index ca10f1489e..7bbf6db4cc 100644
--- a/toolkit/content/widgets/text.js
+++ b/toolkit/content/widgets/text.js
@@ -67,7 +67,7 @@
       this.formatAccessKey();
     }
 
-    _onClick(event) {
+    _onClick() {
       let controlElement = this.labeledControlElement;
       if (!controlElement || this.disabled) {
         return;
diff --git a/toolkit/content/widgets/textrecognition.js b/toolkit/content/widgets/textrecognition.js
index 887d576770..c517f7bfb1 100644
--- a/toolkit/content/widgets/textrecognition.js
+++ b/toolkit/content/widgets/textrecognition.js
@@ -4,7 +4,7 @@
 "use strict";
 
 // This is a UA widget. It runs in per-origin UA widget scope,
-// to be loaded by UAWidgetsChild.jsm.
+// to be loaded by UAWidgetsChild.sys.mjs.
 
 this.TextRecognitionWidget = class {
   /**
diff --git a/toolkit/content/widgets/tree.js b/toolkit/content/widgets/tree.js
index 322e42586e..4993bef0c2 100644
--- a/toolkit/content/widgets/tree.js
+++ b/toolkit/content/widgets/tree.js
@@ -515,7 +515,7 @@
       }
     }
 
-    _onDragMouseUp(aEvent) {
+    _onDragMouseUp() {
       var col = document.treecolDragging;
       if (!col) {
         return;
@@ -786,7 +786,7 @@
         }
       });
 
-      this.addEventListener("touchend", event => {
+      this.addEventListener("touchend", () => {
         this._touchY = -1;
       });
 
@@ -840,7 +840,7 @@
         }
       });
 
-      this.addEventListener("focus", event => {
+      this.addEventListener("focus", () => {
         this.focused = true;
         if (this.currentIndex == -1 && this.view.rowCount > 0) {
           this.currentIndex = this.getFirstVisibleRow();
@@ -1651,7 +1651,7 @@
       this.ensureRowIsVisible(edge);
     }
 
-    _handleEnter(event) {
+    _handleEnter() {
       if (this._editingColumn) {
         this.stopEditing(true);
         this.focus();
diff --git a/toolkit/content/widgets/videocontrols.js b/toolkit/content/widgets/videocontrols.js
index 21c8946e60..73a32164aa 100644
--- a/toolkit/content/widgets/videocontrols.js
+++ b/toolkit/content/widgets/videocontrols.js
@@ -5,7 +5,7 @@
 "use strict";
 
 // This is a UA widget. It runs in per-origin UA widget scope,
-// to be loaded by UAWidgetsChild.jsm.
+// to be loaded by UAWidgetsChild.sys.mjs.
 
 /*
  * This is the class of entry. It will construct the actual implementation
@@ -64,11 +64,8 @@ this.VideoControlsWidget = class {
     // the underlying element state hasn't changed in ways that we
     // care about. This can happen if the property is set again
     // without a value change.
-    if (
-      this.impl &&
-      this.impl.constructor == newImpl &&
-      this.impl.elementStateMatches(this.element)
-    ) {
+    if (this.impl && this.impl.constructor == newImpl) {
+      this.impl.onchange();
       return;
     }
     if (this.impl) {
@@ -458,10 +455,10 @@ this.VideoControlsImplWidget = class {
           this.statusIcon.setAttribute("type", "error");
           this.updateErrorText();
           this.setupStatusFader(true);
-        } else if (VideoControlsWidget.isPictureInPictureVideo(this.video)) {
-          this.setShowPictureInPictureMessage(true);
         }
 
+        this.updatePictureInPictureMessage();
+
         if (this.video.readyState >= this.video.HAVE_METADATA) {
           // According to the spec[1], at the HAVE_METADATA (or later) state, we know
           // the video duration and dimensions, which means we can calculate whether or
@@ -934,6 +931,8 @@ this.VideoControlsImplWidget = class {
             // Since this event come from the layout, this is the only place
             // we are sure of that probing into layout won't trigger or force
             // reflow.
+            // FIXME(emilio): We should rewrite this to just use
+            // ResizeObserver, probably.
             this.reflowTriggeringCallValidator.isReflowTriggeringPropsAllowed = true;
             this.updateReflowedDimensions();
             this.reflowTriggeringCallValidator.isReflowTriggeringPropsAllowed = false;
@@ -1095,7 +1094,10 @@ this.VideoControlsImplWidget = class {
         );
       },
 
-      setShowPictureInPictureMessage(showMessage) {
+      updatePictureInPictureMessage() {
+        let showMessage =
+          !this.hasError() &&
+          VideoControlsWidget.isPictureInPictureVideo(this.video);
         this.pictureInPictureOverlay.hidden = !showMessage;
         this.isShowingPictureInPictureMessage = showMessage;
       },
@@ -1188,7 +1190,7 @@ this.VideoControlsImplWidget = class {
         }
       },
 
-      onScrubberInput(e) {
+      onScrubberInput() {
         const duration = Math.round(this.video.duration * 1000); // in ms
         let time = this.scrubber.value;
 
@@ -1200,7 +1202,7 @@ this.VideoControlsImplWidget = class {
         this.pauseVideoDuringDragging();
       },
 
-      onScrubberChange(e) {
+      onScrubberChange() {
         this.scrubber.isDragging = false;
 
         if (this.isPausedByDragging) {
@@ -1815,12 +1817,7 @@ this.VideoControlsImplWidget = class {
 
       updateMuteButtonState() {
         var muted = this.isEffectivelyMuted;
-
-        if (muted) {
-          this.muteButton.setAttribute("muted", "true");
-        } else {
-          this.muteButton.removeAttribute("muted");
-        }
+        this.muteButton.toggleAttribute("muted", muted);
 
         var id = muted
           ? "videocontrols-unmute-button"
@@ -2026,12 +2023,7 @@ this.VideoControlsImplWidget = class {
       },
 
       setCastingButtonState() {
-        if (this.isCastingOn) {
-          this.castingButton.setAttribute("enabled", "true");
-        } else {
-          this.castingButton.removeAttribute("enabled");
-        }
-
+        this.castingButton.toggleAttribute("enabled", this.isCastingOn);
         this.adjustControlSize();
       },
 
@@ -2058,22 +2050,15 @@ this.VideoControlsImplWidget = class {
       },
 
       setClosedCaptionButtonState() {
-        if (this.isClosedCaptionOn) {
-          this.closedCaptionButton.setAttribute("enabled", "true");
-        } else {
-          this.closedCaptionButton.removeAttribute("enabled");
-        }
-
+        this.closedCaptionButton.toggleAttribute(
+          "enabled",
+          this.isClosedCaptionOn
+        );
         let ttItems = this.textTrackList.childNodes;
 
         for (let tti of ttItems) {
           const idx = +tti.getAttribute("index");
-
-          if (idx == this.currentTextTrackIndex) {
-            tti.setAttribute("aria-checked", "true");
-          } else {
-            tti.setAttribute("aria-checked", "false");
-          }
+          tti.setAttribute("aria-checked", idx == this.currentTextTrackIndex);
         }
 
         this.adjustControlSize();
@@ -2804,10 +2789,6 @@ this.VideoControlsImplWidget = class {
     if (this.Utils.isTouchControls) {
       this.TouchUtils.init(this.shadowRoot, this.Utils);
     }
-    this.shadowRoot.firstChild.dispatchEvent(
-      new this.window.CustomEvent("VideoBindingAttached")
-    );
-
     this._setupEventListeners();
   }
 
@@ -2920,9 +2901,9 @@ this.VideoControlsImplWidget = class {
     this.l10n.translateRoots();
   }
 
-  elementStateMatches(element) {
-    let elementInPiP = VideoControlsWidget.isPictureInPictureVideo(element);
-    return this.isShowingPictureInPictureMessage == elementInPiP;
+  onchange() {
+    this.Utils.updatePictureInPictureMessage();
+    this.shadowRoot.firstChild.removeAttribute("flipped");
   }
 
   teardown() {
@@ -3080,14 +3061,9 @@ this.NoControlsMobileImplWidget = class {
       },
     };
     this.Utils.init(this.shadowRoot);
-    this.Utils.video.dispatchEvent(
-      new this.window.CustomEvent("MozNoControlsVideoBindingAttached")
-    );
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {
     this.Utils.terminate();
@@ -3135,9 +3111,7 @@ this.NoControlsPictureInPictureImplWidget = class {
     this.shadowRoot.firstElementChild.setAttribute("localedir", direction);
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {}
 
@@ -3312,9 +3286,7 @@ this.NoControlsDesktopImplWidget = class {
     this.Utils.init(this.shadowRoot, this.prefs);
   }
 
-  elementStateMatches(element) {
-    return true;
-  }
+  onchange() {}
 
   teardown() {
     this.Utils.terminate();
diff --git a/toolkit/content/widgets/wizard.js b/toolkit/content/widgets/wizard.js
index 6eb4bcb517..c4285fada5 100644
--- a/toolkit/content/widgets/wizard.js
+++ b/toolkit/content/widgets/wizard.js
@@ -359,7 +359,7 @@
       this._wizardButtons.onPageChange();
     }
 
-    _advanceFocusToPage(aPage) {
+    _advanceFocusToPage() {
       if (!this._hasLoaded) {
         return;
       }
diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
index e8635d4525..ead9997295 100644
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -359,17 +359,15 @@ menubar > menu:empty {
 /********* menupopup, panel, & tooltip ***********/
 
 menupopup,
-panel {
-  flex-direction: column;
-}
-
-menupopup,
 panel,
 tooltip {
   position: fixed;
   -moz-top-layer: top;
   width: fit-content;
   height: fit-content;
+  /* Make sure that popups are interactable when shown, since they escape the
+   * usual layering rules */
+  -moz-inert: none;
   /* Popups can't have overflow */
   contain: paint;
   z-index: 2147483647;
@@ -438,87 +436,6 @@ tooltip:not([position]) {
   }
 }
 
-@media (-moz-panel-animations) and (prefers-reduced-motion: no-preference) {
-@media (-moz-platform: macos) {
-  /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
-     instead of "transform" and "opacity" for these animations.
-     The -moz-window* properties apply to the whole window including the window's
-     shadow, and they don't affect the window's "shape", so the system doesn't
-     have to recompute the shadow shape during the animation. This makes them a
-     lot faster. In fact, Gecko no longer triggers shadow shape recomputations
-     for repaints.
-     These properties are not implemented on other platforms. */
-  panel[type="arrow"]:not([animate="false"]) {
-    transition-property: -moz-window-transform, -moz-window-opacity;
-    transition-duration: 0.18s, 0.18s;
-    transition-timing-function:
-      var(--animation-easing-function), ease-out;
-  }
-
-  /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
-   * Big Sur, see bug 1672091. */
-  @media (-moz-mac-big-sur-theme: 0) {
-    panel[type="arrow"]:not([animate="false"]) {
-      -moz-window-opacity: 0;
-      -moz-window-transform: translateY(-70px);
-    }
-
-    panel[type="arrow"][side="bottom"]:not([animate="false"]) {
-      -moz-window-transform: translateY(70px);
-    }
-  }
-
-  /* [animate] is here only so that this rule has greater specificity than the
-   * rule right above */
-  panel[type="arrow"][animate][animate="open"] {
-    -moz-window-opacity: 1.0;
-    transition-duration: 0.18s, 0.18s;
-    -moz-window-transform: none;
-    transition-timing-function:
-      var(--animation-easing-function), ease-in-out;
-  }
-
-  panel[type="arrow"][animate][animate="cancel"] {
-    -moz-window-opacity: 0;
-    -moz-window-transform: none;
-  }
-} /* end of macOS rules */
-
-@media not (-moz-platform: macos) {
-  panel[type="arrow"]:not([animate="false"]) {
-    opacity: 0;
-    transform: translateY(-70px);
-    transition-property: transform, opacity;
-    transition-duration: 0.18s, 0.18s;
-    transition-timing-function:
-      var(--animation-easing-function), ease-out;
-    will-change: transform, opacity;
-  }
-
-  panel[type="arrow"][side="bottom"]:not([animate="false"]) {
-    transform: translateY(70px);
-  }
-
-  /* [animate] is here only so that this rule has greater specificity than the
-   * rule right above */
-  panel[type="arrow"][animate][animate="open"] {
-    opacity: 1.0;
-    transition-duration: 0.18s, 0.18s;
-    transform: none;
-    transition-timing-function:
-      var(--animation-easing-function), ease-in-out;
-  }
-
-  panel[type="arrow"][animate][animate="cancel"] {
-    transform: none;
-  }
-} /* end of non-macOS rules */
-}
-
-panel[type="arrow"][animating] {
-  pointer-events: none;
-}
-
 /******** tree ******/
 
 treecolpicker {