From 4b57adc8bbfd1c6efe5af64ea14035250a3d01cc Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 5 Sep 2019 22:50:36 +0200
Subject: [PATCH 01/56] Write skeleton for PreferenceGroup

This will contain the preferences related to the default container
---
 src/ui-preferences/PreferenceGroup.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/ui-preferences/PreferenceGroup.js

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
new file mode 100644
index 0000000..2155133
--- /dev/null
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -0,0 +1,24 @@
+/**
+ * Groups preferences together and displays them in a manner to reflect that fact.
+ */
+export default class PreferenceGroup {
+
+  /**
+   *
+   * @param prefix {String} The prefix to be used for all keys of the preferences
+   *                e.g windowOptions --> preferences will be windowOptions.optionX
+   * @param ui_title {String} The title to be shown to the user
+   * @param ui_description {String} The description to be shown to the user
+   * @param preferences {Preference[]}
+   * @param toggleable {boolean} Indicates whether the preferences
+   *                    can be toggled together
+   */
+  constructor(prefix, ui_title, ui_description, preferences, toggleable=false){
+    this.prefix = prefix;
+    this._ui_title = ui_title;
+    this._ui_description = ui_description;
+    this._preferences = preferences;
+    this._toggleable = toggleable;
+    this._enabled = false;
+  }
+}

From 9bd54f5743b881983a621380a0050cadc7225a93 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Fri, 6 Sep 2019 16:52:02 +0200
Subject: [PATCH 02/56] Rename variables to use camelCase

