Merge pull request #1654 from mozilla/UX-UI-update

UX/UI Update
2020-05-22 14:07:20 -05:00 · 2020-05-22 14:07:20 -05:00 · 8ef0a6f9f1
commit 8ef0a6f9f1
parent 532abbf032 8654aefd85
55 changed files with 1883 additions and 1110 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -46,7 +46,7 @@ module.exports = {
      "error",
      {
        "escape": {
-          "taggedTemplates": ["escaped"]
+          "taggedTemplates": ["Utils.escaped"]
        }
      }
    ],
--- a/.stylelintrc
+++ b/.stylelintrc
@ -10,6 +10,11 @@
  "rules": {
    "declaration-block-no-duplicate-properties": true,
    "order/declaration-block-properties-alphabetical-order": true,
    "property-no-unknown": [
      true, {
        ignoreProperties: 
          ["inset-block-end", "inset-block-start"]
    }],
    "property-blacklist": [
      "/(min[-]|max[-])height/",
      "/width/",
--- a/src/css/popup.css
+++ b/src/css/popup.css
@ -91,7 +91,7 @@ table {
 }
 .scrollable {
-  border-block-start: 1px solid #f1f1f1;
+  flex: 1;
  inline-size: 100%;
  max-block-size: 400px;
  overflow: auto;
@ -107,6 +107,7 @@ table {
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
  inline-size: 100%;
  mask-image: linear-gradient(to left, transparent, black 1em);
  overflow: hidden;
  white-space: nowrap;
@ -206,6 +207,10 @@ table {
  --identity-icon: url("/img/usercontext.svg#chill");
 }
 [data-identity-icon="fence"] {
  --identity-icon: url("/img/usercontext.svg#fence");
 }
 #current-tab [data-identity-icon="default-tab"] {
  background: center center no-repeat url("/img/blank-tab.svg");
  fill: currentColor;
@ -231,18 +236,6 @@ table {
  background-color: rgba(0, 0, 0, 0.05);
 }
 /* Text links with actions */
 .action-link:link {
  color: var(--primary-action-color);
  text-decoration: none;
 }
 .action-link:active,
 .action-link:hover {
  text-decoration: underline;
 }
 /* Panels keep everything together */
 .panel {
  display: flex;
@ -262,29 +255,11 @@ table {
  min-block-size: 360px;
 }
 .panel .columns {
  display: flex;
  flex: 1;
 }
 .panel-content {
  flex: 1;
  padding-block-start: 16px;
 }
 /* Column panels for edit screens */
 .column-panel-content {
  display: flex;
  flex-direction: column;
  inline-size: var(--column-panel-inline-size);
 }
 .column-panel-content .panel-footer {
  align-items: center;
  display: flex;
  justify-content: center;
 }
 .column-panel-content .button,
 .panel-footer .button {
  align-items: center;
  block-size: 100%;
@ -293,28 +268,6 @@ table {
  justify-content: center;
 }
 /* Column panels have a special back arrow */
 .panel-back-arrow {
  align-items: center;
  background: #ebebeb;
  box-shadow: inset -2px 0 4px -2px rgba(0, 0, 0, 0.4);
  display: flex;
  flex: 0 0 32px;
  flex-direction: column;
  justify-content: center;
 }
 .panel-back-arrow:hover,
 .panel-back-arrow:focus {
  background: #dedede;
 }
 .back-arrow-img {
  block-size: 16px;
  inline-size: 16px;
  transform: rotate(180deg);
 }
 /* Onboarding styles */
 .onboarding * {
  text-align: center;
@ -406,217 +359,10 @@ manage things like container crud */
  justify-content: center;
 }
-.pop-button:hover,
+.panel-footer a {
 .pop-button:focus,
 .panel-footer-secondary:focus,
 .panel-footer-secondary:hover {
  background-color: rgba(0, 0, 0, 0.05);
 }
 .pop-button:focus,
 .panel-footer-secondary:focus {
  background-color: rgba(0, 0, 0, 0.08);
 }
 .pop-button a,
 .panel-footer a,
 .panel-footer-secondary a {
  text-decoration: none;
 }
 .pop-button-image {
  block-size: 20px;
  flex: 0 0 20px;
  margin-block-end: auto;
  margin-block-start: auto;
  margin-inline-end: auto;
  margin-inline-start: auto;
 }
 .pop-button-image-small {
  block-size: 12px;
  flex: 0 0 12px;
 }
 /* Panel Header */
 .panel-header {
  align-items: center;
  block-size: 48px;
  display: flex;
  justify-content: space-between;
 }
 .panel-header .usercontext-icon {
  inline-size: var(--icon-button-size);
 }
 .column-panel-content .panel-header {
  flex: 0 0 48px;
  inline-size: 100%;
 }
 .panel-header-text {
  color: var(--text-normal-color);
  flex: 1;
  font-size: var(--font-size-heading);
  font-weight: normal;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-block-end: 16px;
  padding-block-start: 16px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
 }
 #container-panel .panel-header {
  background-color: #efefef;
  block-size: 26px;
  font-size: 14px;
 }
 #container-panel .panel-header-text {
  color: #727272;
  font-size: 14px;
  padding-block-end: 0;
  padding-block-start: 0;
  text-transform: uppercase;
 }
 .container-panel-controls {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--block-line-space-size);
  margin-block-start: var(--block-line-space-size);
  margin-inline-end: var(--inline-item-space-size);
  margin-inline-start: var(--inline-item-space-size);
 }
 #container-panel #sort-containers-link {
  align-items: center;
  block-size: var(--block-url-label-size);
  border: 1px solid #d8d8d8;
  border-radius: var(--small-radius);
  color: var(--title-text-color);
  display: flex;
  font-size: var(--small-text-size);
  inline-size: var(--inline-button-size);
  justify-content: center;
  text-decoration: none;
 }
 #container-panel #sort-containers-link:hover,
 #container-panel #sort-containers-link:focus {
  background: #f2f2f2;
 }
 span ~ .panel-header-text {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
 }
 #current-tab {
  align-items: center;
  color: var(--text-normal-color);
  display: grid;
  font-size: var(--small-text-size);
  grid-column-gap: var(--inline-item-space-size);
  grid-row-gap: var(--block-line-space-size);
  grid-template-columns: var(--icon-size) var(--icon-size) 1fr;
  margin-block-end: var(--block-line-space-size);
  margin-block-start: var(--block-line-separation-size);
  margin-inline-end: var(--inline-start-size);
  margin-inline-start: var(--inline-start-size);
  max-inline-size: 100%;
 }
 #current-tab img {
  max-block-size: var(--icon-size);
 }
 #current-tab > h3 {
  color: var(--text-heading-color);
  font-weight: normal;
  grid-column: span 3;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
 }
 #current-page {
  display: contents;
 }
 #current-tab .page-title {
  font-size: var(--font-size-heading);
  grid-column: 2 / 4;
 }
 #current-tab > label {
  display: contents;
  font-size: var(--small-text-size);
 }
 #current-tab > label > input {
  -moz-appearance: none;
  block-size: var(--icon-size);
  border: 1px solid #d8d8d8;
  border-radius: var(--small-radius);
  display: block;
  grid-column-start: 2;
  inline-size: var(--icon-size);
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
 }
 #current-tab > label > input[disabled] {
  background-color: #efefef;
 }
 #current-tab > label > input:checked {
  background-image: url("/img/check.svg");
  background-position: -1px -1px;
  background-size: var(--icon-size);
 }
 #current-container {
  color: var(--identity-tab-color);
  flex: 1;
 }
 #current-tab > label > .usercontext-icon {
  background-size: 16px;
  block-size: 16px;
  display: block;
  flex: 0 0 20px;
  inline-size: 20px;
  margin-inline-end: 3px;
  margin-inline-start: 3px;
 }
 /* Rows used when iterating over panels */
 .container-panel-row {
  align-items: center;
  background-color: #fefefe !important;
  border-block-end: 1px solid #f1f1f1;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
 }
 .container-panel-row .container-name {
  flex: 1;
  max-inline-size: 160px;
  padding-inline-end: 4px;
  padding-inline-start: 4px;
 }
 .edit-containers-panel .userContext-wrapper {
  max-inline-size: calc(var(--overflow-size) + 203px);
 }
