urlbarContainerColor.uc.js

// ==UserScript==
// @name           Urlbar Container Color Indicator
// @version        1.0.2
// @author         aminomancer
// @homepage       https://github.com/aminomancer/uc.css.js
// @description    Change the background color of the urlbar to match the active tab's contextual identity (aka multi-account container). Made by request.
// @downloadURL    https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/urlbarContainerColor.uc.js
// @updateURL      https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/urlbarContainerColor.uc.js
// @license        This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
// ==/UserScript==

(function() {
  updateUserContextUIIndicator = function() {
    function replaceContainerClass(classType, element, value) {
      let prefix = `identity-${classType}-`;
      if (value && element.classList.contains(prefix + value)) return;
      for (let className of element.classList) {
        if (className.startsWith(prefix)) element.classList.remove(className);
      }
      if (value) element.classList.add(prefix + value);
    }
    let hbox = document.getElementById("userContext-icons");
    let urlbar = document.getElementById("urlbar-input-container");
    let userContextId = gBrowser.selectedBrowser.getAttribute("usercontextid");
    if (!userContextId) {
      replaceContainerClass("color", hbox, "");
      replaceContainerClass("color", urlbar, "");
      urlbar.removeAttribute("contextid");
      hbox.hidden = true;
      return;
    }
    let identity = ContextualIdentityService.getPublicIdentityFromId(
      userContextId
    );
    if (!identity) {
      replaceContainerClass("color", hbox, "");
      replaceContainerClass("color", urlbar, "");
      urlbar.removeAttribute("contextid");
      hbox.hidden = true;
      return;
    }
    replaceContainerClass("color", hbox, identity.color);
    replaceContainerClass("color", urlbar, identity.color);
    urlbar.setAttribute("contextid", identity.userContextId);
    let label = ContextualIdentityService.getUserContextLabel(userContextId);
    document.getElementById("userContext-label").setAttribute("value", label);
    hbox.setAttribute("tooltiptext", label);
    let indicator = document.getElementById("userContext-indicator");
    replaceContainerClass("icon", indicator, identity.icon);
    hbox.hidden = false;
  };
  let sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(
    Ci.nsIStyleSheetService
  );
  let uri = Services.io.newURI(
    `data:text/css;charset=UTF=8,${encodeURIComponent(
      `#urlbar-input-container[contextid] {background-color: color-mix(in srgb, transparent 75%, var(--identity-tab-color));} #urlbar[open] #urlbar-input-container[contextid] {border-bottom-left-radius: 0; border-bottom-right-radius: 0;} #urlbar[open] > #urlbar-input-container[contextid] ~ .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {border-color: transparent}`
    )}`
  );
  if (sss.sheetRegistered(uri, sss.AUTHOR_SHEET)) return;
  sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
})();