mozilla/multi-account-containers

Firefox Multi-Account Containers lets you keep parts of your online life separated into color-coded tabs that preserve your privacy. Cookies are separated by container, allowing you to use the web with multiple identities or accounts simultaneously.

Multi-Account Containers

The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email!

Learn more about Multi-Account Containers in our end-user documentation.

Contributing

Everyone is welcome to contribute to Multi-Account Containers. To learn how to contribute a patch to Multi-Account Container, please read our contributing guide.

You can also chat with us on our Matrix room or our forum.

This repository is governed by Mozilla's code of conduct and etiquette guidelines. For more details, please read the Mozilla Community Participation Guidelines.

License

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.

multi-account-containers's Issues

Top padding issue in onboarding

After landing: #29
It looks like there is a top padding issue (was using 51 unbranded Ubuntu 16.04 to test here).

Clear cookies/localStorage at the end of the session per-container setting

It would be nice if we could configure a container to auto-clear cookies/localStorage at the end of session. This is especially useful for the Shopping container, where travel booking websites track to give you a different price for the same trip everytime you search (national express is a good example).

Add CSS/HTML linting?

Not sure how much value it adds, but out of curiousity I already ran the code through linters already.

Since we're using CSS variables, I couldn't seem to get sass-lint, csslint or csslint-next up working... but turns out stylelint works like a champ!

.stylelintrc

extends:
  - stylelint-config-standard