@ -633,11 +379,6 @@ span ~ .panel-header-text {
  transition: background-color 75ms;
 }
 .container-panel-row:hover .clickable.userContext-wrapper,
 .container-panel-row:focus .clickable.userContext-wrapper {
  background: #f2f2f2;
 }
 .userContext-icon-wrapper {
  block-size: var(--icon-button-size);
  flex: 0 0 var(--icon-button-size);
@ -649,12 +390,20 @@ span ~ .panel-header-text {
  background-image: var(--identity-icon);
  background-position: center center;
  background-repeat: no-repeat;
-  background-size: 20px 20px;
+  background-size: 16px;
  block-size: 100%;
  fill: var(--identity-icon-color);
  filter: url('/img/filters.svg#fill');
 }
 .mac-icon {
  background-image: url('/img/multiaccountcontainer-16.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px;
  block-size: 100%;
 }
 .container-panel-row:hover .clickable .usercontext-icon,
 .container-panel-row:focus .clickable .usercontext-icon,
 .container-panel-row .clickable:focus .usercontext-icon {
@ -681,62 +430,6 @@ span ~ .panel-header-text {
  justify-content: space-between;
 }
 .edit-containers-text {
  align-items: center;
  block-size: 100%;
  border-inline-end: solid 1px #d8d8d8;
  display: flex;
  flex: 1;
  justify-content: center;
 }
 .edit-containers-text a {
  align-items: center;
  block-size: 100%;
  color: #0a0a0a;
  display: flex;
  flex: 1;
  justify-content: center;
 }
 /* Container info list */
 .container-info-tab-title {
  display: flex;
 }
 .container-info-tab-row:hover .container-info-tab-title .truncate-text {
  inline-size: calc(var(--column-panel-inline-size) - 58px);
 }
 #container-info-hideorshow {
  margin-block-start: 4px;
 }
 #container-info-movetabs-incompat {
  font-size: 10px;
  opacity: 0.3;
 }
 .container-info-tab-row:not(.clickable),
 .select-row:not(.clickable) {
  opacity: 0.3;
 }
 .container-close-tab {
  transform: scale(0.7);
  visibility: collapse;
 }
 .container-info-tab-row:hover .container-close-tab {
  opacity: 0.5;
  visibility: visible;
 }
 .container-info-tab-row .container-close-tab:hover {
  opacity: 1;
  visibility: visible;
 }
 .container-info-has-tabs,
 .container-info-tab-row {
  align-items: center;
@ -763,51 +456,6 @@ span ~ .panel-header-text {
  margin-inline-end: 0;
 }
 .container-info-list {
  display: flex;
  flex-direction: column;
  margin-block-start: 4px;
  padding-block-start: 4px;
 }
 .container-info-list tbody {
  display: contents;
 }
 .clickable {
  cursor: pointer;
 }
 .clickable:hover,
 .clickable:focus {
  background-color: #ebebeb;
 }
 .edit-containers-exit-text {
  align-items: center;
  background: var(--primary-action-color);
  block-size: 100%;
  color: #fff;
  display: inline-block;
  justify-content: center;
  padding-block-start: 6px;
  padding-inline-start: 30%;
 }
 .edit-containers-panel-footer {
  background: var(--primary-action-color);
 }
 .exit-edit-mode-link img {
  block-size: 16px;
  display: inline;
  filter: grayscale(100%) brightness(5);
  inline-size: 16px;
  margin-inline-end: 5px;
  transform: scaleX(-1);
  vertical-align: bottom;
 }
 .delete-container-confirm {
  padding-inline-end: 20px;
  padding-inline-start: 20px;
@ -818,23 +466,6 @@ span ~ .panel-header-text {
  font-size: var(--font-size-heading);
 }
 /* Form info */
 .column-panel-content form {
  flex: 1;
  padding-block-end: 16px;
  padding-block-start: 16px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
 }
 .edit-container-panel .columns {
  overflow: hidden; /* Bugfix: issue 948 */
 }
 #edit-sites-assigned {
  flex: 1000; /* Bugfix: issue 948 */
 }
 #edit-sites-assigned h3 {
  font-size: 14px;
  font-weight: normal;
@ -854,21 +485,13 @@ span ~ .panel-header-text {
  margin-inline-end: 10px;
 }
 .assigned-sites-list > div > .delete-assignment {
  display: none;
 }
 .assigned-sites-list > div:hover > .delete-assignment {
  display: block;
 }
 .assigned-sites-list > div > .hostname {
  flex: 1;
 }
 .radio-choice > .radio-container {
  align-items: center;
-  block-size: 29px;
+  block-size: 25px;
  display: flex;
  flex: 0 0 calc(100% / var(--icon-fit));
 }
@ -928,7 +551,7 @@ span ~ .panel-header-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
-  inline-size: 100%;
+  inline-size: 80%;
  margin-block-end: 10px;
  margin-inline-end: 0;
  margin-inline-start: 0;
@ -953,10 +576,17 @@ span ~ .panel-header-text {
  padding-inline-start: 5px;
 }
-.edit-container-panel legend {
+.edit-container-panel legend,
 .options-header {
  flex: 1 0;
  font-size: 14px !important;
-  padding-block-end: 6px;
+  margin-block-end: 4px;
  margin-block-start: -6px;
 }
 .options-header {
  margin-block-end: 8px;
  margin-block-start: 6px;
 }
 /* Achievement panel elements */
@ -1008,3 +638,270 @@ span ~ .panel-header-text {
 .amo-rate-cta {
  background: #0f1126;
 }
 body {
  color: #000;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  inline-size: 320px;
  letter-spacing: -0.1px;
  --highlight-blue: #1296f8;
  --hr-grey: #e3e3e3;
  --text-grey: #737373;
 }
 h3.title {
  block-size: 40px;
  color: #000;
  font-size: 13px;
  font-weight: bold;
  inline-size: 100%;
  letter-spacing: -0.1px;
  line-height: 40px;
  text-align: center;
 }
 .menu {
  border-style: none;
  inline-size: 100%;
 }
 .menu-item {
  cursor: pointer;
  height: 24px;
  inline-size: 100%;
  line-height: 24px;
 }
 .disabled-menu-item {
  color: grey;
  cursor: default;
  font-style: italic;
 }
 .hover-highlight:hover,
 .hover-highlight:focus {
  background: var(--highlight-blue);
  color: #fff;
 }
 .menu-text {
  line-height: 24px;
 }
 .menu-icon {
  display: block;
  float: left;
  height: 16px;
  inline-size: 16px;
  margin-block-end: 4px;
  margin-block-start: 4px;
  margin-inline-end: 8px;
  margin-inline-start: 16px;
  text-align: center;
 }
 .menu-right-float {
  display: inline-block;
  float: right;
  height: 24px;
  inline-size: 60px;
  text-align: right;
 }
 .container-count {
  opacity: 0.6;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 6px;
  padding-inline-start: 0;
  text-align: right;
 }
 .menu-arrow {
  display: inline-block;
  float: right;
  height: 24px;
  inline-size: 18px;
  padding-block-end: 6px;
  padding-block-start: 6px;
  padding-inline-end: 12px;
  padding-inline-start: 0;
  text-align: center;
 }
 .menu-arrow img {
  height: 12px;
  inline-size: 12px;
  padding-block-end: 2px;
  padding-block-start: 2px;
  padding-inline-end: 2px;
  padding-inline-start: 2px;
 }
 hr {
  border: 0;
  border-block-start: 1px solid var(--hr-grey);
  display: block;
  margin-block-end: 0;
  margin-block-start: 6px;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-block-end: 6px;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
 }
 .sub-header {
  color: var(--text-grey);
  height: 24px;
  line-height: 24px;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
 }
 .edit-form {
  color: var(--text-grey);
  flex: 1;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
 }
 .identities-list {
  margin-block-end: 41px;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
 }
 .bottom-btn {
  background-color: var(--hr-grey);
  border: solid 1px #d9d9d9;
  cursor: pointer;
  height: 41px;
  inline-size: 100%;
  inset-block-end: 0;
  line-height: 41px;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
  position: fixed;
 }
 .delete-container {
  background-color: #fff;
  border-block-start: solid 1px var(--hr-grey);
  cursor: default;
  display: flex;
  height: 65px;
  inline-size: 100%;
  justify-content: space-between;
  padding-block-end: 27px;
  padding-block-start: 9px;
  padding-inline-end: 18px;
  padding-inline-start: 17px;
 }
 .delete-btn {
  background-color: rgba(12, 12, 13, 0.1);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  height: 30px;
  inline-size: 100%;
  line-height: 30px;
  text-align: center;
 }
 .btn-return.arrow-left {
  background-color: rgba(255, 255, 255, 1);
  background-image: url("/img/arrow-icon-left.svg");
  border: 0;
  cursor: pointer;
  height: 1.2rem;
  inline-size: 1.2rem;
  inset-block-start: 15px;
  left: 15px;
  position: absolute;
 }
 input {
  border: solid 1px #bebebe;
  border-radius: 2px;
 }
 .form-header {
  height: 23px;
  line-height: 23px;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
 }
 .edit-container-panel-name-input {
  height: 29px;
 }
 .container-options {
  height: 23px;
 }
 .site-isolation {
  inset-block-end: auto;
  position: fixed;
 }
 .options-label {
  cursor: pointer;
  padding-inline-start: 25px;
 }
 .manage-assigned-sites-list {
  color: var(--highlight-blue);
 }
 .info-icon {
  cursor: pointer;
  height: 16px;
  inline-size: 16px;
  inset-block-start: 13px;
  position: absolute;
  right: 13px;
  text-align: center;
  text-decoration: none;
 }
 .delete-warning {
  padding-block-end: 8px;
  padding-block-start: 8px;
  padding-inline-end: 0;
  padding-inline-start: 0;
 }
 .trash-button {
  display: inline-block;
  float: right;
  height: 16px;
  inline-size: 16px;
  margin-block-end: 4px;
  margin-block-start: 4px;
  margin-inline-end: 10px;
  margin-inline-start: 0;
  text-align: center;
 }
 tr > td > .trash-button {
  display: none;
 }
 tr:hover > td > .trash-button {
  display: block;
 }
--- a/src/img/Account.svg
+++ b/src/img/Account.svg
@ -1 +1,3 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#6a57a5;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#e7dfff;}</style></defs><title>account</title><path class="cls-1" d="M110,138.89A58.89,58.89,0,1,1,168.89,80,59,59,0,0,1,110,138.89Z"/><path class="cls-2" d="M110,130.27A50.27,50.27,0,1,1,160.27,80,50.33,50.33,0,0,1,110,130.27Z"/><circle class="cls-3" cx="110.39" cy="65.12" r="23.27" transform="translate(-12.01 27.1) rotate(-13.28)"/><path class="cls-3" d="M141.78,92.87c-8.2-9.46-19.58,3.28-31.39,3.28S87.2,83.41,79,92.87a7.83,7.83,0,0,0-.53,9.53,38.43,38.43,0,0,0,63.83,0A7.83,7.83,0,0,0,141.78,92.87Z"/></svg>
+<!-- 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 http://mozilla.org/MPL/2.0/. --><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#6a57a5;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#e7dfff;}</style></defs><title>account</title><path class="cls-1" d="M110,138.89A58.89,58.89,0,1,1,168.89,80,59,59,0,0,1,110,138.89Z"/><path class="cls-2" d="M110,130.27A50.27,50.27,0,1,1,160.27,80,50.33,50.33,0,0,1,110,130.27Z"/><circle class="cls-3" cx="110.39" cy="65.12" r="23.27" transform="translate(-12.01 27.1) rotate(-13.28)"/><path class="cls-3" d="M141.78,92.87c-8.2-9.46-19.58,3.28-31.39,3.28S87.2,83.41,79,92.87a7.83,7.83,0,0,0-.53,9.53,38.43,38.43,0,0,0,63.83,0A7.83,7.83,0,0,0,141.78,92.87Z"/></svg>
--- a/src/img/Sync.svg
+++ b/src/img/Sync.svg
@ -1 +1,3 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#9f9fad;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#6a57a5;}.cls-4{fill:#8f8f9d;}.cls-5{fill:none;stroke:#80808e;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;}.cls-6{fill:#231f20;opacity:0.4;}.cls-7{fill:#ee3389;}.cls-8{fill:#7661aa;}</style></defs><title>Sync</title><path class="cls-1" d="M119.16,122.69v4.81H19.76v-4.81l12.83-3.21h72.15Z"/><rect class="cls-1" x="24.57" y="55.35" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M79.08,65l-49.7,49.7a1.61,1.61,0,0,0,1.6,1.61h77a1.62,1.62,0,0,0,1.61-1.61V65Z"/><polygon class="cls-3" points="29.38 64.97 29.38 114.67 79.08 64.97 29.38 64.97"/><path class="cls-2" d="M107.94,60.16H31a1.6,1.6,0,0,0-1.6,1.6V65h80.17V61.76A1.61,1.61,0,0,0,107.94,60.16Z"/><path class="cls-4" d="M108.74,121.09H30.18a.81.81,0,0,1,0-1.61h78.56a.81.81,0,1,1,0,1.61Z"/><line class="cls-5" x1="63.61" y1="124.18" x2="74.83" y2="124.18"/><path class="cls-6" d="M114.35,127.35H102.2V71.64a5.53,5.53,0,0,1,5.52-5.53h6.63Z"/><path class="cls-1" d="M200.24,134.72v4.81h-99.4v-4.81l12.82-3.21h72.15Z"/><rect class="cls-1" x="105.65" y="67.38" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M160.16,77l-49.71,49.7a1.61,1.61,0,0,0,1.61,1.6h77a1.6,1.6,0,0,0,1.6-1.6V77Z"/><polygon class="cls-3" points="110.45 77 110.45 126.7 160.16 77 110.45 77"/><path class="cls-2" d="M189,72.19h-77a1.61,1.61,0,0,0-1.61,1.6V77h80.17V73.79A1.6,1.6,0,0,0,189,72.19Z"/><path class="cls-4" d="M189.82,133.11H111.26a.8.8,0,1,1,0-1.6h78.56a.8.8,0,0,1,0,1.6Z"/><line class="cls-5" x1="144.69" y1="136.2" x2="155.91" y2="136.2"/><path class="cls-7" d="M136.85,50l-3-.55a3,3,0,0,0-3.51,2.37l-.27,1.45c-1.59,8.36-9.86,14.42-19.66,14.42a21,21,0,0,1-15.93-6.89H103a3,3,0,0,0,3-3v-3a3,3,0,0,0-3-3H84.86a3,3,0,0,0-3,3V73.64a3,3,0,0,0,3,3h3a3,3,0,0,0,3-3V69.72a30.8,30.8,0,0,0,19.57,6.87c14.15,0,26.15-9.11,28.54-21.66l.27-1.45A2.94,2.94,0,0,0,136.85,50Z"/><path class="cls-8" d="M84.06,47l3,.54a3.41,3.41,0,0,0,.55,0,3,3,0,0,0,3-2.41l.27-1.45h0c1.59-8.36,9.86-14.42,19.65-14.42a21,21,0,0,1,15.94,6.89H117.9a3,3,0,0,0-3,3v3a3,3,0,0,0,3,3h18.15a3,3,0,0,0,3-3V23.43a3,3,0,0,0-3-3h-3a3,3,0,0,0-3,3v3.92a30.82,30.82,0,0,0-19.58-6.88c-14.14,0-26.14,9.11-28.53,21.67l-.27,1.45A3,3,0,0,0,84.06,47Z"/></svg>
+<!-- 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 http://mozilla.org/MPL/2.0/. --><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><defs><style>.cls-1{fill:#9f9fad;}.cls-2{fill:#5a4a9e;}.cls-3{fill:#6a57a5;}.cls-4{fill:#8f8f9d;}.cls-5{fill:none;stroke:#80808e;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;}.cls-6{fill:#231f20;opacity:0.4;}.cls-7{fill:#ee3389;}.cls-8{fill:#7661aa;}</style></defs><title>Sync</title><path class="cls-1" d="M119.16,122.69v4.81H19.76v-4.81l12.83-3.21h72.15Z"/><rect class="cls-1" x="24.57" y="55.35" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M79.08,65l-49.7,49.7a1.61,1.61,0,0,0,1.6,1.61h77a1.62,1.62,0,0,0,1.61-1.61V65Z"/><polygon class="cls-3" points="29.38 64.97 29.38 114.67 79.08 64.97 29.38 64.97"/><path class="cls-2" d="M107.94,60.16H31a1.6,1.6,0,0,0-1.6,1.6V65h80.17V61.76A1.61,1.61,0,0,0,107.94,60.16Z"/><path class="cls-4" d="M108.74,121.09H30.18a.81.81,0,0,1,0-1.61h78.56a.81.81,0,1,1,0,1.61Z"/><line class="cls-5" x1="63.61" y1="124.18" x2="74.83" y2="124.18"/><path class="cls-6" d="M114.35,127.35H102.2V71.64a5.53,5.53,0,0,1,5.52-5.53h6.63Z"/><path class="cls-1" d="M200.24,134.72v4.81h-99.4v-4.81l12.82-3.21h72.15Z"/><rect class="cls-1" x="105.65" y="67.38" width="89.79" height="67.34" rx="3"/><path class="cls-2" d="M160.16,77l-49.71,49.7a1.61,1.61,0,0,0,1.61,1.6h77a1.6,1.6,0,0,0,1.6-1.6V77Z"/><polygon class="cls-3" points="110.45 77 110.45 126.7 160.16 77 110.45 77"/><path class="cls-2" d="M189,72.19h-77a1.61,1.61,0,0,0-1.61,1.6V77h80.17V73.79A1.6,1.6,0,0,0,189,72.19Z"/><path class="cls-4" d="M189.82,133.11H111.26a.8.8,0,1,1,0-1.6h78.56a.8.8,0,0,1,0,1.6Z"/><line class="cls-5" x1="144.69" y1="136.2" x2="155.91" y2="136.2"/><path class="cls-7" d="M136.85,50l-3-.55a3,3,0,0,0-3.51,2.37l-.27,1.45c-1.59,8.36-9.86,14.42-19.66,14.42a21,21,0,0,1-15.93-6.89H103a3,3,0,0,0,3-3v-3a3,3,0,0,0-3-3H84.86a3,3,0,0,0-3,3V73.64a3,3,0,0,0,3,3h3a3,3,0,0,0,3-3V69.72a30.8,30.8,0,0,0,19.57,6.87c14.15,0,26.15-9.11,28.54-21.66l.27-1.45A2.94,2.94,0,0,0,136.85,50Z"/><path class="cls-8" d="M84.06,47l3,.54a3.41,3.41,0,0,0,.55,0,3,3,0,0,0,3-2.41l.27-1.45h0c1.59-8.36,9.86-14.42,19.65-14.42a21,21,0,0,1,15.94,6.89H117.9a3,3,0,0,0-3,3v3a3,3,0,0,0,3,3h18.15a3,3,0,0,0,3-3V23.43a3,3,0,0,0-3-3h-3a3,3,0,0,0-3,3v3.92a30.82,30.82,0,0,0-19.58-6.88c-14.14,0-26.14,9.11-28.53,21.67l-.27,1.45A3,3,0,0,0,84.06,47Z"/></svg>
--- a/src/img/amo-icon.svg
+++ b/src/img/amo-icon.svg
@ -1 +1,3 @@
-<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <linearGradient x1="74.0423237%" y1="18.5882821%" x2="0%" y2="100%" id="linearGradient-1"> <stop stop-color="#00FEFF" offset="0%"/> <stop stop-color="#3D85FF" offset="100%"/> </linearGradient> </defs> <g id="Specs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Copy" transform="translate(-182.000000, -152.000000)" fill="url(#linearGradient-1)"> <path d="M205.58574,176.859518 L205.58574,169.287998 C205.58574,169.287998 205.800116,167.315137 207.086372,167.315137 C208.372629,167.315137 208.265441,169.394639 210.677171,169.394639 C211.909834,169.394639 214,168.754792 214,165.022352 C214,161.289912 211.909834,160.810027 210.677171,160.810027 C208.265441,160.810027 208.372629,162.782888 207.086372,162.782888 C205.800116,162.782888 205.58574,160.756707 205.58574,160.756707 L205.58574,157.664114 C205.58574,156.491061 204.621048,155.531291 203.44198,155.531291 L197.814608,155.531291 C197.814608,155.531291 195.992412,155.211368 195.992412,153.931674 C195.992412,152.65198 198.028985,152.545339 198.028985,150.145914 C198.028985,148.91954 197.332262,147 193.580682,147 C189.829101,147 189.293161,148.91954 189.293161,150.145914 C189.293161,152.545339 191.115357,152.65198 191.115357,153.931674 C191.115357,155.211368 189.293161,155.531291 189.293161,155.531291 L184.148135,155.531291 C182.969067,155.531291 182.004375,156.491061 182.004375,157.664114 L182.004375,161.823118 C182.004375,161.823118 181.789999,165.022352 184.362512,165.022352 C186.023926,165.022352 186.07752,162.836209 188.274874,162.836209 C189.346755,162.836209 190.418635,163.8493 190.418635,166.035443 C190.418635,168.274907 189.346755,169.394639 188.274874,169.394639 C186.131114,169.394639 186.023926,167.208496 184.362512,167.208496 C181.789999,167.208496 182.004375,170.301089 182.004375,170.301089 L182.004375,176.859518 C182.004375,178.032571 182.969067,178.992341 184.148135,178.992341 L191.115357,178.992341 C191.115357,178.992341 194.49178,179.205623 194.49178,176.646236 C194.49178,174.993299 192.348019,174.726696 192.348019,172.540552 C192.348019,171.474141 193.527088,170.141127 195.778036,170.141127 C198.028985,170.141127 199.315241,171.474141 199.315241,172.540552 C199.315241,174.673375 197.225074,174.993299 197.225074,176.646236 C197.225074,179.258944 200.601497,178.992341 200.601497,178.992341 L203.44198,178.992341 C204.621048,178.992341 205.58574,178.032571 205.58574,176.859518 Z" id="Shape-Copy-23" transform="translate(198.000000, 163.000000) rotate(-42.000000) translate(-198.000000, -163.000000) "/> </g> </g> </svg>
+<!-- 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 http://mozilla.org/MPL/2.0/. --><svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <desc>Created with Sketch.</desc> <defs> <linearGradient x1="74.0423237%" y1="18.5882821%" x2="0%" y2="100%" id="linearGradient-1"> <stop stop-color="#00FEFF" offset="0%"/> <stop stop-color="#3D85FF" offset="100%"/> </linearGradient> </defs> <g id="Specs" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Header-Copy" transform="translate(-182.000000, -152.000000)" fill="url(#linearGradient-1)"> <path d="M205.58574,176.859518 L205.58574,169.287998 C205.58574,169.287998 205.800116,167.315137 207.086372,167.315137 C208.372629,167.315137 208.265441,169.394639 210.677171,169.394639 C211.909834,169.394639 214,168.754792 214,165.022352 C214,161.289912 211.909834,160.810027 210.677171,160.810027 C208.265441,160.810027 208.372629,162.782888 207.086372,162.782888 C205.800116,162.782888 205.58574,160.756707 205.58574,160.756707 L205.58574,157.664114 C205.58574,156.491061 204.621048,155.531291 203.44198,155.531291 L197.814608,155.531291 C197.814608,155.531291 195.992412,155.211368 195.992412,153.931674 C195.992412,152.65198 198.028985,152.545339 198.028985,150.145914 C198.028985,148.91954 197.332262,147 193.580682,147 C189.829101,147 189.293161,148.91954 189.293161,150.145914 C189.293161,152.545339 191.115357,152.65198 191.115357,153.931674 C191.115357,155.211368 189.293161,155.531291 189.293161,155.531291 L184.148135,155.531291 C182.969067,155.531291 182.004375,156.491061 182.004375,157.664114 L182.004375,161.823118 C182.004375,161.823118 181.789999,165.022352 184.362512,165.022352 C186.023926,165.022352 186.07752,162.836209 188.274874,162.836209 C189.346755,162.836209 190.418635,163.8493 190.418635,166.035443 C190.418635,168.274907 189.346755,169.394639 188.274874,169.394639 C186.131114,169.394639 186.023926,167.208496 184.362512,167.208496 C181.789999,167.208496 182.004375,170.301089 182.004375,170.301089 L182.004375,176.859518 C182.004375,178.032571 182.969067,178.992341 184.148135,178.992341 L191.115357,178.992341 C191.115357,178.992341 194.49178,179.205623 194.49178,176.646236 C194.49178,174.993299 192.348019,174.726696 192.348019,172.540552 C192.348019,171.474141 193.527088,170.141127 195.778036,170.141127 C198.028985,170.141127 199.315241,171.474141 199.315241,172.540552 C199.315241,174.673375 197.225074,174.993299 197.225074,176.646236 C197.225074,179.258944 200.601497,178.992341 200.601497,178.992341 L203.44198,178.992341 C204.621048,178.992341 205.58574,178.032571 205.58574,176.859518 Z" id="Shape-Copy-23" transform="translate(198.000000, 163.000000) rotate(-42.000000) translate(-198.000000, -163.000000) "/> </g> </g> </svg>
--- a/src/img/arrow-icon-left.svg
+++ b/src/img/arrow-icon-left.svg
@ -0,0 +1,3 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. --><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path></svg>
--- a/src/img/arrow-icon-right.svg
+++ b/src/img/arrow-icon-right.svg
@ -0,0 +1,24 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg width="5px" height="8px" viewBox="0 0 5 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
    <title>Arrow</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M5.00090934,9.5006316 C4.79840046,9.50099392 4.61567086,9.37916873 4.53812503,9.19209489 C4.4605792,9.00502105 4.5035325,8.78964579 4.64690934,8.6466316 L7.29490934,6.0006316 L4.64690934,3.3546316 C4.45140054,3.1591228 4.45140054,2.8421404 4.64690934,2.6466316 C4.84241814,2.4511228 5.15940054,2.4511228 5.35490934,2.6466316 L8.35490934,5.6466316 C8.44895104,5.74043586 8.50180313,5.86780434 8.50180313,6.0006316 C8.50180313,6.13345886 8.44895104,6.26082734 8.35490934,6.3546316 L5.35490934,9.3546316 C5.26095861,9.44834555 5.13360821,9.5008686 5.00090934,9.5006316 Z" id="path-1"></path>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.6">
        <g id="Icons-/-12-/-Arrowhead-Right-12---Thin" transform="translate(-4.000000, -2.000000)">
            <rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <g id="Shape" fill-rule="nonzero"></g>
            <g id="Color-/-Photon-/-Primary---Grey-90-80%" mask="url(#mask-2)" fill="#0C0C0D" fill-opacity="0.8" fill-rule="evenodd">
                <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
            </g>
        </g>
    </g>
 </svg>
--- a/src/img/blank-tab.svg
+++ b/src/img/blank-tab.svg
@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+<!-- 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 http://mozilla.org/MPL/2.0/. --><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
  <path d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z" fill="white"/>
 </svg>
--- a/src/img/container-add.svg
+++ b/src/img/container-add.svg
@ -1,13 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 11 11" style="enable-background:new 0 0 11 11;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#858585;}
 </style>
 <title>firefox</title>
 <g id="General-icons">
 	<polygon class="st0" points="10.8,4.4 6.4,4.4 6.4,0.2 4.6,0.2 4.6,4.4 0.2,4.4 0.2,6.4 4.6,6.4 4.6,10.8 6.4,10.8 6.4,6.4 
 		10.8,6.4 	"/>
 </g>
 </svg>
--- a/src/img/container-arrow.svg
+++ b/src/img/container-arrow.svg
@ -1,9 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 6 8" style="enable-background:new 0 0 6 8;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#4C4C4C;}
 </style>
 <polygon id="Arrow---Disclosure---Collapsed-Copy" class="st0" points="5.5,4 1.5,7.7 0.5,6.8 3.5,4 0.5,1.2 1.5,0.3 "/>
 </svg>
--- a/src/img/container-close-tab.svg
+++ b/src/img/container-close-tab.svg
@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
-	<polygon fill="#4c4c4c" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. --><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7">
 	<polygon fill="#FFFFFF" points="5.8,0 3.5,2.4 1.2,0 0,1.2 2.4,3.5 0.1,5.8 1.2,7 3.5,4.7 5.8,7 7,5.8 4.7,3.5 7,1.2"/>
 </svg>
--- a/src/img/container-delete.svg
+++ b/src/img/container-delete.svg
@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- 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 http://mozilla.org/MPL/2.0/. --><!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#858585;}
+	.st0{fill:#FFFFFF;}
 </style>
 <path class="st0" d="M4.6,0.3h2.7c0.1,0,0.2,0.1,0.2,0.2v1H4.4v-1C4.4,0.4,4.5,0.3,4.6,0.3z M1.7,1.5h8.6c0.1,0,0.2,0.1,0.2,0.2
 	l0.2,1.4H1.3l0.2-1.4C1.5,1.6,1.6,1.5,1.7,1.5z M6,11.7H3.2L2.1,3.9H6h3.9l-1.1,7.8H6L6,11.7z"/>
--- a/src/img/container-edit.svg
+++ b/src/img/container-edit.svg
@ -1,12 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#858585;}
 </style>
 <g>
 	<path class="st0" d="M11.4,2.6L9.6,0.9c-0.1-0.1-0.2-0.1-0.3,0l-7,7l2,2l7-7C11.4,2.8,11.4,2.7,11.4,2.6z"/>
 	<path class="st0" d="M0.8,10.9c-0.1,0.3,0,0.4,0.4,0.4l2.3-0.6l-2-2L0.8,10.9z"/>
 </g>
 </svg>
--- a/src/img/container-hide.svg
+++ b/src/img/container-hide.svg
@ -1,19 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#858585;}
 </style>
 <polygon class="st0" points="10.3,0.5 8.9,2 2,8.9 0.5,10.3 1.3,11.1 11.1,1.3 "/>
 <g>
 	<path class="st0" d="M4.8,7.5l2.8-2.8C7.2,4.3,6.7,4,6.1,4c-1.1,0-2,0.9-2,2C4.1,6.6,4.4,7.1,4.8,7.5z"/>
 	<path class="st0" d="M5.9,7.9c0,0,0.1,0,0.2,0c1.1,0,2-0.9,2-2c0,0,0-0.1,0-0.2L5.9,7.9z"/>
 </g>
 <g>
 	<path class="st0" d="M4.1,8.2C2.6,7.4,1.3,6.1,1.2,6C1.3,5.8,3.8,3.1,6,3.1c0.8,0,1.6,0.4,2.4,0.8L9,3.3C8.1,2.7,7,2.2,6,2.2
 		c-2.6,0-5.4,2.9-5.5,3.1C0.3,5.6,0.2,5.7,0.2,6v0c0,0.2,0.1,0.4,0.2,0.6c0.1,0.1,1.3,1.4,2.9,2.3L4.1,8.2z"/>
 	<path class="st0" d="M9.9,3.9L9.2,4.5c0.9,0.7,1.5,1.3,1.6,1.4C10.6,6.2,8.1,8.8,6,8.8c-0.3,0-0.6,0-0.9-0.1L4.4,9.4
 		C4.9,9.6,5.5,9.7,6,9.7c2.6,0,5.4-2.9,5.5-3.1c0.2-0.2,0.2-0.4,0.2-0.6v0c0-0.2,0-0.4-0.2-0.6C11.4,5.3,10.8,4.6,9.9,3.9z"/>
 </g>
 </svg>
--- a/src/img/container-newtab.svg
+++ b/src/img/container-newtab.svg
@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
--- a/src/img/container-openin-16.svg
+++ b/src/img/container-openin-16.svg
@ -0,0 +1,9 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <rect x="1" y="1" width="6" height="6" rx="1"/>
  <rect x="1" y="9" width="6" height="6" rx="1"/>
  <rect x="9" y="9" width="6" height="6" rx="1"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.92 1.62a1 1 0 0 0-0.54-0.54A1 1 0 0 0 14 1h-4a1 1 0 0 0 0 2h1.59l-2.3 2.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0L13 4.41V6a1 1 0 0 0 2 0V2a1 1 0 0 0-0.08-0.38z"/>
 </svg>
--- a/src/img/container-site-d-192.png
+++ b/src/img/container-site-d-192.png
--- a/src/img/container-site-light.svg
+++ b/src/img/container-site-light.svg
@ -1 +0,0 @@
 <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="rgba(249, 249, 250, 0.8)" fill-rule="evenodd"><rect height="6" rx="1" width="6" x="1" y="1"/><path d="m11 1h2v6h-2z" transform="matrix(0 1 -1 0 16 -8)"/><path d="m11 1h2v6h-2z"/><rect height="6" rx="1" width="6" x="1" y="9"/><rect height="6" rx="1" width="6" x="9" y="9"/></g></svg>
--- a/src/img/container-site-w-192.png
+++ b/src/img/container-site-w-192.png
--- a/src/img/container-site-w-24.png
+++ b/src/img/container-site-w-24.png
--- a/src/img/container-site-w-48.png
+++ b/src/img/container-site-w-48.png
--- a/src/img/container-site-w-96.png
+++ b/src/img/container-site-w-96.png
--- a/src/img/container-site.svg
+++ b/src/img/container-site.svg
@ -1 +0,0 @@
 <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="rgba(12, 12, 13, 0.8)" fill-rule="evenodd"><rect height="6" rx="1" width="6" x="1" y="1"/><path d="m11 1h2v6h-2z" transform="matrix(0 1 -1 0 16 -8)"/><path d="m11 1h2v6h-2z"/><rect height="6" rx="1" width="6" x="1" y="9"/><rect height="6" rx="1" width="6" x="9" y="9"/></g></svg>
--- a/src/img/container-sort.svg
+++ b/src/img/container-sort.svg
@ -1,17 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#858585;}
 	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#858585;}
 </style>
 <path class="st0" d="M11.9,7.9c-1.2,0-1.5-0.8-1.8-2.4C10,4.4,9.8,2.5,8,2.5H4.6c-1.8,0-2,1.9-2.1,2.9C2.2,7.1,1.9,7.9,0.7,7.9v1.9
 	h11.2h5.4V7.9H11.9z"/>
 <path class="st0" d="M16,5.7c-0.1-1-0.3-2.9-2.1-2.9c0,0-3.8,0-3.9,0c-0.1,0-0.1,0.2-0.1,0.2c1.1,0.5,1.3,1.9,1.4,2.7
 	c0.1,1.1,0.3,1.5,0.8,1.5c0.1,0,4.1,0,4.1,0s0.1,0,0.1-0.1C16.2,6.6,16.1,6.2,16,5.7z"/>
 <path class="st1" d="M8,12.1H3.7v-1.2c0-0.3-0.2-0.4-0.5-0.2l-2.2,1.9c-0.3,0.2-0.3,0.6,0,0.9l2.2,1.9c0.3,0.2,0.5,0.2,0.5-0.2v-1.2
 	H8V12.1z"/>
 <path class="st1" d="M17.1,12.6l-2.2-1.9c-0.3-0.2-0.5-0.2-0.5,0.2v1.2H10v1.9h4.3v1.2c0,0.3,0.2,0.4,0.5,0.2l2.2-1.9
 	C17.4,13.2,17.4,12.8,17.1,12.6z"/>
 </svg>
--- a/src/img/container-unhide.svg
+++ b/src/img/container-unhide.svg
@ -1,12 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#858585;}
 </style>
 <circle class="st0" cx="6" cy="6" r="2"/>
 <path class="st0" d="M11.5,5.4C11.4,5.2,8.6,2.3,6,2.3s-5.4,3-5.5,3.1C0.3,5.6,0.2,5.8,0.2,6v0c0,0.2,0.1,0.4,0.2,0.6
 	C0.6,6.8,3.4,9.8,6,9.8s5.4-3,5.5-3.1c0.2-0.2,0.2-0.4,0.2-0.6v0C11.7,5.8,11.7,5.6,11.5,5.4z M10.8,6C10.6,6.2,8.1,8.9,6,8.9
 	S1.3,6.2,1.1,6l0,0C1.3,5.8,3.8,3.1,6,3.1S10.6,5.8,10.8,6L10.8,6z"/>
 </svg>
--- a/src/img/info-thin-16.svg
+++ b/src/img/info-thin-16.svg
@ -0,0 +1,13 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg id="Flat_For_Export_" data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <defs>
    <style>
      .cls-1{fill-rule:evenodd}
    </style>
  </defs>
  <path fill="context-fill" fill-opacity="context-fill-opacity" class="cls-1" d="M8 1a7 7 0 1 0 7 7 7 7 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" class="cls-1" d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/>
  <circle cx="8" cy="5" r="1.19"/>
 </svg>
--- a/src/img/movetowindow-16.svg
+++ b/src/img/movetowindow-16.svg
@ -0,0 +1,7 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.85 12.15l-3-3a0.49 0.49 0 0 0-0.7 0.7L14.29 12H9.5a0.5 0.5 0 0 0 0 1h4.79l-2.14 2.15a0.48 0.48 0 0 0 0 0.7 0.48 0.48 0 0 0 0.7 0l3-3a0.36 0.36 0 0 0 0.11-0.16 0.5 0.5 0 0 0 0-0.38 0.36 0.36 0 0 0-0.11-0.16z"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M13 1H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h4a1 1 0 0 0 0-2H3a1 1 0 0 1-1-1V6h12v2a1 1 0 0 0 2 0V4a3 3 0 0 0-3-3zM2 5V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1z"/>
 </svg>
--- a/src/img/multiaccountcontainer-16-dark.svg
+++ b/src/img/multiaccountcontainer-16-dark.svg
@ -0,0 +1,9 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. --><svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <style>rect,path {fill: rgba(249, 249, 250, 0.8);}</style>
  <rect x="1" y="1" width="6" height="6" rx="1"/>
  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
  <rect x="1" y="9" width="6" height="6" rx="1"/>
  <rect x="9" y="9" width="6" height="6" rx="1"/>
 </svg>
--- a/src/img/multiaccountcontainer-16.svg
+++ b/src/img/multiaccountcontainer-16.svg
@ -0,0 +1,7 @@
 <svg data-name="Flat (For Export)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <style>rect,path {fill: rgba(24, 25, 26, 01);}</style>
  <rect x="1" y="1" width="6" height="6" rx="1"/>
  <path d="M14.75 3H13V1.25A0.25 0.25 0 0 0 12.75 1h-1.5A0.25 0.25 0 0 0 11 1.25V3H9.25A0.25 0.25 0 0 0 9 3.25v1.5A0.25 0.25 0 0 0 9.25 5H11v1.75A0.25 0.25 0 0 0 11.25 7h1.5A0.25 0.25 0 0 0 13 6.75V5h1.75A0.25 0.25 0 0 0 15 4.75v-1.5A0.25 0.25 0 0 0 14.75 3z" fill-rule="evenodd"/>
  <rect x="1" y="9" width="6" height="6" rx="1"/>
  <rect x="9" y="9" width="6" height="6" rx="1"/>
 </svg>
--- a/src/img/new-16.svg
+++ b/src/img/new-16.svg
@ -2,5 +2,5 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#3c3c3c" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
+  <path fill="context-fill" d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 1 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"/>
 </svg>
--- a/src/img/password-hide.svg
+++ b/src/img/password-hide.svg
@ -0,0 +1,9 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 7l-4 4a4 4 0 0 0 4-4z"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15.66 7.71a7.78 7.78 0 0 0-1.55-2.82L12.7 6.3a5.9 5.9 0 0 1 1 1.7A6 6 0 0 1 8 12a7.28 7.28 0 0 1-.93-.07l-1.64 1.64A7.92 7.92 0 0 0 8 14a8 8 0 0 0 7.66-5.71 1 1 0 0 0 0-.58zM14.71 1.29a1 1 0 0 0-1.42 0l-1.63 1.64A7.8 7.8 0 0 0 8 2a8 8 0 0 0-7.66 5.71 1 1 0 0 0 0 .58 7.8 7.8 0 0 0 2.34 3.62l-1.39 1.38a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l12-12a1 1 0 0 0 0-1.42zM8.5 5a1.43 1.43 0 0 1 .82.26L7.26 7.32A1.43 1.43 0 0 1 7 6.5 1.5 1.5 0 0 1 8.5 5zM2.35 8a6 6 0 0 1 2.11-2.82A3.91 3.91 0 0 0 5 9.61l-.9.9A5.91 5.91 0 0 1 2.35 8z"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12 7l-4 4a4 4 0 0 0 4-4z"/>
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M16 7.7a8.06 8.06 0 0 0-1.72-2.94l-1.45 1.41A5.91 5.91 0 0 1 13.94 8 6.33 6.33 0 0 1 8 12a7.28 7.28 0 0 1-.93-.07l-1.66 1.66A8.56 8.56 0 0 0 8 14a8.34 8.34 0 0 0 8-5.7 1.22 1.22 0 0 0 0-.6zM14.71 1.29a1 1 0 0 0-1.42 0L11.7 2.88A8.43 8.43 0 0 0 8 2a8.34 8.34 0 0 0-8 5.7 1.22 1.22 0 0 0 0 .6A7.87 7.87 0 0 0 2.58 12l-1.29 1.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l12-12a1 1 0 0 0 0-1.42zM8.5 5a1.43 1.43 0 0 1 .82.26L7.26 7.32A1.43 1.43 0 0 1 7 6.5 1.5 1.5 0 0 1 8.5 5zM2.06 8a6 6 0 0 1 2.49-3A4 4 0 0 0 4 7a4 4 0 0 0 1 2.61l-1 1A5.94 5.94 0 0 1 2.06 8z"/>
 </svg>
--- a/src/img/refresh-16.svg
+++ b/src/img/refresh-16.svg
@ -0,0 +1,6 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 1a1 1 0 0 0-1 1v2.42A7 7 0 1 0 13 13a1 1 0 0 0-1.41-1.41 5 5 0 1 1 1-5.54H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
 </svg>
--- a/src/img/sort-16_1.svg
+++ b/src/img/sort-16_1.svg
@ -0,0 +1,6 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14.71 4.29l-3-3a1 1 0 0 0-1.42 1.42L11.59 4H4a1 1 0 0 0 0 2h7.59l-1.3 1.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3-3a1 1 0 0 0 0-1.42zM12 10H4.41l1.3-1.29a1 1 0 1 0-1.42-1.42l-3 3a1 1 0 0 0 0 1.42l3 3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42L4.41 12H12a1 1 0 0 0 0-2z"/>
 </svg>
--- a/src/img/tab-new-16.svg
+++ b/src/img/tab-new-16.svg
@ -0,0 +1,6 @@
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M11 11V9a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h7v-1a1 1 0 0 1 1-1zm4.5 1H13V9.5a0.5 0.5 0 0 0-1 0V12H9.5a0.5 0.5 0 0 0 0 1H12v2.5a0.5 0.5 0 0 0 1 0V13h2.5a0.5 0.5 0 0 0 0-1z"/>
 </svg>
--- a/src/img/usercontext.svg
+++ b/src/img/usercontext.svg
@ -13,6 +13,7 @@
      display: none;
    }
  </style>
  <path id="fence" d="M28 4l-2 2v4h-4V6l-2-2-2 2v4h-4V6l-2-2-2 2v4H6V6L4 4 2 6v22h4v-4h4v4h4v-4h4v4h4v-4h4v4h4V6l-2-2zM6 22V12h4v10H6zm8 0V12h4v10h-4zm8 0V12h4v10h-4z"/>
  <path id="dollar" d="M16.2,0c-8.9,0-16,7.3-16,16c0,8.9,7.1,16,15.8,16s15.8-7.1,15.8-16C32,7.3,24.9,0,16.2,0z M17.1,25.1v1.6
  c0,0.4-0.4,0.5-0.7,0.5c-0.4,0-0.7-0.2-0.7-0.5v-1.6c-3.2-0.2-5-1.8-5.5-4.3c0-0.2,0-0.2,0-0.4c0-0.5,0.4-0.9,0.9-0.9
  c0.2,0,0.2,0,0.4,0c0.5,0,0.9,0.2,1.1,0.7c0.4,1.8,1.2,2.7,3.4,2.8v-6.8c-3.6-0.4-5.3-1.8-5.3-4.6c0-3,2.5-4.6,5.2-4.8V5.7
@ -69,4 +70,12 @@
  s1.6,0.5,1.8,1.4v0.2c0,0.2,0,0.2,0,0.4c0,2,0.7,3.7,2.1,5c1.4,1.4,3,2.1,5,2.1l0,0c2,0,3.6-0.7,5-2.1c1.4-1.2,2.1-3.2,2.1-5V9.2
  C32,5.2,28.8,2,24.7,2"/>
  <circle id="circle" r="16" cx="16" cy="16" fill-rule="evenodd"/>
  <path id="bullhorn" d="M1.5 5A.5.5 0 0 0 1 5.5v5a.5.5 0 0 0 1 0v-5A.5.5 0 0 0 1.5 5zM14.6 2.2A1 1 0 0 0 13.71 2l-10 3A1 1 0 0 0 3 6v4a1 1 0 0 0 .71 1L5 11.35a.4.4 0 0 0 0 .15v1a2.5 2.5 0 0 0 5 .33L13.71 14A1 1 0 0 0 14 14a1 1 0 0 0 .6-.2A1 1 0 0 0 15 13V3a1 1 0 0 0-.4-.8zM7.5 14A1.5 1.5 0 0 1 6 12.5v-.86l3 .9A1.51 1.51 0 0 1 7.5 14zm5.5-2.34l-8-2.4V6.74l8-2.4z"/>
  <path id="folder" d="M13 4H8.41L7 2.59A2 2 0 0 0 5.59 2H3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
  <path id="hat" d="M15 10a1 1 0 0 0-1 1 1 1 0 0 1-1 1V6a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v6a1 1 0 0 1-1-1 1 1 0 0 0-2 0 3 3 0 0 0 3 3h10a3 3 0 0 0 3-3 1 1 0 0 0-1-1zM7 4h2a2 2 0 0 1 2 2v3H5V6a2 2 0 0 1 2-2z"/>
  <path id="wallet" d="M14 2H2C1 2 0.06 3 0 4.86v6.34A1.94 1.94 0 0 0 1.22 13l7 2.86A2 2 0 0 0 9 16a2 2 0 0 0 1.14-0.35A1.9 1.9 0 0 0 11 14.07V7.8A1.94 1.94 0 0 0 9.78 6L4.85 4h8.65a0.5 0.5 0 0 1 0 1H9.92l0.24 0.1a2.93 2.93 0 0 1 1.2 0.9h2.14A0.5 0.5 0 0 1 14 6.5v3a0.51 0.51 0 0 1-0.5 0.5H12v2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-6 8.5a0.5 0.5 0 0 1 1 0v1a0.5 0.5 0 0 1-1 0z"/>
 </svg>
--- a/src/img/webicon-facebook.svg
+++ b/src/img/webicon-facebook.svg
@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="-14 -14 48 48" enable-background="new -14 -14 48 48" xml:space="preserve">
--- a/src/img/webicon-twitter.svg
+++ b/src/img/webicon-twitter.svg
@ -1,4 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- 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 http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="23.9995" y1="0" x2="23.9995" y2="48.0005">
--- a/src/js/.eslintrc.js
+++ b/src/js/.eslintrc.js
@ -8,6 +8,7 @@ module.exports = {
    "backgroundLogic": true,
    "identityState": true,
    "messageHandler": true,
-    "sync": true
+    "sync": true,
    "Utils": true
  }
 };
--- a/src/js/background/assignManager.js
+++ b/src/js/background/assignManager.js
@ -205,11 +205,34 @@ window.assignManager = {
      return {};
    }
    const userContextId = this.getUserContextIdFromCookieStore(tab);
    // https://github.com/mozilla/multi-account-containers/issues/847
    //    
    // Handle the case where this request's URL is not assigned to any particular
    // container. We must do the following check:
    //
    // If the current tab's container is "unlocked", we can just go ahead
    // and open the URL in the current tab, since an "unlocked" container accepts
    // any-and-all sites.
    //
    // But if the current tab's container has been "locked" by the user, then we must
    // re-open the page in the default container, because the user doesn't want random
    // sites polluting their locked container.
    //
    // For example:
    //   - the current tab's container is locked and only allows "www.google.com"
    //   - the incoming request is for "www.amazon.com", which has no specific container assignment
    //   - in this case, we must re-open "www.amazon.com" in a new tab in the default container
    const siteIsolatedReloadInDefault = 
      await this._maybeSiteIsolatedReloadInDefault(siteSettings, tab);
    if (!siteIsolatedReloadInDefault) {
      if (!siteSettings
          || userContextId === siteSettings.userContextId
          || this.storageArea.isExempted(options.url, tab.id)) {
        return {};
      }
    }
    const removeTab = backgroundLogic.NEW_TAB_PAGES.has(tab.url)
      || (messageHandler.lastCreatedTab
        && messageHandler.lastCreatedTab.id === tab.id);
@ -257,6 +280,14 @@ window.assignManager = {
      }
    }
    if (siteIsolatedReloadInDefault) {
      this.reloadPageInDefaultContainer(
        options.url,
        tab.index + 1,
        tab.active,
        openTabId
      );
    } else {
      this.reloadPageInContainer(
        options.url,
        userContextId,
@ -266,6 +297,7 @@ window.assignManager = {
        siteSettings.neverAsk,
        openTabId
      );
    }
    this.calculateContextMenu(tab);
    /* Removal of existing tabs:
@ -299,6 +331,29 @@ window.assignManager = {
    };
  },
  async _maybeSiteIsolatedReloadInDefault(siteSettings, tab) {
    // Tab doesn't support cookies, so containers not supported either.
    if (!("cookieStoreId" in tab)) {
      return false;
    }
    // Requested page has been assigned to a specific container.
    // I.e. it will be opened in that container anyway, so we don't need to check if the
    // current tab's container is locked or not.
    if (siteSettings) {
      return false;  
    }
    //tab is alredy reopening in the default container
    if (tab.cookieStoreId === "firefox-default") {
      return false;
    }
    // Requested page is not assigned to a specific container. If the current tab's container
    // is locked, then the page must be reloaded in the default container.
    const currentContainerState = await identityState.storageArea.get(tab.cookieStoreId);
    return currentContainerState && currentContainerState.isIsolated;
  },
  init() {
    browser.contextMenus.onClicked.addListener((info, tab) => {
      info.bookmarkId ? 
@ -475,7 +530,6 @@ window.assignManager = {
  async _setOrRemoveAssignment(tabId, pageUrl, userContextId, remove) {
    let actionName;
    // https://github.com/mozilla/testpilot-containers/issues/626
    // Context menu has stored context IDs as strings, so we need to coerce
    // the value to a string for accurate checking
@ -500,16 +554,40 @@ window.assignManager = {
        userContextId,
        neverAsk: false
      }, exemptedTabIds);
-      actionName = "added";
+      actionName = "assigned site to always open in this container";
    } else {
      // Remove assignment
      await this.storageArea.remove(pageUrl);
-      actionName = "removed";
+
      actionName = "removed from assigned sites list";
      // remove site isolation if now empty
      await this._maybeRemoveSiteIsolation(userContextId);   
    }
-    browser.tabs.sendMessage(tabId, {
+
-      text: `Successfully ${actionName} site to always open in this container`
+    if (tabId) {
    });
      const tab = await browser.tabs.get(tabId);
      setTimeout(function(){ 
        browser.tabs.sendMessage(tabId, {
          text: `Successfully ${actionName}`
        });
      }, 1000);
      this.calculateContextMenu(tab);
    }
  },
  async _maybeRemoveSiteIsolation(userContextId) {
    const assignments = await this.storageArea.getByContainer(userContextId);
    const hasAssignments = assignments && Object.keys(assignments).length > 0;
    if (hasAssignments) {
      return;
    }
    await backgroundLogic.addRemoveSiteIsolation(
      backgroundLogic.cookieStoreId(userContextId),
      true
    );
  },
  async _getAssignment(tab) {
@ -589,13 +667,35 @@ window.assignManager = {
    });
  },
  reloadPageInDefaultContainer(url, index, active, openerTabId) {
    // To create a new tab in the default container, it is easiest just to omit the
    // cookieStoreId entirely.
    // 
    // Unfortunately, if you create a new tab WITHOUT a cookieStoreId but WITH an openerTabId,
    // then the new tab automatically inherits the opener tab's cookieStoreId.
    // I.e. it opens in the wrong container!
    // 
    // So we have to explicitly pass in a cookieStoreId when creating the tab, since we
    // are specifying the openerTabId. There doesn't seem to be any way
    // to look up the default container's cookieStoreId programatically, so sadly
    // we have to hardcode it here as "firefox-default". This is potentially
    // not cross-browser compatible.
    // 
    // Note that we could have just omitted BOTH cookieStoreId and openerTabId. But the
    // drawback then is that if the user later closes the newly-created tab, the browser
    // does not automatically return to the original opener tab. To get this desired behaviour,
    // we MUST specify the openerTabId when creating the new tab.
    const cookieStoreId = "firefox-default";
    browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
  },
  reloadPageInContainer(url, currentUserContextId, userContextId, index, active, neverAsk = false, openerTabId = null) {
    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
    const loadPage = browser.extension.getURL("confirm-page.html");
    // False represents assignment is not permitted
    // If the user has explicitly checked "Never Ask Again" on the warning page we will send them straight there
    if (neverAsk) {
-      browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
+      return browser.tabs.create({url, cookieStoreId, index, active, openerTabId});
    } else {
      let confirmUrl = `${loadPage}?url=${this.encodeURLProperty(url)}&cookieStoreId=${cookieStoreId}`;
      let currentCookieStoreId;
@ -603,7 +703,7 @@ window.assignManager = {
        currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
        confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
      }
-      browser.tabs.create({
+      return browser.tabs.create({
        url: confirmUrl,
        cookieStoreId: currentCookieStoreId,
        openerTabId,
--- a/src/js/background/backgroundLogic.js
+++ b/src/js/background/backgroundLogic.js
@ -6,7 +6,20 @@ const backgroundLogic = {
    "about:home",
    "about:blank"
  ]),
  NUMBER_OF_KEYBOARD_SHORTCUTS: 10,
  unhideQueue: [],
  init() {
    browser.commands.onCommand.addListener(function (command) {
      for (let i=0; i < backgroundLogic.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
        const key = "open_container_" + i;
        const cookieStoreId = identityState.keyboardShortcut[key];
        if (command === key) {
          if (cookieStoreId === "none") return;
          browser.tabs.create({cookieStoreId});
        }
      }
    });
  },
  async getExtensionInfo() {
    const manifestPath = browser.extension.getURL("manifest.json");
@ -123,6 +136,20 @@ const backgroundLogic = {
    }
  },
  // https://github.com/mozilla/multi-account-containers/issues/847
  async addRemoveSiteIsolation(cookieStoreId, remove = false) {
    const containerState = await identityState.storageArea.get(cookieStoreId);
    try {
      if ("isIsolated" in containerState || remove) {
        delete containerState.isIsolated;
      } else {
        containerState.isIsolated = "locked";        
      }
      return await identityState.storageArea.set(cookieStoreId, containerState);
    } catch (error) {
      console.error(`No container: ${cookieStoreId}`);
    }
  },
  async moveTabsToWindow(options) {
    const requiredArguments = ["cookieStoreId", "windowId"];
@ -229,7 +256,8 @@ const backgroundLogic = {
        hasHiddenTabs: !!containerState.hiddenTabs.length,
        hasOpenTabs: !!openTabs.length,
        numberOfHiddenTabs: containerState.hiddenTabs.length,
-        numberOfOpenTabs: openTabs.length
+        numberOfOpenTabs: openTabs.length,
        isIsolated: !!containerState.isIsolated
      };
      return;
    });
@ -329,6 +357,10 @@ const backgroundLogic = {
  },
  cookieStoreId(userContextId) {
    if(userContextId === 0) return "firefox-default";
    return `firefox-container-${userContextId}`;
  }
 };
 backgroundLogic.init();
--- a/src/js/background/identityState.js
+++ b/src/js/background/identityState.js
@ -1,4 +1,5 @@
 window.identityState = {
  keyboardShortcut: {},
  storageArea: {
    area: browser.storage.local,
@ -27,7 +28,7 @@ window.identityState = {
        await this.set(cookieStoreId, defaultContainerState);
        return defaultContainerState;
      }
-      throw new Error (`${cookieStoreId} not found`);
+      return false;
    },
    set(cookieStoreId, data) {
@ -42,6 +43,29 @@ window.identityState = {
      return this.area.remove([storeKey]);
    },
    async setKeyboardShortcut(shortcutId, cookieStoreId) {
      identityState.keyboardShortcut[shortcutId] = cookieStoreId;
      return this.area.set({[shortcutId]: cookieStoreId});
    },
    async loadKeyboardShortcuts () {
      const identities = await browser.contextualIdentities.query({});
      for (let i=0; i < backgroundLogic.NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
        const key = "open_container_" + i;
        const storageObject = await this.area.get(key);
        if (storageObject[key]){
          identityState.keyboardShortcut[key] = storageObject[key];
          continue;
        }
        if (identities[i]) {
          identityState.keyboardShortcut[key] = identities[i].cookieStoreId;
          continue;
        }
        identityState.keyboardShortcut[key] = "none";
      }
      return identityState.keyboardShortcut;
    },
    /*
     * Looks for abandoned identity keys in local storage, and makes sure all
     * identities registered in the browser are also in local storage. (this
@ -72,7 +96,8 @@ window.identityState = {
          }
        }
      }
-    }
+    },
  },
  _createTabObject(tab) {
@ -153,8 +178,14 @@ window.identityState = {
      macAddonUUID: uuidv4()
    };
  },
  init() {
    this.storageArea.loadKeyboardShortcuts();
  }
 };
 identityState.init();
 function uuidv4() {
  // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
--- a/src/js/background/messageHandler.js
+++ b/src/js/background/messageHandler.js
@ -6,10 +6,17 @@ const messageHandler = {
  init() {
    // Handles messages from webextension code
-    browser.runtime.onMessage.addListener((m) => {
+    browser.runtime.onMessage.addListener(async (m) => {
      let response;
      let tab;
      switch (m.method) {
      case "getShortcuts":
        response = identityState.storageArea.loadKeyboardShortcuts();
        break;
      case "setShortcut":
        identityState.storageArea.setKeyboardShortcut(m.shortcut, m.cookieStoreId);
        break;
      case "resetSync":
        response = sync.resetSync();
        break;
@ -25,6 +32,9 @@ const messageHandler = {
      case "neverAsk":
        assignManager._neverAsk(m);
        break;
      case "addRemoveSiteIsolation":
        response = backgroundLogic.addRemoveSiteIsolation(m.cookieStoreId);
        break;
      case "getAssignment":
        response = browser.tabs.get(m.tabId).then((tab) => {
          return assignManager._getAssignment(tab);
@ -36,9 +46,7 @@ const messageHandler = {
      case "setOrRemoveAssignment":
        // m.tabId is used for where to place the in content message
        // m.url is the assignment to be removed/added
-        response = browser.tabs.get(m.tabId).then((tab) => {
+        response = assignManager._setOrRemoveAssignment(m.tabId, m.url, m.userContextId, m.value);
          return assignManager._setOrRemoveAssignment(tab.id, m.url, m.userContextId, m.value);
        });
        break;
      case "sortTabs":
        backgroundLogic.sortTabs();
@ -73,6 +81,31 @@ const messageHandler = {
      case "exemptContainerAssignment":
        response = assignManager._exemptTab(m);
        break;
      case "reloadInContainer":
        response = assignManager.reloadPageInContainer(
          m.url, 
          m.currentUserContextId, 
          m.newUserContextId, 
          m.tabIndex, 
          m.active,
          true
        );
        break;
      case "assignAndReloadInContainer":
        tab = await assignManager.reloadPageInContainer(
          m.url, 
          m.currentUserContextId, 
          m.newUserContextId, 
          m.tabIndex, 
          m.active,
          true
        );
        // m.tabId is used for where to place the in content message
        // m.url is the assignment to be removed/added
        response = browser.tabs.get(tab.id).then((tab) => {
          return assignManager._setOrRemoveAssignment(tab.id, m.url, m.newUserContextId, m.value);
        });
        break;
      }
      return response;
    });
--- a/src/js/options.js
+++ b/src/js/options.js
@ -1,3 +1,5 @@
 const NUMBER_OF_KEYBOARD_SHORTCUTS = 10;
 async function requestPermissions() {
  const checkbox = document.querySelector("#bookmarksPermissions");
  if (checkbox.checked) {
@ -22,7 +24,7 @@ async function enableDisableSync() {
  browser.runtime.sendMessage({ method: "resetSync" });
 }
-async function restoreOptions() {
+async function setupOptions() {
  const hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
  const { syncEnabled } = await browser.storage.local.get("syncEnabled");
  if (hasPermission) {
@ -33,9 +35,56 @@ async function restoreOptions() {
  } else {
    document.querySelector("#syncCheck").checked = false;
  }
  setupContainerShortcutSelects();
 }
 async function setupContainerShortcutSelects () {
  const keyboardShortcut = await browser.runtime.sendMessage({method: "getShortcuts"});
  const identities = await browser.contextualIdentities.query({});
  const fragment = document.createDocumentFragment();
  const noneOption = document.createElement("option");
  noneOption.value = "none";
  noneOption.id = "none";
  noneOption.textContent = "None";
  fragment.append(noneOption);
-document.addEventListener("DOMContentLoaded", restoreOptions);
+  for (const identity of identities) {
    const option = document.createElement("option");
    option.value = identity.cookieStoreId;
    option.id = identity.cookieStoreId;
    option.textContent = identity.name;
    fragment.append(option);
  }
  for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
    const shortcutKey = "open_container_"+i;
    const shortcutSelect = document.getElementById(shortcutKey);
    shortcutSelect.appendChild(fragment.cloneNode(true));
    if (keyboardShortcut && keyboardShortcut[shortcutKey]) {
      const cookieStoreId = keyboardShortcut[shortcutKey];
      shortcutSelect.querySelector("#" + cookieStoreId).selected = true;
    }
  }
 }
 function storeShortcutChoice (event) {
  browser.runtime.sendMessage({
    method: "setShortcut",
    shortcut: event.target.id,
    cookieStoreId: event.target.value
  });
 }
 function resetOnboarding() {
  browser.storage.local.set({"onboarding-stage": 0});
 }
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("button").addEventListener("click", resetOnboarding);
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
  document.querySelector("#open_container_"+i)
    .addEventListener("change", storeShortcutChoice);
 }
--- a/src/js/pageAction.js
+++ b/src/js/pageAction.js
@ -0,0 +1,35 @@
 async function init() {
  const fragment = document.createDocumentFragment();
  const identities = await browser.contextualIdentities.query({});
  identities.forEach(identity => {
    const tr = document.createElement("tr");
    tr.classList.add("menu-item", "hover-highlight");
    const td = document.createElement("td");
    td.innerHTML = Utils.escaped`          
        <div class="menu-icon">
          <div class="usercontext-icon"
            data-identity-icon="${identity.icon}"
            data-identity-color="${identity.color}">
          </div>
        </div>
        <span class="menu-text">${identity.name}</span>`;
    tr.appendChild(td);
    fragment.appendChild(tr);
    Utils.addEnterHandler(tr, async () => {
      Utils.alwaysOpenInContainer(identity);
      window.close();
    });
  });
  const list = document.querySelector("#picker-identities-list");
  list.innerHTML = "";
  list.appendChild(fragment);
 }
 init();
--- a/src/js/popup.js
+++ b/src/js/popup.js
--- a/src/js/utils.js
+++ b/src/js/utils.js
@ -1,11 +1,11 @@
 const DEFAULT_FAVICON = "/img/blank-favicon.svg";
 // TODO use export here instead of globals
-window.Utils = {
+const Utils = {
  createFavIconElement(url) {
    const imageElement = document.createElement("img");
-    imageElement.classList.add("icon", "offpage");
+    imageElement.classList.add("icon", "offpage", "menu-icon");
    imageElement.src = url;
    const loadListener = (e) => {
      e.target.classList.remove("offpage");
@ -18,6 +18,111 @@ window.Utils = {
    imageElement.addEventListener("error", errorListener);
    imageElement.addEventListener("load", loadListener);
    return imageElement;
  },
  /**
 * Escapes any occurances of &, ", <, > or / with XML entities.
 *
 * @param {string} str
 *        The string to escape.
 * @return {string} The escaped string.
 */
  escapeXML(str) {
    const replacements = { "&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;", "/": "&#x2F;" };
    return String(str).replace(/[&"'<>/]/g, m => replacements[m]);
  },
  /**
 * A tagged template function which escapes any XML metacharacters in
 * interpolated values.
 *
 * @param {Array<string>} strings
 *        An array of literal strings extracted from the templates.
 * @param {Array} values
 *        An array of interpolated values extracted from the template.
 * @returns {string}
 *        The result of the escaped values interpolated with the literal
 *        strings.
 */
  escaped(strings, ...values) {
    const result = [];
    for (const [i, string] of strings.entries()) {
      result.push(string);
      if (i < values.length)
        result.push(this.escapeXML(values[i]));
    }
    return result.join("");
  },
  async currentTab() {
    const activeTabs = await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT });
    if (activeTabs.length > 0) {
      return activeTabs[0];
    }
    return false;
  },
  addEnterHandler(element, handler) {
    element.addEventListener("click", (e) => {
      handler(e);
    });
    element.addEventListener("keydown", (e) => {
      if (e.keyCode === 13) {
        e.preventDefault();
        handler(e);
      }
    });
  },
  userContextId(cookieStoreId = "") {
    const userContextId = cookieStoreId.replace("firefox-container-", "");
    return (userContextId !== cookieStoreId) ? Number(userContextId) : false;
  },
  setOrRemoveAssignment(tabId, url, userContextId, value) {
    return browser.runtime.sendMessage({
      method: "setOrRemoveAssignment",
      tabId,
      url,
      userContextId,
      value
    });
  },
  async reloadInContainer(url, currentUserContextId, newUserContextId, tabIndex, active) {
    return await browser.runtime.sendMessage({
      method: "reloadInContainer",
      url, 
      currentUserContextId, 
      newUserContextId, 
      tabIndex, 
      active
    });
  },
  async alwaysOpenInContainer(identity) {
    const currentTab = await this.currentTab();
    const assignedUserContextId = this.userContextId(identity.cookieStoreId);
    if (currentTab.cookieStoreId !== identity.cookieStoreId) {
      return await browser.runtime.sendMessage({
        method: "assignAndReloadInContainer",
        url: currentTab.url, 
        currentUserContextId: false, 
        newUserContextId: assignedUserContextId, 
        tabIndex: currentTab.index +1, 
        active:currentTab.active
      });
    }
    await Utils.setOrRemoveAssignment(
      currentTab.id, 
      currentTab.url, 
      assignedUserContextId, 
      false
    );
  }
 };
 window.Utils = Utils;
--- a/src/manifest.json
+++ b/src/manifest.json
@ -39,21 +39,89 @@
        "mac": "MacCtrl+Period"
      },
      "description": "Open containers panel"
    },
    "open_container_0": {
      "suggested_key": {
        "default": "Ctrl+Shift+1"
      },
      "description": "Container Shortcut 1"
    },
    "open_container_1": {
      "suggested_key": {
        "default": "Ctrl+Shift+2"
      },
      "description": "Container Shortcut 2"
    },
    "open_container_2": {
      "suggested_key": {
        "default": "Ctrl+Shift+3"
      },
      "description": "Container Shortcut 3"
    },
    "open_container_3": {
      "suggested_key": {
        "default": "Ctrl+Shift+4"
      },
      "description": "Container Shortcut 4"
    },
    "open_container_4": {
      "suggested_key": {
        "default": "Ctrl+Shift+5"
      },
      "description": "Container Shortcut 5"
    },
    "open_container_5": {
      "suggested_key": {
        "default": "Ctrl+Shift+6"
      },
      "description": "Container Shortcut 6"
    },
    "open_container_6": {
      "suggested_key": {
        "default": "Ctrl+Shift+7"
      },
      "description": "Container Shortcut 7"
    },
    "open_container_7": {
      "suggested_key": {
        "default": "Ctrl+Shift+8"
      },
      "description": "Container Shortcut 8"
    },
    "open_container_8": {
      "suggested_key": {
        "default": "Ctrl+Shift+9"
      },
      "description": "Container Shortcut 9"
    },
    "open_container_9": {
      "suggested_key": {
        "default": "Ctrl+Shift+0"
      },
      "description": "Container Shortcut 10"
    }
  },
  "browser_action": {
    "browser_style": true,
-    "default_icon": "img/container-site.svg",
+    "default_icon": "img/multiaccountcontainer-16.svg",
    "default_title": "Multi-Account Containers",
    "default_popup": "popup.html",
    "theme_icons": [
      {
-        "light": "img/container-site-light.svg",
+        "light": "img/multiaccountcontainer-16-dark.svg",
-        "dark": "img/container-site.svg",
+        "dark": "img/multiaccountcontainer-16.svg",
        "size": 32
      }
    ]
  },
  "page_action": {
    "browser_style": true,
    "default_icon": "img/container-openin-16.svg",
    "default_title": "Always open this in a Container",
    "default_popup": "pageActionPopup.html",
    "pinned": false,
    "show_matches": ["*://*/*"]
  },
  "background": {
    "page": "js/background/index.html"
  },
