contextualIdentity: add gray color and fence icon (Bug 1532746); r=jkt,flod a=pascalc
authorLuke Crouch <lcrouch@mozilla.com>
Wed, 17 Apr 2019 16:43:30 +0000
changeset 523244 53da81e19127fb55bcbc00c86bd910751c5b56cd
parent 523243 12d959489400f9da89f00db018cefd316fc9d18a
child 523245 a725a9315f5d84022d54bc2bcdc88190eb05abb0
push id11115
push useraiakab@mozilla.com
push dateFri, 19 Apr 2019 16:14:22 +0000
treeherdermozilla-beta@86f6ec90b34b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjkt, flod, pascalc
bugs1532746
milestone67.0
contextualIdentity: add gray color and fence icon (Bug 1532746); r=jkt,flod a=pascalc 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
browser/components/contextualidentity/content/fence.svg
browser/components/contextualidentity/content/usercontext.css
browser/components/contextualidentity/jar.mn
browser/components/preferences/containers.js
browser/locales/en-US/browser/preferences/containers.ftl
toolkit/components/extensions/parent/ext-contextualIdentities.js
new file mode 100644
--- /dev/null
+++ b/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>
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/browser/components/contextualidentity/content/usercontext.css
@@ -33,16 +33,25 @@
   --identity-icon-color: #ff4bda;
 }
 
 .identity-color-purple {
   --identity-tab-color: #af51f5;
   --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");
 }
 
 .identity-icon-briefcase {
   --identity-icon: url("resource://usercontext-content/briefcase.svg");
 }
 
--- a/browser/components/contextualidentity/jar.mn
+++ b/browser/components/contextualidentity/jar.mn
@@ -5,16 +5,17 @@
 browser.jar:
     content/browser/usercontext/usercontext.css (content/usercontext.css)
 
 % resource usercontext-content %content/ contentaccessible=yes
     content/briefcase.svg     (content/briefcase.svg)
     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)
     content/food.svg          (content/food.svg)
     content/fruit.svg         (content/fruit.svg)
     content/pet.svg           (content/pet.svg)
     content/tree.svg          (content/tree.svg)
     content/chill.svg         (content/chill.svg)
--- a/browser/components/preferences/containers.js
+++ b/browser/components/preferences/containers.js
@@ -30,27 +30,29 @@ let gContainersManager = {
     "circle",
     "gift",
     "vacation",
     "food",
     "fruit",
     "pet",
     "tree",
     "chill",
+    "fence",
   ],
 
   colors: [
     "blue",
     "turquoise",
     "green",
     "yellow",
     "orange",
     "red",
     "pink",
     "purple",
+    "toolbar",
   ],
 
   onLoad() {
     let params = window.arguments[0] || {};
     this.init(params);
   },
 
   init(aParams) {
--- a/browser/locales/en-US/browser/preferences/containers.ftl
+++ b/browser/locales/en-US/browser/preferences/containers.ftl
@@ -55,17 +55,21 @@ containers-color-yellow =
 containers-color-orange =
     .label = Orange
 containers-color-red =
     .label = Red
 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 =
     .label = Briefcase
 # String represents a money sign but currently uses a dollar sign
 # so don't change to local currency. See Bug 1291672.
 containers-icon-dollar =
     .label = Dollar sign
--- a/toolkit/components/extensions/parent/ext-contextualIdentities.js
+++ b/toolkit/components/extensions/parent/ext-contextualIdentities.js
@@ -25,23 +25,25 @@ const CONTAINER_COLORS = new Map([
   ["blue", "#37adff"],
   ["turquoise", "#00c79a"],
   ["green", "#51cd00"],
   ["yellow", "#ffcb00"],
   ["orange", "#ff9f00"],
   ["red", "#ff613d"],
   ["pink", "#ff4bda"],
   ["purple", "#af51f5"],
+  ["toolbar", "#7c7c7d"],
 ]);
 
 const CONTAINER_ICONS = new Set([
   "briefcase",
   "cart",
   "circle",
   "dollar",
+  "fence",
   "fingerprint",
   "gift",
   "vacation",
   "food",
   "fruit",
   "pet",
   "tree",
   "chill",