ignoreFiles:
  - webextension/css/*.min.css

rules:
  declaration-block-no-duplicate-properties: true
  # declaration-block-properties-order: alphabetical

.htmllintrc

{
  "plugins": [],

  "id-class-style": "dash",
  "indent-style": "spaces",
  "indent-width": 2
}

package.json

  "devDependencies": {
    "addons-linter": "^0.15.14",
    "eslint": "^3.12.2",
    "htmllint-cli": "^0.0.5",
    "jpm": "^1.2.2",
    "stylelint": "^7.7.1",
    "stylelint-config-standard": "^15.0.1"
  },
  "scripts": {
    "lint": "npm-run-all lint:*",
    "lint:addon": "addons-linter webextension --self-hosted"
    "lint:css": "stylelint webextension/css/*.css",
    "lint:html": "htmllint webextension/*.html",
    "lint:js": "eslint ."
  }

---

Current output:

$ stylelint webextension/css/*.css

webextension/css/popup.css
  2:15  ✖  Expected "#FAFAFA" to be "#fafafa"                               color-hex-case
 15:3   ✖  Unexpected empty line before declaration                         declaration-empty-line-before
 35:12  ✖  Expected a leading zero                                          number-leading-zero
 66:15  ✖  Expected "#DCDBDC" to be "#dcdbdc"                               color-hex-case
 71:12  ✖  Expected a leading zero                                          number-leading-zero
 90:25  ✖  Expected single space after ":" with a single-line declaration   declaration-colon-space-after

Although obviously everything is super-configurable, so we can tweak CSS/HTML rules for days to the place where we're all happy with the ruleset.

Install foundation.min.css via npm?

Currently we're bundling some version of Foundation CSS framework with our code (in the repo), but I'm not sure what version it is because everything is minimized, and the only comment/version I see is normalize.css v3.0.3.

Not sure if we want to try and install foundation-sites via npm and include the code that way, or if we're happy with including their 3rd party source code in our repo and manually maintaining it and keeping it in sync if we need a newer build.

Change container tabs list from secondary pop-up to inline

We're unable to spawn secondary pop-ups in WebExtensions like this:

Instead, we need to do inline content in the same pop-up. Like the History section of the settings menu:

51 -> 52 support issues

• As we don't have custom containers support in 51 there isn't the ability to set the new containers to anything other than the standard 4 icons. I think however I have not checked we can support new containers with different names however they would be all the same icons.
• Edit containers button would have to be conditional if we can't support new containers
  • it certainly won't be able to go to about:preferences#containers as it doesn't exist.
• Long press new tab button

Implement new tab container creation menu per spec (plus menu)

hide tabs != close tabs

When we click on the hide/show image, we close all the container tabs of a kind. When we re-click that icon we show them again. This is wrong for several reasons: sessions are gone, content is reloaded, etc etc.

We should actually hide the tabs. This can be done in a interesting way: using an hidden window and swap the docShells of the tab. Then, we have to suspend media elements in that tab. This can be done setting nsIDOMWindowUtils.mediaSuspend to nsISuspendedTypes::SUSPENDED_PAUSE_DISPOSABLE.

How does Unhide behave?

Do all closed/hidden tabs get open at:

• the end of the current window
• in a new window

Follow up new tab/plus button fixes

After #51 we need:

• new tab css fix for down arrow
• icon fixes
• other changes to make it match the mockup

Implement tab color bars to match UX spec

Replace "No Container" copy with something else?

When a user right-clicks a link and chooses "Open Link in New Container Tab >", they see a "No Container" option.

Do we want to keep this copy?

Suspend all hiddent containers' network activity

When a user hides a container, suspend all the container's tabs' network activity, so they aren't leaking potentially private info in their hidden containers.

Follow up double restyle check from #50

From @bakulf

this method is meat to be called several times for the same window. We should check that this style is not done multiple time. But this can be done in separate patch.
Please add a comment before this let style ...

Follow up is to check if this is happening and fix if it is: #50

show/hide tabs algorithm is broken

STR:

1. open a personal container tab
2. open a second personal container tab.
3. hide them
4. open a third personal container tab

Now, what should I see? only 1 personal container tab o 3 ?
What should happen when I click on hide/show icon?
Should the icon be "hide" or "show"?

localStorage vs browser.storage.local

We should not use localStorage in this addon. Let's use browser.storage.local instead.

Hide current active tab in container

Need Tanvi and/or @johngruen to decide if this is the desired behavior:

When a user hides a container, be sure to hide the current active tab if it's in the container, so they fully and completely hide that container.

Error when running ESLint

Looks like we need to maybe need to add "eslint-config-nightmare-mode" as a devDep?

$ eslint .

Cannot find module 'eslint-config-nightmare-mode'
Referenced from: /Users/pdehaan/dev/github/mozilla/testpilot-containers/.eslintrc.js
Error: Cannot find module 'eslint-config-nightmare-mode'
Referenced from: /Users/pdehaan/dev/github/mozilla/testpilot-containers/.eslintrc.js
    at ModuleResolver.resolve (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/util/module-resolver.js:74:19)
    at resolve (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config/config-file.js:478:33)
    at load (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config/config-file.js:495:26)
    at configExtends.reduceRight (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config/config-file.js:391:36)
    at Array.reduceRight (native)
    at applyExtends (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config/config-file.js:362:28)
    at Object.load (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config/config-file.js:529:22)
    at loadConfig (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config.js:63:33)
    at getLocalConfig (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config.js:130:29)
    at Config.getConfig (/Users/pdehaan/dev/github/mozilla/testpilot-containers/node_modules/eslint/lib/config.js:259:26)

npm ERR! Darwin 16.3.0
npm ERR! argv "/Users/pdehaan/.nvm/versions/node/v7.4.0/bin/node" "/Users/pdehaan/.nvm/versions/node/v7.4.0/bin/npm" "run" "lint"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: `eslint .`
npm ERR! Exit status 1

Focused Container Tab on MacOS looks wrong

Learn more link in onboarding doesn't teach me more

Found in e7e4537

$ git rev-parse --short HEAD # e7e4537

Clicking the Learn more link in the popup doesn't seem to open any new tabs or show me any info.

about:preferences#privacy Also has a "Learn more" link which seems to take me to https://support.mozilla.org/en-US/kb/containers-experiment?as=u&utm_source=inproduct

What about if the user wants to create a container with an empty name?

Should we show an alert? Or we want to show a message?

Pinned tabs aren't sorted/grouped by container

Found in a6bfaab (via $ git rev-parse --short HEAD)

Steps to reproduce:

1. Git clone and run containers
2. Run the add-on using $ ./node_modules/.bin/jpm run -b Nightly
3. Go to a site (ie: https://www.nytimes.com) and open about 10-15 pages and put them in different container groups.
4. Pin a handful of the pages from different containers and make sure they're pseudo randomly sorted.
5. Sort the container groups.

Actual results:

Figure 1: Sorted tabs, but unsorted pinned tabs.
blue, green, pink, blue, blue, ..., blue, orange, green, green, green.

---

Duplicate "cookies" permissions in webextension/manifest.json

Got a couple errors when trying to run the addons-linter against the web-extension, and looks like one we got some dupe permissions. Possibly nothing and Firefox ignores the dupe, but seemed to choke the linter which I guess is converting the duplicate string values to some object or something unwelcome.

Steps to reproduce:

1. npm i addons-linter -D
2. ./node_modules/.bin/addons-linter webextension --self-hosted

Actual results:

$ ./node_modules/.bin/addons-linter webextension --self-hosted
Validation Summary:

errors          1
notices         0
warnings        0

ERRORS:

Code                      Message                  Description                                                    File            Line   Column
MANIFEST_BAD_PERMISSION   The permission type is   Permissions must be strings. If a permission is an object,     manifest.json
                          unsupported.             it's likely from a Chrome App Extension and will not work in
                                                   Firefox. See https://mzl.la/1R1n1t0 (MDN Docs) for more
                                                   information.

Diff:

diff --git a/webextension/manifest.json b/webextension/manifest.json
index 150f073..54e137d 100644
--- a/webextension/manifest.json
+++ b/webextension/manifest.json
@@ -21,8 +21,7 @@

   "permissions": [
     "cookies",
-    "tabs",
-    "cookies"
+    "tabs"
   ],

   "browser_action": {

After:

$ ./node_modules/.bin/addons-linter webextension --self-hosted
Validation Summary:

errors          0
notices         0
warnings        0

Finalize Naming for Test Pilot Experiment

Are we calling this thing containers, spaces, something else?

'Plus' icon missing from the assets?

container-add.svg is different than what invisionapp shows: it should be a gray circle with a the '+' in the center.

Default Containers: change "Banking" to "Finance"

The ones we have are probably good, but I'd like to touch base our UR team to determine what these should be.

Add Metrics Docs

Implement Containers Onboarding

https://mozilla.invisionapp.com/share/WF9INQMBM#/screens/208645244

Currently slides 3, 4, and 5.

Follow up styling the tab listing panel

Implement UI for displaying a list of tabs currently in a container

When the user clicks the name of a container in the pop-up, show the list of currently open tab titles in that container, so they can quickly see which tabs will be affected by the Show/Hide/Open actions.

NOTE: Favicons are a stretch feature.

Screenshot updated by @groovecoder on 2016-12-29 from updated InVision mockup.

Implement hide containers API functionality

Clicking the hide and show buttons in the containers drop down menu should use a web extensions (like?) API which shows and hides all of the tabs in the cookie jar we are wanting to hide.

We may want this as part of the native patches into Firefox however for now I think it makes sense to monkey patch this into the WebExtension API for this addon to use.

How is "Move Tabs to New Window" supposed to work?

Can the addon move the tabs in their current state? Or does it have to close and reopen them (losing unsaved data and history?) If the latter, is it even worth testing/experimenting with? That seems like it will break a lot of things for users.

For example, if I'm paying bills and I click on "Move Tabs to New Windows" for my banking container, closing and reopening those pages will likely cause me to be logged out of all my banks. Instead of being happy with the convenience of having all my banks lined up in one window, i'll be suffering through relogging into each of them.

Onboarding panel flickers

I guess it is because we show something and then we hide the previous panel.
This should be done differently: first, we hide the panel (maybe keeping the same panel size), then we should show the new content.
Bonus goal: maybe we can use some CSS3 animations or fade in/out :)

Implement the UX to show and hide all tabs in a container

Each container should be able to toggle itself visible or invisible from within a panel sub menu

What should we do if the popup containers menu gets too tall?

should we overflow it? scroll?

Implement Container Sort Capability

Clicking the sort button in the containers toolbar should rearrange open tabs in order of individual containers followed by non-container tabs.

Add readme

Disable history per-container setting

And possibly consider private-browsing as a container.

Add ESLint promise checking?

We may want to add eslint-plugin-promise to the .eslintrc.js file to check for promise .catch() among other things. We've seen unexpected errors in other repos.

I can PR once my other in-flight ESLint PR (#85) is merged.

diff --git a/.eslintrc.js b/.eslintrc.js
index 1c40e94..50d17e4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,12 +8,26 @@ module.exports = {
   "extends": [
     "eslint:recommended"
   ],
+  "plugins": [
+    "promise"
+  ],
   "root": true,
   "rules": {
+    "promise/always-return": "off",
+    "promise/no-return-wrap": "error",
+    "promise/param-names": "error",
+    "promise/catch-or-return": "error",
+    "promise/no-native": "off",
+    "promise/no-nesting": "warn",
+    "promise/no-promise-in-callback": "warn",
+    "promise/no-callback-in-promise": "warn",
+    "promise/avoid-new": "off",
+
     "eqeqeq": "error",
     "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "no-throw-literal": "error",
+    "no-warning-comments": "warn",
     "quotes": ["error", "double"],
     "radix": "error",
     "semi": ["error", "always"]
diff --git a/package.json b/package.json
index 441cb13..daa228e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "devDependencies": {
     "addons-linter": "^0.15.14",
     "eslint": "^3.12.2",
+    "eslint-plugin-promise": "^3.4.0",
     "jpm": "^1.2.2",
     "npm-run-all": "^4.0.0"
   },

$ npm run lint:js

> [email protected] lint:js /Users/pdehaan/dev/github/mozilla/testpilot-containers
> eslint .


/Users/pdehaan/dev/github/mozilla/testpilot-containers/index.js
  100:5  error    Expected catch() or return  promise/catch-or-return
  197:7  error    Expected catch() or return  promise/catch-or-return
  280:7  error    Expected catch() or return  promise/catch-or-return
  389:7  error    Expected catch() or return  promise/catch-or-return
  400:9  error    Expected catch() or return  promise/catch-or-return
  405:5  warning  Unexpected 'fixme' comment  no-warning-comments
  418:7  error    Expected catch() or return  promise/catch-or-return
  429:5  warning  Unexpected 'fixme' comment  no-warning-comments
  430:5  warning  Unexpected 'fixme' comment  no-warning-comments
  439:7  error    Expected catch() or return  promise/catch-or-return

/Users/pdehaan/dev/github/mozilla/testpilot-containers/webextension/js/popup.js
    8:1   warning  Unexpected 'todo' comment   no-warning-comments
   36:5   error    Expected catch() or return  promise/catch-or-return
   71:5   error    Expected catch() or return  promise/catch-or-return
  185:7   error    Expected catch() or return  promise/catch-or-return
  214:11  error    Expected catch() or return  promise/catch-or-return
  254:7   error    Expected catch() or return  promise/catch-or-return
  316:11  error    Expected catch() or return  promise/catch-or-return
  316:11  warning  Avoid nesting promises      promise/no-nesting
  411:7   error    Expected catch() or return  promise/catch-or-return
  430:5   warning  Unexpected 'fixme' comment  no-warning-comments
  449:7   error    Expected catch() or return  promise/catch-or-return

✖ 21 problems (15 errors, 6 warnings)

Add Travis or Circle CI for running tests and linting

We should probably add Travis-CI or Circle-CI for building the add-on and running lint checks and running tests on each commit so we can be sure that we aren't accidentally breaking anything.

Implement new container creation UI

File Menu -> New Container Tab

When you turn on usercontextid in about:config, the File menu gets a new entry for:
"New Container Tab"

1. Do we want that in the addon?
2. If we don't want this in the addon, is there a way for the addon to remove that File menu item?
3. If we do want this in the addon & we don't call this experiment "Containers", can we rename "Container" to something else via the addon?

This one will take product and engineering to answer.

@johngruen @groovecoder @jonathanKingston @bakulf

Implement select-on-hover container picker

Tanvi had some concerns here about spoofing this UI from web content but it seems like a very unlikely attack vector to me. ANYWAY, this UI may not be 100% final, but we should assess the feasibility first.

Implement containers management UI in toolbar widget

• it should register a toolbar icon for containers experiment
• on click, it should show a menu panel with the following:
• The experiment icon and title
• A sort button
• A list of current containers
• A button to toggle to the container editor UI

ERROR - ContextualIdentityService - Unknown version found in .../containers.json

Running this locally w/ Nightly, and saw this show up in my iTerm terminal output:

ERROR - ContextualIdentityService - Unknown version found in /var/folders/qc/g_f0szh95k1fzph34rhmf5jw0000gp/T/b45b3b02-d19d-4fb4-b019-568e00473122/containers.json

And here's a dump of my containers.json:

$ cat /var/folders/qc/g_f0szh95k1fzph34rhmf5jw0000gp/T/b45b3b02-d19d-4fb4-b019-568e00473122/containers.json | JSON
{
  "version": 2,
  "lastUserContextId": 5,
  "identities": [
    {
      "userContextId": 1,
      "public": true,
      "icon": "fingerprint",
      "color": "blue",
      "l10nID": "userContextPersonal.label",
      "accessKey": "userContextPersonal.accesskey",
      "telemetryId": 1
    },
    {
      "userContextId": 2,
      "public": true,
      "icon": "briefcase",
      "color": "orange",
      "l10nID": "userContextWork.label",
      "accessKey": "userContextWork.accesskey",
      "telemetryId": 2
    },
    {
      "userContextId": 3,
      "public": true,
      "icon": "dollar",
      "color": "green",
      "l10nID": "userContextBanking.label",
      "accessKey": "userContextBanking.accesskey",
      "telemetryId": 3
    },
    {
      "userContextId": 4,
      "public": true,
      "icon": "cart",
      "color": "pink",
      "l10nID": "userContextShopping.label",
      "accessKey": "userContextShopping.accesskey",
      "telemetryId": 4
    },
    {
      "userContextId": 5,
      "public": false,
      "icon": "",
      "color": "",
      "name": "userContextIdInternal.thumbnail",
      "accessKey": ""
    }
  ]
}

Not sure what's up with the pseudo-empty "userContextId": 5 at the end, or if that's the culprit.

Collect Final Icon Assets

Let's use this bug to track receipt of final image assets for the experiment. Based on the prototype UX we'll need the following:

• Site icon PNG files for both light and dark themes in white and #4d4d4d at 24px, 48px, 96px and 192px sizes
  All other icons should be SVG
• container sort icon
• container unhide icon
• container hide icon
• edit pencil icon
• delete container icon
• 12-16 individual container icons

Add Acceptance Criteria

Visual Polish for release in Test Pilot

"Error: this._identitiesState[identity.userContextId] is undefined" after adding custom container

Found in a6bfaab (via $ git rev-parse --short HEAD)

---

Steps to reproduce:

1. Open the container tabs doorhanger. Everything is kosher.
2. Open the container tabs doorhanger and select "Edit Containers".
3. Add a custom container (mine is named "pppp" and uses default blue fingerprint icon).
4. Open Browser Console and delete any existing logs.
5. Open the container tabs doorhanger.

Actual results:

• No containers are displayed (only heading and Edit Containers button).

• Error in Browser Console:

  Error: this._identitiesState[identity.userContextId] is undefined (unknown)

  My best (and often horribly mis-informed) guess is that this error is coming from /index.js:47:

    // Map of identities.
    ContextualIdentityService.getIdentities().forEach(identity => {
      this._identitiesState[identity.userContextId] = {
        hiddenTabUrls: [],
        openTabs: 0
      };
    });
  

---

Implement "Edit Containers" UI

And you can find the visual spec for the panels from here:
https://www.dropbox.com/sh/jczak1kfm80q334/AAAvoNwz5lrcPZn1rreRD1E_a?dl=0