contextualIdentity: add gray color and fence icon (Bug 1532746); r=jkt,flod

Adds a gray color and fence icon for Containers. This is originally from
Facebook Container: https://addons.mozilla.org/firefox/addon/facebook-container/

User Research showed a strong affinity for the fence icon as an indicator of
the kind of "boundary" protection that Containers provide.
https://docs.google.com/spreadsheets/d/1bnqjcWTV893RESMPJzAXOrDN0juN_Z0-EE93Mvn3Z5g/edit#gid=0

Differential Revision: https://phabricator.services.mozilla.com/D26988

--HG--
extra : moz-landing-system : lando

browser/components/contextualidentity/content/fence.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 xmlns="http://www.w3.org/2000/svg"
+     width="32" height="32" viewBox="0 0 32 32">
+  <path fill="context-fill" d="M28,4l-2,2v4h-4V6l-2-2l-2,2v4h-4V6l-2-2l-2,2v4H6V6L4,4L2,6v22h4v-4h4v4h4v-4h4v4h4v-4h4v4h4V6L28,4z M6,22V12 h4v10H6z M14,22V12h4v10H14z M22,22V12h4v10H22z"/>
+</svg>

browser/components/contextualidentity/content/usercontext.css

@@ -38,6 +38,15 @@
   --identity-icon-color: #af51f5;
 }
 
+.identity-color-toolbar {
+  --identity-tab-color: var(--lwt-toolbar-field-color, -moz-FieldText);
+  --identity-icon-color: var(--lwt-toolbar-field-color, -moz-FieldText);
+}
+
+.identity-icon-fence {
+  --identity-icon: url("resource://usercontext-content/fence.svg");
+}
+
 .identity-icon-fingerprint {
   --identity-icon: url("resource://usercontext-content/fingerprint.svg");
 }

browser/components/contextualidentity/jar.mn

@@ -10,6 +10,7 @@ browser.jar:
     content/cart.svg          (content/cart.svg)
     content/circle.svg        (content/circle.svg)
     content/dollar.svg        (content/dollar.svg)
+    content/fence.svg         (content/fence.svg)
     content/fingerprint.svg   (content/fingerprint.svg)
     content/gift.svg          (content/gift.svg)
     content/vacation.svg      (content/vacation.svg)

browser/components/preferences/containers.js

@@ -35,6 +35,7 @@ let gContainersManager = {
     "pet",
     "tree",
     "chill",
+    "fence",
   ],
 
   colors: [
@@ -46,6 +47,7 @@ let gContainersManager = {
     "red",
     "pink",
     "purple",
+    "toolbar",
   ],
 
   onLoad() {

browser/locales/en-US/browser/preferences/containers.ftl

@@ -60,7 +60,11 @@ containers-color-pink =
     .label = Pink
 containers-color-purple =
     .label = Purple
+containers-color-toolbar =
+    .label = Match toolbar
 
+containers-icon-fence =
+    .label = Fence
 containers-icon-fingerprint =
     .label = Fingerprint
 containers-icon-briefcase =

toolkit/components/extensions/parent/ext-contextualIdentities.js

@@ -30,6 +30,7 @@ const CONTAINER_COLORS = new Map([
   ["red", "#ff613d"],
   ["pink", "#ff4bda"],
   ["purple", "#af51f5"],
+  ["toolbar", "#7c7c7d"],
 ]);
 
 const CONTAINER_ICONS = new Set([
@@ -37,6 +38,7 @@ const CONTAINER_ICONS = new Set([
   "cart",
   "circle",
   "dollar",
+  "fence",
   "fingerprint",
   "gift",
   "vacation",