---
 src/ui-preferences/PreferenceGroup.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index 2155133..8dc4bf1 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -7,16 +7,16 @@ export default class PreferenceGroup {
    *
    * @param prefix {String} The prefix to be used for all keys of the preferences
    *                e.g windowOptions --> preferences will be windowOptions.optionX
-   * @param ui_title {String} The title to be shown to the user
-   * @param ui_description {String} The description to be shown to the user
+   * @param uiTitle {String} The title to be shown to the user
+   * @param uiDescription {String} The description to be shown to the user
    * @param preferences {Preference[]}
    * @param toggleable {boolean} Indicates whether the preferences
    *                    can be toggled together
    */
-  constructor(prefix, ui_title, ui_description, preferences, toggleable=false){
+  constructor(prefix, uiTitle, uiDescription, preferences, toggleable=false){
     this.prefix = prefix;
-    this._ui_title = ui_title;
-    this._ui_description = ui_description;
+    this._uiTitle = uiTitle;
+    this._uiDescription = uiDescription;
     this._preferences = preferences;
     this._toggleable = toggleable;
     this._enabled = false;

From 6a556b3b4635dc6a1f65c17d9c5ccd25c177dc34 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Sat, 7 Sep 2019 01:13:23 +0200
Subject: [PATCH 03/56] First visible version of PreferenceGroup

Saving hasn't been tested yet!

Additionally the ChoicePreference and StringPreference have been added.

A major change is the introduction of the preferences.json and building
 the preferences UI from a JSON. This allows us to separate the definition
 of preferences from the code as much as possible.

A greater separation of concerns was further introduced using the raw-loader.
It will mark a move away from using the <template> node in index.html
 to a direct import thanks to webpack. This will also help with finding
 the corresponding files for the preference UI more quickly.

A somewhat minor change is the renaming of uiName, ui_title and other
 params to the Preference constructor to simpler and more common names.
Maybe the "ui" prefix will be introduced later on again if it isn't clear
 what the parameter is used for.
---
 package-lock.json                        | 10 ++++
 package.json                             |  1 +
 src/ui-preferences/ChoicePreference.js   | 42 ++++++++++++++++
 src/ui-preferences/Preference.js         |  5 +-
 src/ui-preferences/PreferenceGroup.html  | 12 +++++
 src/ui-preferences/PreferenceGroup.js    | 51 +++++++++++++++----
 src/ui-preferences/StringPreference.html |  1 +
 src/ui-preferences/StringPreference.js   | 25 +++++++++
 src/ui-preferences/index.js              | 64 +++++++++++++++++++++---
 src/ui-preferences/preferences.json      | 48 ++++++++++++++++++
 src/ui-preferences/utils.js              |  5 ++
 11 files changed, 245 insertions(+), 19 deletions(-)
 create mode 100644 src/ui-preferences/ChoicePreference.js
 create mode 100644 src/ui-preferences/PreferenceGroup.html
 create mode 100644 src/ui-preferences/StringPreference.html
 create mode 100644 src/ui-preferences/StringPreference.js
 create mode 100644 src/ui-preferences/preferences.json
 create mode 100644 src/ui-preferences/utils.js

diff --git a/package-lock.json b/package-lock.json
index c1790dd..e3c4be1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11254,6 +11254,16 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-3.1.0.tgz",
+      "integrity": "sha512-lzUVMuJ06HF4rYveaz9Tv0WRlUMxJ0Y1hgSkkgg+50iEdaI0TthyEDe08KIHb0XsF6rn8WYTqPCaGTZg3sX+qA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^2.0.1"
+      }
+    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
diff --git a/package.json b/package.json
index d035598..951337d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "jest": "^24.8.0",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
+    "raw-loader": "^3.1.0",
     "rimraf": "^3.0.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
diff --git a/src/ui-preferences/ChoicePreference.js b/src/ui-preferences/ChoicePreference.js
new file mode 100644
index 0000000..c922aab
--- /dev/null
+++ b/src/ui-preferences/ChoicePreference.js
@@ -0,0 +1,42 @@
+import Preference from './Preference';
+import {createEl} from './utils';
+
+export default class ChoicePreference extends Preference {
+
+  constructor({name, label, description, choices, defaultChoice}) {
+    super({name, label, description});
+    this.choices = choices;
+    this._defaultChoice = defaultChoice;
+    this._addChoices();
+  }
+
+  _buildEl() {
+    const el = document.createElement('form');
+    return el;
+  }
+
+  _addChoices() {
+    for (let choice of this.choices) {
+      const checkedAttr = this._defaultChoice === choice.name ? 'checked' : '';
+      this.el.appendChild(createEl(`<div class="radio-container">
+        <input type="radio" name="${this.name}" value="${choice.name}" ${checkedAttr}>
+        <label for="${this.name}">${choice.label}</label>
+        <div class="radio-container__description">${choice.description}</div>
+    </div>
+      `));
+    }
+  }
+
+  get() {
+    const formData = new FormData(this.el);
+    return formData.get(this.name);
+  }
+
+  set({value}) {
+    for (let $input of this.el.querySelectorAll('input')) {
+      $input.checked = $input.value === value;
+    }
+  }
+}
+
+ChoicePreference.TYPE = 'choice';
diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index 0f611f7..3cb4107 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -2,9 +2,10 @@ import PreferenceStorage from '../Storage/PreferenceStorage';
 
 export default class Preference {
 
-  constructor(name, uiName, description) {
+  // TODO: Add the notion of a default value
+  constructor({name, label, description}) {
     this.name = name;
-    this.ui_name = uiName;
+    this.label = label;
     this.description = description;
     this.el = this._buildEl();
   }
diff --git a/src/ui-preferences/PreferenceGroup.html b/src/ui-preferences/PreferenceGroup.html
new file mode 100644
index 0000000..b8e8900
--- /dev/null
+++ b/src/ui-preferences/PreferenceGroup.html
@@ -0,0 +1,12 @@
+<div class="pref-group">
+    <div class="pref-group__label">
+
+    </div>
+    <div class="pref-group__description">
+
+    </div>
+
+    <div class="preferences">
+
+    </div>
+</div>
diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index 8dc4bf1..8e0baeb 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -1,24 +1,57 @@
 /**
  * Groups preferences together and displays them in a manner to reflect that fact.
  */
-export default class PreferenceGroup {
+import Preference from './Preference';
+import {createEl} from './utils';
+import template from '!!raw-loader!./PreferenceGroup.html';
+
+export default class PreferenceGroup extends Preference {
 
   /**
    *
-   * @param prefix {String} The prefix to be used for all keys of the preferences
+   * @param name {String} The name to be used as prefix for all keys of the preferences
    *                e.g windowOptions --> preferences will be windowOptions.optionX
-   * @param uiTitle {String} The title to be shown to the user
-   * @param uiDescription {String} The description to be shown to the user
+   * @param label {String} The title to be shown to the user
+   * @param description {String} The description to be shown to the user
    * @param preferences {Preference[]}
    * @param toggleable {boolean} Indicates whether the preferences
    *                    can be toggled together
    */
-  constructor(prefix, uiTitle, uiDescription, preferences, toggleable=false){
-    this.prefix = prefix;
-    this._uiTitle = uiTitle;
-    this._uiDescription = uiDescription;
+  constructor({name, label, description, preferences, toggleable = false}) {
+    super({name, label, description});
+    for (let preference of preferences) {
+      if (!preference.name.startsWith(`${name}.`)) {
+        throw `Preference names must start with ${name}`;
+      }
+    }
     this._preferences = preferences;
     this._toggleable = toggleable;
-    this._enabled = false;
+  }
+
+  _buildEl() {
+    return createEl(template);
+  }
+
+  get() {
+    return this._toggleable ?
+        this._getToggleEl().checked
+        : false;
+  }
+
+  _getToggleEl() {
+    return this.el.querySelector('.pref-group__toggle');
+  }
+
+  set({value}) {
+    if (this._toggleable) {
+      this._getToggleEl().checked = value;
+    }
+  }
+
+  async updateFromDb() {
+    super.updateFromDb();
+    return Promise.all(this._preferences.map((preference) => preference.updateFromDb()));
   }
 }
+
+PreferenceGroup.TYPE = 'group';
diff --git a/src/ui-preferences/StringPreference.html b/src/ui-preferences/StringPreference.html
new file mode 100644
index 0000000..4856de5
--- /dev/null
+++ b/src/ui-preferences/StringPreference.html
@@ -0,0 +1 @@
+<input type="text">
diff --git a/src/ui-preferences/StringPreference.js b/src/ui-preferences/StringPreference.js
new file mode 100644
index 0000000..f568488
--- /dev/null
+++ b/src/ui-preferences/StringPreference.js
@@ -0,0 +1,25 @@
+import Preference from './Preference';
+import template from '!!raw-loader!./StringPreference.html';
+import {createEl} from './utils';
+
+export default class StringPreference extends Preference {
+
+  constructor({name, label, description}){
+    super({name, label, description});
+
+  }
+
+  _buildEl() {
+    return createEl(template);
+  }
+
+  get() {
+    return this.el.value;
+  }
+
+  set({value}) {
+    this.el.value = value;
+  }
+}
+
+StringPreference.TYPE = 'string';
diff --git a/src/ui-preferences/index.js b/src/ui-preferences/index.js
index 2244a96..ea4aa6a 100644
--- a/src/ui-preferences/index.js
+++ b/src/ui-preferences/index.js
@@ -1,25 +1,50 @@
 import './styles/index.scss';
 import './index.html';
+import preferencesJson from './preferences.json';
 import BooleanPreference from './BooleanPreference';
+import ChoicePreference from './ChoicePreference';
+import PreferenceGroup from './PreferenceGroup';
+import StringPreference from './StringPreference';
 
 function qs(selector, el = document) {
   return el.querySelector(selector);
 }
 
+
+// TODO make this a class function
+function buildPreference(prefConf) {
+  switch (prefConf.type) {
+    case BooleanPreference.TYPE:
+      return new BooleanPreference(prefConf);
+    case ChoicePreference.TYPE:
+      return new ChoicePreference(prefConf);
+    case PreferenceGroup.TYPE:
+      prefConf.preferences = prefConf.preferences.map((groupPrefConf) => {
+        return buildPreference(Object.assign({}, groupPrefConf, {
+          name: `${prefConf.name}.${groupPrefConf.name}`,
+        }));
+      });
+      return new PreferenceGroup(prefConf);
+    case StringPreference.TYPE:
+      return new StringPreference(prefConf);
+    default:
+      console.warn('unknown preference type', prefConf);
+  }
+
+}
+
 // Build the preferences
-const preferences = [
-  new BooleanPreference('keepOldTabs',
-      'Keep old tabs',
-      'After a contained tab has been created, the old won\'t be closed'),
-];
+let preferences = preferencesJson.map(buildPreference);
 
 const preferencesContainer = qs('.preferences-container');
 const preferenceTemplate = qs('template#preference-template').content;
-for (const preference of preferences) {
+
+// TODO: Put this in to the class
+function showPreference(preference, container) {
   const prefContainer = preferenceTemplate.cloneNode(true);
 
   // Set some attributes
-  qs('.pref-container__label', prefContainer).innerHTML = preference.ui_name;
+  qs('.pref-container__label', prefContainer).innerHTML = preference.label;
   qs('.pref-container__description', prefContainer).innerHTML = preference.description;
 
   // Append the el
@@ -27,11 +52,34 @@ for (const preference of preferences) {
   prefTypeContainer.appendChild(preference.el);
 
 
-  preferencesContainer.appendChild(prefContainer);
+  container.appendChild(prefContainer);
 
+  // noinspection JSIgnoredPromiseFromCall
   preference.updateFromDb();
 }
 
+function showPreferenceGroup(group) {
+  const $el = group.el;
+  qs('.pref-group__label', $el).innerHTML = group.label;
+  qs('.pref-group__description', $el).innerHTML = group.description;
+
+
+  for (let preference of group._preferences) {
+    showPreference(preference, $el.querySelector('.preferences'));
+  }
+  preferencesContainer.appendChild($el);
+  // noinspection JSIgnoredPromiseFromCall
+  group.updateFromDb();
+}
+
+for (const preference of preferences) {
+  if (preference.constructor.TYPE === 'group') {
+    showPreferenceGroup(preference);
+  } else {
+    showPreference(preference, preferencesContainer);
+  }
+}
+
 const $saveButton = qs('#save-button');
 $saveButton.addEventListener('click', async () => {
   await Promise.all(preferences.map(preference => preference.update()));
diff --git a/src/ui-preferences/preferences.json b/src/ui-preferences/preferences.json
new file mode 100644
index 0000000..0691005
--- /dev/null
+++ b/src/ui-preferences/preferences.json
@@ -0,0 +1,48 @@
+[
+  {
+    "type": "bool",
+    "name": "keepOldTabs",
+    "label": "Keep old tabs",
+    "description": "After a contained tab has been created, the old won't be closed"
+  },
+  {
+    "type": "group",
+    "name": "defaultContainer",
+    "label": "Default container",
+    "description": "Which container unmatched URLs will end up in",
+    "toggleable": true,
+    "preferences": [
+      {
+        "type": "string",
+        "name": "containerName",
+        "label": "Container name",
+        "description": "What the name of the default container will be. It's possible to use variables here"
+      },
+      {
+        "type": "choice",
+        "name": "lifetime",
+        "label": "Lifetime",
+        "description": "How long a container will live",
+        "choices": [
+          {
+            "name": "forever",
+            "label": "Forever",
+            "description": "Container will always be present after creation"
+          },
+          {
+            "name": "untilLastTab",
+            "label": "Until last tab is closed",
+            "description": "Closing the last tab in the container will destroy the container"
+          }
+        ],
+        "defaultChoice": "forever"
+      },
+      {
+        "type": "string",
+        "name": "ruleAddition",
+        "label": "Rule addition",
+        "description": "The rule to be added to this container once a domain is matched (can be empty)"
+      }
+    ]
+  }
+]
diff --git a/src/ui-preferences/utils.js b/src/ui-preferences/utils.js
new file mode 100644
index 0000000..947680d
--- /dev/null
+++ b/src/ui-preferences/utils.js
@@ -0,0 +1,5 @@
+export function createEl(string){
+  const $el = document.createElement('div');
+  $el.innerHTML = string;
+  return $el.firstChild;
+}

From e660c332442076299975aa998846fc492b1684f5 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Sat, 7 Sep 2019 01:18:04 +0200
Subject: [PATCH 04/56] Move the position of preference descriptions

---
 src/ui-preferences/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui-preferences/index.html b/src/ui-preferences/index.html
index a8db84d..0d707dd 100644
--- a/src/ui-preferences/index.html
+++ b/src/ui-preferences/index.html
@@ -17,12 +17,12 @@
 <template id="preference-template">
     <div class="pref-container">
         <div class="pref-container__label"></div>
+        <div class="pref-container__description"></div>
 
         <div class="pref-type-container">
             <!-- Put the preference-type in here -->
         </div>
 
-        <div class="pref-container__description"></div>
     </div>
 </template>
 

From efd6120d173c4eb5f8d7860cec40280c839e966b Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Sat, 7 Sep 2019 15:49:16 +0200
Subject: [PATCH 05/56] Make saving PreferenceGroups work

---
 src/ui-preferences/PreferenceGroup.html | 6 +++++-
 src/ui-preferences/PreferenceGroup.js   | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/ui-preferences/PreferenceGroup.html b/src/ui-preferences/PreferenceGroup.html
index b8e8900..8d19733 100644
--- a/src/ui-preferences/PreferenceGroup.html
+++ b/src/ui-preferences/PreferenceGroup.html
@@ -1,6 +1,10 @@
 <div class="pref-group">
     <div class="pref-group__label">
-
+    </div>
+    <div class="pref-group__toggle-container">
+        <input
+            class="pref-group__toggle"
+            type="checkbox">
     </div>
     <div class="pref-group__description">
 
diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index 8e0baeb..f3af1a3 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -52,6 +52,13 @@ export default class PreferenceGroup extends Preference {
     super.updateFromDb();
     return Promise.all(this._preferences.map((preference) => preference.updateFromDb()));
   }
+
+  update() {
+    return Promise.all([super.update()].concat(
+        this._preferences.map((preference) => preference.update())
+    ));
+
+  }
 }
 
 PreferenceGroup.TYPE = 'group';

From f02063e3ef52bbbbc115c874ec26bbb760368d0f Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Sat, 7 Sep 2019 15:50:10 +0200
Subject: [PATCH 06/56] Don't fail updating a Preference from the DB if its
 value cannot be retrieved

---
 src/ui-preferences/Preference.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index 3cb4107..e2d6c49 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -38,7 +38,10 @@ export default class Preference {
    * Updates the UI with the DB value
    */
   async updateFromDb() {
-    this.set(await this.retrieve());
+    const retrieved = await this.retrieve();
+    if(retrieved){
+      this.set(retrieved);
+    }
   }
 
   /**

From 0931dc260bc3ebf7aa7ec8a0010532e2b5c7b304 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Sat, 7 Sep 2019 16:22:29 +0200
Subject: [PATCH 07/56] Apply CSS to know if preference groups are activated or
 not

---
 src/ui-preferences/PreferenceGroup.html | 10 ++++------
 src/ui-preferences/styles/index.scss    | 26 ++++++++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/ui-preferences/PreferenceGroup.html b/src/ui-preferences/PreferenceGroup.html
index 8d19733..3d48dd0 100644
--- a/src/ui-preferences/PreferenceGroup.html
+++ b/src/ui-preferences/PreferenceGroup.html
@@ -1,15 +1,13 @@
 <div class="pref-group">
     <div class="pref-group__label">
     </div>
-    <div class="pref-group__toggle-container">
-        <input
-            class="pref-group__toggle"
-            type="checkbox">
-    </div>
     <div class="pref-group__description">
-
     </div>
 
+    <input
+        class="pref-group__toggle"
+        type="checkbox">
+
     <div class="preferences">
 
     </div>
diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index 34b7f2a..a60b8d1 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -1,11 +1,23 @@
-.pref-container{
-    border-width: 1px;
-    border-radius: 3px;
-    border-style: ridge;
-    margin-bottom: 5px;
-    margin-top: 5px;
+.pref-container {
+  border-width: 1px;
+  border-radius: 3px;
+  border-style: ridge;
+  margin-bottom: 5px;
+  margin-top: 5px;
 }
 
 .pref-container .pref-container__label {
-    font-weight: bold;
+  font-weight: bold;
+}
+
+
+// Groups that aren't activated yet
+.pref-group__toggle ~ .preferences {
+  opacity: 0.5;
+  pointer-events: none;
+}
+// Activated groups
+.pref-group__toggle:checked ~ .preferences {
+  opacity: unset;
+  pointer-events: unset;
 }

From a4a64d564163b0183e0c0a139df0329e8bfaf6b4 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 12:48:13 +0200
Subject: [PATCH 08/56] Add utils.formatString function to interpret variables
 in strings

This will be used for `defaultContainer.name` and other preferences.
It will give users to use variables we provide them
---
 src/__tests__/utils.spec.js | 34 ++++++++++++++++++++++++++++++++++
 src/utils.js                | 20 ++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/__tests__/utils.spec.js

diff --git a/src/__tests__/utils.spec.js b/src/__tests__/utils.spec.js
new file mode 100644
index 0000000..f5c16b5
--- /dev/null
+++ b/src/__tests__/utils.spec.js
@@ -0,0 +1,34 @@
+describe('utils', () => {
+
+  const utils = require('../utils');
+
+  describe('formatString', () => {
+    it('should replace alphanumeric variables', function () {
+      const name = 'Farouq';
+      const lastName = 'Nadeeb';
+      expect(utils.formatString('{name} {lastName}', {
+        name, lastName,
+      })).toEqual(`${name} ${lastName}`);
+    });
+
+    it('should replace kebab-case variables', function () {
+      const name = 'Farouq';
+      const lastName = 'Nadeeb';
+      expect(utils.formatString('{name} {last-name}', {
+        name, ['last-name']: lastName,
+      })).toEqual(`${name} ${lastName}`);
+    });
+
+    it('should throw on non-existent variables', function () {
+      const name = 'Farouq';
+      const lastName = 'Nadeeb';
+      expect(() => {
+        utils.formatString('{name} {lastName} - born {dob}', {
+          name, lastName,
+        });
+      }).toThrow('Cannot find variable \'dob\' in context');
+    });
+
+  });
+
+});
diff --git a/src/utils.js b/src/utils.js
index 1c38db7..2a27bab 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -86,3 +86,23 @@ export const matchesSavedMap = (url, map) => {
 
     }
 };
+
+/**
+ * Replaces occurrences of {variable} in strings
+ *
+ * It handles camelCase, kebab-case and snake_case variable names
+ *
+ * @param string {String}
+ * @param context {Object}
+ * @throws Error when the variable doesn't exist in the context
+ * @return {String}
+ */
+export function formatString(string, context){
+  return string.replace(/(\{([\w_-]+)\})/g, (match, _, token) => {
+    const replacement = context[token];
+    if(replacement=== undefined){
+      throw `Cannot find variable '${token}' in context`;
+    }
+    return replacement;
+  });
+}

From f821186fe2347382775f69b826a32e28e057f7ec Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 12:51:07 +0200
Subject: [PATCH 09/56] greentest utils::should replace alphanumeric variables

Simple strings without any variables shouldn't attempt replacement
---
 src/__tests__/utils.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/__tests__/utils.spec.js b/src/__tests__/utils.spec.js
index f5c16b5..76d6eee 100644
--- a/src/__tests__/utils.spec.js
+++ b/src/__tests__/utils.spec.js
@@ -3,6 +3,12 @@ describe('utils', () => {
   const utils = require('../utils');
 
   describe('formatString', () => {
+    it('should return same string without variables', function () {
+      const string = 'Farouq Nadeeb';
+      expect(utils.formatString(string, {}))
+          .toEqual(string);
+    });
+
     it('should replace alphanumeric variables', function () {
       const name = 'Farouq';
       const lastName = 'Nadeeb';

From 5fef84030b7962b8d1fce4cd4da0e4a7c1e114b9 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 14:02:07 +0200
Subject: [PATCH 10/56] First functional default container implementation

 - ContextualIdentities::create added to create containers in a more
   standard manner
 - handle is now directly an async method to use `await buildDefaultContainer`
   without too much indentation
---
 src/ContextualIdentity/index.js             | 18 +++++++
 src/ExtendedURL/__tests__/ExtendURL.spec.js | 12 +++++
 src/ExtendedURL/index.js                    | 12 +++++
 src/Storage/PreferenceStorage.js            |  1 +
 src/__tests__/utils.spec.js                 | 26 ++++++++++
 src/containers.js                           | 55 +++++++++++++--------
 src/defaultContainer.js                     | 40 +++++++++++++++
 src/ui/CSVEditor.js                         | 17 +++----
 src/utils.js                                | 16 ++++--
 9 files changed, 163 insertions(+), 34 deletions(-)
 create mode 100644 src/ExtendedURL/__tests__/ExtendURL.spec.js
 create mode 100644 src/ExtendedURL/index.js
 create mode 100644 src/defaultContainer.js

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index f8214b9..4c4d0f7 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -6,6 +6,16 @@ export const NO_CONTAINER = {
   colorCode: '#999',
   cookieStoreId: 'no-container',
 };
+export const COLORS = [
+  'blue',
+  'green',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'turquoise',
+  'yellow',
+];
 
 class ContextualIdentities {
 
@@ -13,6 +23,14 @@ class ContextualIdentities {
     this.contextualIdentities = browser.contextualIdentities;
   }
 
+  create(name) {
+    return this.contextualIdentities.create({
+      name: name,
+      color: COLORS[Math.floor(Math.random() * COLORS.length)],
+      icon: 'circle',
+    });
+  }
+
   getAll(details = {}) {
     return this.contextualIdentities.query(details).then((identities) => [...identities, NO_CONTAINER]);
   }
diff --git a/src/ExtendedURL/__tests__/ExtendURL.spec.js b/src/ExtendedURL/__tests__/ExtendURL.spec.js
new file mode 100644
index 0000000..044bfc9
--- /dev/null
+++ b/src/ExtendedURL/__tests__/ExtendURL.spec.js
@@ -0,0 +1,12 @@
+describe('utils', () => {
+
+  const ExtendedURL = require('../index').default;
+
+  it('should have domain', function () {
+    const eUrl = new ExtendedURL('https://gist.github.com');
+    expect(eUrl.domain).toEqual('github');
+    expect(eUrl.tld).toEqual('com');
+  });
+
+
+});
diff --git a/src/ExtendedURL/index.js b/src/ExtendedURL/index.js
new file mode 100644
index 0000000..fab9f84
--- /dev/null
+++ b/src/ExtendedURL/index.js
@@ -0,0 +1,12 @@
+export default class ExtendedURL extends URL {
+  constructor(url) {
+    super(url);
+    const split = this.hostname.split('.');
+    this.tld = split[split.length - 1];
+    if (split.length > 1) {
+      this.domain = split[split.length - 2];
+    } else {
+      this.domain = this.tld;
+    }
+  }
+}
diff --git a/src/Storage/PreferenceStorage.js b/src/Storage/PreferenceStorage.js
index 0dead33..fa53707 100644
--- a/src/Storage/PreferenceStorage.js
+++ b/src/Storage/PreferenceStorage.js
@@ -6,6 +6,7 @@ class PreferenceStorage extends PrefixStorage {
     this.PREFIX = 'pref=';
   }
 
+  // TODO: Add `valuesOnly` param to getAll and get methods
 }
 
 export default new PreferenceStorage();
diff --git a/src/__tests__/utils.spec.js b/src/__tests__/utils.spec.js
index 76d6eee..cd10d81 100644
--- a/src/__tests__/utils.spec.js
+++ b/src/__tests__/utils.spec.js
@@ -37,4 +37,30 @@ describe('utils', () => {
 
   });
 
+  describe('filterByKey', () => {
+    it('should create object with keys that don\'t start with a string', function () {
+      expect(utils.filterByKey({
+        removeThis: 'lol',
+        removeThat: 'rofl',
+        removeAnother: 'do eet!',
+        keepMe: 'kept',
+        keepThem: 'kept',
+      }, (key) => !key.startsWith('remove')))
+          .toEqual({
+            keepMe: 'kept',
+            keepThem: 'kept',
+          });
+    });
+
+    it('should fail without a filter function', function () {
+      expect(() => {
+        utils.filterByKey({
+          a: true,
+          b: true,
+        });
+      }).toThrow('undefined is not a function');
+    });
+
+  });
+
 });
diff --git a/src/containers.js b/src/containers.js
index 0c33667..60b0d8e 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -2,6 +2,8 @@ import Storage from './Storage/HostStorage';
 import ContextualIdentity, {NO_CONTAINER} from './ContextualIdentity';
 import Tabs from './Tabs';
 import PreferenceStorage from './Storage/PreferenceStorage';
+import {filterByKey} from './utils';
+import {buildDefaultContainer} from './defaultContainer';
 
 const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) => {
   Tabs.get(currentTabId).then((currentTab) => {
@@ -13,7 +15,7 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
       openerTabId: openerTabId,
     });
     PreferenceStorage.get('keepOldTabs').then(({value}) => {
-      if(!value){
+      if (!value) {
         Tabs.remove(currentTabId);
       }
     }).catch(() => {
@@ -27,35 +29,48 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
   };
 };
 
-function handle(url, tabId) {
-  return Promise.all([
+
+async function handle(url, tabId) {
+  let [hostMap, preferences, identities, currentTab] = await Promise.all([
     Storage.get(url),
+    PreferenceStorage.getAll(),
     ContextualIdentity.getAll(),
     Tabs.get(tabId),
-  ]).then(([hostMap, identities, currentTab]) => {
+  ]);
 
-    if (currentTab.incognito || !hostMap) {
-      return {};
-    }
+  if (currentTab.incognito || !hostMap || url.startsWith('about:')) {
+    return {};
+  }
 
-    const hostIdentity = identities.find((identity) => identity.cookieStoreId === hostMap.cookieStoreId);
-    const tabIdentity = identities.find((identity) => identity.cookieStoreId === currentTab.cookieStoreId);
+  const hostIdentity = identities.find((identity) => identity.cookieStoreId === hostMap.cookieStoreId);
+  const tabIdentity = identities.find((identity) => identity.cookieStoreId === currentTab.cookieStoreId);
 
-    if (!hostIdentity) {
-      return {};
+  if (!hostIdentity) {
+    if (preferences.defaultContainer.value) {
+      const defaultCookieStoreId = await buildDefaultContainer(
+          filterByKey(preferences, prefKey => prefKey.startsWith('defaultContainer')),
+          url
+      );
+      if (currentTab.cookieStoreId !== defaultCookieStoreId) {
+        return createTab(url, currentTab.index + 1, currentTab.id, defaultCookieStoreId);
+      }
     }
+    return {};
 
-    const openerTabId = currentTab.openerTabId;
-    if (hostIdentity.cookieStoreId === NO_CONTAINER.cookieStoreId && tabIdentity) {
-      return createTab(url, currentTab.index + 1, currentTab.id, undefined , openerTabId);
-    }
+  }
 
-    if (hostIdentity.cookieStoreId !== currentTab.cookieStoreId && hostIdentity.cookieStoreId !== NO_CONTAINER.cookieStoreId) {
-      return createTab(url, currentTab.index + 1, currentTab.id, hostIdentity.cookieStoreId, openerTabId);
-    }
+  const openerTabId = currentTab.openerTabId;
+  if (hostIdentity.cookieStoreId === NO_CONTAINER.cookieStoreId && tabIdentity) {
+    return createTab(url, currentTab.index + 1, currentTab.id, undefined, openerTabId);
+  }
+
+  if (hostIdentity.cookieStoreId !== currentTab.cookieStoreId && hostIdentity.cookieStoreId !== NO_CONTAINER.cookieStoreId) {
+    return createTab(url, currentTab.index + 1, currentTab.id, hostIdentity.cookieStoreId, openerTabId);
+  }
+
+
+  return {};
 
-    return {};
-  });
 }
 
 export const webRequestListener = (requestDetails) => {
diff --git a/src/defaultContainer.js b/src/defaultContainer.js
new file mode 100644
index 0000000..ae484df
--- /dev/null
+++ b/src/defaultContainer.js
@@ -0,0 +1,40 @@
+import {formatString} from './utils';
+import HostStorage from './Storage/HostStorage';
+import ContextualIdentities from './ContextualIdentity';
+import ExtendedURL from './ExtendedURL';
+
+export async function buildDefaultContainer(preferences, url) {
+  url = new ExtendedURL(url);
+  let name = preferences['defaultContainer.containerName'].value;
+  name = formatString(name, {
+    ms: Date.now(),
+    domain: url.domain,
+    fqdn: url.host,
+    host: url.host,
+    tld: url.tld,
+  });
+
+  // Get cookieStoreId
+  const containers = await ContextualIdentities.get(name);
+  let cookieStoreId;
+  if (containers.length > 0) {
+    cookieStoreId = containers[0].cookieStoreId;
+  } else {
+    // Create a default container
+    const container = await ContextualIdentities.create(name);
+    cookieStoreId = container.cookieStoreId;
+  }
+
+  // Add a rule if necessary
+  const ruleAddition = preferences['defaultContainer.ruleAddition'].value;
+  if (ruleAddition) {
+    await HostStorage.set({
+      host: formatString(ruleAddition, {}),
+      cookieStoreId,
+      containerName: name,
+      enabled: true,
+    });
+  }
+
+  return cookieStoreId;
+}
diff --git a/src/ui/CSVEditor.js b/src/ui/CSVEditor.js
index 51e7004..45efc57 100644
--- a/src/ui/CSVEditor.js
+++ b/src/ui/CSVEditor.js
@@ -1,12 +1,11 @@
+import ContextualIdentities from '../ContextualIdentity';
 import State from '../State';
 import Storage from '../Storage/HostStorage';
-import {qs} from '../utils';
-import {showLoader, hideLoader} from './loader';
-import {showToast, hideToast} from './toast';
-import {cleanHostInput} from '../utils';
+import {cleanHostInput, qs} from '../utils';
+import {hideLoader, showLoader} from './loader';
+import {hideToast, showToast} from './toast';
 
 const HOST_MAPS_SPLIT_KEY = ',';
-const COLORS = ['blue', 'turquoise', 'green', 'yellow', 'orange', 'red', 'pink', 'purple'];
 const csvEditor = qs('.csv-editor');
 const openButton = qs('.ce-open-button');
 const closeButton = qs('.ce-close-button');
@@ -32,7 +31,7 @@ class CSVEditor {
   render() {
     showLoader();
 
-    if(!this.state.urlMaps || !this.state.identities) {
+    if (!this.state.urlMaps || !this.state.identities) {
       return false;
     }
 
@@ -57,11 +56,7 @@ class CSVEditor {
 
   async createMissingContainers(missingContainers, maps) {
     for (const containerName of missingContainers.keys()) {
-      const identity = await browser.contextualIdentities.create({
-        name: containerName,
-        color: COLORS[Math.floor(Math.random() * COLORS.length)],
-        icon: 'circle',
-      });
+      const identity = await ContextualIdentities.create(containerName);
       for (const host of missingContainers.get(containerName)) {
         this.addIdentity(identity, host, maps);
       }
diff --git a/src/utils.js b/src/utils.js
index 2a27bab..fe99842 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -27,13 +27,13 @@ export const sortMaps = (maps) => maps.sort((map1, map2) => {
 export const domainMatch = (url, map) => {
   const url_host = getDomain(url);
   const map_host = getDomain(map);
-  if (map_host.slice(0,2) !== '*.') return url_host === map_host;
+  if (map_host.slice(0, 2) !== '*.') return url_host === map_host;
   // Check wildcard matches in reverse order (com.example.*)
   const wild_url = url_host.split('.').reverse();
   const wild_map = map_host.slice(2).split('.').reverse();
   if (wild_url.length < wild_map.length) return false;
 
-  for (let i = 0; i < wild_map.length ; ++i)
+  for (let i = 0; i < wild_map.length; ++i)
     if (wild_url[i] !== wild_map[i]) return false;
   return true;
 };
@@ -47,7 +47,7 @@ export const pathMatch = (url, map) => {
   const wild_map = map_path.replace('/*', '').split('/');
   if (wild_url.length < wild_map.length) return false;
 
-  for (let i = 0; i < wild_map.length ; ++i)
+  for (let i = 0; i < wild_map.length; ++i)
     if (wild_url[i] !== wild_map[i]) return false;
   return true;
 };
@@ -87,6 +87,16 @@ export const matchesSavedMap = (url, map) => {
     }
 };
 
+
+export const filterByKey = (dict, func) => {
+  return Object.keys(dict)
+      .filter(func)
+      .reduce((acc, curr) => {
+        acc[curr] = dict[curr];
+        return acc;
+      }, {});
+};
+
 /**
  * Replaces occurrences of {variable} in strings
  *

From 045c54025a822e7c78cc17efa7169f2ca599f2bf Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 14:14:16 +0200
Subject: [PATCH 11/56] Add `valueOnly` and `valuesOnly` to PreferenceStorage
 get methods

That makes accessing values of return preferences easier.
Before we would get the object stored in the DB which has {key, value}.
---
 src/Storage/PreferenceStorage.js | 18 +++++++++++++++++-
 src/containers.js                |  4 ++--
 src/defaultContainer.js          |  4 ++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Storage/PreferenceStorage.js b/src/Storage/PreferenceStorage.js
index fa53707..53ac273 100644
--- a/src/Storage/PreferenceStorage.js
+++ b/src/Storage/PreferenceStorage.js
@@ -6,7 +6,23 @@ class PreferenceStorage extends PrefixStorage {
     this.PREFIX = 'pref=';
   }
 
-  // TODO: Add `valuesOnly` param to getAll and get methods
+  async getAll(valuesOnly = false) {
+    let preferences = await super.getAll();
+    if (valuesOnly) {
+      for (let preferenceKey in preferences) {
+        preferences[preferenceKey] = preferences[preferenceKey].value
+      }
+    }
+    return preferences;
+  }
+
+  async get(key, valueOnly = false) {
+    let preference = await super.get(key);
+    if (valueOnly) {
+      preference = preference.value;
+    }
+    return preference;
+  }
 }
 
 export default new PreferenceStorage();
diff --git a/src/containers.js b/src/containers.js
index 60b0d8e..60e9887 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -33,7 +33,7 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
 async function handle(url, tabId) {
   let [hostMap, preferences, identities, currentTab] = await Promise.all([
     Storage.get(url),
-    PreferenceStorage.getAll(),
+    PreferenceStorage.getAll(true),
     ContextualIdentity.getAll(),
     Tabs.get(tabId),
   ]);
@@ -46,7 +46,7 @@ async function handle(url, tabId) {
   const tabIdentity = identities.find((identity) => identity.cookieStoreId === currentTab.cookieStoreId);
 
   if (!hostIdentity) {
-    if (preferences.defaultContainer.value) {
+    if (preferences.defaultContainer) {
       const defaultCookieStoreId = await buildDefaultContainer(
           filterByKey(preferences, prefKey => prefKey.startsWith('defaultContainer')),
           url
diff --git a/src/defaultContainer.js b/src/defaultContainer.js
index ae484df..93fe6b6 100644
--- a/src/defaultContainer.js
+++ b/src/defaultContainer.js
@@ -5,7 +5,7 @@ import ExtendedURL from './ExtendedURL';
 
 export async function buildDefaultContainer(preferences, url) {
   url = new ExtendedURL(url);
-  let name = preferences['defaultContainer.containerName'].value;
+  let name = preferences['defaultContainer.containerName'];
   name = formatString(name, {
     ms: Date.now(),
     domain: url.domain,
@@ -26,7 +26,7 @@ export async function buildDefaultContainer(preferences, url) {
   }
 
   // Add a rule if necessary
-  const ruleAddition = preferences['defaultContainer.ruleAddition'].value;
+  const ruleAddition = preferences['defaultContainer.ruleAddition'];
   if (ruleAddition) {
     await HostStorage.set({
       host: formatString(ruleAddition, {}),

From d0a04d43aa7e8dce6f9179651428bd49b46bd828 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 14:44:47 +0200
Subject: [PATCH 12/56] Fix lint issue

---
 src/Storage/PreferenceStorage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Storage/PreferenceStorage.js b/src/Storage/PreferenceStorage.js
index 53ac273..3f2fd39 100644
--- a/src/Storage/PreferenceStorage.js
+++ b/src/Storage/PreferenceStorage.js
@@ -10,7 +10,7 @@ class PreferenceStorage extends PrefixStorage {
     let preferences = await super.getAll();
     if (valuesOnly) {
       for (let preferenceKey in preferences) {
-        preferences[preferenceKey] = preferences[preferenceKey].value
+        preferences[preferenceKey] = preferences[preferenceKey].value;
       }
     }
     return preferences;

From e16f8b0fcbef83bbd8ae0d108b75c52a888e105e Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 20:09:26 +0200
Subject: [PATCH 13/56] Check URL rules before requesting anything from the
 storage

---
 src/containers.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/containers.js b/src/containers.js
index 60e9887..1a87f44 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -31,6 +31,9 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
 
 
 async function handle(url, tabId) {
+  if (url.startsWith('about:')){
+    return {};
+  }
   let [hostMap, preferences, identities, currentTab] = await Promise.all([
     Storage.get(url),
     PreferenceStorage.getAll(true),
@@ -38,7 +41,7 @@ async function handle(url, tabId) {
     Tabs.get(tabId),
   ]);
 
-  if (currentTab.incognito || !hostMap || url.startsWith('about:')) {
+  if (currentTab.incognito || !hostMap){
     return {};
   }
 

From 5dfeae894b218b7e5697bb5f52962d34e090ede7 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 20:11:10 +0200
Subject: [PATCH 14/56] Catch errors and don't fail when handling urls

A simple bad regex or bad rule can halt the whole url handling
---
 src/defaultContainer.js | 22 ++++++++++++++++------
 src/utils.js            | 37 +++++++++++++++++++++----------------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/defaultContainer.js b/src/defaultContainer.js
index 93fe6b6..54ed1c0 100644
--- a/src/defaultContainer.js
+++ b/src/defaultContainer.js
@@ -28,12 +28,22 @@ export async function buildDefaultContainer(preferences, url) {
   // Add a rule if necessary
   const ruleAddition = preferences['defaultContainer.ruleAddition'];
   if (ruleAddition) {
-    await HostStorage.set({
-      host: formatString(ruleAddition, {}),
-      cookieStoreId,
-      containerName: name,
-      enabled: true,
-    });
+    try {
+      const host = formatString(ruleAddition, {
+        domain: url.domain,
+        fqdn: url.host,
+        host: url.host,
+        tld: url.tld,
+      });
+      await HostStorage.set({
+        host: host,
+        cookieStoreId,
+        containerName: name,
+        enabled: true,
+      });
+    } catch (e) {
+      console.error('Couldn\'t add rule', ruleAddition, e);
+    }
   }
 
   return cookieStoreId;
diff --git a/src/utils.js b/src/utils.js
index fe99842..42711e2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -70,21 +70,26 @@ export const urlKeyFromUrl = (url) => {
  * @return {*}
  */
 export const matchesSavedMap = (url, map) => {
-    const savedHost = map.host;
-    if (savedHost[0] === PREFIX_REGEX) {
-        return new RegExp(savedHost.substr(1)).test(url);
-    } else if (savedHost[0] === PREFIX_GLOB) {
-        // turning glob into regex isn't the worst thing:
-        // 1. * becomes .*
-        // 2. ? becomes .?
-        return new RegExp(savedHost.substr(1).replace(/\*/g, '.*').replace(/\?/g, '.?')).test(url);
-    } else {
-        const key = urlKeyFromUrl(url);
-        const _url = ((key.indexOf('/') === -1) ? key.concat('/') : key).toLowerCase();
-        const mapHost = ((map.host.indexOf('/') === -1) ? map.host.concat('/') : map.host).toLowerCase();
-        return domainMatch(_url, mapHost) && pathMatch(_url, mapHost);
-
+  const savedHost = map.host;
+  if (savedHost[0] === PREFIX_REGEX) {
+    const regex = savedHost.substr(1);
+    try {
+      return new RegExp(regex).test(url);
+    } catch (e) {
+      console.error('couldn\'t test regex', regex, e);
     }
+  } else if (savedHost[0] === PREFIX_GLOB) {
+    // turning glob into regex isn't the worst thing:
+    // 1. * becomes .*
+    // 2. ? becomes .?
+    return new RegExp(savedHost.substr(1).replace(/\*/g, '.*').replace(/\?/g, '.?')).test(url);
+  } else {
+    const key = urlKeyFromUrl(url);
+    const _url = ((key.indexOf('/') === -1) ? key.concat('/') : key).toLowerCase();
+    const mapHost = ((map.host.indexOf('/') === -1) ? map.host.concat('/') : map.host).toLowerCase();
+    return domainMatch(_url, mapHost) && pathMatch(_url, mapHost);
+
+  }
 };
 
 
@@ -107,10 +112,10 @@ export const filterByKey = (dict, func) => {
  * @throws Error when the variable doesn't exist in the context
  * @return {String}
  */
-export function formatString(string, context){
+export function formatString(string, context) {
   return string.replace(/(\{([\w_-]+)\})/g, (match, _, token) => {
     const replacement = context[token];
-    if(replacement=== undefined){
+    if (replacement === undefined) {
       throw `Cannot find variable '${token}' in context`;
     }
     return replacement;

From 8a0831f96175d0eb9585d354fd4896480607b723 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 20:23:42 +0200
Subject: [PATCH 15/56] Add info log for URLs that open in default container

---
 src/containers.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/containers.js b/src/containers.js
index 1a87f44..2f32dbe 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -55,6 +55,7 @@ async function handle(url, tabId) {
           url
       );
       if (currentTab.cookieStoreId !== defaultCookieStoreId) {
+        console.info('Opening', url, 'in default container');
         return createTab(url, currentTab.index + 1, currentTab.id, defaultCookieStoreId);
       }
     }

From 23a65e0d3184872feb2873ba502c0a7ba7846cae Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 9 Sep 2019 21:58:14 +0200
Subject: [PATCH 16/56] Move towards Preferences that know how to fill
 themselves

This is to separate code and make index.js smaller and more readable
---
 src/ui-preferences/BooleanPreference.js       |  6 +++
 src/ui-preferences/Preference.js              | 28 ++++++++---
 src/ui-preferences/PreferenceGroup.js         | 28 +++++++----
 src/ui-preferences/StringPreference.html      |  1 -
 src/ui-preferences/StringPreference.js        |  6 +--
 src/ui-preferences/index.html                 | 15 ------
 src/ui-preferences/index.js                   | 47 ++-----------------
 src/ui-preferences/templates/Preference.html  |  8 ++++
 .../{ => templates}/PreferenceGroup.html      |  0
 src/ui-preferences/utils.js                   |  6 ++-
 10 files changed, 67 insertions(+), 78 deletions(-)
 delete mode 100644 src/ui-preferences/StringPreference.html
 create mode 100644 src/ui-preferences/templates/Preference.html
 rename src/ui-preferences/{ => templates}/PreferenceGroup.html (100%)

diff --git a/src/ui-preferences/BooleanPreference.js b/src/ui-preferences/BooleanPreference.js
index fb29e9f..5ac7b45 100644
--- a/src/ui-preferences/BooleanPreference.js
+++ b/src/ui-preferences/BooleanPreference.js
@@ -2,6 +2,12 @@ import Preference from './Preference';
 
 export default class BooleanPreference extends Preference {
 
+  _buildEl() {
+    let el = super._buildEl();
+    el.type = 'checkbox';
+    return el;
+  }
+
   get() {
     return this.el.checked;
   }
diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index e2d6c49..420d71d 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -1,4 +1,6 @@
 import PreferenceStorage from '../Storage/PreferenceStorage';
+import preferenceContainerTemplate from '!!raw-loader!./templates/Preference.html';
+import {createEl, qs} from './utils';
 
 export default class Preference {
 
@@ -7,14 +9,27 @@ export default class Preference {
     this.name = name;
     this.label = label;
     this.description = description;
+    this.$container = this._buildContainerEl();
     this.el = this._buildEl();
   }
 
+  _buildContainerEl() {
+    return createEl(preferenceContainerTemplate);
+  }
+
   _buildEl() {
-    const template = document.querySelector(`template#${this.constructor.TEMPLATE_PREFIX}${this.constructor.TYPE}`);
-    return template.content
-        .cloneNode(true)
-        .querySelector(this.constructor.EL_QS);
+    let el = document.createElement('input');
+    el.classList.add(Preference.EL_CLASS);
+    return el;
+  }
+
+  fillContainer() {
+    qs('.pref-container__label', this.$container).innerHTML = this.label;
+    qs('.pref-container__description', this.$container).innerHTML = this.description;
+
+    // Append the el
+    const elContainer = qs('.pref-el-container', this.$container);
+    elContainer.appendChild(this.el);
   }
 
 
@@ -39,7 +54,7 @@ export default class Preference {
    */
   async updateFromDb() {
     const retrieved = await this.retrieve();
-    if(retrieved){
+    if (retrieved) {
       this.set(retrieved);
     }
   }
@@ -67,6 +82,5 @@ export default class Preference {
 
 }
 
-Preference.TEMPLATE_PREFIX = 'preference-t-';
-Preference.EL_QS = '.pref-t-el';
+Preference.EL_CLASS = 'pref-container__el';
 Preference.TYPE = null; // Has to be set by subclass
diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index f3af1a3..9ec6647 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -2,8 +2,8 @@
  * Groups preferences together and displays them in a manner to reflect that fact.
  */
 import Preference from './Preference';
-import {createEl} from './utils';
-import template from '!!raw-loader!./PreferenceGroup.html';
+import {createEl, qs} from './utils';
+import template from '!!raw-loader!./templates/PreferenceGroup.html';
 
 export default class PreferenceGroup extends Preference {
 
@@ -28,23 +28,35 @@ export default class PreferenceGroup extends Preference {
     this._toggleable = toggleable;
   }
 
-  _buildEl() {
+  _buildContainerEl() {
     return createEl(template);
   }
 
+  _buildEl() {
+    return this.$container.querySelector(`.${Preference.EL_CLASS}`);
+  }
+
+  fillContainer() {
+    qs('.pref-group__label', this.$container).innerHTML = this.label;
+    qs('.pref-group__description', this.$container).innerHTML = this.description;
+
+    const $preferences = this.$container.querySelector('.preferences');
+    for (let preference of this._preferences) {
+      preference.fillContainer();
+      $preferences.appendChild(preference.$container);
+    }
+  }
+
   get() {
     return this._toggleable ?
-        this._getToggleEl().checked
+        this.el.checked
         : false;
   }
 
-  _getToggleEl() {
-    return this.el.querySelector('.pref-group__toggle');
-  }
 
   set({value}) {
     if (this._toggleable) {
-      this._getToggleEl().checked = value;
+      this.el.checked = value;
     }
   }
 
diff --git a/src/ui-preferences/StringPreference.html b/src/ui-preferences/StringPreference.html
deleted file mode 100644
index 4856de5..0000000
--- a/src/ui-preferences/StringPreference.html
+++ /dev/null
@@ -1 +0,0 @@
-<input type="text">
diff --git a/src/ui-preferences/StringPreference.js b/src/ui-preferences/StringPreference.js
index f568488..fabb029 100644
--- a/src/ui-preferences/StringPreference.js
+++ b/src/ui-preferences/StringPreference.js
@@ -1,6 +1,4 @@
 import Preference from './Preference';
-import template from '!!raw-loader!./StringPreference.html';
-import {createEl} from './utils';
 
 export default class StringPreference extends Preference {
 
@@ -10,7 +8,9 @@ export default class StringPreference extends Preference {
   }
 
   _buildEl() {
-    return createEl(template);
+    let el = super._buildEl();
+    el.type = 'text';
+    return el;
   }
 
   get() {
diff --git a/src/ui-preferences/index.html b/src/ui-preferences/index.html
index 0d707dd..62547a1 100644
--- a/src/ui-preferences/index.html
+++ b/src/ui-preferences/index.html
@@ -14,21 +14,6 @@
 
 <button id="save-button">Save</button>
 
-<template id="preference-template">
-    <div class="pref-container">
-        <div class="pref-container__label"></div>
-        <div class="pref-container__description"></div>
-
-        <div class="pref-type-container">
-            <!-- Put the preference-type in here -->
-        </div>
-
-    </div>
-</template>
-
-<template id="preference-t-bool">
-    <input class="pref-t-el" type="checkbox">
-</template>
 
 </body>
 </html>
diff --git a/src/ui-preferences/index.js b/src/ui-preferences/index.js
index ea4aa6a..c57e7dd 100644
--- a/src/ui-preferences/index.js
+++ b/src/ui-preferences/index.js
@@ -5,11 +5,7 @@ import BooleanPreference from './BooleanPreference';
 import ChoicePreference from './ChoicePreference';
 import PreferenceGroup from './PreferenceGroup';
 import StringPreference from './StringPreference';
-
-function qs(selector, el = document) {
-  return el.querySelector(selector);
-}
-
+import {qs} from './utils';
 
 // TODO make this a class function
 function buildPreference(prefConf) {
@@ -37,49 +33,14 @@ function buildPreference(prefConf) {
 let preferences = preferencesJson.map(buildPreference);
 
 const preferencesContainer = qs('.preferences-container');
-const preferenceTemplate = qs('template#preference-template').content;
-
-// TODO: Put this in to the class
-function showPreference(preference, container) {
-  const prefContainer = preferenceTemplate.cloneNode(true);
-
-  // Set some attributes
-  qs('.pref-container__label', prefContainer).innerHTML = preference.label;
-  qs('.pref-container__description', prefContainer).innerHTML = preference.description;
-
-  // Append the el
-  const prefTypeContainer = qs('.pref-type-container', prefContainer);
-  prefTypeContainer.appendChild(preference.el);
-
-
-  container.appendChild(prefContainer);
 
+for (const preference of preferences) {
+  preference.fillContainer();
+  preferencesContainer.appendChild(preference.$container);
   // noinspection JSIgnoredPromiseFromCall
   preference.updateFromDb();
 }
 
-function showPreferenceGroup(group) {
-  const $el = group.el;
-  qs('.pref-group__label', $el).innerHTML = group.label;
-  qs('.pref-group__description', $el).innerHTML = group.description;
-
-
-  for (let preference of group._preferences) {
-    showPreference(preference, $el.querySelector('.preferences'));
-  }
-  preferencesContainer.appendChild($el);
-  // noinspection JSIgnoredPromiseFromCall
-  group.updateFromDb();
-}
-
-for (const preference of preferences) {
-  if (preference.constructor.TYPE === 'group') {
-    showPreferenceGroup(preference);
-  } else {
-    showPreference(preference, preferencesContainer);
-  }
-}
-
 const $saveButton = qs('#save-button');
 $saveButton.addEventListener('click', async () => {
   await Promise.all(preferences.map(preference => preference.update()));
diff --git a/src/ui-preferences/templates/Preference.html b/src/ui-preferences/templates/Preference.html
new file mode 100644
index 0000000..285e1d3
--- /dev/null
+++ b/src/ui-preferences/templates/Preference.html
@@ -0,0 +1,8 @@
+<div class="pref-container">
+    <div class="pref-container__label"></div>
+    <div class="pref-container__description"></div>
+
+    <div class="pref-el-container">
+        <!-- Put the pref-container__el in here -->
+    </div>
+</div>
diff --git a/src/ui-preferences/PreferenceGroup.html b/src/ui-preferences/templates/PreferenceGroup.html
similarity index 100%
rename from src/ui-preferences/PreferenceGroup.html
rename to src/ui-preferences/templates/PreferenceGroup.html
diff --git a/src/ui-preferences/utils.js b/src/ui-preferences/utils.js
index 947680d..7b430a7 100644
--- a/src/ui-preferences/utils.js
+++ b/src/ui-preferences/utils.js
@@ -1,5 +1,9 @@
 export function createEl(string){
   const $el = document.createElement('div');
   $el.innerHTML = string;
-  return $el.firstChild;
+  return $el.firstElementChild;
+}
+
+export function qs(selector, el = document) {
+  return el.querySelector(selector);
 }

From 16c47931a1cd01d694ee57bb3fea6b638970e0e8 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:07:25 +0200
Subject: [PATCH 17/56] Add preferences for containers

This is preparation for their lifetime preference
---
 src/ui-preferences/ContainerPreference.js     | 33 +++++++++++++++++++
 .../ContainerPreferenceGroup.js               | 32 ++++++++++++++++++
 src/ui-preferences/Preference.js              |  4 +--
 src/ui-preferences/PreferenceGroup.js         |  8 ++---
 src/ui-preferences/index.js                   | 14 ++++----
 src/ui-preferences/preferences.json           |  6 ++++
 6 files changed, 85 insertions(+), 12 deletions(-)
 create mode 100644 src/ui-preferences/ContainerPreference.js
 create mode 100644 src/ui-preferences/ContainerPreferenceGroup.js

diff --git a/src/ui-preferences/ContainerPreference.js b/src/ui-preferences/ContainerPreference.js
new file mode 100644
index 0000000..d2d73b6
--- /dev/null
+++ b/src/ui-preferences/ContainerPreference.js
@@ -0,0 +1,33 @@
+import PreferenceGroup from './PreferenceGroup';
+import ChoicePreference from './ChoicePreference';
+
+/**
+ * Preferences for containers
+ */
+export default class ContainerPreference extends PreferenceGroup {
+
+  constructor({name, label, description}) {
+    super({name, label, description, preferences: [], toggleable: false});
+    this._preferences.push(new ChoicePreference({
+      name: `${name}.lifetime`,
+      label: 'Lifetime',
+      description: 'How long this container will live',
+      choices: [
+        {
+          'name': 'forever',
+          'label': 'Forever',
+          'description': 'Container will always be present after creation',
+        },
+        {
+          'name': 'untilLastTab',
+          'label': 'Until last tab is closed',
+          'description': 'Closing the last tab in the container will destroy the container',
+        },
+      ],
+      defaultChoice: 'forever',
+    }));
+  }
+
+}
+
+ContainerPreference.TYPE = 'container';
diff --git a/src/ui-preferences/ContainerPreferenceGroup.js b/src/ui-preferences/ContainerPreferenceGroup.js
new file mode 100644
index 0000000..9fdb6ec
--- /dev/null
+++ b/src/ui-preferences/ContainerPreferenceGroup.js
@@ -0,0 +1,32 @@
+import ContextualIdentities from '../ContextualIdentity';
+import PreferenceGroup from './PreferenceGroup';
+import ContainerPreference from './ContainerPreference';
+
+/**
+ * Contains a @see{ContainerPreference} for each existing container
+ */
+export default class ContainerPreferenceGroup extends PreferenceGroup {
+
+  constructor({name, label, description}) {
+    super({name, label, description, preferences: [], toggleable: false});
+  }
+
+  async fillContainer() {
+    // Get all existing containers and create ContainerPref
+    this._preferences = (await ContextualIdentities.get())
+        .map((container) => {
+          return new ContainerPreference({
+            name: container.cookieStoreId,
+            label: container.name,
+          });
+        });
+    return super.fillContainer();
+  }
+
+  async updateFromDb() {
+    return Promise.all(this._preferences.map((preference) => preference.updateFromDb()));
+  }
+
+}
+
+ContainerPreferenceGroup.TYPE = 'containers';
diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index 420d71d..58eafe1 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -5,7 +5,7 @@ import {createEl, qs} from './utils';
 export default class Preference {
 
   // TODO: Add the notion of a default value
-  constructor({name, label, description}) {
+  constructor({name, label, description=''}) {
     this.name = name;
     this.label = label;
     this.description = description;
@@ -23,7 +23,7 @@ export default class Preference {
     return el;
   }
 
-  fillContainer() {
+  async fillContainer() {
     qs('.pref-container__label', this.$container).innerHTML = this.label;
     qs('.pref-container__description', this.$container).innerHTML = this.description;
 
diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index 9ec6647..b6f6063 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -36,15 +36,15 @@ export default class PreferenceGroup extends Preference {
     return this.$container.querySelector(`.${Preference.EL_CLASS}`);
   }
 
-  fillContainer() {
+  async fillContainer() {
     qs('.pref-group__label', this.$container).innerHTML = this.label;
     qs('.pref-group__description', this.$container).innerHTML = this.description;
 
     const $preferences = this.$container.querySelector('.preferences');
-    for (let preference of this._preferences) {
-      preference.fillContainer();
+    return Promise.all(this._preferences.map((preference) => {
       $preferences.appendChild(preference.$container);
-    }
+      return preference.fillContainer();
+    }));
   }
 
   get() {
diff --git a/src/ui-preferences/index.js b/src/ui-preferences/index.js
index c57e7dd..c4e28f8 100644
--- a/src/ui-preferences/index.js
+++ b/src/ui-preferences/index.js
@@ -3,11 +3,11 @@ import './index.html';
 import preferencesJson from './preferences.json';
 import BooleanPreference from './BooleanPreference';
 import ChoicePreference from './ChoicePreference';
+import ContainerPreferenceGroup from './ContainerPreferenceGroup';
 import PreferenceGroup from './PreferenceGroup';
 import StringPreference from './StringPreference';
 import {qs} from './utils';
 
-// TODO make this a class function
 function buildPreference(prefConf) {
   switch (prefConf.type) {
     case BooleanPreference.TYPE:
@@ -23,8 +23,10 @@ function buildPreference(prefConf) {
       return new PreferenceGroup(prefConf);
     case StringPreference.TYPE:
       return new StringPreference(prefConf);
+    case ContainerPreferenceGroup.TYPE:
+      return new ContainerPreferenceGroup(prefConf);
     default:
-      console.warn('unknown preference type', prefConf);
+      throw new TypeError(`unknown preference type ${prefConf.type}`);
   }
 
 }
@@ -34,12 +36,12 @@ let preferences = preferencesJson.map(buildPreference);
 
 const preferencesContainer = qs('.preferences-container');
 
-for (const preference of preferences) {
-  preference.fillContainer();
+preferences.map(async (preference) => {
   preferencesContainer.appendChild(preference.$container);
+  await preference.fillContainer();
   // noinspection JSIgnoredPromiseFromCall
-  preference.updateFromDb();
-}
+  await preference.updateFromDb();
+});
 
 const $saveButton = qs('#save-button');
 $saveButton.addEventListener('click', async () => {
diff --git a/src/ui-preferences/preferences.json b/src/ui-preferences/preferences.json
index 0691005..97ea19c 100644
--- a/src/ui-preferences/preferences.json
+++ b/src/ui-preferences/preferences.json
@@ -44,5 +44,11 @@
         "description": "The rule to be added to this container once a domain is matched (can be empty)"
       }
     ]
+  },
+  {
+    "name": "containers",
+    "type": "containers",
+    "label": "Container preferences",
+    "description": "Preferences for each existing container"
   }
 ]

From 74e5152365f142c65a1f45a7607acbebc9ee868f Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:09:19 +0200
Subject: [PATCH 18/56] Improve CSS for groups and preferences

Hide toggle checkbox for PreferenceGroups if they aren't toggleable

Try and make groups visually distinct from preferences.
Still looks like ass, but hopefully somebody will improve that
---
 src/ui-preferences/PreferenceGroup.js |  3 +++
 src/ui-preferences/styles/index.scss  | 25 ++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index b6f6063..d00810e 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -26,6 +26,9 @@ export default class PreferenceGroup extends Preference {
     }
     this._preferences = preferences;
     this._toggleable = toggleable;
+    if(this._toggleable){
+      this.$container.classList.add('pref-group_toggable');
+    }
   }
 
   _buildContainerEl() {
diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index a60b8d1..4a43784 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -1,23 +1,42 @@
 .pref-container {
   border-width: 1px;
   border-radius: 3px;
-  border-style: ridge;
+  border-style: dashed;
   margin-bottom: 5px;
   margin-top: 5px;
+  padding-left: 2px;
+  padding-right: 2px;
 }
 
 .pref-container .pref-container__label {
   font-weight: bold;
 }
 
+.pref-group {
+  border-width: 1px;
+  border-radius: 3px;
+  border-style: ridge;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.pref-group__toggle {
+  display: none;
+}
+
+.pref-group_toggable .pref-group__toggle {
+  display: unset;
+}
 
 // Groups that aren't activated yet
-.pref-group__toggle ~ .preferences {
+.pref-group_toggable .pref-group__toggle ~ .preferences {
   opacity: 0.5;
   pointer-events: none;
 }
 // Activated groups
-.pref-group__toggle:checked ~ .preferences {
+.pref-group_toggable .pref-group__toggle:checked ~ .preferences {
   opacity: unset;
   pointer-events: unset;
 }

From 758a9cf6e69089066a9ed83856f10850e7bd581d Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:25:54 +0200
Subject: [PATCH 19/56] Try to add further visual distinction between groups
 and prefs

---
 src/ui-preferences/styles/index.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index 4a43784..fb66876 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -26,6 +26,11 @@
   display: none;
 }
 
+.pref-group__label {
+  font-weight: bolder;
+  font-size: large;
+}
+
 .pref-group_toggable .pref-group__toggle {
   display: unset;
 }

From bda2b81eefc6af129905558f12fd9be6db0f4eac Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:39:21 +0200
Subject: [PATCH 20/56] Fix bug when saving preference groups

---
 src/ui-preferences/PreferenceGroup.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index d00810e..b701622 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -36,7 +36,7 @@ export default class PreferenceGroup extends Preference {
   }
 
   _buildEl() {
-    return this.$container.querySelector(`.${Preference.EL_CLASS}`);
+    return this.$container.querySelector(`.${PreferenceGroup.EL_CLASS}`);
   }
 
   async fillContainer() {
@@ -77,3 +77,4 @@ export default class PreferenceGroup extends Preference {
 }
 
 PreferenceGroup.TYPE = 'group';
+PreferenceGroup.EL_CLASS = 'pref-group__toggle';

From 169ae6727f388814d211a4ac029d66560df2d6bb Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:40:08 +0200
Subject: [PATCH 21/56] Use the correct variable for ContainerPreference names

---
 src/ui-preferences/ContainerPreferenceGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui-preferences/ContainerPreferenceGroup.js b/src/ui-preferences/ContainerPreferenceGroup.js
index 9fdb6ec..36bfb35 100644
--- a/src/ui-preferences/ContainerPreferenceGroup.js
+++ b/src/ui-preferences/ContainerPreferenceGroup.js
@@ -16,7 +16,7 @@ export default class ContainerPreferenceGroup extends PreferenceGroup {
     this._preferences = (await ContextualIdentities.get())
         .map((container) => {
           return new ContainerPreference({
-            name: container.cookieStoreId,
+            name: `${this.name}.${container.cookieStoreId}`,
             label: container.name,
           });
         });

From 4875769e5f7b38642e76ef8996058b644b45aae2 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 13:40:51 +0200
Subject: [PATCH 22/56] Save 'lifetime' preference for created default
 containers

---
 src/defaultContainer.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/defaultContainer.js b/src/defaultContainer.js
index 54ed1c0..dbf173e 100644
--- a/src/defaultContainer.js
+++ b/src/defaultContainer.js
@@ -2,6 +2,7 @@ import {formatString} from './utils';
 import HostStorage from './Storage/HostStorage';
 import ContextualIdentities from './ContextualIdentity';
 import ExtendedURL from './ExtendedURL';
+import PreferenceStorage from './Storage/PreferenceStorage';
 
 export async function buildDefaultContainer(preferences, url) {
   url = new ExtendedURL(url);
@@ -46,5 +47,13 @@ export async function buildDefaultContainer(preferences, url) {
     }
   }
 
+  const lifetime = preferences['defaultContainer.lifetime'];
+  if(lifetime !== 'forever'){
+    await PreferenceStorage.set({
+      key: `containers.${cookieStoreId}.lifetime`,
+      value: lifetime,
+    });
+  }
+
   return cookieStoreId;
 }

From dd5158208c0f513a11df9eafab7dd12c30bcbdc2 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 15:54:51 +0200
Subject: [PATCH 23/56] Handle 'untilLastTab' lifetime preference of containers

Since we try and get the value of the preference directly,
 PreferenceStorage::get returns undefined for non-existent values
---
 src/Storage/PreferenceStorage.js |  2 +-
 src/index.js                     |  4 +++
 src/temporaryContainers.js       | 47 ++++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/temporaryContainers.js

diff --git a/src/Storage/PreferenceStorage.js b/src/Storage/PreferenceStorage.js
index 3f2fd39..635963c 100644
--- a/src/Storage/PreferenceStorage.js
+++ b/src/Storage/PreferenceStorage.js
@@ -18,7 +18,7 @@ class PreferenceStorage extends PrefixStorage {
 
   async get(key, valueOnly = false) {
     let preference = await super.get(key);
-    if (valueOnly) {
+    if (valueOnly && preference !== undefined) {
       preference = preference.value;
     }
     return preference;
diff --git a/src/index.js b/src/index.js
index 9dcf0ee..ef82a0d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,7 @@
 import './manifest.json';
 import {tabUpdatedListener, webRequestListener} from './containers';
 import {messageExternalListener} from './messageExternalListener';
+import {onTabCreated, onTabRemoved} from './temporaryContainers';
 
 browser.webRequest.onBeforeRequest.addListener(
   webRequestListener,
@@ -15,3 +16,6 @@ browser.runtime.onMessageExternal.addListener(
 browser.tabs.onUpdated.addListener(
     tabUpdatedListener
 );
+
+browser.tabs.onCreated.addListener(onTabCreated);
+browser.tabs.onRemoved.addListener(onTabRemoved);
diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
new file mode 100644
index 0000000..110966b
--- /dev/null
+++ b/src/temporaryContainers.js
@@ -0,0 +1,47 @@
+// Hoisted and adapted from https://gitlab.com/NamingThingsIsHard/firefox/click-to-contain
+
+import PreferenceStorage from './Storage/PreferenceStorage';
+
+// Prefer tracking tabs and their contexts to
+// calling browser.tabs.query with the contextId
+// It's lighter and faster
+let tabContexts = {};
+
+function countTabsInContext(contextId) {
+  if (!contextId) {
+    throw 'Must provide contextId';
+  }
+  return Object.keys(tabContexts).filter((tabId) => tabContexts[tabId] === contextId).length;
+}
+
+/**
+ * Keep track of the tabs in the contexts we own
+ * @param tab {Tab}
+ */
+export function onTabCreated(tab) {
+  tabContexts[tab.id] = tab.cookieStoreId;
+}
+
+/**
+ * Deletes temporary containers
+ *
+ * @param tabId {int|String}
+ */
+export async function onTabRemoved(tabId) {
+  let tabContextId = tabContexts[tabId];
+  if (!tabContextId) {
+    return;
+  }
+  delete tabContexts[tabId];
+  if (countTabsInContext(tabContextId) > 0) {
+    return;
+  }
+  const contextLifetime = await PreferenceStorage.get(
+      `containers.${tabContextId}.lifetime`,
+      true
+  );
+  if (contextLifetime === 'untilLastTab') {
+    console.info('containerise: Removed temporary container ID:', tabContextId);
+    browser.contextualIdentities.remove(tabContextId);
+  }
+}

From 457d77e3fc5ef3e298d7a95412983e0df111bcef Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 16:20:49 +0200
Subject: [PATCH 24/56] Remove a TODO

---
 src/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index 42711e2..2cb0174 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -62,7 +62,7 @@ export const urlKeyFromUrl = (url) => {
  *
  * Depending on the prefix in the hostmap it'll choose a match method:
  *  - regex
- *  - TODO: glob
+ *  - glob
  *  - standard
  *
  * @param url {URL}

From a6e709cc53e36b22e8b92ef50a8848c9a4edc9cf Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 16:50:25 +0200
Subject: [PATCH 25/56] Remove redundant constructor

---
 src/ui-preferences/StringPreference.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/ui-preferences/StringPreference.js b/src/ui-preferences/StringPreference.js
index fabb029..e560e09 100644
--- a/src/ui-preferences/StringPreference.js
+++ b/src/ui-preferences/StringPreference.js
@@ -2,11 +2,6 @@ import Preference from './Preference';
 
 export default class StringPreference extends Preference {
 
-  constructor({name, label, description}){
-    super({name, label, description});
-
-  }
-
   _buildEl() {
     let el = super._buildEl();
     el.type = 'text';

From 37293498e9fb2bee09204db7d1e871ae2f05c013 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 16:50:46 +0200
Subject: [PATCH 26/56] Improve doc a little

---
 src/ui-preferences/PreferenceGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index b701622..c7bc781 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -15,7 +15,7 @@ export default class PreferenceGroup extends Preference {
    * @param description {String} The description to be shown to the user
    * @param preferences {Preference[]}
    * @param toggleable {boolean} Indicates whether the preferences
-   *                    can be toggled together
+   *                    can be toggled on and off together
    */
   constructor({name, label, description, preferences, toggleable = false}) {
     super({name, label, description});

From 1332a33ff769034ba40da61eb72aa24cffc9e96a Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 16:51:04 +0200
Subject: [PATCH 27/56] Introduce defaultValue for preferences

---
 src/ui-preferences/ChoicePreference.js | 10 ++++++----
 src/ui-preferences/Preference.js       |  7 +++++--
 src/ui-preferences/preferences.json    |  5 +++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/ui-preferences/ChoicePreference.js b/src/ui-preferences/ChoicePreference.js
index c922aab..986d5ef 100644
--- a/src/ui-preferences/ChoicePreference.js
+++ b/src/ui-preferences/ChoicePreference.js
@@ -3,10 +3,12 @@ import {createEl} from './utils';
 
 export default class ChoicePreference extends Preference {
 
-  constructor({name, label, description, choices, defaultChoice}) {
-    super({name, label, description});
+  constructor({name, label, description, choices, defaultValue}) {
+    super({name, label, description, defaultValue});
     this.choices = choices;
-    this._defaultChoice = defaultChoice;
+    if(this._defaultValue === undefined && this.choices.length > 0){
+      this._defaultValue = this.choices[0].name;
+    }
     this._addChoices();
   }
 
@@ -17,7 +19,7 @@ export default class ChoicePreference extends Preference {
 
   _addChoices() {
     for (let choice of this.choices) {
-      const checkedAttr = this._defaultChoice === choice.name ? 'checked' : '';
+      const checkedAttr = this._defaultValue === choice.name ? 'checked' : '';
       this.el.appendChild(createEl(`<div class="radio-container">
         <input type="radio" name="${this.name}" value="${choice.name}" ${checkedAttr}>
         <label for="${this.name}">${choice.label}</label>
diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index 58eafe1..59a6b32 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -4,11 +4,11 @@ import {createEl, qs} from './utils';
 
 export default class Preference {
 
-  // TODO: Add the notion of a default value
-  constructor({name, label, description=''}) {
+  constructor({name, label, description = '', defaultValue}) {
     this.name = name;
     this.label = label;
     this.description = description;
+    this._defaultValue = defaultValue;
     this.$container = this._buildContainerEl();
     this.el = this._buildEl();
   }
@@ -56,6 +56,9 @@ export default class Preference {
     const retrieved = await this.retrieve();
     if (retrieved) {
       this.set(retrieved);
+    } else if (this._defaultValue !== undefined) {
+      // The db-object looks like {key, value}
+      this.set({value: this._defaultValue});
     }
   }
 
diff --git a/src/ui-preferences/preferences.json b/src/ui-preferences/preferences.json
index 97ea19c..13949fe 100644
--- a/src/ui-preferences/preferences.json
+++ b/src/ui-preferences/preferences.json
@@ -16,7 +16,8 @@
         "type": "string",
         "name": "containerName",
         "label": "Container name",
-        "description": "What the name of the default container will be. It's possible to use variables here"
+        "description": "What the name of the default container will be. It's possible to use variables here",
+        "defaultValue": "Default Container"
       },
       {
         "type": "choice",
@@ -35,7 +36,7 @@
             "description": "Closing the last tab in the container will destroy the container"
           }
         ],
-        "defaultChoice": "forever"
+        "defaultValue": "forever"
       },
       {
         "type": "string",

From 591a47ab811f0f234189cd3586f610e29eac5612 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:10:52 +0200
Subject: [PATCH 28/56] Cleanup temporary containers at startup

It's possible that when shutting down or due to a bug the container
 isn't removed when the last tab is closed. So we do so at startup.
---
 src/index.js               |  5 ++++-
 src/temporaryContainers.js | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index ef82a0d..cd1cba9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
 import './manifest.json';
 import {tabUpdatedListener, webRequestListener} from './containers';
 import {messageExternalListener} from './messageExternalListener';
-import {onTabCreated, onTabRemoved} from './temporaryContainers';
+import {cleanUpTemporaryContainers, onTabCreated, onTabRemoved} from './temporaryContainers';
 
 browser.webRequest.onBeforeRequest.addListener(
   webRequestListener,
@@ -19,3 +19,6 @@ browser.tabs.onUpdated.addListener(
 
 browser.tabs.onCreated.addListener(onTabCreated);
 browser.tabs.onRemoved.addListener(onTabRemoved);
+
+// Clean up left over containers at startup
+cleanUpTemporaryContainers();
diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
index 110966b..6cae34f 100644
--- a/src/temporaryContainers.js
+++ b/src/temporaryContainers.js
@@ -1,6 +1,7 @@
 // Hoisted and adapted from https://gitlab.com/NamingThingsIsHard/firefox/click-to-contain
 
 import PreferenceStorage from './Storage/PreferenceStorage';
+import {filterByKey} from './utils';
 
 // Prefer tracking tabs and their contexts to
 // calling browser.tabs.query with the contextId
@@ -45,3 +46,20 @@ export async function onTabRemoved(tabId) {
     browser.contextualIdentities.remove(tabContextId);
   }
 }
+
+
+export function cleanUpTemporaryContainers() {
+  Promise.all([
+    browser.contextualIdentities.query({}),
+    PreferenceStorage.getAll(true),
+  ]).then(([containers, preferences]) => {
+    preferences = filterByKey(preferences, key => key.startsWith('containers.'));
+
+    containers.filter((container) => {
+      return preferences[`containers.${container.cookieStoreId}.lifetime`] === 'untilLastTab';
+    }).forEach((container) => {
+      console.info('Removing leftover container: ', container.name);
+      browser.contextualIdentities.remove(container.cookieStoreId);
+    });
+  });
+}

From 16c9e894c2cbab59978ac192d31f53fcad8ce923 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:21:13 +0200
Subject: [PATCH 29/56] Add notice about the class naming choice

---
 src/ui-preferences/styles/index.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index fb66876..d816827 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -1,3 +1,6 @@
+// BEM is used for classes
+// https://en.bem.info/methodology/quick-start/
+
 .pref-container {
   border-width: 1px;
   border-radius: 3px;

From e01807dd56f5aeb08d43055cf6fba3a963f41be8 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:21:54 +0200
Subject: [PATCH 30/56] Start adding more comments and code documentation

---
 src/ui-preferences/ChoicePreference.js    | 1 +
 src/ui-preferences/ContainerPreference.js | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/ui-preferences/ChoicePreference.js b/src/ui-preferences/ChoicePreference.js
index 986d5ef..d0265fc 100644
--- a/src/ui-preferences/ChoicePreference.js
+++ b/src/ui-preferences/ChoicePreference.js
@@ -6,6 +6,7 @@ export default class ChoicePreference extends Preference {
   constructor({name, label, description, choices, defaultValue}) {
     super({name, label, description, defaultValue});
     this.choices = choices;
+    // Make sure we have default choice
     if(this._defaultValue === undefined && this.choices.length > 0){
       this._defaultValue = this.choices[0].name;
     }
diff --git a/src/ui-preferences/ContainerPreference.js b/src/ui-preferences/ContainerPreference.js
index d2d73b6..eea3bcb 100644
--- a/src/ui-preferences/ContainerPreference.js
+++ b/src/ui-preferences/ContainerPreference.js
@@ -3,6 +3,9 @@ import ChoicePreference from './ChoicePreference';
 
 /**
  * Preferences for containers
+ *
+ * This will build all the preferences a container can possess e.g lifetime.
+ * Other preferences like icon, color and exit rules are conceivable
  */
 export default class ContainerPreference extends PreferenceGroup {
 

From 758da9640d9062875a39c05003fb3d80c7c5dc63 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:22:09 +0200
Subject: [PATCH 31/56] Remove unnecessary code

---
 src/ui-preferences/ChoicePreference.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui-preferences/ChoicePreference.js b/src/ui-preferences/ChoicePreference.js
index d0265fc..5007d4b 100644
--- a/src/ui-preferences/ChoicePreference.js
+++ b/src/ui-preferences/ChoicePreference.js
@@ -14,8 +14,7 @@ export default class ChoicePreference extends Preference {
   }
 
   _buildEl() {
-    const el = document.createElement('form');
-    return el;
+    return document.createElement('form');
   }
 
   _addChoices() {

From b0bceca9a672571773d80d38a25caba3a5f742f8 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:22:37 +0200
Subject: [PATCH 32/56] Use correct param for defaultValue

---
 src/ui-preferences/ContainerPreference.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui-preferences/ContainerPreference.js b/src/ui-preferences/ContainerPreference.js
index eea3bcb..72bb266 100644
--- a/src/ui-preferences/ContainerPreference.js
+++ b/src/ui-preferences/ContainerPreference.js
@@ -27,7 +27,7 @@ export default class ContainerPreference extends PreferenceGroup {
           'description': 'Closing the last tab in the container will destroy the container',
         },
       ],
-      defaultChoice: 'forever',
+      defaultValue: 'forever',
     }));
   }
 

From e1d937651eef82f0a71d81e2f37c73f2bea17410 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:26:38 +0200
Subject: [PATCH 33/56] Add more documentation to Preference

---
 src/ui-preferences/Preference.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index 59a6b32..a967fef 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -2,6 +2,11 @@ import PreferenceStorage from '../Storage/PreferenceStorage';
 import preferenceContainerTemplate from '!!raw-loader!./templates/Preference.html';
 import {createEl, qs} from './utils';
 
+/**
+ * @var $container {HTMLElement} Should contain the label, description and other fields
+ *                 It's the element that should be added to the DOM
+ * @var el {HTMLElement} Is the element that will be used to get and set values.
+ */
 export default class Preference {
 
   constructor({name, label, description = '', defaultValue}) {
@@ -23,6 +28,9 @@ export default class Preference {
     return el;
   }
 
+  /**
+   * Should fill the fields in {@see $container} with initial preference attributes and add {@see el} to the container
+   */
   async fillContainer() {
     qs('.pref-container__label', this.$container).innerHTML = this.label;
     qs('.pref-container__description', this.$container).innerHTML = this.description;

From ff9e37010c3eecce4ac9eb75be62e6fa63589190 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 17:28:34 +0200
Subject: [PATCH 34/56] Move PreferenceGroup doc to the right place

---
 src/ui-preferences/PreferenceGroup.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index c7bc781..699afe3 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -1,10 +1,10 @@
-/**
- * Groups preferences together and displays them in a manner to reflect that fact.
- */
 import Preference from './Preference';
 import {createEl, qs} from './utils';
 import template from '!!raw-loader!./templates/PreferenceGroup.html';
 
+/**
+ * Groups preferences together and displays them in a manner to reflect that fact.
+ */
 export default class PreferenceGroup extends Preference {
 
   /**

From 3030c4b60664de9882c272fabca97114eaf28330 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 20:46:51 +0200
Subject: [PATCH 35/56] Clean keys in HostStorage after a container is removed

Otherwise we leave config behind that can interfere with future operation
---
 src/ContextualIdentity/index.js | 13 +++++++++++++
 src/temporaryContainers.js      |  5 +++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index 4c4d0f7..89dedce 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -1,3 +1,5 @@
+import HostStorage from '../Storage/HostStorage';
+
 export const NO_CONTAINER = {
   name: 'No Container',
   icon: 'circle',
@@ -31,6 +33,17 @@ class ContextualIdentities {
     });
   }
 
+  /**
+   * Gets rid of a container and all corresponding rules
+   */
+  async remove(cookieStoreId) {
+    const hostMaps = await HostStorage.getAll();
+    await HostStorage.remove(Object.keys(hostMaps)
+        .filter(host => hostMaps[host].cookieStoreId === cookieStoreId)
+    );
+    return this.contextualIdentities.remove(cookieStoreId);
+  }
+
   getAll(details = {}) {
     return this.contextualIdentities.query(details).then((identities) => [...identities, NO_CONTAINER]);
   }
diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
index 6cae34f..e08f01f 100644
--- a/src/temporaryContainers.js
+++ b/src/temporaryContainers.js
@@ -1,5 +1,6 @@
 // Hoisted and adapted from https://gitlab.com/NamingThingsIsHard/firefox/click-to-contain
 
+import ContextualIdentities from './ContextualIdentity';
 import PreferenceStorage from './Storage/PreferenceStorage';
 import {filterByKey} from './utils';
 
@@ -43,7 +44,7 @@ export async function onTabRemoved(tabId) {
   );
   if (contextLifetime === 'untilLastTab') {
     console.info('containerise: Removed temporary container ID:', tabContextId);
-    browser.contextualIdentities.remove(tabContextId);
+    return ContextualIdentities.remove(tabContextId);
   }
 }
 
@@ -59,7 +60,7 @@ export function cleanUpTemporaryContainers() {
       return preferences[`containers.${container.cookieStoreId}.lifetime`] === 'untilLastTab';
     }).forEach((container) => {
       console.info('Removing leftover container: ', container.name);
-      browser.contextualIdentities.remove(container.cookieStoreId);
+      ContextualIdentities.remove(container.cookieStoreId);
     });
   });
 }

From 09441bfb70fe0fed2c8d75d7cfb5c337ff7fc863 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 20:48:02 +0200
Subject: [PATCH 36/56] Return a container from getDefaultContainer instead of
 a cookieStoreId

Basically really do what the function is said to do
---
 src/containers.js       |  5 +++--
 src/defaultContainer.js | 10 +++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/containers.js b/src/containers.js
index 2f32dbe..193df61 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -50,12 +50,13 @@ async function handle(url, tabId) {
 
   if (!hostIdentity) {
     if (preferences.defaultContainer) {
-      const defaultCookieStoreId = await buildDefaultContainer(
+      const defaultContainer = await buildDefaultContainer(
           filterByKey(preferences, prefKey => prefKey.startsWith('defaultContainer')),
           url
       );
+      const defaultCookieStoreId = defaultContainer.cookieStoreId;
       if (currentTab.cookieStoreId !== defaultCookieStoreId) {
-        console.info('Opening', url, 'in default container');
+        console.debug('Opening', url, 'in default container', defaultCookieStoreId, defaultContainer.name);
         return createTab(url, currentTab.index + 1, currentTab.id, defaultCookieStoreId);
       }
     }
diff --git a/src/defaultContainer.js b/src/defaultContainer.js
index dbf173e..ad6cbf7 100644
--- a/src/defaultContainer.js
+++ b/src/defaultContainer.js
@@ -17,14 +17,14 @@ export async function buildDefaultContainer(preferences, url) {
 
   // Get cookieStoreId
   const containers = await ContextualIdentities.get(name);
-  let cookieStoreId;
+  let container;
   if (containers.length > 0) {
-    cookieStoreId = containers[0].cookieStoreId;
+    container = containers[0];
   } else {
     // Create a default container
-    const container = await ContextualIdentities.create(name);
-    cookieStoreId = container.cookieStoreId;
+    container = await ContextualIdentities.create(name);
   }
+  const cookieStoreId = container.cookieStoreId;
 
   // Add a rule if necessary
   const ruleAddition = preferences['defaultContainer.ruleAddition'];
@@ -55,5 +55,5 @@ export async function buildDefaultContainer(preferences, url) {
     });
   }
 
-  return cookieStoreId;
+  return container;
 }

From becddf9b15f1b70722bbeb3799ceeed87eddab48 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 20:51:27 +0200
Subject: [PATCH 37/56] Don't try and handle tabs we ourselves are creating

We might otherwise go into endless loops, especially with default containers
 that have different names from the container of the current tab.
It'll try and contain the tab in a new container with a new name, ad infinitum.

Now we don't mess with tabs we're creating and that haven't changed the URL
---
 src/containers.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/containers.js b/src/containers.js
index 193df61..a0c8d06 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -5,6 +5,12 @@ import PreferenceStorage from './Storage/PreferenceStorage';
 import {filterByKey} from './utils';
 import {buildDefaultContainer} from './defaultContainer';
 
+/**
+ * Keep track of the tabs we're creating
+ * tabId: url
+ */
+const creatingTabs = {};
+
 const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) => {
   Tabs.get(currentTabId).then((currentTab) => {
     Tabs.create({
@@ -13,6 +19,8 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
       cookieStoreId,
       active: currentTab.active,
       openerTabId: openerTabId,
+    }).then((tab) => {
+      creatingTabs[tab.id] = url;
     });
     PreferenceStorage.get('keepOldTabs').then(({value}) => {
       if (!value) {
@@ -31,9 +39,13 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
 
 
 async function handle(url, tabId) {
-  if (url.startsWith('about:')){
-    return {};
+  const creatingUrl = creatingTabs[tabId];
+  if (url.startsWith('about:') || creatingUrl === url) {
+    return;
+  } else if (creatingUrl) {
+    delete creatingTabs[tabId];
   }
+
   let [hostMap, preferences, identities, currentTab] = await Promise.all([
     Storage.get(url),
     PreferenceStorage.getAll(true),
@@ -41,7 +53,7 @@ async function handle(url, tabId) {
     Tabs.get(tabId),
   ]);
 
-  if (currentTab.incognito || !hostMap){
+  if (currentTab.incognito || !hostMap) {
     return {};
   }
 

From 47a7c99bf8e80ebf7970f04c9ac7f38a7b924930 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 10 Sep 2019 21:07:10 +0200
Subject: [PATCH 38/56] Make ContextualIdentity tests pass again

Still need to test ContextualIdentity.remove()
---
 src/ContextualIdentity/__tests__/ContextualIdentity.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js b/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
index 619d597..950795d 100644
--- a/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
+++ b/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
@@ -35,6 +35,9 @@ describe('ContextualIdentities', () => {
           addListener: jest.fn(() => {}),
         },
       },
+      storage: {
+        local: {},
+      },
     };
 
     ContextualIdentities = require('../index').default;

From a8d27e605c57a8c9da6564fab3266ab2c49cb54c Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Wed, 11 Sep 2019 12:26:37 +0200
Subject: [PATCH 39/56] Add moz-extension to the domains that won't be handled

---
 src/containers.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/containers.js b/src/containers.js
index a0c8d06..6969308 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -5,6 +5,8 @@ import PreferenceStorage from './Storage/PreferenceStorage';
 import {filterByKey} from './utils';
 import {buildDefaultContainer} from './defaultContainer';
 
+const IGNORED_URLS_REGEX = /^(about|moz-extension):/.compile();
+
 /**
  * Keep track of the tabs we're creating
  * tabId: url
@@ -40,7 +42,7 @@ const createTab = (url, newTabIndex, currentTabId, cookieStoreId, openerTabId) =
 
 async function handle(url, tabId) {
   const creatingUrl = creatingTabs[tabId];
-  if (url.startsWith('about:') || creatingUrl === url) {
+  if (IGNORED_URLS_REGEX.test(url) || creatingUrl === url) {
     return;
   } else if (creatingUrl) {
     delete creatingTabs[tabId];

From 16b22dd27ca21a3ceb2fd6e83736b2dc28672d49 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Wed, 11 Sep 2019 13:52:31 +0200
Subject: [PATCH 40/56] Put save button on left to always make it accessible

for some reason display: fixed doesn't work
---
 src/ui-preferences/index.html        |  2 +-
 src/ui-preferences/styles/index.scss | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/ui-preferences/index.html b/src/ui-preferences/index.html
index 62547a1..925f7da 100644
--- a/src/ui-preferences/index.html
+++ b/src/ui-preferences/index.html
@@ -8,11 +8,11 @@
 </head>
 <body>
 
+<button id="save-button">Save</button>
 <div class="preferences-container">
 
 </div>
 
-<button id="save-button">Save</button>
 
 
 </body>
diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index d816827..34a2e28 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -1,6 +1,16 @@
 // BEM is used for classes
 // https://en.bem.info/methodology/quick-start/
 
+body {
+  display: flex;
+  flex-direction: row;
+}
+#save-button {
+  writing-mode: vertical-lr;
+  text-orientation: upright;
+  text-align: center;
+}
+
 .pref-container {
   border-width: 1px;
   border-radius: 3px;

From c332fdc8d14f42a4943ac403099436017089687a Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Wed, 11 Sep 2019 18:38:51 +0200
Subject: [PATCH 41/56] Use regex correctly

---
 src/containers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers.js b/src/containers.js
index 6969308..e15ebe0 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -5,7 +5,7 @@ import PreferenceStorage from './Storage/PreferenceStorage';
 import {filterByKey} from './utils';
 import {buildDefaultContainer} from './defaultContainer';
 
-const IGNORED_URLS_REGEX = /^(about|moz-extension):/.compile();
+const IGNORED_URLS_REGEX = /^(about|moz-extension):/;
 
 /**
  * Keep track of the tabs we're creating

From 7a7c0a28bd5dca9e0893a7d09941d3b7b92a756a Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 12 Sep 2019 13:59:13 +0200
Subject: [PATCH 42/56] Fix createTab call after merge from master

The signature changed and we were providing the wrong args
---
 src/containers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers.js b/src/containers.js
index 9934533..347c501 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -81,7 +81,7 @@ async function handle(url, tabId) {
       const defaultCookieStoreId = defaultContainer.cookieStoreId;
       if (currentTab.cookieStoreId !== defaultCookieStoreId) {
         console.debug('Opening', url, 'in default container', defaultCookieStoreId, defaultContainer.name);
-        return createTab(url, currentTab.index + 1, currentTab.id, defaultCookieStoreId);
+        return createTab(url, currentTab.index + 1, currentTab.id, currentTab.openerTabId, defaultCookieStoreId);
       }
     }
     return {};

From 3815faf6d05e5f75e51f3357af9f947dab70b73e Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 12 Sep 2019 13:59:30 +0200
Subject: [PATCH 43/56] Fix indent after merge

---
 src/containers.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/containers.js b/src/containers.js
index 347c501..11b421f 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -88,14 +88,14 @@ async function handle(url, tabId) {
 
   }
 
-    const openerTabId = currentTab.openerTabId;
-    if (hostIdentity.cookieStoreId === NO_CONTAINER.cookieStoreId && tabIdentity) {
-      return createTab(url, currentTab.index + 1, currentTab.id, openerTabId);
-    }
+  const openerTabId = currentTab.openerTabId;
+  if (hostIdentity.cookieStoreId === NO_CONTAINER.cookieStoreId && tabIdentity) {
+    return createTab(url, currentTab.index + 1, currentTab.id, openerTabId);
+  }
 
-    if (hostIdentity.cookieStoreId !== currentTab.cookieStoreId && hostIdentity.cookieStoreId !== NO_CONTAINER.cookieStoreId) {
-      return createTab(url, currentTab.index + 1, currentTab.id, openerTabId, hostIdentity.cookieStoreId);
-    }
+  if (hostIdentity.cookieStoreId !== currentTab.cookieStoreId && hostIdentity.cookieStoreId !== NO_CONTAINER.cookieStoreId) {
+    return createTab(url, currentTab.index + 1, currentTab.id, openerTabId, hostIdentity.cookieStoreId);
+  }
 
 
   return {};

From c1e4ad2b29693d44836c14b5caaaeaf22f8876a8 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 17:07:18 +0200
Subject: [PATCH 44/56] Save settings onchange instead of requiring a save
 button

Each preference can trigger a change event. That's only triggered if an actual
 change is made that's different from the current db value

Preference groups trigger change events as well as 'childChange' events.

The ContainerPreferenceGroup has multiple PreferenceGroup children and
 their childChange events are 'bubbled' / forwarded
---
 src/ui-preferences/BooleanPreference.js |  5 ++
 src/ui-preferences/ChoicePreference.js  |  1 +
 src/ui-preferences/Preference.js        | 83 ++++++++++++++++++++++---
 src/ui-preferences/PreferenceGroup.js   |  9 ++-
 src/ui-preferences/StringPreference.js  |  1 +
 src/ui-preferences/index.html           |  1 -
 src/ui-preferences/index.js             | 12 ++--
 src/ui-preferences/styles/index.scss    |  5 --
 8 files changed, 96 insertions(+), 21 deletions(-)

diff --git a/src/ui-preferences/BooleanPreference.js b/src/ui-preferences/BooleanPreference.js
index 5ac7b45..2d54d7e 100644
--- a/src/ui-preferences/BooleanPreference.js
+++ b/src/ui-preferences/BooleanPreference.js
@@ -2,6 +2,10 @@ import Preference from './Preference';
 
 export default class BooleanPreference extends Preference {
 
+  _createOnChange() {
+    super._createOnChange('change');
+  }
+
   _buildEl() {
     let el = super._buildEl();
     el.type = 'checkbox';
@@ -14,6 +18,7 @@ export default class BooleanPreference extends Preference {
 
   set({value}) {
     this.el.checked = !!value;
+    super.set({value});
   }
 }
 
diff --git a/src/ui-preferences/ChoicePreference.js b/src/ui-preferences/ChoicePreference.js
index 5007d4b..7a4cd66 100644
--- a/src/ui-preferences/ChoicePreference.js
+++ b/src/ui-preferences/ChoicePreference.js
@@ -38,6 +38,7 @@ export default class ChoicePreference extends Preference {
     for (let $input of this.el.querySelectorAll('input')) {
       $input.checked = $input.value === value;
     }
+    super.set({value});
   }
 }
 
diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index a967fef..c25926d 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -15,6 +15,8 @@ export default class Preference {
     this.description = description;
     this._defaultValue = defaultValue;
     this.$container = this._buildContainerEl();
+    this._valueDb = null;
+    this._listeners = {};
     this.el = this._buildEl();
   }
 
@@ -28,6 +30,56 @@ export default class Preference {
     return el;
   }
 
+  /**
+   * Registers the event listeners and decides when to trigger
+   * an onChange event for the preference
+   * @private
+   */
+  _createOnChange(event='input') {
+    const listener = (e) => {
+      e.stopPropagation();
+      this._onChange(this.get());
+    };
+    this.$container.addEventListener(event, listener);
+  }
+
+  /**
+   *
+   * @param newValue
+   * @private
+   */
+  _onChange(newValue) {
+    if (newValue === this._valueDb) {
+      return;
+    }
+    this._triggerEvent('change', newValue);
+  }
+
+  addListener(event, func) {
+    const listeners = this._listeners[event] || [];
+    listeners.push(func);
+    this._listeners[event] = listeners;
+  }
+
+  removeListener(func, event) {
+    for (let eventKey of this._listeners) {
+      if (event !== undefined && event !== eventKey) {
+        continue;
+      }
+      this._listeners[event] = this._listeners[event].filter(listener => listener === func);
+    }
+  }
+
+  _triggerEvent(event, ...args) {
+    const listeners = this._listeners[event];
+    if (!listeners) {
+      return;
+    }
+    for (let listener of listeners) {
+      listener.apply(this, args);
+    }
+  }
+
   /**
    * Should fill the fields in {@see $container} with initial preference attributes and add {@see el} to the container
    */
@@ -38,6 +90,7 @@ export default class Preference {
     // Append the el
     const elContainer = qs('.pref-el-container', this.$container);
     elContainer.appendChild(this.el);
+    this._createOnChange();
   }
 
 
@@ -50,21 +103,27 @@ export default class Preference {
 
   /**
    * Update UI with the given value
-   * @abstract
    */
   // eslint-disable-next-line no-unused-vars
-  set(value) {
-    throw 'Not implemented';
+  set({value}) {
+    this._valueDb = this.get();
   }
 
   /**
    * Updates the UI with the DB value
    */
   async updateFromDb() {
-    const retrieved = await this.retrieve();
-    if (retrieved) {
-      this.set(retrieved);
-    } else if (this._defaultValue !== undefined) {
+    let retrieved = undefined;
+    try {
+      retrieved = await this.retrieve();
+      if (retrieved) {
+        this.set(retrieved);
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+
+    if (retrieved === undefined && this._defaultValue !== undefined) {
       // The db-object looks like {key, value}
       this.set({value: this._defaultValue});
     }
@@ -76,7 +135,10 @@ export default class Preference {
    * @async
    */
   retrieve() {
-    return PreferenceStorage.get(this.name);
+    return PreferenceStorage.get(this.name).then((retrieved) => {
+      this._valueDb = retrieved.value;
+      return retrieved;
+    });
   }
 
   /**
@@ -85,9 +147,12 @@ export default class Preference {
    * @async
    */
   update() {
+    const newValue = this.get();
     return PreferenceStorage.set({
       key: this.name,
-      value: this.get(),
+      value: newValue,
+    }).then(() => {
+      this._valueDb = newValue;
     });
   }
 
diff --git a/src/ui-preferences/PreferenceGroup.js b/src/ui-preferences/PreferenceGroup.js
index 699afe3..ac97c88 100644
--- a/src/ui-preferences/PreferenceGroup.js
+++ b/src/ui-preferences/PreferenceGroup.js
@@ -42,9 +42,15 @@ export default class PreferenceGroup extends Preference {
   async fillContainer() {
     qs('.pref-group__label', this.$container).innerHTML = this.label;
     qs('.pref-group__description', this.$container).innerHTML = this.description;
-
+    this._createOnChange('change');
     const $preferences = this.$container.querySelector('.preferences');
     return Promise.all(this._preferences.map((preference) => {
+      preference.addListener('change', (newValue) => {
+        this._triggerEvent('childChange', preference, newValue);
+      });
+      preference.addListener('childChange', (...args) => {
+        this._triggerEvent('childChange', ...args);
+      });
       $preferences.appendChild(preference.$container);
       return preference.fillContainer();
     }));
@@ -60,6 +66,7 @@ export default class PreferenceGroup extends Preference {
   set({value}) {
     if (this._toggleable) {
       this.el.checked = value;
+      super.set({value});
     }
   }
 
diff --git a/src/ui-preferences/StringPreference.js b/src/ui-preferences/StringPreference.js
index e560e09..a021410 100644
--- a/src/ui-preferences/StringPreference.js
+++ b/src/ui-preferences/StringPreference.js
@@ -14,6 +14,7 @@ export default class StringPreference extends Preference {
 
   set({value}) {
     this.el.value = value;
+    super.set({value});
   }
 }
 
diff --git a/src/ui-preferences/index.html b/src/ui-preferences/index.html
index 925f7da..6b39959 100644
--- a/src/ui-preferences/index.html
+++ b/src/ui-preferences/index.html
@@ -8,7 +8,6 @@
 </head>
 <body>
 
-<button id="save-button">Save</button>
 <div class="preferences-container">
 
 </div>
diff --git a/src/ui-preferences/index.js b/src/ui-preferences/index.js
index c4e28f8..9e9fcb6 100644
--- a/src/ui-preferences/index.js
+++ b/src/ui-preferences/index.js
@@ -37,13 +37,15 @@ let preferences = preferencesJson.map(buildPreference);
 const preferencesContainer = qs('.preferences-container');
 
 preferences.map(async (preference) => {
+  // Save preference on UI change
+  preference.addListener('change', () => {
+    preference.update();
+  });
+  preference.addListener('childChange', (child) => {
+    child.update();
+  });
   preferencesContainer.appendChild(preference.$container);
   await preference.fillContainer();
-  // noinspection JSIgnoredPromiseFromCall
   await preference.updateFromDb();
 });
 
-const $saveButton = qs('#save-button');
-$saveButton.addEventListener('click', async () => {
-  await Promise.all(preferences.map(preference => preference.update()));
-});
diff --git a/src/ui-preferences/styles/index.scss b/src/ui-preferences/styles/index.scss
index 34a2e28..a80a116 100644
--- a/src/ui-preferences/styles/index.scss
+++ b/src/ui-preferences/styles/index.scss
@@ -5,11 +5,6 @@ body {
   display: flex;
   flex-direction: row;
 }
-#save-button {
-  writing-mode: vertical-lr;
-  text-orientation: upright;
-  text-align: center;
-}
 
 .pref-container {
   border-width: 1px;

From 2af38c1f6d6e57af2ba347f3114cc5b05f46bd35 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 17:43:58 +0200
Subject: [PATCH 45/56] Handle using "No Container" as the default container

"No Container" can't be removed

ContextualIdentity.get(NO_CONTAINER.cookieStoreId) returns a list
 instead of a single container to adhere to the return type
---
 src/ContextualIdentity/index.js | 5 ++++-
 src/containers.js               | 7 ++++++-
 src/defaultContainer.js         | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index 89dedce..3c25a53 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -37,6 +37,9 @@ class ContextualIdentities {
    * Gets rid of a container and all corresponding rules
    */
   async remove(cookieStoreId) {
+    if(cookieStoreId === NO_CONTAINER.cookieStoreId){
+      return;
+    }
     const hostMaps = await HostStorage.getAll();
     await HostStorage.remove(Object.keys(hostMaps)
         .filter(host => hostMaps[host].cookieStoreId === cookieStoreId)
@@ -50,7 +53,7 @@ class ContextualIdentities {
 
   get(name) {
     if (name === NO_CONTAINER.name) {
-      return Promise.resolve(NO_CONTAINER);
+      return Promise.resolve([NO_CONTAINER]);
     }
     return this.contextualIdentities.query({name});
   }
diff --git a/src/containers.js b/src/containers.js
index 11b421f..ee5e4e1 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -81,7 +81,12 @@ async function handle(url, tabId) {
       const defaultCookieStoreId = defaultContainer.cookieStoreId;
       if (currentTab.cookieStoreId !== defaultCookieStoreId) {
         console.debug('Opening', url, 'in default container', defaultCookieStoreId, defaultContainer.name);
-        return createTab(url, currentTab.index + 1, currentTab.id, currentTab.openerTabId, defaultCookieStoreId);
+        return createTab(
+            url,
+            currentTab.index + 1, currentTab.id,
+            currentTab.openerTabId,
+            defaultCookieStoreId !== NO_CONTAINER.cookieStoreId ?
+                defaultCookieStoreId : undefined);
       }
     }
     return {};
diff --git a/src/defaultContainer.js b/src/defaultContainer.js
index ad6cbf7..2fe402d 100644
--- a/src/defaultContainer.js
+++ b/src/defaultContainer.js
@@ -1,6 +1,6 @@
 import {formatString} from './utils';
 import HostStorage from './Storage/HostStorage';
-import ContextualIdentities from './ContextualIdentity';
+import ContextualIdentities, {NO_CONTAINER} from './ContextualIdentity';
 import ExtendedURL from './ExtendedURL';
 import PreferenceStorage from './Storage/PreferenceStorage';
 
@@ -48,7 +48,7 @@ export async function buildDefaultContainer(preferences, url) {
   }
 
   const lifetime = preferences['defaultContainer.lifetime'];
-  if(lifetime !== 'forever'){
+  if(lifetime !== 'forever' && cookieStoreId !== NO_CONTAINER.cookieStoreId){
     await PreferenceStorage.set({
       key: `containers.${cookieStoreId}.lifetime`,
       value: lifetime,

From 1e2681da354fa988f77698a508ad1baf4fb38f59 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 20:13:42 +0200
Subject: [PATCH 46/56] Check variable before using it

The browser.storage can return undefined for non-existing items
---
 src/ui-preferences/Preference.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ui-preferences/Preference.js b/src/ui-preferences/Preference.js
index c25926d..6ce4e6a 100644
--- a/src/ui-preferences/Preference.js
+++ b/src/ui-preferences/Preference.js
@@ -136,7 +136,9 @@ export default class Preference {
    */
   retrieve() {
     return PreferenceStorage.get(this.name).then((retrieved) => {
-      this._valueDb = retrieved.value;
+      if(retrieved){
+        this._valueDb = retrieved.value;
+      }
       return retrieved;
     });
   }

From e8114d9a36cce6faf347d6231a26c6283f579de9 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 20:30:55 +0200
Subject: [PATCH 47/56] Remove unnecessary log

---
 src/containers.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/containers.js b/src/containers.js
index ee5e4e1..988d937 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -119,6 +119,5 @@ export const tabUpdatedListener = (tabId, changeInfo) => {
   if (!changeInfo.url) {
     return;
   }
-  console.log(tabId, 'url changed', changeInfo.url);
   return handle(changeInfo.url, tabId);
 };

From ab32470fbd613e0a7efdca2dbf31f18ccf0e3f44 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 20:34:12 +0200
Subject: [PATCH 48/56] Fix support for "No Container"

When already without a container we kept recreating the tab believing
 it wasn't without a container. We now check beforehand.

Tried to make it more readable by using variable names for the booleans
---
 src/ContextualIdentity/index.js | 2 +-
 src/containers.js               | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index 3c25a53..9d4c42e 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -6,7 +6,7 @@ export const NO_CONTAINER = {
   iconUrl: 'resource://usercontext-content/circle.svg',
   color: 'grey',
   colorCode: '#999',
-  cookieStoreId: 'no-container',
+  cookieStoreId: 'firefox-default',
 };
 export const COLORS = [
   'blue',
diff --git a/src/containers.js b/src/containers.js
index 988d937..2eb1fab 100644
--- a/src/containers.js
+++ b/src/containers.js
@@ -79,14 +79,17 @@ async function handle(url, tabId) {
           url
       );
       const defaultCookieStoreId = defaultContainer.cookieStoreId;
-      if (currentTab.cookieStoreId !== defaultCookieStoreId) {
+      const defaultIsNoContainer = defaultCookieStoreId === NO_CONTAINER.cookieStoreId;
+      const tabHasContainer = currentTab.cookieStoreId !== NO_CONTAINER.cookieStoreId;
+      const tabInDifferentContainer = currentTab.cookieStoreId !== defaultCookieStoreId;
+      const openInNoContainer = defaultIsNoContainer && tabHasContainer;
+      if ((tabInDifferentContainer && !openInNoContainer) || openInNoContainer) {
         console.debug('Opening', url, 'in default container', defaultCookieStoreId, defaultContainer.name);
         return createTab(
             url,
             currentTab.index + 1, currentTab.id,
             currentTab.openerTabId,
-            defaultCookieStoreId !== NO_CONTAINER.cookieStoreId ?
-                defaultCookieStoreId : undefined);
+            defaultCookieStoreId);
       }
     }
     return {};

From 56f5192a54fa3412a698aea3a94fff70e792038d Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 16 Sep 2019 20:38:41 +0200
Subject: [PATCH 49/56] Fix test that uses NO_CONTAINER

'firefox-default' is now used instead of 'no-container' since that's what
 firefox actually uses to designate that no container is being used
---
 src/ContextualIdentity/__tests__/ContextualIdentity.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js b/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
index 950795d..7bc8232 100644
--- a/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
+++ b/src/ContextualIdentity/__tests__/ContextualIdentity.spec.js
@@ -58,7 +58,7 @@ describe('ContextualIdentities', () => {
         iconUrl: 'resource://usercontext-content/circle.svg',
         color: 'grey',
         colorCode: '#999',
-        cookieStoreId: 'no-container',
+        cookieStoreId: 'firefox-default',
       }]);
     });
   });

From efe0e480cd00ca90e7090b37b4e6d58f12c418e7 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Tue, 17 Sep 2019 11:34:18 +0200
Subject: [PATCH 50/56] Clean preferences of containers once they are deleted

This is now done in a listener instead of only when triggered manually
 by our code. It's possible for containers to be deleted externally
 e.g other extensions or by the user in the firefox preferences
---
 src/ContextualIdentity/index.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index 9d4c42e..2192b2c 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -23,6 +23,9 @@ class ContextualIdentities {
 
   constructor() {
     this.contextualIdentities = browser.contextualIdentities;
+    this.addOnRemoveListener((changeInfo) => {
+      return this.cleanPreferences(changeInfo.contextualIdentity.cookieStoreId);
+    });
   }
 
   create(name) {
@@ -37,14 +40,17 @@ class ContextualIdentities {
    * Gets rid of a container and all corresponding rules
    */
   async remove(cookieStoreId) {
-    if(cookieStoreId === NO_CONTAINER.cookieStoreId){
+    if (cookieStoreId === NO_CONTAINER.cookieStoreId) {
       return;
     }
+    return this.contextualIdentities.remove(cookieStoreId);
+  }
+
+  async cleanPreferences(cookieStoreId) {
     const hostMaps = await HostStorage.getAll();
-    await HostStorage.remove(Object.keys(hostMaps)
+    return HostStorage.remove(Object.keys(hostMaps)
         .filter(host => hostMaps[host].cookieStoreId === cookieStoreId)
     );
-    return this.contextualIdentities.remove(cookieStoreId);
   }
 
   getAll(details = {}) {

From 83faa532cc3411cc5d573ed902886ae1430afd84 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 19 Sep 2019 19:39:57 +0200
Subject: [PATCH 51/56] Provide method to test permanent profiles

When testing whether temporary containers are deleted at the start of firefox
 a "permanent" profile is useful
---
 .gitignore   | 3 +++
 package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index b4fb8bf..a3e1751 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,6 @@ containerise.iml
 # build
 build
 web-ext-artifacts
+
+# Other
+/profile
diff --git a/package.json b/package.json
index 951337d..758060d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "build": "npm audit && npm run lint && npm run test && webpack --config ./webpack.prod",
     "postbuild": "cp -a static/ build/ && web-ext build -s build/",
     "web-ext": "web-ext run -s build/ --start-url=about:debugging#addons",
+    "web-ext-perm": "mkdirp ./profile && web-ext run -s build/ --start-url=about:debugging#addons -p ./profile --keep-profile-changes",
     "lint": "eslint --ignore-path .gitignore ./",
     "test": "jest",
     "test:watch": "jest --watchAll"

From e760bfb164cf4b9456927d5ea6e912a90e80c9d9 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 23 Sep 2019 14:20:16 +0200
Subject: [PATCH 52/56] Clean HostStorage and PreferenceStorage on deletion of
 a container

---
 src/ContextualIdentity/index.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/ContextualIdentity/index.js b/src/ContextualIdentity/index.js
index 2192b2c..652c065 100644
--- a/src/ContextualIdentity/index.js
+++ b/src/ContextualIdentity/index.js
@@ -1,4 +1,5 @@
 import HostStorage from '../Storage/HostStorage';
+import PreferenceStorage from '../Storage/PreferenceStorage';
 
 export const NO_CONTAINER = {
   name: 'No Container',
@@ -24,7 +25,9 @@ class ContextualIdentities {
   constructor() {
     this.contextualIdentities = browser.contextualIdentities;
     this.addOnRemoveListener((changeInfo) => {
-      return this.cleanPreferences(changeInfo.contextualIdentity.cookieStoreId);
+      const cookieStoreId = changeInfo.contextualIdentity.cookieStoreId;
+      this.cleanPreferences(cookieStoreId);
+      this.cleanMaps(cookieStoreId);
     });
   }
 
@@ -46,12 +49,18 @@ class ContextualIdentities {
     return this.contextualIdentities.remove(cookieStoreId);
   }
 
-  async cleanPreferences(cookieStoreId) {
+  async cleanMaps(cookieStoreId) {
     const hostMaps = await HostStorage.getAll();
     return HostStorage.remove(Object.keys(hostMaps)
         .filter(host => hostMaps[host].cookieStoreId === cookieStoreId)
     );
   }
+  async cleanPreferences(cookieStoreId) {
+    const preferences = await PreferenceStorage.getAll();
+    return PreferenceStorage.remove(Object.keys(preferences)
+        .filter(prefName => prefName.startsWith(`containers.${cookieStoreId}`))
+    );
+  }
 
   getAll(details = {}) {
     return this.contextualIdentities.query(details).then((identities) => [...identities, NO_CONTAINER]);

From f4d8a898cf6fe21be0ade2cf0553160917efe16d Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Mon, 23 Sep 2019 14:22:31 +0200
Subject: [PATCH 53/56] Get rid of leftover preferences on addon start

If there's a bug this should help mitigate storage getting filled up
---
 src/temporaryContainers.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
index e08f01f..4ef479b 100644
--- a/src/temporaryContainers.js
+++ b/src/temporaryContainers.js
@@ -56,11 +56,31 @@ export function cleanUpTemporaryContainers() {
   ]).then(([containers, preferences]) => {
     preferences = filterByKey(preferences, key => key.startsWith('containers.'));
 
-    containers.filter((container) => {
+    const cookieStoreIds = {};
+    // Get rid of existing leftover temporary containers
+    let promises = containers.filter((container) => {
+      cookieStoreIds[container.cookieStoreId] = true;
       return preferences[`containers.${container.cookieStoreId}.lifetime`] === 'untilLastTab';
-    }).forEach((container) => {
-      console.info('Removing leftover container: ', container.name);
-      ContextualIdentities.remove(container.cookieStoreId);
+    }).map((container) => {
+      console.warn('Removing leftover container: ', container.name);
+      return ContextualIdentities.remove(container.cookieStoreId);
+    });
+
+    // Get rid of leftover/orphaned container preferences
+    const leftoverPreferences = Object.keys(preferences).filter(prefName => {
+      // eslint-disable-next-line no-unused-vars
+      const [prefix, cookieStoreId, ...rest] = prefName.split('.');
+      return !cookieStoreIds[cookieStoreId];
+    });
+
+    if (leftoverPreferences.length > 0) {
+      console.warn('Removing leftover preferences', leftoverPreferences);
+      promises.push(PreferenceStorage.remove(leftoverPreferences).then(() => {
+        console.war('Removed leftover preferences');
+      }).catch(console.error));
+    }
+    return Promise.all(promises).then(() => {
+      browser.storage.get().then(console.log);
     });
   });
 }

From 926481516103ea0836911eb21be34d2d5cfe6262 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 3 Oct 2019 11:59:46 +0200
Subject: [PATCH 54/56] Improve the definition of a "leftover" temporary
 container

It is one that doesn't have any tabs anymore and should've been deleted
---
 src/temporaryContainers.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
index 4ef479b..7bd7382 100644
--- a/src/temporaryContainers.js
+++ b/src/temporaryContainers.js
@@ -52,15 +52,26 @@ export async function onTabRemoved(tabId) {
 export function cleanUpTemporaryContainers() {
   Promise.all([
     browser.contextualIdentities.query({}),
+    browser.tabs.query({}),
     PreferenceStorage.getAll(true),
-  ]).then(([containers, preferences]) => {
+  ]).then(([containers, tabs, preferences]) => {
     preferences = filterByKey(preferences, key => key.startsWith('containers.'));
 
     const cookieStoreIds = {};
+    // Containers with open tabs
+    const activeCookieStoreIds = tabs.reduce((acc, tab) => {
+      let cookieTabs = acc[tab.cookieStoreId] || [];
+      cookieTabs.push(tab);
+      acc[tab.cookieStoreId] = cookieTabs;
+      return acc;
+    }, {});
     // Get rid of existing leftover temporary containers
+    // Leftover means without open tabs
     let promises = containers.filter((container) => {
-      cookieStoreIds[container.cookieStoreId] = true;
-      return preferences[`containers.${container.cookieStoreId}.lifetime`] === 'untilLastTab';
+      const cookieStoreId = container.cookieStoreId;
+      cookieStoreIds[cookieStoreId] = true;
+      return activeCookieStoreIds[cookieStoreId] === undefined // inactive containers
+              && preferences[`containers.${cookieStoreId}.lifetime`] === 'untilLastTab';
     }).map((container) => {
       console.warn('Removing leftover container: ', container.name);
       return ContextualIdentities.remove(container.cookieStoreId);
@@ -80,7 +91,7 @@ export function cleanUpTemporaryContainers() {
       }).catch(console.error));
     }
     return Promise.all(promises).then(() => {
-      browser.storage.get().then(console.log);
+      browser.storage.local.get().then(console.debug);
     });
   });
 }

From 55704dc4b8bfd59d81e161c5309168df908d89e2 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 3 Oct 2019 12:04:57 +0200
Subject: [PATCH 55/56] npm audit fix for handlebars

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3c4be1..77b64e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6883,9 +6883,9 @@
       "dev": true
     },
     "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.4.2.tgz",
+      "integrity": "sha512-cIv17+GhL8pHHnRJzGu2wwcthL5sb8uDKBHvZ2Dtu5s1YNt0ljbzKbamnc+gr69y7bzwQiBdr5+hOpRd5pnOdg==",
       "dev": true,
       "requires": {
         "neo-async": "^2.6.0",

From 94732245e82db6a9d6268e41f960f942e14f6cd2 Mon Sep 17 00:00:00 2001
From: LoveIsGrief <loveisgrief@tuta.io>
Date: Thu, 3 Oct 2019 12:10:36 +0200
Subject: [PATCH 56/56] Correct a typo

---
 src/temporaryContainers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/temporaryContainers.js b/src/temporaryContainers.js
index 7bd7382..3a7053a 100644
--- a/src/temporaryContainers.js
+++ b/src/temporaryContainers.js
@@ -87,7 +87,7 @@ export function cleanUpTemporaryContainers() {
     if (leftoverPreferences.length > 0) {
       console.warn('Removing leftover preferences', leftoverPreferences);
       promises.push(PreferenceStorage.remove(leftoverPreferences).then(() => {
-        console.war('Removed leftover preferences');
+        console.warn('Removed leftover preferences');
       }).catch(console.error));
     }
     return Promise.all(promises).then(() => {