Now can reopen in default container. Added an 'OK' button to new container panel. Fixed some css

.eslintrc.js

@@ -46,7 +46,7 @@ module.exports = {
       "error",
       {
         "escape": {
-          "taggedTemplates": ["escaped"]
+          "taggedTemplates": ["escaped", "Utils.escaped"]
         }
       }
     ],

.stylelintrc

@@ -10,6 +10,11 @@
   "rules": {
     "declaration-block-no-duplicate-properties": true,
     "order/declaration-block-properties-alphabetical-order": true,
+    "property-no-unknown": [
+      true, {
+        ignoreProperties: 
+          ["inset-block-end", "inset-block-start"]
+    }],
     "property-blacklist": [
       "/(min[-]|max[-])height/",
       "/width/",

src/css/popup.css

@@ -91,7 +91,7 @@ table {
 }
 
 .scrollable {
-  border-block-start: 1px solid #f1f1f1;
+  flex: 1;
   inline-size: 100%;
   max-block-size: 400px;
   overflow: auto;
@@ -107,6 +107,7 @@ table {
 
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
+  inline-size: 100%;
   mask-image: linear-gradient(to left, transparent, black 1em);
   overflow: hidden;
   white-space: nowrap;
@@ -206,6 +207,10 @@ table {
   --identity-icon: url("/img/usercontext.svg#chill");
 }
 
+[data-identity-icon="fence"] {
+  --identity-icon: url("/img/usercontext.svg#fence");
+}
+
 #current-tab [data-identity-icon="default-tab"] {
   background: center center no-repeat url("/img/blank-tab.svg");
   fill: currentColor;
@@ -269,6 +274,7 @@ table {
 
 .panel-content {
   flex: 1;
+  padding-block-start: 16px;
 }
 
 /* Column panels for edit screens */
@@ -439,6 +445,7 @@ manage things like container crud */
   block-size: 48px;
   display: flex;
   justify-content: space-between;
+  padding-block-start: 16px;
 }
 
 .panel-header .usercontext-icon {
@@ -650,6 +657,14 @@ span ~ .panel-header-text {
   filter: url('/img/filters.svg#fill');
 }
 
+.mac-icon {
+  background-image: url('/img/multiaccountcontainer-16.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  block-size: 100%;
+}
+
 .container-panel-row:hover .clickable .usercontext-icon,
 .container-panel-row:focus .clickable .usercontext-icon,
 .container-panel-row .clickable:focus .usercontext-icon {
@@ -758,17 +773,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;
 }
@@ -826,10 +830,6 @@ span ~ .panel-header-text {
   overflow: hidden; /* Bugfix: issue 948 */
 }
 
-#edit-sites-assigned {
-  flex: 1000; /* Bugfix: issue 948 */
-}
-
 #edit-sites-assigned h3 {
   font-size: 14px;
   font-weight: normal;
@@ -849,21 +849,13 @@ 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;
 }
 
 .radio-choice > .radio-container {
   align-items: center;
-  block-size: 29px;
+  block-size: 25px;
   display: flex;
   flex: 0 0 calc(100% / var(--icon-fit));
 }
@@ -923,7 +915,7 @@ span ~ .panel-header-text {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  inline-size: 100%;
+  inline-size: 80%;
   margin-block-end: 10px;
   margin-inline-end: 0;
   margin-inline-start: 0;
@@ -948,10 +940,17 @@ span ~ .panel-header-text {
   padding-inline-start: 5px;
 }
 
-.edit-container-panel legend {
+.edit-container-panel legend,
+.options-header {
   flex: 1 0;
   font-size: 14px !important;
-  padding-block-end: 6px;
+  margin-block-end: 4px;
+  margin-block-start: -6px;
+}
+
+.options-header {
+  margin-block-end: 8px;
+  margin-block-start: 6px;
 }
 
 /* Achievement panel elements */
@@ -1003,3 +1002,275 @@ span ~ .panel-header-text {
 .amo-rate-cta {
   background: #0f1126;
 }
+
+body {
+  color: #000;
+  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  inline-size: 320px;
+  letter-spacing: -0.1px;
+}
+
+h3.title {
+  block-size: 40px;
+  color: #000;
+  font-size: 13px;
+  font-weight: bold;
+  inline-size: 100%;
+  letter-spacing: -0.1px;
+  line-height: 40px;
+  text-align: center;
+}
+
+.menu {
+  border-style: none;
+  inline-size: 100%;
+}
+
+.menu-item {
+  cursor: pointer;
+  height: 24px;
+  inline-size: 100%;
+  line-height: 24px;
+}
+
+.disabled-menu-item {
+  color: grey;
+  cursor: default;
+  font-style: italic;
+}
+
+.hover-highlight:hover {
+  background: #1296f8;
+  color: #fff;
+}
+
+.menu-text {
+  line-height: 24px;
+}
+
+.menu-icon {
+  display: block;
+  float: left;
+  height: 16px;
+  inline-size: 16px;
+  margin-block-end: 4px;
+  margin-block-start: 4px;
+  margin-inline-end: 8px;
+  margin-inline-start: 16px;
+  text-align: center;
+}
+
+.menu-right-float {
+  display: inline-block;
+  float: right;
+  height: 24px;
+  inline-size: 60px;
+  text-align: right;
+}
+
+.container-count {
+  opacity: 0.6;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 6px;
+  padding-inline-start: 0;
+  text-align: right;
+}
+
+.menu-arrow {
+  display: inline-block;
+  float: right;
+  height: 24px;
+  inline-size: 18px;
+  padding-block-end: 6px;
+  padding-block-start: 6px;
+  padding-inline-end: 12px;
+  padding-inline-start: 0;
+  text-align: center;
+}
+
+.menu-arrow img {
+  height: 12px;
+  inline-size: 12px;
+  padding-block-end: 2px;
+  padding-block-start: 2px;
+  padding-inline-end: 2px;
+  padding-inline-start: 2px;
+}
+
+hr {
+  border: 0;
+  border-block-start: 1px solid #e3e3e3;
+  display: block;
+  margin-block-end: 0;
+  margin-block-start: 6px;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-block-end: 6px;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.sub-header {
+  color: #737373;
+  height: 24px;
+  line-height: 24px;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+}
+
+.edit-form {
+  color: #737373;
+  flex: 1;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+}
+
+.identities-list {
+  margin-block-end: 41px;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.bottom-btn {
+  background-color: #e3e3e3;
+  border: solid 1px #d9d9d9;
+  cursor: pointer;
+  height: 41px;
+  inline-size: 100%;
+  inset-block-end: 0;
+  line-height: 41px;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  position: fixed;
+}
+
+.delete-container {
+  background-color: #fff;
+  border-block-start: solid 1px #e3e3e3;
+  cursor: default;
+  display: flex;
+  height: 65px;
+  inline-size: 100%;
+  justify-content: space-between;
+  padding-block-end: 27px;
+  padding-block-start: 9px;
+  padding-inline-end: 18px;
+  padding-inline-start: 17px;
+}
+
+.delete-btn {
+  background-color: rgba(12, 12, 13, 0.1);
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+  height: 30px;
+  inline-size: 100%;
+  line-height: 30px;
+  text-align: center;
+}
+
+.btn-return.arrow-left {
+  background-color: rgba(255, 255, 255, 1);
+  background-image: url("/img/arrow-icon-left.svg");
+  border: 0;
+  cursor: pointer;
+  height: 1.2rem;
+  inline-size: 1.2rem;
+  inset-block-start: 15px;
+  left: 15px;
+  position: absolute;
+}
+
+input {
+  border: solid 1px #bebebe;
+  border-radius: 2px;
+}
+
+.form-header {
+  height: 23px;
+  line-height: 23px;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+#edit-container-panel-name-input {
+  height: 29px;
+}
+
+.container-options {
+  height: 23px;
+}
+
+#site-isolation {
+  inset-block-end: auto;
+  position: fixed;
+}
+
+.options-label {
+  cursor: pointer;
+  padding-inline-start: 25px;
+}
+
+#manage-assigned-sites-list {
+  color: #5a9de6;
+}
+
+#info-icon {
+  border: solid 1px #000;
+  border-radius: 7px;
+  color: #000;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: bold;
+  height: 14px;
+  inline-size: 14px;
+  inset-block-start: 13px;
+  position: absolute;
+  right: 13px;
+  text-align: center;
+  text-decoration: none;
+}
+
+.delete-warning {
+  padding-block-end: 8px;
+  padding-block-start: 8px;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.trash-button {
+  display: inline-block;
+  float: right;
+  height: 16px;
+  inline-size: 16px;
+  margin-block-end: 4px;
+  margin-block-start: 4px;
+  margin-inline-end: 10px;
+  margin-inline-start: 0;
+  text-align: center;
+}
+
+tr > td > .trash-button {
+  display: none;
+}
+
+tr:hover > td > .trash-button {
+  display: block;
+}
+
+.new-container-icon {
+  font-size: 24px;
+  margin-block-start: -2px;
+}

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="#FFFFFF" 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/img/multiaccountcontainer-16-dark.svg

@@ -0,0 +1,7 @@
+<svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <style>rect,path {fill: rgba(249, 249, 250, 0.8);}</style>
+  <rect x="1" y="1" width="6" height="6" rx="1"/>
+  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
+  <rect x="1" y="9" width="6" height="6" rx="1"/>
+  <rect x="9" y="9" width="6" height="6" rx="1"/>
+</svg>

src/img/multiaccountcontainer-16.svg

@@ -0,0 +1,7 @@
+<svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <style>rect,path {fill: rgba(24, 25, 26, 01);}</style>
+  <rect x="1" y="1" width="6" height="6" rx="1"/>
+  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
+  <rect x="1" y="9" width="6" height="6" rx="1"/>
+  <rect x="9" y="9" width="6" height="6" rx="1"/>
+</svg>

src/img/usercontext.svg

@@ -13,6 +13,7 @@
       display: none;
     }
   </style>
+  <path id="fence" d="M28 4l-2 2v4h-4V6l-2-2-2 2v4h-4V6l-2-2-2 2v4H6V6L4 4 2 6v22h4v-4h4v4h4v-4h4v4h4v-4h4v4h4V6l-2-2zM6 22V12h4v10H6zm8 0V12h4v10h-4zm8 0V12h4v10h-4z"/>
   <path id="dollar" d="M16.2,0c-8.9,0-16,7.3-16,16c0,8.9,7.1,16,15.8,16s15.8-7.1,15.8-16C32,7.3,24.9,0,16.2,0z M17.1,25.1v1.6
   c0,0.4-0.4,0.5-0.7,0.5c-0.4,0-0.7-0.2-0.7-0.5v-1.6c-3.2-0.2-5-1.8-5.5-4.3c0-0.2,0-0.2,0-0.4c0-0.5,0.4-0.9,0.9-0.9
   c0.2,0,0.2,0,0.4,0c0.5,0,0.9,0.2,1.1,0.7c0.4,1.8,1.2,2.7,3.4,2.8v-6.8c-3.6-0.4-5.3-1.8-5.3-4.6c0-3,2.5-4.6,5.2-4.8V5.7
@@ -69,4 +70,12 @@
   s1.6,0.5,1.8,1.4v0.2c0,0.2,0,0.2,0,0.4c0,2,0.7,3.7,2.1,5c1.4,1.4,3,2.1,5,2.1l0,0c2,0,3.6-0.7,5-2.1c1.4-1.2,2.1-3.2,2.1-5V9.2
   C32,5.2,28.8,2,24.7,2"/>
   <circle id="circle" r="16" cx="16" cy="16" fill-rule="evenodd"/>
+  <path id="bullhorn" d="M1.5 5A.5.5 0 0 0 1 5.5v5a.5.5 0 0 0 1 0v-5A.5.5 0 0 0 1.5 5zM14.6 2.2A1 1 0 0 0 13.71 2l-10 3A1 1 0 0 0 3 6v4a1 1 0 0 0 .71 1L5 11.35a.4.4 0 0 0 0 .15v1a2.5 2.5 0 0 0 5 .33L13.71 14A1 1 0 0 0 14 14a1 1 0 0 0 .6-.2A1 1 0 0 0 15 13V3a1 1 0 0 0-.4-.8zM7.5 14A1.5 1.5 0 0 1 6 12.5v-.86l3 .9A1.51 1.51 0 0 1 7.5 14zm5.5-2.34l-8-2.4V6.74l8-2.4z"/>
+  <path id="folder" d="M13 4H8.41L7 2.59A2 2 0 0 0 5.59 2H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
+  <path id="hat" d="M15 10a1 1 0 0 0-1 1 1 1 0 0 1-1 1V6a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v6a1 1 0 0 1-1-1 1 1 0 0 0-2 0 3 3 0 0 0 3 3h10a3 3 0 0 0 3-3 1 1 0 0 0-1-1zM7 4h2a2 2 0 0 1 2 2v3H5V6a2 2 0 0 1 2-2z"/>
+  <path id="wallet" d="M14 2H2C1 2 0.06 3 0 4.86v6.34A1.94 1.94 0 0 0 1.22 13l7 2.86A2 2 0 0 0 9 16a2 2 0 0 0 1.14-0.35A1.9 1.9 0 0 0 11 14.07V7.8A1.94 1.94 0 0 0 9.78 6L4.85 4h8.65a0.5 0.5 0 0 1 0 1H9.92l0.24 0.1a2.93 2.93 0 0 1 1.2 0.9h2.14A0.5 0.5 0 0 1 14 6.5v3a0.51 0.51 0 0 1-0.5 0.5H12v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-6 8.5a0.5 0.5 0 0 1 1 0v1a0.5 0.5 0 0 1-1 0z"/>
+
+
+
+
 </svg>

src/js/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     "backgroundLogic": true,
     "identityState": true,
     "messageHandler": true,
-    "sync": true
+    "sync": true,
+    "Utils": true
   }
 };

src/js/background/backgroundLogic.js

@@ -329,6 +329,17 @@ const backgroundLogic = {
   },
 
   cookieStoreId(userContextId) {
+    if(userContextId === 0) return "firefox-default";
     return `firefox-container-${userContextId}`;
   }
-};
+};
+
+browser.commands.onCommand.addListener(function (command) {
+  if (command === "open_container_2") {
+    browser.tabs.create({cookieStoreId: "firefox-container-2"});
+  }
+  if (command === "open_container_1") {
+    console.log("Toggling the feature!");
+    browser.tabs.create({cookieStoreId: "firefox-container-1"});
+  }
+});

src/js/background/messageHandler.js

@@ -73,6 +73,16 @@ const messageHandler = {
       case "exemptContainerAssignment":
         response = assignManager._exemptTab(m);
         break;
+      case "reloadInContainer":
+        response = assignManager.reloadPageInContainer(
+          m.url, 
+          m.currentUserContextId, 
+          m.newUserContextId, 
+          m.tabIndex, 
+          m.active,
+          true
+        );
+        break;
       }
       return response;
     });

