browser/components/preferences/dialogs/containers.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 const { ContextualIdentityService } = ChromeUtils.importESModule(
   6   "resource://gre/modules/ContextualIdentityService.sys.mjs"
   7 );
   8
   9 /**
  10  * We want to set the window title immediately to prevent flickers.
  11  */
  12 function setTitle() {
  13   let params = window.arguments[0] || {};
  14
  15   let winElem = document.documentElement;
  16   if (params.userContextId) {
  17     document.l10n.setAttributes(winElem, "containers-window-update-settings2", {
  18       name: params.identity.name,
  19     });
  20   } else {
  21     document.l10n.setAttributes(winElem, "containers-window-new2");
  22   }
  23 }
  24 setTitle();
  25
  26 let gContainersManager = {
  27   icons: [
  28     "fingerprint",
  29     "briefcase",
  30     "dollar",
  31     "cart",
  32     "vacation",
  33     "gift",
  34     "food",
  35     "fruit",
  36     "pet",
  37     "tree",
  38     "chill",
  39     "circle",
  40     "fence",
  41   ],
  42
  43   colors: [
  44     "blue",
  45     "turquoise",
  46     "green",
  47     "yellow",
  48     "orange",
  49     "red",
  50     "pink",
  51     "purple",
  52     "toolbar",
  53   ],
  54
  55   onLoad() {
  56     let params = window.arguments[0] || {};
  57     this.init(params);
  58   },
  59
  60   init(aParams) {
  61     this._dialog = document.querySelector("dialog");
  62     this.userContextId = aParams.userContextId || null;
  63     this.identity = aParams.identity;
  64
  65     const iconWrapper = document.getElementById("iconWrapper");
  66     iconWrapper.appendChild(this.createIconButtons());
  67
  68     const colorWrapper = document.getElementById("colorWrapper");
  69     colorWrapper.appendChild(this.createColorSwatches());
  70
  71     if (this.identity.name) {
  72       const name = document.getElementById("name");
  73       name.value = this.identity.name;
  74       this.checkForm();
  75     }
  76
  77     document.addEventListener("dialogaccept", () => this.onApplyChanges());
  78
  79     // This is to prevent layout jank caused by the svgs and outlines rendering at different times
  80     document.getElementById("containers-content").removeAttribute("hidden");
  81   },
  82
  83   uninit() {},
  84
  85   // Check if name is provided to determine if the form can be submitted
  86   checkForm() {
  87     const name = document.getElementById("name");
  88     this._dialog.setAttribute("buttondisabledaccept", !name.value.trim());
  89   },
  90
  91   createIconButtons(defaultIcon) {
  92     let radiogroup = document.createXULElement("radiogroup");
  93     radiogroup.setAttribute("id", "icon");
  94     radiogroup.className = "icon-buttons radio-buttons";
  95
  96     for (let icon of this.icons) {
  97       let iconSwatch = document.createXULElement("radio");
  98       iconSwatch.id = "iconbutton-" + icon;
  99       iconSwatch.name = "icon";
 100       iconSwatch.type = "radio";
 101       iconSwatch.value = icon;
 102
 103       if (this.identity.icon && this.identity.icon == icon) {
 104         iconSwatch.setAttribute("selected", true);
 105       }
 106
 107       document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`);
 108       let iconElement = document.createXULElement("hbox");
 109       iconElement.className = "userContext-icon";
 110       iconElement.classList.add("identity-icon-" + icon);
 111
 112       iconSwatch.appendChild(iconElement);
 113       radiogroup.appendChild(iconSwatch);
 114     }
 115
 116     return radiogroup;
 117   },
 118
 119   createColorSwatches(defaultColor) {
 120     let radiogroup = document.createXULElement("radiogroup");
 121     radiogroup.setAttribute("id", "color");
 122     radiogroup.className = "radio-buttons";
 123
 124     for (let color of this.colors) {
 125       let colorSwatch = document.createXULElement("radio");
 126       colorSwatch.id = "colorswatch-" + color;
 127       colorSwatch.name = "color";
 128       colorSwatch.type = "radio";
 129       colorSwatch.value = color;
 130
 131       if (this.identity.color && this.identity.color == color) {
 132         colorSwatch.setAttribute("selected", true);
 133       }
 134
 135       document.l10n.setAttributes(colorSwatch, `containers-color-${color}`);
 136       let iconElement = document.createXULElement("hbox");
 137       iconElement.className = "userContext-icon";
 138       iconElement.classList.add("identity-icon-circle");
 139       iconElement.classList.add("identity-color-" + color);
 140
 141       colorSwatch.appendChild(iconElement);
 142       radiogroup.appendChild(colorSwatch);
 143     }
 144     return radiogroup;
 145   },
 146
 147   onApplyChanges() {
 148     let icon = document.getElementById("icon").value;
 149     let color = document.getElementById("color").value;
 150     let name = document.getElementById("name").value;
 151
 152     if (!this.icons.includes(icon)) {
 153       throw new Error("Internal error. The icon value doesn't match.");
 154     }
 155
 156     if (!this.colors.includes(color)) {
 157       throw new Error("Internal error. The color value doesn't match.");
 158     }
 159
 160     if (this.userContextId) {
 161       ContextualIdentityService.update(this.userContextId, name, icon, color);
 162     } else {
 163       ContextualIdentityService.create(name, icon, color);
 164     }
 165     window.parent.location.reload();
 166   },
 167 };