for #5: start browser action UI

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules
 README.html
 *.xpi

webextension/css/popup.css

@@ -0,0 +1,42 @@
+body {
+  background: #FAFAFA;
+  min-width: 200px;
+  max-width: 400px;
+}
+
+table {
+  margin-bottom: 0;
+}
+
+.popup-bumper {
+  width: 100%;
+  padding: .5em;
+}
+
+.header-column {
+  padding: 0;
+}
+
+.header-icon {
+  max-width: 16px;
+  height: 16px;
+  margin: 4px;
+}
+
+table.unstriped tbody tr {
+  border-bottom: 1px solid #f1f1f1;
+  background-color: #fefefe;
+}
+
+.edit-identities {
+  background: #DCDBDC;
+}
+
+.edit-containers-text {
+  text-align: center;
+  padding: .5em;
+}
+
+.edit-containers-text a {
+  color: #0a0a0a;
+}

webextension/img/container-add.svg

@@ -0,0 +1,13 @@
+<?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 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+</style>
+<title>firefox</title>
+<g id="General-icons">
+	<polygon class="st0" points="10.8,4.4 6.4,4.4 6.4,0.2 4.6,0.2 4.6,4.4 0.2,4.4 0.2,6.4 4.6,6.4 4.6,10.8 6.4,10.8 6.4,6.4 
+		10.8,6.4 	"/>
+</g>
+</svg>

webextension/img/container-delete.svg

@@ -0,0 +1,10 @@
+<?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 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+</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"/>
+</svg>

webextension/img/container-edit.svg

@@ -0,0 +1,12 @@
+<?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 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+</style>
+<g>
+	<path class="st0" d="M11.4,2.6L9.6,0.9c-0.1-0.1-0.2-0.1-0.3,0l-7,7l2,2l7-7C11.4,2.8,11.4,2.7,11.4,2.6z"/>
+	<path class="st0" d="M0.8,10.9c-0.1,0.3,0,0.4,0.4,0.4l2.3-0.6l-2-2L0.8,10.9z"/>
+</g>
+</svg>

webextension/img/container-hide.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 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+</style>
+<polygon class="st0" points="10.3,0.5 8.9,2 2,8.9 0.5,10.3 1.3,11.1 11.1,1.3 "/>
+<g>
+	<path class="st0" d="M4.8,7.5l2.8-2.8C7.2,4.3,6.7,4,6.1,4c-1.1,0-2,0.9-2,2C4.1,6.6,4.4,7.1,4.8,7.5z"/>
+	<path class="st0" d="M5.9,7.9c0,0,0.1,0,0.2,0c1.1,0,2-0.9,2-2c0,0,0-0.1,0-0.2L5.9,7.9z"/>
+</g>
+<g>
+	<path class="st0" d="M4.1,8.2C2.6,7.4,1.3,6.1,1.2,6C1.3,5.8,3.8,3.1,6,3.1c0.8,0,1.6,0.4,2.4,0.8L9,3.3C8.1,2.7,7,2.2,6,2.2
+		c-2.6,0-5.4,2.9-5.5,3.1C0.3,5.6,0.2,5.7,0.2,6v0c0,0.2,0.1,0.4,0.2,0.6c0.1,0.1,1.3,1.4,2.9,2.3L4.1,8.2z"/>
+	<path class="st0" d="M9.9,3.9L9.2,4.5c0.9,0.7,1.5,1.3,1.6,1.4C10.6,6.2,8.1,8.8,6,8.8c-0.3,0-0.6,0-0.9-0.1L4.4,9.4
+		C4.9,9.6,5.5,9.7,6,9.7c2.6,0,5.4-2.9,5.5-3.1c0.2-0.2,0.2-0.4,0.2-0.6v0c0-0.2,0-0.4-0.2-0.6C11.4,5.3,10.8,4.6,9.9,3.9z"/>
+</g>
+</svg>

webextension/img/container-sort.svg