src/js/pageAction.js

@@ -0,0 +1,36 @@
+async function init() {
+  const fragment = document.createDocumentFragment();
+
+  const identities = await browser.contextualIdentities.query({});
+
+  identities.forEach(identity => {
+    const tr = document.createElement("tr");
+    tr.classList.add("menu-item", "hover-highlight");
+    const td = document.createElement("td");
+
+    td.innerHTML = Utils.escaped`          
+        <div class="menu-icon">
+          <div class="usercontext-icon"
+            data-identity-icon="${identity.icon}"
+            data-identity-color="${identity.color}">
+          </div>
+        </div>
+        <span class="menu-text">${identity.name}</span>`;
+
+    fragment.appendChild(tr);
+
+    tr.appendChild(td);
+
+    Utils.addEnterHandler(tr, async () => {
+      Utils.alwaysOpenInContainer(identity);
+      window.close();
+    });
+  });
+
+  const list = document.querySelector("#picker-identities-list");
+
+  list.innerHTML = "";
+  list.appendChild(fragment);
+}
+
+init();

src/js/utils.js

@@ -1,11 +1,11 @@
 const DEFAULT_FAVICON = "/img/blank-favicon.svg";
 
 // TODO use export here instead of globals
-window.Utils = {
+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");
@@ -18,6 +18,110 @@ window.Utils = {
     imageElement.addEventListener("error", errorListener);
     imageElement.addEventListener("load", loadListener);
     return imageElement;
+  },
+  /**
+ * Escapes any occurances of &, ", <, > or / with XML entities.
+ *
+ * @param {string} str
+ *        The string to escape.
+ * @return {string} The escaped string.
+ */
+  escapeXML(str) {
+    const replacements = { "&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;", "/": "&#x2F;" };
+    return String(str).replace(/[&"'<>/]/g, m => replacements[m]);
+  },
+
+  /**
+ * A tagged template function which escapes any XML metacharacters in
+ * interpolated values.
+ *
+ * @param {Array<string>} strings
+ *        An array of literal strings extracted from the templates.
+ * @param {Array} values
+ *        An array of interpolated values extracted from the template.
+ * @returns {string}
+ *        The result of the escaped values interpolated with the literal
+ *        strings.
+ */
+  escaped(strings, ...values) {
+    const result = [];
+
+    for (const [i, string] of strings.entries()) {
+      result.push(string);
+      if (i < values.length)
+        result.push(this.escapeXML(values[i]));
+    }
+
+    return result.join("");
+  },
+
+  async currentTab() {
+    const activeTabs = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT });
+    if (activeTabs.length > 0) {
+      return activeTabs[0];
+    }
+    return false;
+  },
+  
+  addEnterHandler(element, handler) {
+    element.addEventListener("click", (e) => {
+      handler(e);
+    });
+    element.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        handler(e);
+      }
+    });
+  },
+
+  userContextId(cookieStoreId = "") {
+    const userContextId = cookieStoreId.replace("firefox-container-", "");
+    return (userContextId !== cookieStoreId) ? Number(userContextId) : false;
+  },
+
+  setOrRemoveAssignment(tabId, url, userContextId, value) {
+    return browser.runtime.sendMessage({
+      method: "setOrRemoveAssignment",
+      tabId,
+      url,
+      userContextId,
+      value
+    });
+  },
+
+  reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
+    return browser.runtime.sendMessage({
+      method: "reloadInContainer",
+      url, 
+      currentUserContextId, 
+      newUserContextId, 
+      tabIndex, 
+      active
+    });
+  },
+
+  async alwaysOpenInContainer(identity) {
+    const currentTab = await this.currentTab();
+    const assignedUserContextId = this.userContextId(identity.cookieStoreId);
+    Utils.setOrRemoveAssignment(
+      currentTab.id, 
+      currentTab.url, 
+      assignedUserContextId, 
+      false
+    );
+    if (currentTab.cookieStoreId !== identity.cookieStoreId) {
+      Utils.reloadInContainer(
+        currentTab.url, 
+        false, 
+        assignedUserContextId,
+        currentTab.index + 1, 
+        currentTab.active
+      );
+    }
   }
 
 };
