made the delete button shows once selected, hides otherwise

src/css/popup.css

@@ -668,8 +668,12 @@ span ~ .panel-header-text {
   fill: #0094fb;
 }
 
+.container-panel-row:hover {
+  background-color: #ebebeb !important;
+}
+
 .highlight {
-  background-color: #979797 !important;
+  background-color: #0094fb3f !important;
 }
 
 /* Panel Footer */
@@ -798,17 +802,6 @@ span ~ .panel-header-text {
   padding-inline-start: 30%;
 }
 
-.edit-container-delete-button {
-  align-items: center;
-  /*background: var(--primary-action-color);*/
-  block-size: 100%;
-  color: black;
-  display: inline-block;
-  justify-content: center;
-  padding-block-start: 6px;
-  padding-inline-start: 40%;
-}
-
 .edit-containers-panel-footer {
   background: var(--primary-action-color);
 }

src/js/popup.js

@@ -998,6 +998,16 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
     }
   },
 
+  updateDeleteButton(selectedContainers) {
+    const deleteButton = document.querySelector("div.panel-footer.panel-footer-secondary");
+    console.log(deleteButton);
+    if (selectedContainers.length === 0) {
+      deleteButton.classList.add("hide");
+    } else {
+      deleteButton.classList.remove("hide");
+    }
+  },
+
   // This method is called when the object is registered.
   initialize() {
     Logic.addEnterHandler(document.querySelector("#exit-edit-mode-link"), () => {
@@ -1024,6 +1034,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
   // This method is called when the panel is shown.
   prepare() {
     Logic.resetSelectedIdentities();
+    this.updateDeleteButton(Logic.currentSelectedIdentities());
     const fragment = document.createDocumentFragment();
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
@@ -1073,9 +1084,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
           let start = identities.indexOf(this.lastSelected);
           let end = Logic.identities().indexOf(identity);
           if (start > end) {
-            const tmp = start;
-            start = end;
-            end = tmp;
+            start = [end, end=start][0];
           }
 
           const panels = document.querySelectorAll(".unstriped .container-panel-row");
@@ -1095,6 +1104,8 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
 
           this.lastSelected = identity;
 
+          this.updateDeleteButton(currentSelectedIdentity);
+
           console.log(Logic.currentSelectedIdentities());
         }
       });

src/popup.html

@@ -179,8 +179,8 @@
         <tbody id="edit-identities-list"></tbody>
       </table>
     </div>
-    <div class="panel-footer  panel-footer-secondary">
-      <a href="#" id="delete-link" class="edit-container-delete-button">Delete</a>
+    <div class="panel-footer  panel-footer-secondary hide">
+      <a href="#" id="delete-link" class="button secondary">Delete</a>
     </div>
     <div class="panel-footer edit-containers-panel-footer">
       <a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">