arams);
  },

  init(aParams) {
    this._dialog = document.querySelector("dialog");
    this.userContextId = aParams.userContextId || null;
    this.identity = aParams.identity;

    const iconWrapper = document.getElementById("iconWrapper");
    iconWrapper.appendChild(this.createIconButtons());

    const colorWrapper = document.getElementById("colorWrapper");
    colorWrapper.appendChild(this.createColorSwatches());

    const name = document.getElementById("name");
    name.addEventListener("input", () => this.checkForm());

    if (this.identity.name) {
      name.value = this.identity.name;
      this.checkForm();
    }

    document
      .getElementById("key_close")
      .addEventListener("command", () => window.close());

    document.addEventListener("dialogaccept", () => this.onApplyChanges());

    // This is to prevent layout jank caused by the svgs and outlines rendering at different times
    document.getElementById("containers-content").removeAttribute("hidden");
  },

  // Check if name is provided to determine if the form can be submitted
  checkForm() {
    const name = document.getElementById("name");
    this._dialog.setAttribute("buttondisabledaccept", !name.value.trim());
  },

  createIconButtons() {
    let radiogroup = document.createXULElement("radiogroup");
    radiogroup.setAttribute("id", "icon");
    radiogroup.className = "icon-buttons radio-buttons";

    for (let icon of this.icons) {
      let iconSwatch = document.createXULElement("radio");
      iconSwatch.id = "iconbutton-" + icon;
      iconSwatch.name = "icon";
      iconSwatch.type = "radio";
      iconSwatch.value = icon;

      if (this.identity.icon && this.identity.icon == icon) {
        iconSwatch.setAttribute("selected", true);
      }

      document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`);
      let iconElement = document.createXULElement("hbox");
      iconElement.className = "userContext-icon";
      iconElement.classList.add("identity-icon-" + icon);

      iconSwatch.appendChild(iconElement);
      radiogroup.appendChild(iconSwatch);
    }

    return radiogroup;
  },

  createColorSwatches() {
    let radiogroup = document.createXULElement("radiogroup");
    radiogroup.setAttribute("id", "color");
    radiogroup.className = "radio-buttons";

    for (let color of this.colors) {
      let colorSwatch = document.createXULElement("radio");
      colorSwatch.id = "colorswatch-" + color;
      colorSwatch.name = "color";
      colorSwatch.type = "radio";
      colorSwatch.value = color;

      if (this.identity.color && this.identity.color == color) {
        colorSwatch.setAttribute("selected", true);
      }

      document.l10n.setAttributes(colorSwatch, `containers-color-${color}`);
      let iconElement = document.createXULElement("hbox");
      iconElement.className = "userContext-icon";
      iconElement.classList.add("identity-icon-circle");
      iconElement.classList.add("identity-color-" + color);

      colorSwatch.appendChild(iconElement);
      radiogroup.appendChild(colorSwatch);
    }
    return radiogroup;
  },

  onApplyChanges() {
    let icon = document.getElementById("icon").value;
    let color = document.getElementById("color").value;
    let name = document.getElementById("name").value;

    if (!this.icons.includes(icon)) {
      throw new Error("Internal error. The icon value doesn't match.");
    }

    if (!this.colors.includes(color)) {
      throw new Error("Internal error. The color value doesn't match.");
    }

    if (this.userContextId) {
      ContextualIdentityService.update(this.userContextId, name, icon, color);
    } else {
      ContextualIdentityService.create(name, icon, color);
    }
    window.parent.location.reload();
  },
};

window.addEventListener("load", () => gContainersManager.onLoad());
PK