--- a/src/options.html
+++ b/src/options.html
@ -17,6 +17,57 @@
        Enable Sync
      </label>
      <p>This setting allows you to sync your containers and site assignments across devices.</p>
      <p><label>
        Container to open with Keyboard Shortcut 1
        <select id="open_container_0">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 2
        <select id="open_container_1">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 3
        <select id="open_container_2">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 4
        <select id="open_container_3">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 5
        <select id="open_container_4">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 6
        <select id="open_container_5">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 7
        <select id="open_container_6">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 8
        <select id="open_container_7">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 9
        <select id="open_container_8">
        </select>
      </label></p>
      <p><label>
        Container to open with Keyboard Shortcut 10
        <select id="open_container_9">
        </select>
      </label></p>
      <button>Reset Onboarding Panels </button>
    </form>
    <script src="js/options.js"></script>
  </body>
--- a/src/pageActionPopup.html
+++ b/src/pageActionPopup.html
@ -0,0 +1,34 @@
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Multi-Account Containers</title>
  <link rel="stylesheet" type="text/css" href="css/popup.css">
 </head>
 <body>
  <div class="page-action-container-picker" id="container-picker-panel">
    <h3 class="title">
      Always Open this Site in...
    </h3>
    <hr>
    <div class="scrollable identities-list">
      <table class="menu" id="picker-identities-list">
        <tr class="menu-item hover-highlight">
          <td>
            <div class="menu-icon">
              <div class="usercontext-icon"
                data-identity-icon="pet"
                data-identity-color="blue">
              </div>
            </div>
            <span class="menu-text">Default</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <script src="js/utils.js"></script>
  <script src="js/pageAction.js"></script>
 </body>
 </html>