+
+
+window.Utils = Utils;

src/manifest.json

@@ -39,21 +39,41 @@
         "mac": "MacCtrl+Period"
       },
       "description": "Open containers panel"
+    },
+    "open_container_1": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+1"
+      },
+      "description": "Container Shortcut 1"
+    },
+    "open_container_2": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+2"
+      },
+      "description": "Container Shortcut 2"
     }
   },
   "browser_action": {
     "browser_style": true,
-    "default_icon": "img/container-site.svg",
+    "default_icon": "img/multiaccountcontainer-16.svg",
     "default_title": "Multi-Account Containers",
     "default_popup": "popup.html",
     "theme_icons": [
       {
-        "light": "img/container-site-light.svg",
+        "light": "img/multiaccountcontainer-16-dark.svg",
-        "dark": "img/container-site.svg",
+        "dark": "img/multiaccountcontainer-16.svg",
         "size": 32
       }
     ]
   },
+  "page_action": {
+    "browser_style": true,
+    "default_icon": "img/multiaccountcontainer-16.svg",
+    "default_title": "Always open this in a Container",
+    "default_popup": "pageActionPopup.html",
+    "pinned": true,
+    "show_matches": ["*://*/*"]
+  },
   "background": {
     "page": "js/background/index.html"
   },

src/pageActionPopup.html