@@ -0,0 +1,17 @@
+<?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 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#858585;}
+</style>
+<path class="st0" d="M11.9,7.9c-1.2,0-1.5-0.8-1.8-2.4C10,4.4,9.8,2.5,8,2.5H4.6c-1.8,0-2,1.9-2.1,2.9C2.2,7.1,1.9,7.9,0.7,7.9v1.9
+	h11.2h5.4V7.9H11.9z"/>
+<path class="st0" d="M16,5.7c-0.1-1-0.3-2.9-2.1-2.9c0,0-3.8,0-3.9,0c-0.1,0-0.1,0.2-0.1,0.2c1.1,0.5,1.3,1.9,1.4,2.7
+	c0.1,1.1,0.3,1.5,0.8,1.5c0.1,0,4.1,0,4.1,0s0.1,0,0.1-0.1C16.2,6.6,16.1,6.2,16,5.7z"/>
+<path class="st1" d="M8,12.1H3.7v-1.2c0-0.3-0.2-0.4-0.5-0.2l-2.2,1.9c-0.3,0.2-0.3,0.6,0,0.9l2.2,1.9c0.3,0.2,0.5,0.2,0.5-0.2v-1.2
+	H8V12.1z"/>
+<path class="st1" d="M17.1,12.6l-2.2-1.9c-0.3-0.2-0.5-0.2-0.5,0.2v1.2H10v1.9h4.3v1.2c0,0.3,0.2,0.4,0.5,0.2l2.2-1.9
+	C17.4,13.2,17.4,12.8,17.1,12.6z"/>
+</svg>

webextension/img/container-unhide.svg

@@ -0,0 +1,12 @@
+<?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 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#858585;}
+</style>
+<circle class="st0" cx="6" cy="6" r="2"/>
+<path class="st0" d="M11.5,5.4C11.4,5.2,8.6,2.3,6,2.3s-5.4,3-5.5,3.1C0.3,5.6,0.2,5.8,0.2,6v0c0,0.2,0.1,0.4,0.2,0.6
+	C0.6,6.8,3.4,9.8,6,9.8s5.4-3,5.5-3.1c0.2-0.2,0.2-0.4,0.2-0.6v0C11.7,5.8,11.7,5.6,11.5,5.4z M10.8,6C10.6,6.2,8.1,8.9,6,8.9
+	S1.3,6.2,1.1,6l0,0C1.3,5.8,3.8,3.1,6,3.1S10.6,5.8,10.8,6L10.8,6z"/>
+</svg>

webextension/js/popup.js

@@ -4,8 +4,14 @@ browser.runtime.sendMessage('get-identities').then(reply=> {
   if (reply) {
     reply.content.identities.forEach(identity=> {
       const identityName = identity.l10nID.match(/userContext(\w*)\.label/)[IDENTITY_L10NID_MATCH_INDEX];
+      const identityRow = `
+      <tr>
+        <td>i</td>
+        <td>${identityName}</td>
+        <td>&gt;</td>
+      </tr>`;
 
-      document.querySelector('.identities-list').innerHTML += `<li><a href="#">${identityName}</a></li>`;
+      document.querySelector('.identities-list').innerHTML += identityRow;
     });
     console.log('response from sdk addon: ', reply.content);
   }

webextension/manifest.json

@@ -5,8 +5,8 @@
 
   "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
   "icons": {
-    "48": "img/blok-48.png",
-    "96": "img/blok-96.png"
+    "48": "img/container-site-d-48.png",
+    "96": "img/container-site-d-96.png"
   },
 
   "applications": {
@@ -25,8 +25,8 @@
   "browser_action": {
     "browser_style": true,
     "default_icon": {
-      "16": "img/icon-50x50.png",
-      "32": "img/icon-50x50.png"
+      "16": "img/container-site-d-24.png",
+      "32": "img/container-site-d-48.png"
     },
     "default_title": "Containers",
     "default_popup": "popup.html"

webextension/popup.html

@@ -2,12 +2,29 @@
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Containers browserAction Popup</title>
+  <link rel="stylesheet" href="/css/foundation.min.css">
+  <link rel="stylesheet" href="/css/popup.css">
 </head>
 <body>
-  <h1>Containers!</h1>
-  <ul class="identities-list">
-  </ul>
-  <h3><a href="#">Edit Containers</a></h3>
+  <div class="row popup-bumper">
+    <div class="small-2 columns header-column">
+      <img alt="Containers icon" class="header-icon" src="/img/container-site-d-24.png">
+    </div>
+    <div class="small-8 columns">
+      <h4>Containers</h4>
+    </div>
+    <div class="small-2 columns header-column">
+      <img alt="Sort Containers" class="header-icon" src="/img/container-sort.svg">
+    </div>
+  </div>
+  <table class="unstriped hover">
+    <tbody class="identities-list"></tbody>
+  </table>
+  <div class="row popup-bumper edit-identities">
+    <div class="small-12 columns edit-containers-text">
+      <a href="#">Edit Containers</a>
+    </div>
+  </div>
   <script src="js/popup.js"></script>
 </body>
 </html>