--- a/src/popup.html
+++ b/src/popup.html
@ -115,117 +115,239 @@
    <a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
  </div>
-  <div class="panel container-panel hide" id="container-panel">
+  <div class="panel menu-panel container-panel hide" id="container-panel">
-    <div id="current-tab">
+    <h3 class="title">
-      <h3>Current Tab</h3>
+      Multi-Account Containers
-      <div id="current-page"></div>
+    </h3>
-      <label for="container-page-assigned">
+    <a href="#" class="info-icon" id="info-icon" tabindex="10">
-        <input type="checkbox" id="container-page-assigned" />
+      <img alt="info" src="/img/info-thin-16.svg" / >
        <span class="truncate-text">
          Always open in
          <span id="current-container"></span>
        </span>
      </label>
    </div>
    <div class="container-panel-controls">
      <a href="#" class="action-link" id="sort-containers-link" title="Sort tabs into container order">Sort Tabs</a>
    </div>
    <div class="scrollable panel-content" tabindex="-1">
      <table class="identities-list">
        <tbody></tbody>
      </table>
    </div>
    <div class="panel-footer edit-identities">
      <div class="edit-containers-text panel-footer-secondary">
        <a href="#" tabindex="0" id="edit-containers-link">Edit Containers</a>
      </div>
      <a href="#" tabindex="0" class="add-container-link pop-button" id="container-add-link" title="Create new container">
        <img class="pop-button-image-small icon" alt="Create new container icon" src="/img/container-add.svg" />
    </a>
    <hr>
    <table class="menu">
      <tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
        <td>
          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
          <span class="menu-text">Open New Tab in...</span>
            <span class="menu-arrow">
              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
            </span>
        </td>
      </tr>
      <tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
        <td>
          <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
          <span class="menu-text">Reopen This Site in...</span>
            <span class="menu-arrow">
              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
            </span>
        </td>
      </tr>
    </table>
    <hr>
    <table class="menu">
      <tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
        <td>
          <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
          <span class="menu-text">Sort Tabs by Container</span>
            <span class="menu-arrow">
            </span>
        </td>
      </tr>
      <tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
        <td>
          <img class="menu-icon" alt="Open in New Tab" src="/img/container-openin-16.svg" />
          <span class="menu-text">Always Open This Site in...</span>
            <span class="menu-arrow">
              <img alt="Container Info" src="/img/arrow-icon-right.svg" />
            </span>
        </td>
      </tr>
    </table>
    <hr>
    <div class="sub-header">
    Containers
    </div>
    <div class="scrollable identities-list">
      <table class="menu" id="identities-list">
        <tr class="menu-item hover-highlight">
          <td>
            <div class="menu-icon">
              <div class="usercontext-icon"
                data-identity-icon="pet"
                data-identity-color="blue">
              </div>
            </div>
            <span class="menu-text">Default</span>
            <span class="menu-right-float">
              <span class="container-count">22</span>
              <span class="menu-arrow">
                <img alt="Container Info" src="/img/arrow-icon-right.svg" />
              </span>
            </span>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottom-btn" id="manage-containers-link" tabindex="0">
      Manage Containers
    </div> 
  </div>