@@ -0,0 +1,34 @@
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <title>Multi-Account Containers</title>
+  <link rel="stylesheet" type="text/css" href="css/popup.css">
+
+</head>
+<body>
+
+  <div class="page-action-container-picker" id="container-picker-panel">
+    <h3 class="title">
+      Always Open this Site in...
+    </h3>
+    <hr>
+    <div class="scrollable identities-list">
+      <table class="menu" id="picker-identities-list">
+        <tr class="menu-item hover-highlight">
+          <td>
+            <div class="menu-icon">
+              <div class="usercontext-icon"
+                data-identity-icon="pet"
+                data-identity-color="blue">
+              </div>
+            </div>
+            <span class="menu-text">Default</span>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <script src="js/utils.js"></script>
+  <script src="js/pageAction.js"></script>
+</body>
+</html>

src/popup.html

@@ -115,68 +115,156 @@
     <a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
   </div>
 
-  <div class="panel container-panel hide" id="container-panel">
+  <div class="panel menu-panel container-panel hide" id="container-panel">
-    <div id="current-tab">
+    <h3 class="title">
-      <h3>Current Tab</h3>
+      Multi-Account Containers
-      <div id="current-page"></div>
+    </h3>
-      <label for="container-page-assigned">
+    <a href="#" id="info-icon" tabindex="10">i</a>
-        <input type="checkbox" id="container-page-assigned" />
+    <hr>
-        <span class="truncate-text">
+    <table class="menu">
-          Always open in
+      <tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
-          <span id="current-container"></span>
+        <td>
-        </span>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
-      </label>
+          <span class="menu-text">Open New Tab in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
+          <span class="menu-text">Reopen This Site in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+    </table>
+    <hr>
+    <table class="menu">
+      <tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
+          <span class="menu-text">Sort Tabs by Container</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Open in New Tab" src="/img/open-in-new-16.svg" />
+          <span class="menu-text">Always Open This Site in...</span>
+            <span class="menu-arrow">
+              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+            </span>
+        </td>
+      </tr>
+    </table>
+    <hr>
+    <div class="sub-header">
+    Containers
     </div>
