containers.js (5036B)
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 const name = document.getElementById("name"); 72 name.addEventListener("input", () => this.checkForm()); 73 74 if (this.identity.name) { 75 name.value = this.identity.name; 76 this.checkForm(); 77 } 78 79 document 80 .getElementById("key_close") 81 .addEventListener("command", () => window.close()); 82 83 document.addEventListener("dialogaccept", () => this.onApplyChanges()); 84 85 // This is to prevent layout jank caused by the svgs and outlines rendering at different times 86 document.getElementById("containers-content").removeAttribute("hidden"); 87 }, 88 89 // Check if name is provided to determine if the form can be submitted 90 checkForm() { 91 const name = document.getElementById("name"); 92 this._dialog.toggleAttribute("buttondisabledaccept", !name.value.trim()); 93 }, 94 95 createIconButtons() { 96 let radiogroup = document.createXULElement("radiogroup"); 97 radiogroup.setAttribute("id", "icon"); 98 radiogroup.className = "icon-buttons radio-buttons"; 99 100 for (let icon of this.icons) { 101 let iconSwatch = document.createXULElement("radio"); 102 iconSwatch.id = "iconbutton-" + icon; 103 iconSwatch.name = "icon"; 104 iconSwatch.type = "radio"; 105 iconSwatch.value = icon; 106 107 if (this.identity.icon && this.identity.icon == icon) { 108 iconSwatch.setAttribute("selected", true); 109 } 110 111 document.l10n.setAttributes(iconSwatch, `containers-icon-${icon}`); 112 let iconElement = document.createXULElement("hbox"); 113 iconElement.className = "userContext-icon"; 114 iconElement.classList.add("identity-icon-" + icon); 115 116 iconSwatch.appendChild(iconElement); 117 radiogroup.appendChild(iconSwatch); 118 } 119 120 return radiogroup; 121 }, 122 123 createColorSwatches() { 124 let radiogroup = document.createXULElement("radiogroup"); 125 radiogroup.setAttribute("id", "color"); 126 radiogroup.className = "radio-buttons"; 127 128 for (let color of this.colors) { 129 let colorSwatch = document.createXULElement("radio"); 130 colorSwatch.id = "colorswatch-" + color; 131 colorSwatch.name = "color"; 132 colorSwatch.type = "radio"; 133 colorSwatch.value = color; 134 135 if (this.identity.color && this.identity.color == color) { 136 colorSwatch.setAttribute("selected", true); 137 } 138 139 document.l10n.setAttributes(colorSwatch, `containers-color-${color}`); 140 let iconElement = document.createXULElement("hbox"); 141 iconElement.className = "userContext-icon"; 142 iconElement.classList.add("identity-icon-circle"); 143 iconElement.classList.add("identity-color-" + color); 144 145 colorSwatch.appendChild(iconElement); 146 radiogroup.appendChild(colorSwatch); 147 } 148 return radiogroup; 149 }, 150 151 onApplyChanges() { 152 let icon = document.getElementById("icon").value; 153 let color = document.getElementById("color").value; 154 let name = document.getElementById("name").value; 155 156 if (!this.icons.includes(icon)) { 157 throw new Error("Internal error. The icon value doesn't match."); 158 } 159 160 if (!this.colors.includes(color)) { 161 throw new Error("Internal error. The color value doesn't match."); 162 } 163 164 if (this.userContextId) { 165 ContextualIdentityService.update(this.userContextId, name, icon, color); 166 } else { 167 ContextualIdentityService.create(name, icon, color); 168 } 169 window.parent.location.reload(); 170 }, 171 }; 172 173 window.addEventListener("load", () => gContainersManager.onLoad());