Merge branch 'issue-1607' into issue-1607-background-logic

src/css/popup.css

@@ -486,28 +486,28 @@ manage things like container crud */
 
 .container-panel-controls {
   display: flex;
-  justify-content: flex-end;
   margin-block-end: var(--block-line-space-size);
   margin-block-start: var(--block-line-space-size);
-  margin-inline-end: var(--inline-item-space-size);
-  margin-inline-start: var(--inline-item-space-size);
 }
 
-#container-panel #sort-containers-link {
+#container-panel .sort-link {
   align-items: center;
   block-size: var(--block-url-label-size);
   border: 1px solid #d8d8d8;
   border-radius: var(--small-radius);
   color: var(--title-text-color);
   display: flex;
+  flex-grow: 1;
   font-size: var(--small-text-size);
   inline-size: var(--inline-button-size);
   justify-content: center;
+  margin-left: var(--block-line-space-size);
+  margin-right: var(--block-line-space-size);
   text-decoration: none;
 }
 
-#container-panel #sort-containers-link:hover,
-#container-panel #sort-containers-link:focus {
+#container-panel .sort-link:hover,
+#container-panel .sort-link:focus {
   background: #f2f2f2;
 }
 

src/js/background/messageHandler.js

@@ -40,6 +40,9 @@ const messageHandler = {
           return assignManager._setOrRemoveAssignment(tab.id, m.url, m.userContextId, m.value);
         });
         break;
+      case "sortTabsByWindow":
+        backgroundLogic.sortTabsByWindow();
+        break;
       case "sortTabs":
         backgroundLogic.sortTabs();
         break;

src/js/popup.js

@@ -599,6 +599,17 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       }
     });
 
+    Logic.addEnterHandler(document.querySelector("#sort-containers-link-window"), async () => {
+      try {
+        await browser.runtime.sendMessage({
+          method: "sortTabsByWindow"
+        });
+        window.close();
+      } catch (e) {
+        window.close();
+      }
+    });
+
     Logic.addEnterHandler(document.querySelector("#sort-containers-link"), async () => {
       try {
         await browser.runtime.sendMessage({

src/popup.html

@@ -128,7 +128,8 @@
       </label>
     </div>
     <div class="container-panel-controls">
-      <a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
+      <a href="#" class="action-link sort-link" id="sort-containers-link-window" title="Sort tabs into container order by windows">Sort Tabs by Window</a>
+      <a href="#" class="action-link sort-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
     </div>
     <div class="scrollable panel-content" tabindex="-1">
       <table class="identities-list">