-  <div class="hide panel container-info-panel" id="container-info-panel" tabindex="-1">
+  <div class="hide panel menu-panel container-info-panel" id="container-info-panel" tabindex="-1">
-    <div class="columns">
+    <h3 class="title" id="container-info-title">
-      <div class="panel-back-arrow" id="close-container-info-panel">
+      Personal
-        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
+    </h3>
    <button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
    <hr>
    <table class="menu">
      <tr class="menu-item hover-highlight" id="open-new-tab-in-info" tabindex="0">
        <td>
          <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
          <span class="menu-text">Open New Tab in this Container</span>
            <span class="menu-arrow">
            </span>
        </td>
      </tr>
      <tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
        <td>
          <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
          <span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
            <span class="menu-arrow">
            </span>
        </td>
      </tr>
      <tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
        <td>
          <img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
          <span class="menu-text">Move Tabs to a New Window</span>
            <span class="menu-arrow">
            </span>
        </td>
      </tr>
      <tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
        <td>
          <img class="menu-icon" alt="Always Open Site in Container" src="/img/container-openin-16.svg" />
          <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
            <span class="menu-arrow">
            </span>
        </td>
      </tr>
    </table>
    <hr>
    <div class="sub-header">
    Open Tabs
    </div>
      <div class="column-panel-content">
        <div class="panel-header container-info-panel-header">
          <span class="usercontext-icon" id="container-info-icon"></span>
          <h3 id="container-info-name" class="panel-header-text container-name truncate-text"></h3>
        </div>
        <div class="select-row clickable container-info-panel-hide container-info-has-tabs" id="container-info-hideorshow">
          <img id="container-info-hideorshow-icon" alt="Hide Container icon" src="/img/container-hide.svg" class="icon container-info-panel-hideorshow-icon"/>
          <span id="container-info-hideorshow-label">Hide this container</span>
        </div>
        <div class="select-row clickable container-info-panel-movetabs container-info-has-tabs" id="container-info-movetabs">Move tabs to a new window</div>
    <div class="scrollable">
