Add styles for 55+56 versions of Firefox so everyone gets a consistent underline. Fixes #779

bootstrap.js

@@ -24,6 +24,7 @@ const PREFS = [
 ];
 const Ci = Components.interfaces;
 const Cu = Components.utils;
+const Cc = Components.classes;
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 const { TextDecoder, TextEncoder } = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {});
@@ -34,6 +35,28 @@ XPCOMUtils.defineLazyModuleGetter(this, "OS",
 const JETPACK_DIR_BASENAME = "jetpack";
 const EXTENSION_ID = "@testpilot-containers";
 
+function loadStyles(resourceURI) {
+  const styleSheetService = Cc["@mozilla.org/content/style-sheet-service;1"]
+                            .getService(Ci.nsIStyleSheetService);
+  const styleURI = styleSheet(resourceURI);
+  const sheetType = styleSheetService.AGENT_SHEET;
+  styleSheetService.loadAndRegisterSheet(styleURI, sheetType);
+}
+
+function styleSheet(resourceURI) {
+  return Services.io.newURI("data/usercontext.css", null, resourceURI);
+}
+
+function unloadStyles(resourceURI) {
+  const styleURI = styleSheet(resourceURI);
+  const styleSheetService = Cc["@mozilla.org/content/style-sheet-service;1"]
+                  .getService(Ci.nsIStyleSheetService);
+  const sheetType = styleSheetService.AGENT_SHEET;
+  if (styleSheetService.sheetRegistered(styleURI, sheetType)) {
+    styleSheetService.unregisterSheet(styleURI, sheetType);
+  }
+}
+
 function filename() {
   const storeFile = Services.dirsvc.get("ProfD", Ci.nsIFile);
   storeFile.append(JETPACK_DIR_BASENAME);
@@ -107,7 +130,13 @@ async function uninstall(aData, aReason) {
 }
 
 // eslint-disable-next-line no-unused-vars
-function startup({webExtension}) {
+function startup({webExtension, resourceURI}) {
+  const version = Services.appinfo.version;
+  const versionMatch = version.match(/^([0-9]+)\./)[1];
+  if (versionMatch === "55"
+      || versionMatch === "56") {
+    loadStyles(resourceURI);
+  }
   // Reset prefs that may have changed, or are legacy
   setPrefs();
   // Start the embedded webextension.
@@ -115,6 +144,7 @@ function startup({webExtension}) {
 }
 
 // eslint-disable-next-line no-unused-vars
-function shutdown() {
+function shutdown({resourceURI}) {
+  unloadStyles(resourceURI);
 }
 

data/usercontext.css

@@ -1,108 +1,3 @@
-/* HACK: Custom Container vars do not propigate correctly
-until the container tab is blurred and refocused,
-adding the data-identity-color with the default hex
-value, or chrome url path as an alternate selector mitiages this bug.*/
-[data-identity-color="blue"],
-[data-identity-color="#00a7e0"] {
-  --identity-tab-color: #37adff;
-  --identity-icon-color: #37adff;
-}
-
-[data-identity-color="turquoise"],
-[data-identity-color="#01bdad"] {
-  --identity-tab-color: #00c79a;
-  --identity-icon-color: #00c79a;
-}
-
-[data-identity-color="green"],
-[data-identity-color="#7dc14c"] {
-  --identity-tab-color: #51cd00;
-  --identity-icon-color:  #51cd00;
-}
-
-[data-identity-color="yellow"],
-[data-identity-color="#ffcb00"] {
-  --identity-tab-color: #ffcb00;
-  --identity-icon-color: #ffcb00;
-}
-
-[data-identity-color="orange"],
-[data-identity-color="#f89c24"] {
-  --identity-tab-color: #ff9f00;
-  --identity-icon-color: #ff9f00;
-}
-
-[data-identity-color="red"],
-[data-identity-color="#d92215"] {
-  --identity-tab-color: #ff613d;
-  --identity-icon-color: #ff613d;
-}
-
-[data-identity-color="pink"],
-[data-identity-color="#ee5195"] {
-  --identity-tab-color: #ff4bda;
-  --identity-icon-color: #ff4bda;
-}
-
-[data-identity-color="purple"],
-[data-identity-color="#7a2f7a"] {
-  --identity-tab-color: #af51f5;
-  --identity-icon-color: #af51f5;
-}
-
-[data-identity-icon="fingerprint"],
-[data-identity-icon="chrome://browser/skin/usercontext/personal.svg"] {
-  --identity-icon: url("/data/usercontext.svg#fingerprint");
-}
-
-[data-identity-icon="briefcase"],
-[data-identity-icon="chrome://browser/skin/usercontext/work.svg"] {
-  --identity-icon: url("/data/usercontext.svg#briefcase");
-}
-
-[data-identity-icon="dollar"],
-[data-identity-icon="chrome://browser/skin/usercontext/banking.svg"] {
-  --identity-icon: url("/data/usercontext.svg#dollar");
-}
-
-[data-identity-icon="cart"],
-[data-identity-icon="chrome://browser/skin/usercontext/cart.svg"],
-[data-identity-icon="chrome://browser/skin/usercontext/shopping.svg"] {
-  --identity-icon: url("/data/usercontext.svg#cart");
-}
-
-[data-identity-icon="circle"] {
-  --identity-icon: url("/data/usercontext.svg#circle");
-}
-
-[data-identity-icon="gift"] {
-  --identity-icon: url("/data/usercontext.svg#gift");
-}
-
-[data-identity-icon="vacation"] {
-  --identity-icon: url("/data/usercontext.svg#vacation");
-}
-
-[data-identity-icon="food"] {
-  --identity-icon: url("/data/usercontext.svg#food");
-}
-
-[data-identity-icon="fruit"] {
-  --identity-icon: url("/data/usercontext.svg#fruit");
-}
-
-[data-identity-icon="pet"] {
-  --identity-icon: url("/data/usercontext.svg#pet");
-}
-
-[data-identity-icon="tree"] {
-  --identity-icon: url("/data/usercontext.svg#tree");
-}
-
-[data-identity-icon="chill"] {
-  --identity-icon: url("/data/usercontext.svg#chill");
-}
-
 #userContext-indicator {
   height: 16px;
   list-style-image: none !important;
@@ -129,19 +24,6 @@ value, or chrome url path as an alternate selector mitiages this bug.*/
   display: none;
 }
 
-.userContext-icon,
-.menuitem-iconic[data-usercontextid] > .menu-iconic-left > .menu-iconic-icon,
-.subviewbutton[usercontextid] > .toolbarbutton-icon,
-#userContext-indicator {
-  background-image: var(--identity-icon) !important;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  fill: var(--identity-icon-color) !important;
-  filter: url(/img/filters.svg#fill);
-  filter: url(/data/filters.svg#fill);
-}
-
 /* containers experiment */
 
 /* reset nightly containers */