for #55: edit-container-panel colors; delete-container-panel

index.js

@@ -12,6 +12,8 @@ const webExtension = require("sdk/webextension");
 const windows = require("sdk/windows");
 const windowUtils = require("sdk/window/utils");
 
+const IDENTITY_COLORS = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"];
+
 let ContainerService = {
   _identitiesState: {},
 
@@ -132,7 +134,7 @@ let ContainerService = {
       color = "green";
     } else if (identity.color === "#ee5195") {
       color = "pink";
-    } else if (["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple"].indexOf(identity.color) !== -1) {
+    } else if (IDENTITY_COLORS.indexOf(identity.color) !== -1) {
       color = identity.color;
     } else {
       color = "";

webextension/css/popup.css

@@ -76,7 +76,7 @@ table {
   block-size: 16px;
 }
 
-.container-panel > table.unstriped tbody tr {
+table.unstriped tbody tr {
   border-bottom: 1px solid #f1f1f1;
   background-color: #fefefe;
   cursor: pointer;
@@ -226,12 +226,20 @@ table {
   cursor: pointer;
 }
 
-.edit-containers-panel-footer {
+.edit-containers-panel-footer a {
+  color: #ffffff;
+}
+
+.edit-containers-exit-text {
+  display: flex;
+  align-items: center;
   background: #248aeb;
+  block-size: 100%;
   color: #ffffff;
   justify-content: center;
 }
 
-.edit-containers-panel-footer a {
+.choose-color-icon {
-  color: #ffffff;
+  padding-inline-start: 17px;
+  padding-inline-end: 7px;
 }

webextension/js/popup.js

@@ -173,9 +173,9 @@ function showEditContainersPanel() {
 
       tr.addEventListener("click", e => {
         if (e.target.matches(".edit-container-icon")) {
-          showPanel("#edit-container-panel");
+          showEditContainerPanel(identity);
         } else if (e.target.matches(".delete-container-icon")) {
-          console.log(`clicked to delete ${identity.userContextId} container`);
+          showDeleteContainerPanel(identity);
         }
       });
     });
@@ -186,6 +186,22 @@ function showEditContainersPanel() {
   showPanel("#edit-containers-panel");
 }
 
+function showEditContainerPanel(identity) {
+  document.querySelector("#edit-container-panel-name-input").value = identity.name; 
+  showPanel("#edit-container-panel");
+}
+
+function showDeleteContainerPanel(identity) {
+  // Populating the panel: name and icon
+  document.getElementById("delete-container-name").innerText = identity.name;
+
+  let icon = document.getElementById("delete-container-icon");
+  icon.setAttribute("data-identity-icon", identity.image);
+  icon.setAttribute("data-identity-color", identity.color);
+
+  showPanel("#delete-container-panel");
+}
+
 document.querySelector("#add-container-link").addEventListener("click", () => {
   showPanel("#edit-container-panel");
 });
@@ -206,6 +222,14 @@ document.querySelector("#edit-container-cancel-link").addEventListener("click",
   showEditContainersPanel();
 });
 
+document.querySelector("#delete-container-panel-back-arrow").addEventListener("click", () => {
+  showEditContainersPanel();
+});
+
+document.querySelector("#delete-container-cancel-link").addEventListener("click", () => {
+  showEditContainersPanel();
+});
+
 document.querySelector("#sort-containers-link").addEventListener("click", () => {
   browser.runtime.sendMessage({
     method: "sortTabs"

webextension/popup.html

@@ -80,8 +80,15 @@
       <tbody id="edit-identities-list"></tbody>
     </table>
     <div class="row panel-footer edit-containers-panel-footer">
+      <div class="small-10 columns edit-containers-exit-text">
         <a id="exit-edit-mode-link">&lt; Exit Edit Mode</a>
       </div>
+      <div class="small-2 columns add-container">
+        <a id="add-container-link">
+          <img alt="Create new container icon" title="Create new container" src="/img/container-add.svg" class="icon" />
+        </a>
+      </div>
+    </div>
   </div>
 
 
@@ -94,11 +101,20 @@
         <form>
           <p>
             <label>Name</label>
-            <input type="text" />
+            <input type="text" name="container-name" id="edit-container-panel-name-input"/>
           </p>
           <p>
             <label>Choose a color</label>
-            <input type="text" />
+            <div id="edit-container-panel-choose-color">
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="blue"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="turquoise"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="green"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="yellow"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="orange"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="red"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="pink"></span>
+              <span class="userContext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="purple"></span>
+            </div>
           </p>
           <p>
             <label>Choose an icon</label>
@@ -107,7 +123,7 @@
         </form>
         <div class="row">
           <div class="small-6 columns footer-columns">
-            <a class="button expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
+            <a class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
           </div>
           <div class="small-6 columns footer-columns">
             <a class="button expanded footer-button">OK</a>
@@ -117,6 +133,31 @@
     </div>
   </div>
 
+  <div class="hide panel delete-container-panel" id="delete-container-panel">
+    <div class="row">
+      <div class="small-2 columns panel-back-arrow clickable" id="close-delete-container-panel">&laquo;</div>
+      <div class="small-10 columns">
+        <div class="row container-info-panel-header">
+          <span class="userContext-icon" id="delete-container-icon" data-identity-icon="" data-identity-color=""></span>
+          <h3 id="delete-container-name" class="panel-header-text"></h3>
+        </div>
+        <div class="row delete-container-confirm">
+          <h4>Remove This Container</h4>
+          <p>If you remove this container now, <span id="delete-container-tab-count"></span> container tabs will be closed. Are you sure you want to remove this Container?</p>
+        </div>
+        <div class="row">
+          <div class="small-6 columns footer-columns">
+            <a class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
+          </div>
+          <div class="small-6 columns footer-columns">
+            <a class="button expanded footer-button">OK</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
   <script src="js/popup.js"></script>
 </body>
 </html>