-    <div class="container-panel-controls">
+    <div class="scrollable identities-list">
-      <a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
+      <table class="menu" id="identities-list">
-    </div>
+        <tr class="menu-item hover-highlight">
-    <div class="scrollable panel-content" tabindex="-1">
+          <td>
-      <table class="identities-list">
+            <div class="menu-icon">
-        <tbody></tbody>
+              <div class="usercontext-icon"
+                data-identity-icon="pet"
+                data-identity-color="blue">
+              </div>
+            </div>
+            <span class="menu-text">Default</span>
+            <span class="menu-right-float">
+              <span class="container-count">22</span>
+              <span class="menu-arrow">
+                <img alt="Container Info" src="/img/arrow-icon-right.svg" />
+              </span>
+            </span>
+          </td>
+        </tr>
       </table>
     </div>
-    <div class="panel-footer edit-identities">
+    <div class="bottom-btn" id="manage-containers-link" tabindex="0">
-      <div class="edit-containers-text panel-footer-secondary">
+      Manage Containers
-        <a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
+    </div> 
-      </div>
+  </div>
-      <a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">
+
-        <img class="pop-button-image-small icon" alt="Create new container icon" src="/img/container-add.svg" />
+
-      </a>
+  <div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
+    <h3 class="title" id="container-info-title">
+      Personal
+    </h3>
+    <button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
+    <hr>
+    <table class="menu">
+      <tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
+        <td>
+          <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
+          <span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
+          <span class="menu-text">Move Tabs to a New Window</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
+      <tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
+        <td>
+          <img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
+          <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
+            <span class="menu-arrow">
+            </span>
+        </td>
+      </tr>
+    </table>
+    <hr>
+    <div class="sub-header">
+    Open Tabs
+    </div>
+    <div class="scrollable">
+      <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">
+      Manage This Container
     </div>
   </div>
 
 