-          <table id="container-info-table" class="container-info-list">
+      <table class="menu" id="container-info-table">
        <tr class="menu-item hover-highlight" tabindex="0">
          <td>
            <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
            <img class="trash-button" src="/img/container-close-tab.svg" />
          </td>
        </tr>       
      </table>
    </div>
    <div class="bottom-btn" id="manage-container-link">
      Manage This Container
    </div>
  </div>
  <div class="panel menu-panel container-picker-panel hide" id="container-picker-panel">
    <h3 class="title" id="picker-title">
      Multi-Account Containers
    </h3>
    <button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
    <hr>
    <div id="new-container-div"></div>
    <div class="scrollable identities-list">
      <table class="menu" id="picker-identities-list">
        <tr class="menu-item hover-highlight">
          <td>
            <div class="menu-icon">
              <div class="usercontext-icon"
                data-identity-icon="pet"
                data-identity-color="blue">
              </div>
            </div>
            <span class="menu-text">Default</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
    </div>
  </div>
-
+  <div class="panel menu-panel edit-container-panel hide" id="edit-container-panel">
-  <div class="panel edit-containers-panel hide" id="edit-containers-panel">
+    <h3 class="title" id="container-edit-title">
-    <div class="panel-header">
+      Default
-      <h3 class="panel-header-text">Edit Containers</h3>
+    </h3>
-    </div>
+    <button class="btn-return arrow-left" id="close-container-edit-panel"></button>
-    <div class="scrollable panel-content">
+    <hr>
-      <table class="unstriped">
+    <div class="scrollable edit-form">
        <tbody id="edit-identities-list"></tbody>
      </table>
    </div>
    <div class="panel-footer edit-containers-panel-footer">
      <a href="#" id="exit-edit-mode-link" class="exit-edit-mode-link edit-containers-exit-text">
      <img src="/img/container-arrow.svg"/>Exit Edit Mode</a>
  </div>
  </div>
  <div class="panel edit-container-panel hide" id="edit-container-panel">
    <div class="columns">
      <div class="panel-back-arrow" id="edit-container-panel-back-arrow">
        <img alt="Panel Back Arrow" src="/img/container-arrow.svg" class="back-arrow-img" />
      </div>
      <div class="column-panel-content">
      <form id="edit-container-panel-form">
        <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
        <fieldset>
