profile-card.mjs (5472B)
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://browser/content/profiles/profile-card.mjs"; 10 // eslint-disable-next-line import/no-unassigned-import 11 import "chrome://global/content/elements/moz-card.mjs"; 12 // eslint-disable-next-line import/no-unassigned-import 13 import "chrome://global/content/elements/moz-button.mjs"; 14 // eslint-disable-next-line import/no-unassigned-import 15 import "chrome://global/content/elements/moz-button-group.mjs"; 16 17 const { SelectableProfile } = ChromeUtils.importESModule( 18 "resource:///modules/profiles/SelectableProfile.sys.mjs" 19 ); 20 21 /** 22 * Element used for displaying a SelectableProfile in the profile selector window 23 */ 24 export class ProfileCard extends MozLitElement { 25 static properties = { 26 profile: { type: SelectableProfile, reflect: true }, 27 }; 28 29 static queries = { 30 backgroundImage: ".profile-background-image", 31 avatarImage: ".profile-avatar", 32 profileCard: ".profile-card", 33 editButton: "#edit-button", 34 deleteButton: "#delete-button", 35 }; 36 37 firstUpdated() { 38 super.firstUpdated(); 39 40 this.setBackgroundImage(); 41 this.setAvatarImage(); 42 } 43 44 setBackgroundImage() { 45 this.backgroundImage.style.backgroundImage = `url("chrome://browser/content/profiles/assets/profilesBackground${ 46 this.profile.id % 5 47 }.svg")`; 48 let { themeFg, themeBg } = this.profile.theme; 49 this.backgroundImage.style.fill = themeBg; 50 this.backgroundImage.style.stroke = themeFg; 51 } 52 53 async setAvatarImage() { 54 this.avatarImage.style.backgroundImage = `url(${await this.profile.getAvatarURL(80)})`; 55 let { themeFg, themeBg } = this.profile.theme; 56 this.avatarImage.style.fill = themeBg; 57 this.avatarImage.style.stroke = themeFg; 58 } 59 60 launchProfile(url) { 61 this.dispatchEvent( 62 new CustomEvent("LaunchProfile", { 63 bubbles: true, 64 composed: true, 65 detail: { profile: this.profile, url }, 66 }) 67 ); 68 } 69 70 click() { 71 this.handleClick(); 72 } 73 74 handleClick() { 75 this.launchProfile(); 76 } 77 78 handleKeyDown(event) { 79 if ( 80 event.target === this.profileCard && 81 (event.code === "Enter" || event.code === "Space") 82 ) { 83 this.launchProfile(); 84 } 85 } 86 87 handleEditClick(event) { 88 event.stopPropagation(); 89 this.launchProfile("about:editprofile"); 90 } 91 92 handleDeleteClick(event) { 93 event.stopPropagation(); 94 this.dispatchEvent( 95 new CustomEvent("DeleteProfile", { 96 bubbles: true, 97 composed: true, 98 detail: this.profile, 99 }) 100 ); 101 } 102 103 render() { 104 return html`<link 105 rel="stylesheet" 106 href="chrome://browser/content/profiles/profile-card.css" 107 /> 108 <moz-card 109 data-l10n-id="profile-card" 110 data-l10n-args=${JSON.stringify({ profileName: this.profile.name })} 111 class="profile-card" 112 role="button" 113 tabindex="0" 114 @click=${this.handleClick} 115 @keydown=${this.handleKeyDown} 116 > 117 <div class="profile-background-container"> 118 <div class="profile-background-image"></div> 119 <div class="profile-avatar"></div> 120 </div> 121 <div class="profile-details"> 122 <h3 class="text-truncated-ellipsis">${this.profile.name}</h3> 123 <moz-button-group 124 ><moz-button 125 id="edit-button" 126 data-l10n-id="profile-card-edit-button" 127 type="ghost" 128 iconsrc="chrome://global/skin/icons/edit-outline.svg" 129 @click=${this.handleEditClick} 130 ></moz-button 131 ><moz-button 132 id="delete-button" 133 data-l10n-id="profile-card-delete-button" 134 type="ghost" 135 iconsrc="chrome://global/skin/icons/delete.svg" 136 @click=${this.handleDeleteClick} 137 ></moz-button 138 ></moz-button-group> 139 </div> 140 </moz-card>`; 141 } 142 } 143 144 customElements.define("profile-card", ProfileCard); 145 146 /** 147 * Element used for creating a new SelectableProfile in the profile selector window 148 */ 149 export class NewProfileCard extends MozLitElement { 150 createProfile() { 151 this.dispatchEvent( 152 new CustomEvent("CreateProfile", { 153 bubbles: true, 154 composed: true, 155 }) 156 ); 157 } 158 159 click() { 160 this.handleClick(); 161 } 162 163 handleClick() { 164 this.createProfile(); 165 } 166 167 handleKeyDown(event) { 168 if (event.code === "Enter" || event.code === "Space") { 169 this.createProfile(); 170 } 171 } 172 173 render() { 174 return html`<link 175 rel="stylesheet" 176 href="chrome://browser/content/profiles/profile-card.css" 177 /> 178 <div 179 class="profile-card new-profile-card" 180 role="button" 181 tabindex="0" 182 @click=${this.handleClick} 183 @keydown=${this.handleKeyDown} 184 > 185 <div class="profile-background-container"> 186 <div class="profile-background-image"></div> 187 <div class="profile-avatar"></div> 188 </div> 189 <div class="profile-details"> 190 <h3 data-l10n-id="profile-window-create-profile"></h3> 191 </div> 192 </div>`; 193 } 194 } 195 196 customElements.define("new-profile-card", NewProfileCard);