-  <div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
+  <div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
-    <div class="columns">
+    <h3 class="title" id="picker-title">
-      <div class="panel-back-arrow" id="close-container-info-panel">
+      Multi-Account Containers
-        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
+    </h3>
-      </div>
+    <button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
-      <div class="column-panel-content">
+    <hr>
-        <div class="panel-header container-info-panel-header">
+    <div id="new-container-div"></div>
-          <span class="usercontext-icon" id="container-info-icon"></span>
+    <div class="scrollable identities-list">
-          <h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
+      <table class="menu" id="picker-identities-list">
-        </div>
+        <tr class="menu-item hover-highlight">
-        <div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
+          <td>
-          <img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
+            <div class="menu-icon">
-          <span id="container-info-hideorshow-label">Hide this container</span>
+              <div class="usercontext-icon"
-        </div>
+                data-identity-icon="pet"
-        <div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
+                data-identity-color="blue">
-        <div class="scrollable">
+              </div>
-          <table id="container-info-table" class="container-info-list">
+            </div>
-          </table>
+            <span class="menu-text">Default</span>
-        </div>
+          </td>
-      </div>
+        </tr>
-    </div>
-  </div>
-
-
-  <div class="panel edit-containers-panel hide" id="edit-containers-panel">
-    <div class="panel-header">
-      <h3 class="panel-header-text">Edit Containers</h3>
-    </div>
-    <div class="scrollable panel-content">
-      <table class="unstriped">
-        <tbody id="edit-identities-list"></tbody>
       </table>
     </div>
     <div class="panel-footer edit-containers-panel-footer">