-            <legend>Name</legend>
+          <legend class="form-header">Name</legend>
-            <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
+          <input type="text" name="container-name" id="edit-container-panel-name-input" class="edit-container-panel-name-input" maxlength="25"/>
        </fieldset>
        <fieldset id="edit-container-panel-choose-color" class="radio-choice">
-            <legend>Choose a color</legend>
+          <legend class="form-header">Color</legend>
        </fieldset>
        <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
-            <legend>Choose an icon</legend>
+          <legend class="form-header">Icon</legend>
        </fieldset>
      </form>
-        <div id="edit-sites-assigned" class="scrollable" hidden>
+      <div id="edit-container-options">
-          <h3>Sites assigned to this container</h3>
+        <div class="options-header">Options</div>
-          <div class="assigned-sites-list">
+        <div class="container-options">
          <input type="checkbox" class="site-isolation" id="site-isolation" name="site-isolation">
          <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
        </div>
        <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list">Manage Site List...
        </div>
      </div>
    </div>
    <div class="delete-container">
      <button class="delete-btn" id="delete-container-button">Delete This Container</button>
    </div>
    <div class="panel-footer">
-          <a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
+      <a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
-          <a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
+      <a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
    </div>
  </div>
  <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">
    <h3 class="title" id="edit-assignments-title">
      Default
    </h3>
    <button class="btn-return arrow-left" id="close-container-assignment-panel"></button>
    <hr>
    <div class="scrollable edit-sites-assigned">
      <div class="sub-header">Sites assigned to this container</div>
      <table class="menu scrollable" id="edit-sites-assigned">
        <tr class="menu-item hover-highlight" tabindex="0">
          <td>
            <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
            <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllla.org</span>
            <img class="trash-button" src="/img/container-delete.svg" />
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div class="hide panel delete-container-panel" id="delete-container-panel">
-    <div class="panel-header">
+    <h3 class="title" id="container-delete-title">
-      <span class="usercontext-icon" id="delete-container-icon"></span>
+      Default
-      <h3 id="delete-container-name" class="panel-header-text container-name"></h3>
+    </h3>
-    </div>
+    <button class="btn-return arrow-left" id="close-container-delete-panel"></button>
    <hr>
    <div class="panel-content delete-container-confirm">
      <h4 class="delete-container-confirm-title">Remove This Container</h4>
