Merge pull request #69 from mozilla/edit-ui-55

WIP for #55

.gitignore

@@ -3,3 +3,4 @@ node_modules
 README.html
 *.xpi
 *.swp
+.vimrc

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

@@ -1,13 +1,32 @@
 body {
-  background: #FAFAFA;
   min-inline-size: 200px;
   max-inline-size: 400px;
+  inline-size: 264px;
 }
 
 table {
   margin-block-end: 0;
 }
 
+.button {
+  background: #248aeb;
+}
+
+.panel {
+  block-size: 100%;
+}
+
+.panel-row {
+  block-size: 100%;
+}
+
+.panel-back-arrow {
+  background: #ebebeb;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
 .onboarding {
   margin: 16px;
   min-block-size: 480px;
@@ -35,17 +54,29 @@ table {
   padding: .5em;
 }
 
-.header-column {
+.panel-header {
-  padding: 0;
+  block-size: 54px;
+  display: flex;
+  align-items: center;
+}
+
+.panel-header-text {
+  font-weight: lighter;
+  font-size: 16px;
+  margin-bottom: 0;
+  color: #4a4a4a;
+}
+
+.panel-header-button {
+  justify-content: center;
 }
 
 .icon {
   max-inline-size: 16px;
   block-size: 16px;
-  margin: 4px;
 }
 
-.container-panel > table.unstriped tbody tr {
+table.unstriped tbody tr {
   border-bottom: 1px solid #f1f1f1;
   background-color: #fefefe;
   cursor: pointer;
@@ -58,12 +89,15 @@ table {
   background-size: contain;
   filter: url('/img/filters.svg#fill');
   fill: var(--identity-icon-color);
-  inline-size: 32px;
+  inline-size: 20px;
-  block-size: 32px;
+  block-size: 20px;
+  padding-left: 20px;
+  padding-right: 10px;
 }
 
-.userContext-icon:hover {
+.container-panel-row:hover .userContext-icon {
-  background-image: url('/img/container-add.svg');
+  background-image: url('/img/container-newtab.svg');
+  filter: url('/img/filters.svg#fill');
   fill: 'gray';
 }
 
@@ -71,9 +105,33 @@ table {
   background: #DCDBDC;
 }
 
+.panel-footer {
+  align-items: center;
+  background: #efefef;
+  color: #000000;
+  display: flex;
+  font-size: 13px;
+  block-size: 54px;
+  inline-size: 100%;
+}
+
+.footer-columns {
+  margin: 0;
+  padding: 0;
+}
+
+.footer-button {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+.cancel-button {
+  background: #ebebeb;
+}
+
 .edit-containers-text {
   text-align: center;
-  padding: .5em;
+  border-inline-end: solid 1px #d8d8d8;
 }
 
 .edit-containers-text a {
@@ -140,6 +198,48 @@ table {
   --identity-icon: url("/img/usercontext.svg#circle");
 }
 
-.container-info-has-tabs {
+.container-info-panel-header {
+  block-size: 33px;
+  display: flex;
+  align-items: center;
+  border-block-end: 1px solid #ebebeb;
+  margin-block-end: 10px;
+  padding: 0 20px;
+}
+
+.container-info-panel-hide {
+  margin-bottom: 8px;
+  padding: 0 20px;
+}
+
+.container-info-panel-hideorshow-icon {
+  margin-inline-end: 7px;
+}
+
+.container-info-panel-movetabs {
+  border-block-end: 1px solid #ebebeb;
+  margin-block-end: 10px;
+  padding: 0 20px;
+}
+
+.clickable {
   cursor: pointer;
 }
+
+.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;
+}
+
+.choose-color-icon {
+  padding-inline-start: 17px;
+  padding-inline-end: 7px;
+}

webextension/img/container-newtab.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#979797;}
+</style>
+<title>icon-newtab</title>
+<g id="Visual-Spec">
+	<g id="Normal-Panel-Hover" transform="translate(-80.000000, -246.000000)">
+		<g id="Panel" transform="translate(58.000000, 170.000000)">
+			<g id="icon-newtab" transform="translate(21.000000, 75.000000)">
+				<path id="Fill-1" class="st0" d="M15.3,11.7h-3.6v3.7h-1.4v-3.7H6.7v-1.6h3.6V6.6h1.4v3.5h3.6C15.3,10.1,15.3,11.7,15.3,11.7z
+					 M11,3c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S15.4,3,11,3L11,3z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

webextension/js/popup.js

@@ -2,6 +2,13 @@
 const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
 const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
 
+function showPanel(panelSelector) {
+  for (let panelElement of document.querySelectorAll(".panel")) {
+    panelElement.classList.add("hide");
+  }
+  document.querySelector(panelSelector).classList.remove("hide");
+}
+
 function showContainerTabsPanel(identity) {
   // Populating the panel: name and icon
   document.getElementById("container-info-name").innerText = identity.name;
@@ -16,6 +23,9 @@ function showContainerTabsPanel(identity) {
     trHasTabs.setAttribute("data-user-context-id", identity.userContextId);
   }
 
+  let hideOrShowRow = document.querySelector("#container-info-hideorshow");
+  hideOrShowRow.setAttribute("data-user-context-id", identity.userContextId);
+
   const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
   hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
 
@@ -32,12 +42,14 @@ function showContainerTabsPanel(identity) {
     method: "getTabs",
     userContextId: identity.userContextId,
   }).then(tabs => {
+    console.log('browser.runtime.sendMessage getTabs, tabs: ', tabs);
     // For each one, let's create a new line.
     let fragment = document.createDocumentFragment();
     for (const tab of tabs) {
       let tr = document.createElement("tr");
       fragment.appendChild(tr);
       tr.classList.add("container-info-tab");
+      tr.classList.add("clickable");
       tr.innerHTML = `
         <td><img class="icon" src="${tab.favicon}" /></td>
         <td>${tab.title}</td>`;
@@ -64,38 +76,33 @@ function showContainerTabsPanel(identity) {
 }
 
 if (localStorage.getItem("onboarded2")) {
-  for (let element of document.querySelectorAll(".onboarding")) {
+  showPanel("#container-panel");
-    element.classList.add("hide");
-  }
-  document.querySelector("#container-panel").classList.remove("hide");
 } else if (localStorage.getItem("onboarded1")) {
-  document.querySelector(".onboarding-panel-1").classList.add("hide");
+  showPanel(".onboarding-panel-2");
-  document.querySelector("#container-panel").classList.add("hide");
 } else {
-  document.querySelector(".onboarding-panel-2").classList.add("hide");
+  showPanel(".onboarding-panel-1");
-  document.querySelector("#container-panel").classList.add("hide");
 }
 
 document.querySelector("#onboarding-next-button").addEventListener("click", () => {
   localStorage.setItem("onboarded1", true);
-  document.querySelector(".onboarding-panel-2").classList.remove("hide");
+  showPanel(".onboarding-panel-2");
-  document.querySelector(".onboarding-panel-1").classList.add("hide");
-  document.querySelector("#container-panel").classList.add("hide");
 });
 
 document.querySelector("#onboarding-done-button").addEventListener("click", () => {
   localStorage.setItem("onboarded2", true);
-  document.querySelector(".onboarding-panel-1").classList.add("hide");
+  showPanel("#container-panel");
-  document.querySelector(".onboarding-panel-2").classList.add("hide");
-  document.querySelector("#container-panel").classList.remove("hide");
 });
 
 browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
+  console.log('queryIdentities');
   let fragment = document.createDocumentFragment();
 
   identities.forEach(identity => {
+    console.log('identities.forEach');
     let tr = document.createElement("tr");
     fragment.appendChild(tr);
+    tr.classList.add("container-panel-row");
+    tr.classList.add("clickable");
     tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
     tr.innerHTML = `
       <td>
@@ -129,13 +136,98 @@ browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
   document.querySelector(".identities-list").appendChild(fragment);
 });
 
-document.querySelector("#edit-containers-link").addEventListener("click", () => {
+function showEditContainersPanel() {
-  browser.runtime.sendMessage({
+  browser.runtime.sendMessage({method: "queryIdentities"}).then(identities => {
-    method: "openTab",
+    let fragment = document.createDocumentFragment();
-    url: "about:preferences#containers"
+
-  }).then(() => {
+    identities.forEach(identity => {
-    window.close();
+      let tr = document.createElement("tr");
+      fragment.appendChild(tr);
+      tr.setAttribute("data-identity-cookie-store-id", identity.userContextId);
+      tr.classList.add("clickable");
+      tr.innerHTML = `
+        <td>
+          <div class="userContext-icon"
+            data-identity-icon="${identity.image}"
+            data-identity-color="${identity.color}">
+          </div>
+        </td>
+        <td>${identity.name}</td>
+        <td class="edit-container">
+          <img
+            title="Edit ${identity.name} container"
+            data-identity-cookie-store-id="${identity.userContextId}"
+            id="edit-${identity.userContextId}-container-icon"
+            src="/img/container-edit.svg"
+            class="icon edit-container-icon" />
+        </td>
+        <td class="remove-container" >
+          <img
+            title="Remove ${identity.name} container"
+            data-identity-cookie-store-id="${identity.userContextId}"
+            id="delete-${identity.userContextId}-container-icon"
+            class="icon delete-container-icon"
+            src="/img/container-delete.svg"
+          />
+        </td>`;
+
+      tr.addEventListener("click", e => {
+        if (e.target.matches(".edit-container-icon")) {
+          showEditContainerPanel(identity);
+        } else if (e.target.matches(".delete-container-icon")) {
+          showDeleteContainerPanel(identity);
+        }
       });
+    });
+
+    document.querySelector("#edit-identities-list").innerHTML = "";
+    document.querySelector("#edit-identities-list").appendChild(fragment);
+  });
+  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");
+});
+
+document.querySelector("#edit-containers-link").addEventListener("click", () => {
+  showEditContainersPanel();
+});
+
+document.querySelector("#exit-edit-mode-link").addEventListener("click", () => {
+  showPanel("#container-panel");
+});
+
+document.querySelector("#edit-container-panel-back-arrow").addEventListener("click", () => {
+  showEditContainersPanel();
+});
+
+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", () => {

webextension/popup.html

@@ -6,63 +6,158 @@
   <link rel="stylesheet" href="/css/popup.css">
 </head>
 <body>
-  <div class="panel onboarding onboarding-panel-1" id="onboarding-panel-1">
+
+  <div class="panel onboarding onboarding-panel-1 hide" id="onboarding-panel-1">
     <img alt="Container Tabs Overview" src="/img/onboarding-1.png" />
     <h3>A better way to manage all the things you do online</h3>
     <p>Use containers to organize tasks, manage accounts, and keep your focus where you want it.</p>
     <p class="spacing" ><a href="#">Learn more</a></p>
     <a href="#" id="onboarding-next-button" class="button expanded">Next</a>
   </div>
-  <div class="panel onboarding onboarding-panel-2" id="onboarding-panel-2">
+
+
+  <div class="panel onboarding onboarding-panel-2 hide" id="onboarding-panel-2">
     <img alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3>Put containers to work for you.</h3>
     <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
     <a href="#" id="onboarding-done-button" class="button expanded spacing">Done</a>
   </div>
+
+
   <div class="panel container-panel" id="container-panel">
-    <div class="row popup-bumper">
+    <div class="row panel-header">
-      <div class="small-2 columns header-column">
+      <div class="small-10 columns">
-        <img alt="Containers icon" class="icon" src="/img/container-site-d-24.png">
+        <h3 class="panel-header-text">Containers</h3>
       </div>
-      <div class="small-8 columns">
+      <div class="small-2 columns panel-header-button">
-        <h4>Containers</h4>
-      </div>
-      <div class="small-2 columns header-column">
         <a id="sort-containers-link"><img alt="Sort Containers" title="Sort Containers" class="icon" src="/img/container-sort.svg"></a>
       </div>
     </div>
-    <table class="unstriped hover">
+    <table class="unstriped">
       <tbody class="identities-list"></tbody>
     </table>
-    <div class="row popup-bumper edit-identities">
+    <div class="row panel-footer edit-identities">
-      <div class="small-12 columns edit-containers-text">
+      <div class="small-10 columns edit-containers-text">
-        <a id="edit-containers-link" href="about:preferences#containers">Edit Containers</a>
+        <a id="edit-containers-link">Edit Containers</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>
+
+
   <div class="hide panel container-info-panel" id="container-info-panel">
-    <div class="row popup-bumper">
+    <div class="row">
-      <div class="small-1 columns" id="close-container-info-panel">&lt;</div>
+      <div class="small-2 columns panel-back-arrow clickable" id="close-container-info-panel">&laquo;</div>
-      <div class="small-11 columns">
+      <div class="small-10 columns">
-        <table id="container-info-table">
+        <div class="row container-info-panel-header">
-        <tr>
+          <span class="userContext-icon" id="container-info-icon" data-identity-icon="" data-identity-color=""></span>
-          <td>
+          <h3 id="container-info-name" class="panel-header-text"></h3>
-            <div class="userContext-icon" id="container-info-icon"
+        </div>
-                 data-identity-icon="" data-identity-color=""></div></td>
+        <div class="row container-info-panel-hide clickable" id="container-info-hideorshow" data-user-context-id="">
-          <td id="container-info-name"></td>
+          <img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/><span id="container-info-hideorshow-label">Hide this container</span><br/>
-        </tr>
+        </div>
-        <tr class="container-info-has-tabs" id="container-info-hideorshow">
+        <div class="row container-info-panel-movetabs clickable" id="container-info-movetabs">
-          <td>
+          Move tabs to a new window
-            <img class="icon" id="container-info-hideorshow-icon" src="" />
+        </div>
-          </td>
+        <table class="unstriped" id="container-info-table">
-          <td id="container-info-hideorshow-label"></td>
+        </table>
-        </tr>
-        <tr class="container-info-has-tabs" id="container-info-movetabs">
-          <td colspan="2">Open all tabs in new window</td>
-        </tr>
       </div>
     </div>
   </div>
+
+
+  <div class="panel edit-containers-panel hide" id="edit-containers-panel">
+    <div class="row panel-header">
+      <div class="small-12 columns">
+        <h3 class="panel-header-text">Edit Containers</h3>
+      </div>
+    </div>
+    <table class="unstriped">
+      <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>
+
+
+  <div class="panel edit-container-panel hide" id="edit-container-panel">
+    <div class="row">
+      <div class="small-2 columns panel-back-arrow" id="edit-container-panel-back-arrow">
+        &laquo;
+      </div>
+      <div class="small-10 columns">
+        <form>
+          <p>
+            <label>Name</label>
+            <input type="text" name="container-name" id="edit-container-panel-name-input"/>
+          </p>
+          <p>
+            <label>Choose a color</label>
+            <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>
+            <input type="text" />
+          </p>
+        </form>
+        <div class="row">
+          <div class="small-6 columns footer-columns">
+            <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>
+          </div>
+        </div>
+      </div>
+    </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>