some edits to panels

src/css/popup.css

@@ -110,6 +110,7 @@ table {
   mask-image: linear-gradient(to left, transparent, black 1em);
   overflow: hidden;
   white-space: nowrap;
+  width: 100%;
 }
 
 /* Color and icon helpers */
@@ -273,6 +274,7 @@ table {
 
 .panel-content {
   flex: 1;
+  padding: 16px;
 }
 
 /* Column panels for edit screens */
@@ -443,6 +445,7 @@ manage things like container crud */
   block-size: 48px;
   display: flex;
   justify-content: space-between;
+  padding: 16px;
 }
 
 .panel-header .usercontext-icon {
@@ -744,17 +747,6 @@ span ~ .panel-header-text {
   margin-inline-end: 0;
 }
 
-.container-info-list {
-  display: flex;
-  flex-direction: column;
-  margin-block-start: 4px;
-  padding-block-start: 4px;
-}
-
-.container-info-list tbody {
-  display: contents;
-}
-
 .clickable {
   cursor: pointer;
 }
@@ -835,14 +827,6 @@ span ~ .panel-header-text {
   margin-inline-end: 10px;
 }
 
-.assigned-sites-list > div > .delete-assignment {
-  display: none;
-}
-
-.assigned-sites-list > div:hover > .delete-assignment {
-  display: block;
-}
-
 .assigned-sites-list > div > .hostname {
   flex: 1;
 }
@@ -1003,7 +987,6 @@ body {
   font-size: 13px;
   letter-spacing: -0.1px;
   width: 320px;
-  /* remove  in prodcution*/
 }
 
 h3.title {
@@ -1047,10 +1030,10 @@ h3.title {
 .menu-icon {
   float: left;
   text-align: center;
-  width: 40px;
+  width: 16px;
   display: block;
-  height: 24px;
+  height: 16px;
-  padding: 0 8px 0 16px;
+  margin: 4px 8px 4px 16px;
 }
 
 .menu-right-float {
@@ -1203,4 +1186,25 @@ input {
   color: #000;
   text-decoration: none;
   font-weight: bold;
+}
+
+.delete-warning {
+  padding: 8px 0 8px 0;
+}
+
+.trash-button {
+  float: right;
+  text-align: center;
+  width: 16px;
+  display: inline-block;
+  height: 16px;
+  margin: 4px 10px 4px 0;
+}
+
+tr > td > .trash-button {
+  display: none;
+}
+
+tr:hover > td > .trash-button {
+  display: block;
 }

src/img/container-close-tab.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
-	<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
+	<polygon fill="#000000" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
 </svg>

src/img/container-delete.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#858585;}
+	.st0{fill:#FFFFFF;}
 </style>
 <path class="st0" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
 	l0.2,1.4H1.3l0.2-1.4C1.5,1.6,1.6,1.5,1.7,1.5z M6,11.7H3.2L2.1,3.9H6h3.9l-1.1,7.8H6L6,11.7z"/>

src/js/pageAction.js

@@ -9,7 +9,7 @@ async function init() {
     const td = document.createElement("td");
 
     td.innerHTML = Utils.escaped`          
-        <div class="menu-icon">
+        <div class="menu-icon hover-highlight">
           <div class="usercontext-icon"
             data-identity-icon="${identity.icon}"
             data-identity-color="${identity.color}">

src/js/popup.js

@@ -44,7 +44,7 @@ const Logic = {
   _identities: [],
   _currentIdentity: null,
   _currentPanel: null,
-  _previousPanel: null,
+  _previousPanelPath: [],
   _panels: {},
   _onboardingVariation: null,
 
@@ -216,13 +216,16 @@ const Logic = {
     }
   },
 
-  async showPanel(panel, currentIdentity = null, pickerType = null) {
+  async showPanel(panel, currentIdentity = null, pickerType = null, backwards = false) {
     // Invalid panel... ?!?
     if (!(panel in this._panels)) {
       throw new Error("Something really bad happened. Unknown panel: " + panel);
     }
+    if (!backwards || !this._currentPanel) {
+      this._previousPanelPath.push(this._currentPanel);
+      console.log(this._previousPanelPath);
+    }
 
-    this._previousPanel = this._currentPanel;
     this._currentPanel = panel;
     this.pickerType = pickerType;
 
@@ -250,11 +253,10 @@ const Logic = {
   },
 
   showPreviousPanel() {
-    if (!this._previousPanel) {
+    if (!this._previousPanelPath) {
       throw new Error("Current panel not set!");
     }
-
+    this.showPanel(this._previousPanelPath.pop(), this._currentIdentity, null, true);
-    this.showPanel(this._previousPanel, this._currentIdentity);
   },
 
   registerPanel(panelName, panelObject) {
@@ -619,7 +621,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item");
+      tr.classList.add("menu-item", "hover-highlight");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
@@ -746,19 +748,13 @@ Logic.registerPanel(P_CONTAINER_INFO, {
 
     this.intializeShowHide(identity);
 
-    // Let's remove all the previous tabs.
-    const table = document.getElementById("container-info-table");
-    while (table.firstChild) {
-      table.firstChild.remove();
-    }
-
     // Let's retrieve the list of tabs.
     const tabs = await browser.runtime.sendMessage({
       method: "getTabs",
       windowId: browser.windows.WINDOW_ID_CURRENT,
       cookieStoreId: Logic.currentIdentity().cookieStoreId
     });
-    return this.buildInfoTable(tabs);
+    return this.buildOpenTabTable(tabs);
   },
 
   intializeShowHide(identity) {
@@ -790,46 +786,38 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     return;
   },
 
-  buildInfoTable(tabs) {
+  buildOpenTabTable(tabs) {
+    // Let's remove all the previous tabs.
+    const table = document.getElementById("container-info-table");
+    while (table.firstChild) {
+      table.firstChild.remove();
+    }
+
     // For each one, let's create a new line.
     const fragment = document.createDocumentFragment();
     for (let tab of tabs) { // eslint-disable-line prefer-const
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
-      tr.classList.add("container-info-tab-row");
+      tr.classList.add("menu-item", "hover-highlight");
-      tr.innerHTML = Utils.escaped`
-        <td></td>
-        <td class="container-info-tab-title truncate-text" title="${tab.url}" ><div class="container-tab-title">${tab.title}</div></td>`;
-      tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favIconUrl));
       tr.setAttribute("tabindex", "0");
-      document.getElementById("container-info-table").appendChild(fragment);
+      tr.innerHTML = Utils.escaped`
+        <td>
+          <div class="favicon"></div>
+          <span title="${tab.url}" class="menu-text truncate-text">${tab.title}</span>
+          <img id="${tab.id}" class="trash-button" src="/img/container-close-tab.svg" />
+        </td>`;
+      tr.querySelector(".favicon").appendChild(Utils.createFavIconElement(tab.favIconUrl));
+      tr.setAttribute("tabindex", "0");
+      table.appendChild(fragment);
 
       // On click, we activate this tab. But only if this tab is active.
       if (!tab.hiddenState) {
-        const closeImage = document.createElement("img");
-        closeImage.src = "/img/container-close-tab.svg";
-        closeImage.className = "container-close-tab";
-        closeImage.title = "Close tab";
-        closeImage.id = tab.id;
-        const tabTitle = tr.querySelector(".container-info-tab-title");
-        tabTitle.appendChild(closeImage);
-
-        // On hover, we add truncate-text class to add close-tab-image after tab title truncates
-        const tabTitleHoverEvent = () => {
-          tabTitle.classList.toggle("truncate-text");
-          tr.querySelector(".container-tab-title").classList.toggle("truncate-text");
-        };
-
-        tr.addEventListener("mouseover", tabTitleHoverEvent);
-        tr.addEventListener("mouseout", tabTitleHoverEvent);
-
-        tr.classList.add("clickable");
         Utils.addEnterHandler(tr, async () => {
           await browser.tabs.update(tab.id, { active: true });
           window.close();
         });
 
-        const closeTab = document.getElementById(tab.id);
+        const closeTab = document.querySelector(".trash-button");
         if (closeTab) {
           Utils.addEnterHandler(closeTab, async (e) => {
             await browser.tabs.remove(Number(e.target.id));
@@ -910,7 +898,7 @@ Logic.registerPanel(P_CONTAINER_PICKER, {
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
-        <div class="menu-icon">
+        <div class="menu-icon hover-highlight">
           <div class="usercontext-icon"
             data-identity-icon="${identity.icon}"
             data-identity-color="${identity.color}">
@@ -936,6 +924,9 @@ Logic.registerPanel(P_CONTAINER_PICKER, {
   }
 });
 
+// P_CONTAINER_ASSIGNMENTS: Shows Site Assignments and allows editing.
+// ----------------------------------------------------------------------------
+
 Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
   panelSelector: "#edit-container-assignments",
 
@@ -954,26 +945,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
     const identity = Logic.currentIdentity();
 
     // Populating the panel: name and icon
-    document.getElementById("container-assignments-title").textContent = identity.name;
+    document.getElementById("edit-assignments-title").textContent = identity.name;
 
     const userContextId = Logic.currentUserContextId();
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
 
-    document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
-    document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
-    const containerName = document.querySelector("#edit-container-panel-name-input");
-    window.requestAnimationFrame(() => {
-      containerName.select();
-      containerName.focus();
-    });
-    [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
-      colorInput.checked = colorInput.value === identity.color;
-    });
-    [...document.querySelectorAll("[name='container-icon']")].forEach(iconInput => {
-      iconInput.checked = iconInput.value === identity.icon;
-    });
-
     return Promise.resolve(null);
   },
 
@@ -982,41 +959,35 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
     const assignmentKeys = Object.keys(assignments);
     assignmentPanel.hidden = !(assignmentKeys.length > 0);
     if (assignments) {
-      const tableElement = assignmentPanel.querySelector(".assigned-sites-list");
+      const tableElement = document.querySelector("#edit-sites-assigned");
       /* Remove previous assignment list,
          after removing one we rerender the list */
       while (tableElement.firstChild) {
         tableElement.firstChild.remove();
       }
-
       assignmentKeys.forEach((siteKey) => {
         const site = assignments[siteKey];
-        const trElement = document.createElement("div");
+        const trElement = document.createElement("tr");
         /* As we don't have the full or correct path the best we can assume is the path is HTTPS and then replace with a broken icon later if it doesn't load.
            This is pending a better solution for favicons from web extensions */
         const assumedUrl = `https://${site.hostname}/favicon.ico`;
         trElement.innerHTML = Utils.escaped`
-        <div class="favicon"></div>
+        <td>
-        <div title="${site.hostname}" class="truncate-text hostname">
+          <div class="favicon"></div>
-          ${site.hostname}
+          <span title="${site.hostname}" class="menu-text">${site.hostname}</span>
-        </div>
+          <img class="trash-button delete-assignment" src="/img/container-delete.svg" />
-        <img
+        </td>`;
-          class="pop-button-image delete-assignment"
-          src="/img/container-delete.svg"
-        />`;
         trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
-        const deleteButton = trElement.querySelector(".delete-assignment");
+        const deleteButton = trElement.querySelector(".trash-button");
-        const that = this;
         Utils.addEnterHandler(deleteButton, async () => {
           const userContextId = Logic.currentUserContextId();
           // Lets show the message to the current tab
-          // TODO remove then when firefox supports arrow fn async
           const currentTab = await Utils.currentTab();
           Utils.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
           delete assignments[siteKey];
-          that.showAssignedContainers(assignments);
+          this.showAssignedContainers(assignments);
         });
-        trElement.classList.add("container-info-tab-row", "clickable");
+        trElement.classList.add("menu-item", "hover-highlight");
         tableElement.appendChild(trElement);
       });
     }
@@ -1126,6 +1097,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       iconInput.checked = iconInput.value === identity.icon;
     });
 
+    const deleteButton = document.getElementById("delete-container-button");
+    Utils.addEnterHandler(deleteButton, () => {
+      Logic.showPanel(P_CONTAINER_DELETE, identity);
+    });
     return Promise.resolve(null);
   },
 
@@ -1142,7 +1117,9 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
     Utils.addEnterHandler(document.querySelector("#delete-container-cancel-link"), () => {
       Logic.showPreviousPanel();
     });
-
+    Utils.addEnterHandler(document.querySelector("#close-container-delete-panel"), () => {
+      Logic.showPreviousPanel();
+    });
     Utils.addEnterHandler(document.querySelector("#delete-container-ok-link"), async () => {
       /* This promise wont resolve if the last tab was removed from the window.
           as the message async callback stops listening, this isn't an issue for us however it might be in future
@@ -1152,7 +1129,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
       try {
         await Logic.removeIdentity(Utils.userContextId(Logic.currentIdentity().cookieStoreId));
         await Logic.refreshIdentities();
-        Logic.showPreviousPanel();
+        Logic.showPanel(P_CONTAINERS_LIST);
       } catch (e) {
         Logic.showPanel(P_CONTAINERS_LIST);
       }
@@ -1164,7 +1141,7 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
     const identity = Logic.currentIdentity();
 
     // Populating the panel: name, icon, and warning message
-    document.getElementById("delete-container-name").textContent = identity.name;
+    document.getElementById("container-delete-title").textContent = identity.name;
 
     const totalNumberOfTabs = identity.numberOfHiddenTabs + identity.numberOfOpenTabs;
     let warningMessage = "";
@@ -1174,10 +1151,6 @@ Logic.registerPanel(P_CONTAINER_DELETE, {
     }
     document.getElementById("delete-container-tab-warning").textContent = warningMessage;
 
-    const icon = document.getElementById("delete-container-icon");
-    icon.setAttribute("data-identity-icon", identity.icon);
-    icon.setAttribute("data-identity-color", identity.color);
-
     return Promise.resolve(null);
   },
 });

src/js/utils.js

@@ -5,7 +5,7 @@ const Utils = {
 
   createFavIconElement(url) {
     const imageElement = document.createElement("img");
-    imageElement.classList.add("icon", "offpage");
+    imageElement.classList.add("icon", "offpage", "menu-icon");
     imageElement.src = url;
     const loadListener = (e) => {
       e.target.classList.remove("offpage");

src/pageActionPopup.html

@@ -14,7 +14,7 @@
     <hr>
     <div class="scrollable identities-list">
       <table class="menu" id="picker-identities-list">
-        <tr class="menu-item">
+        <tr class="menu-item hover-highlight">
           <td>
             <div class="menu-icon">
               <div class="usercontext-icon"

src/popup.html

@@ -229,7 +229,14 @@
     Open Tabs
     </div>
     <div class="scrollable">
-      <table id="container-info-table" class="container-info-list">
+      <table class="menu" id="container-info-table">
+        <tr class="menu-item hover-highlight" tabindex="0">
+          <td>
+            <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
+            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
+            <img class="trash-button" src="/img/container-close-tab.svg" />
+          </td>
+        </tr>       
       </table>
     </div>
     <div class="bottom-btn" id="manage-container-link">
@@ -261,38 +268,6 @@
     </div>
   </div>
 
-
-<!--   <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
-    <h3 class="title" id="container-edit-titl">
-      Default
-    </h3>
-    <button class="btn-return arrow-left" id="close-container-edit-panel"></button>
-    <hr>
-    <div class="scrollable edit-form">
-      <form id="edit-container-panel-form">
-        <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
-        <fieldset>
-          <legend>Name</legend>
-          <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
-        </fieldset>
-        <fieldset id="edit-container-panel-choose-color" class="radio-choice">
-          <legend>Color</legend>
-        </fieldset>
-        <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
-          <legend>Icon</legend>
-        </fieldset>
-      </form>
-    <div id="edit-sites-assigned" class="scrollable" hidden>
-      <div class="assigned-sites">Sites assigned to this container</div>
-      <div class="assigned-sites-list">
-      </div>
-    </div>
-    </div>
-    <div class="delete-container">
-      <button class="delete-btn">Delete This Container</button>
-    </div>
-  </div> -->
-
   <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
     <h3 class="title" id="container-edit-title">
       Default
@@ -313,7 +288,6 @@
           <legend class="form-header">Icon</legend>
         </fieldset>
       </form>
-      <div id="edit-sites-assigned" class="scrollable">
         <div class="options-header">Options</div>
         <div class="container-options">
           <input type="checkbox" id="site-isolation" name="site-isolation">
@@ -321,10 +295,9 @@
         </div>
         <div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
         </div>
-      </div>
     </div>
     <div class="delete-container">
-      <button class="delete-btn">Delete This Container</button>
+      <button class="delete-btn" id="delete-container-button">Delete This Container</button>
     </div>
   </div>
 
@@ -334,23 +307,30 @@
     </h3>
     <button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
     <hr>
-    <div class="scrollable edit-form">
+    <div class="scrollable edit-sites-assigned">
-      <div id="edit-sites-assigned" class="scrollable" hidden>
+      <div class="sub-header">Sites assigned to this container</div>
-        <div class="assigned-sites">Sites assigned to this container</div>
+      <table class="menu scrollable" id="edit-sites-assigned">
-        <div class="assigned-sites-list">
+        <tr class="menu-item hover-highlight" tabindex="0">
-        </div>
+          <td>
-      </div>
+            <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
+            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllla.org</span>
+            <img class="trash-button" src="/img/container-delete.svg" />
+          </td>
+        </tr>
+      </table>
     </div>
   </div>
 
   <div class="hide panel delete-container-panel" id="delete-container-panel">
-    <div class="panel-header">
+    <h3 class="title" id="container-delete-title">
-      <span class="usercontext-icon" id="delete-container-icon"></span>
+      Default
-      <h3 id="delete-container-name" class="panel-header-text container-name"></h3>
+    </h3>
-    </div>
+    <button class="btn-return arrow-left" id="close-container-delete-panel"></button>
+    <hr>
     <div class="panel-content delete-container-confirm">
       <h4 class="delete-container-confirm-title">Remove This Container</h4>
-      <p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
+      <p class="delete-warning" id="delete-container-tab-warning"></p>
+      <p class="delete-warning">Are you sure you want to remove this Container?</p>
     </div>
     <div class="panel-footer">
       <a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>