@@ -185,47 +273,73 @@
   </div>
   </div>
 
+  <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
+    <h3 class="title" id="container-edit-title">
+      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 class="form-header">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 class="form-header">Color</legend>
+        </fieldset>
+        <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
+          <legend class="form-header">Icon</legend>
+        </fieldset>
+      </form>
+      <div class="options-header">Options</div>
+      <div class="container-options">
+        <input type="checkbox" id="site-isolation" name="site-isolation">
+        <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
+      </div>
+      <div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
+      </div>
+    </div>
+    <div class="delete-container">
+      <button class="delete-btn" id="delete-container-button">Delete This Container</button>
+    </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
+      <a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
+    </div>
+  </div>
 
-  <div class="panel edit-container-panel hide" id="edit-container-panel">
+  <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
-    <div class="columns">
+    <h3 class="title" id="edit-assignments-title">
-      <div class="panel-back-arrow" id="edit-container-panel-back-arrow">
+      Default
-        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
+    </h3>
-      </div>
+    <button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
-      <div class="column-panel-content">
+    <hr>
-        <form id="edit-container-panel-form">
+    <div class="scrollable edit-sites-assigned">
-          <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
+      <div class="sub-header">Sites assigned to this container</div>
-          <fieldset>
+      <table class="menu scrollable" id="edit-sites-assigned">
-            <legend>Name</legend>
+        <tr class="menu-item hover-highlight" tabindex="0">
-            <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
+          <td>
-          </fieldset>
+            <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
-          <fieldset id="edit-container-panel-choose-color" class="radio-choice">
+            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllla.org</span>
-            <legend>Choose a color</legend>
+            <img class="trash-button" src="/img/container-delete.svg" />
-          </fieldset>
+          </td>
-          <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
+        </tr>
-            <legend>Choose an icon</legend>
+      </table>
-          </fieldset>
-        </form>
-        <div id="edit-sites-assigned" class="scrollable" hidden>
-          <h3>Sites assigned to this container</h3>
-          <div class="assigned-sites-list">
-          </div>
-        </div>
-        <div class="panel-footer">
-          <a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
-          <a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
-        </div>
-      </div>
     </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>