-      <p><span id="delete-container-tab-warning"></span> Are you sure you want to remove this Container?</p>
+      <p class="delete-warning" id="delete-container-tab-warning"></p>
      <p class="delete-warning">Are you sure you want to remove this Container?</p>
    </div>
    <div class="panel-footer">
      <a href="#" class="button expanded secondary footer-button cancel-button" id="delete-container-cancel-link">Cancel</a>
--- a/test/features/assignment.test.js
+++ b/test/features/assignment.test.js
@ -1,11 +1,11 @@
 const {initializeWithTab} = require("../common");
-describe("Assignment Feature", function () {
+describe("Assignment Reopen Feature", function () {
  const url = "http://example.com";
  beforeEach(async function () {
    this.webExt = await initializeWithTab({
-      cookieStoreId: "firefox-container-1",
+      cookieStoreId: "firefox-default",
      url
    });
  });
@ -14,15 +14,48 @@ describe("Assignment Feature", function () {
    this.webExt.destroy();
  });
-  describe("click the 'Always open in' checkbox in the popup", function () {
+  describe("set to 'Always open in' firefox-container-4", function () {
    beforeEach(async function () {
      // popup click to set assignment for activeTab.url
-      await this.webExt.popup.helper.clickElementById("container-page-assigned");
+      await this.webExt.popup.helper.clickElementById("always-open-in");
      await this.webExt.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item");
    });
    it("should open the page in the assigned container", async function () {
      // should have created a new tab with the confirm page
      this.webExt.background.browser.tabs.create.should.have.been.calledWithMatch({
        active: true,
        cookieStoreId: "firefox-container-4",
        index: 1,
        openerTabId: null,
        url: "http://example.com"
      });
    });
  });
 });
 describe("Assignment Comfirm Page Feature", function () {
  const url = "http://example.com";
  beforeEach(async function () {
    this.webExt = await initializeWithTab({
      cookieStoreId: "firefox-container-4",
      url
    });
  });
  afterEach(function () {
    this.webExt.destroy();
  });
  describe("open new Tab with the assigned URL in the default container", function () {
    let newTab;
    beforeEach(async function () {
      await this.webExt.popup.helper.clickElementById("always-open-in");
      await this.webExt.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item");
      // new Tab opening activeTab.url in default container
      newTab = await this.webExt.background.browser.tabs._create({
        cookieStoreId: "firefox-default",
@ -51,27 +84,4 @@ describe("Assignment Feature", function () {
      this.webExt.background.browser.tabs.remove.should.have.been.calledWith(newTab.id);
    });
  });
    describe("click the 'Always open in' checkbox in the popup again", function () {
      beforeEach(async function () {
        // popup click to remove assignment for activeTab.url
        await this.webExt.popup.helper.clickElementById("container-page-assigned");
      });
      describe("open new Tab with the no longer assigned URL in the default container", function () {
        beforeEach(async function () {
          // new Tab opening activeTab.url in default container
          await this.webExt.background.browser.tabs._create({
            cookieStoreId: "firefox-default",
            url
          });
        });
        it("should not open the confirm page", async function () {
          // should not have created a new tab
          this.webExt.background.browser.tabs.create.should.not.have.been.called;
        });
      });
    });
  });
 });
--- a/test/features/containers.test.js
+++ b/test/features/containers.test.js
@ -11,8 +11,9 @@ describe("Containers Management", function () {
  describe("creating a new container", function () {
    beforeEach(async function () {
-      await this.webExt.popup.helper.clickElementById("container-add-link");
+      await this.webExt.popup.helper.clickElementById("manage-containers-link");
-      await this.webExt.popup.helper.clickElementById("edit-container-ok-link");
+      await this.webExt.popup.helper.clickElementById("new-container");
      await this.webExt.popup.helper.clickElementById("create-container-ok-link");
    });
    it("should create it in the browser as well", function () {
@ -21,8 +22,9 @@ describe("Containers Management", function () {
    describe("removing it afterwards", function () {
      beforeEach(async function () {
-        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementById("manage-containers-link");
-        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".delete-container-icon", "last");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item", "last");
        await this.webExt.popup.helper.clickElementById("delete-container-button");
        await this.webExt.popup.helper.clickElementById("delete-container-ok-link");
      });
--- a/test/features/external-webextensions.test.js
+++ b/test/features/external-webextensions.test.js
@ -5,11 +5,12 @@ describe("External Webextensions", function () {
  beforeEach(async function () {
    this.webExt = await initializeWithTab({
-      cookieStoreId: "firefox-container-1",
+      cookieStoreId: "firefox-container-4",
      url
    });
-    await this.webExt.popup.helper.clickElementById("container-page-assigned");
+    await this.webExt.popup.helper.clickElementById("always-open-in");
    await this.webExt.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item", "last");
  });
  afterEach(function () {
@ -32,7 +33,7 @@ describe("External Webextensions", function () {
      const [promise] = this.webExt.background.browser.runtime.onMessageExternal.addListener.yield(message, sender);
      const answer = await promise;
-      expect(answer.userContextId === "1").to.be.true;
+      expect(answer.userContextId === "4").to.be.true;
      expect(answer.neverAsk === false).to.be.true;
      expect(
        Object.prototype.hasOwnProperty.call(
--- a/test/issues/940.test.js
+++ b/test/issues/940.test.js
@ -4,11 +4,12 @@ describe("#940", function () {
  describe("when other onBeforeRequestHandlers are faster and redirect with the same requestId", function () {
    it("should not open two confirm pages", async function () {
      const webExtension = await initializeWithTab({
-        cookieStoreId: "firefox-container-1",
+        cookieStoreId: "firefox-container-4",
        url: "http://example.com"
      });
-      await webExtension.popup.helper.clickElementById("container-page-assigned");
+      await webExtension.popup.helper.clickElementById("always-open-in");
      await webExtension.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item");
      const responses = {};
      await webExtension.background.browser.tabs._create({
@ -36,10 +37,12 @@ describe("#940", function () {
    beforeEach(async function () {
      this.webExt = await initializeWithTab({
-        cookieStoreId: "firefox-container-1",
+        cookieStoreId: "firefox-container-4",
        url: "https://www.youtube.com"
      });
-      await this.webExt.popup.helper.clickElementById("container-page-assigned");
+
      await this.webExt.popup.helper.clickElementById("always-open-in");
      await this.webExt.popup.helper.clickElementByQuerySelectorAll("#picker-identities-list > .menu-item");
      global.clock = sinon.useFakeTimers();
      this.redirectedRequest = async (options = {}) => {
		`@ -1 +0,0 @@`
			`<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><g fill="rgba(249, 249, 250, 0.8)" fill-rule="evenodd"><rect height="6" rx="1" width="6" x="1" y="1"/><path d="m11 1h2v6h-2z" transform="matrix(0 1 -1 0 16 -8)"/><path d="m11 1h2v6h-2z"/><rect height="6" rx="1" width="6" x="1" y="9"/><rect height="6" rx="1" width="6" x="9" y="9"/></g></svg>`