delete-profile-card.mjs (5229B)
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 import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; 6 import { html } from "chrome://global/content/vendor/lit.all.mjs"; 7 8 // eslint-disable-next-line import/no-unassigned-import 9 import "chrome://global/content/elements/moz-button.mjs"; 10 // eslint-disable-next-line import/no-unassigned-import 11 import "chrome://global/content/elements/moz-button-group.mjs"; 12 // eslint-disable-next-line import/no-unassigned-import 13 import "chrome://global/content/elements/moz-card.mjs"; 14 15 /** 16 * Element used for deleting the currently running profile. 17 */ 18 export class DeleteProfileCard extends MozLitElement { 19 static properties = { 20 data: { type: Object }, 21 }; 22 23 static queries = { 24 headerAvatar: "#header-avatar", 25 cancelButton: "#cancel-delete", 26 }; 27 28 connectedCallback() { 29 super.connectedCallback(); 30 this.init(); 31 } 32 33 async init() { 34 if (this.initialized) { 35 return; 36 } 37 38 this.data = await RPMSendQuery("Profiles:GetDeleteProfileContent"); 39 40 if (this.data.profile.hasCustomAvatar) { 41 const objURL = URL.createObjectURL(this.data.profile.avatarFiles.file16); 42 this.data.profile.avatarURLs.url16 = objURL; 43 this.data.profile.avatarURLs.url80 = objURL; 44 } 45 46 let titleEl = document.querySelector("title"); 47 titleEl.setAttribute( 48 "data-l10n-args", 49 JSON.stringify({ profilename: this.data.profile.name }) 50 ); 51 52 this.initialized = true; 53 this.setFavicon(); 54 } 55 56 setFavicon() { 57 const favicon = document.getElementById("favicon"); 58 59 if (this.data.profile.hasCustomAvatar) { 60 favicon.href = this.data.profile.avatarURLs.url16; 61 return; 62 } 63 64 const faviconBlob = new Blob([this.data.profile.faviconSVGText], { 65 type: "image/svg+xml", 66 }); 67 const faviconObjURL = URL.createObjectURL(faviconBlob); 68 favicon.href = faviconObjURL; 69 } 70 71 updated() { 72 super.updated(); 73 74 if (!this.data?.profile) { 75 return; 76 } 77 78 let { themeFg, themeBg } = this.data.profile; 79 this.headerAvatar.style.fill = themeBg; 80 this.headerAvatar.style.stroke = themeFg; 81 } 82 83 cancelDelete() { 84 RPMSendAsyncMessage("Profiles:CancelDelete"); 85 } 86 87 confirmDelete() { 88 RPMSendAsyncMessage("Profiles:DeleteProfile"); 89 } 90 91 render() { 92 if (!this.data) { 93 return null; 94 } 95 96 return html`<link 97 rel="stylesheet" 98 href="chrome://browser/content/profiles/delete-profile-card.css" 99 /> 100 <link 101 rel="stylesheet" 102 href="chrome://global/skin/in-content/common.css" 103 /> 104 <moz-card 105 ><div id="delete-profile-card"> 106 <img 107 id="header-avatar" 108 width="80" 109 height="80" 110 data-l10n-id=${this.data.profile.avatarL10nId} 111 src=${this.data.profile.avatarURLs.url80} 112 /> 113 <div id="profile-content"> 114 <div> 115 <h1 116 data-l10n-id="delete-profile-header" 117 data-l10n-args=${JSON.stringify({ 118 profilename: this.data.profile.name, 119 })} 120 ></h1> 121 <p 122 class="sub-header" 123 data-l10n-id="delete-profile-description" 124 ></p> 125 </div> 126 <div class="data-list"> 127 <div class="data-list-item" id="windows"> 128 <span data-l10n-id="delete-profile-windows"></span> 129 <b>${this.data.windowCount}</b> 130 </div> 131 <div class="data-list-item" id="tabs"> 132 <span data-l10n-id="delete-profile-tabs"></span> 133 <b>${this.data.tabCount}</b> 134 </div> 135 <div class="data-list-item" id="bookmarks"> 136 <span data-l10n-id="delete-profile-bookmarks"></span> 137 <b>${this.data.bookmarkCount}</b> 138 </div> 139 <div class="data-list-item" id="history"> 140 <span data-l10n-id="delete-profile-history"></span> 141 <b>${this.data.historyCount}</b> 142 </div> 143 <div class="data-list-item" id="autofill"> 144 <span data-l10n-id="delete-profile-autofill"></span> 145 <b>${this.data.autofillCount}</b> 146 </div> 147 <div class="data-list-item" id="logins"> 148 <span data-l10n-id="delete-profile-logins"></span> 149 <b>${this.data.loginCount}</b> 150 </div> 151 </div> 152 <moz-button-group> 153 <moz-button 154 id="cancel-delete" 155 @click=${this.cancelDelete} 156 data-l10n-id="delete-profile-cancel" 157 ></moz-button> 158 <moz-button 159 type="destructive" 160 id="confirm-delete" 161 @click=${this.confirmDelete} 162 data-l10n-id="delete-profile-confirm" 163 ></moz-button> 164 </moz-button-group> 165 </div></div 166 ></moz-card>`; 167 } 168 } 169 170 customElements.define("delete-profile-card", DeleteProfileCard);