adds feature #1309 within poup.js as suggested

src/css/popup.css

@@ -1530,7 +1530,7 @@ input[type=text] {
 .container-panel {
   min-block-size: 500px;
 }
-
+.sort-container-panel,
 .delete-container-panel,
 .clear-container-storage-panel {
   min-block-size: 500px;
@@ -1820,13 +1820,13 @@ manage things like container crud */
 .container-info-tab-row img[src=""] {
   margin-inline-end: 0;
 }
-
+.sort-tabs-confirm,
 .delete-container-confirm,
 .clear-container-storage-confirm {
   padding-inline-end: 20px;
   padding-inline-start: 20px;
 }
-
+.sort-tabs-confirm-title,
 .delete-container-confirm-title,
 .clear-container-storage-confirm-title {
   color: var(--text-color-primary);
@@ -2336,7 +2336,7 @@ input {
   justify-content: center;
   font-weight: bolder;
 }
-
+.sort-warning,
 .delete-warning,
 .clear-container-storage-warning {
   padding-block-end: 8px;

src/js/popup.js

@@ -30,6 +30,7 @@ const ALWAYS_OPEN_IN_PICKER = "always-open-in";
 const P_CONTAINER_INFO = "containerInfo";
 const P_CONTAINER_EDIT = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
+const P_CONTAINER_SORT ="containerSort";
 const P_CONTAINERS_ACHIEVEMENT = "containersAchievement";
 const P_CONTAINER_ASSIGNMENTS = "containerAssignments";
 const P_CLEAR_CONTAINER_STORAGE = "clearContainerStorage";
@@ -756,15 +757,8 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     Utils.addEnterHandler(document.querySelector("#always-open-in"), () => {
       Logic.showPanel(ALWAYS_OPEN_IN_PICKER);
     });
-    Utils.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
+    Utils.addEnterHandler(document.querySelector("#sort-containers-link"), () => {
-      try {
+      Logic.showPanel(P_CONTAINER_SORT);
-        await browser.runtime.sendMessage({
-          method: "sortTabs"
-        });
-        window.close();
-      } catch (e) {
-        window.close();
-      }
     });
 
     const mozillaVpnToutName = "moz-tout-main-panel";
@@ -2412,3 +2406,31 @@ window.addEventListener("resize", function () {
     root.classList.add("overflow");
   }
 });
+
+// P_CONTAINER_SORT: sort tabs.
+// ----------------------------------------------------------------------------
+
+Logic.registerPanel(P_CONTAINER_SORT, {
+  panelSelector: "#sort-container-panel",
+
+  // This method is called when the object is registered.
+  initialize() {
+    Utils.addEnterHandler(document.querySelector("#sort-container-cancel-link"), () => {
+     Logic.showPreviousPanel();
+    });
+    Utils.addEnterHandler(document.querySelector("#close-container-sort-panel"), () => {
+      Logic.showPreviousPanel();
+    });
+    Utils.addEnterHandler(document.querySelector("#sort-container-ok-link"), async () => {
+      await browser.runtime.sendMessage({
+        method: "sortTabs"
+      });
+      window.close();
+    });
+  },
+
+  // This method is called when the panel is shown.
+  prepare() {
+    return Promise.resolve(null);
+  },
+});

src/popup.html

@@ -427,6 +427,21 @@
     </div>
   </div>
 
+  <div class="hide panel sort-container-panel" id="sort-container-panel">
+    <h3 class="title" data-i18n-message-id="default"></h3>
+
+    <button class="btn-return arrow-left controller" id="close-container-sort-panel"></button>
+    <hr>
+    <div class="panel-content sort-tabs-confirm">
+      <h4 class="sort-tabs-confirm-title" data-i18n-message-id="sortTabs"></h4>
+      <p class="sort-warning" data-i18n-message-id="sortTabsConfirmation"></p>
+    </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" data-i18n-message-id="cancel" id="sort-container-cancel-link"></a>
+      <a href="#" class="button expanded confirmation-destructive-ok-btn footer-button alert-text" data-i18n-message-id="ok" id="sort-container-ok-link"></a>
+    </div>
+  </div>
+
   <div class="hide panel clear-container-storage-panel" id="clear-container-storage-panel">
     <h3 class="title" id="container-clear-storage-title" data-i18n-message-id="default">
     </h3>