Skip to content

Commit 17337ee

Browse files
maileluckskpatenio
authored andcommitted
Bug 1984193 - Add tooltip attribute to profile avatars r=kpatenio,jhirsch,fluent-reviewers,profiles-reviewers,bolsson
Differential Revision: https://phabricator.services.mozilla.com/D262204
1 parent 7a6fa1f commit 17337ee

File tree

2 files changed

+97
-1
lines changed

2 files changed

+97
-1
lines changed

browser/components/profiles/content/profile-avatar-selector.mjs

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,37 @@ const AVATARS = [
3737
"video-game-controller",
3838
];
3939

40+
const AVATAR_TOOLTIP_IDS = {
41+
barbell: "barbell-avatar-tooltip",
42+
bike: "bike-avatar-tooltip",
43+
book: "book-avatar-tooltip",
44+
briefcase: "briefcase-avatar-tooltip",
45+
canvas: "picture-avatar-tooltip",
46+
craft: "craft-avatar-tooltip",
47+
"default-favicon": "globe-avatar-tooltip",
48+
diamond: "diamond-avatar-tooltip",
49+
flower: "flower-avatar-tooltip",
50+
folder: "folder-avatar-tooltip",
51+
hammer: "hammer-avatar-tooltip",
52+
heart: "heart-avatar-tooltip",
53+
"heart-rate": "heart-rate-avatar-tooltip",
54+
history: "clock-avatar-tooltip",
55+
leaf: "leaf-avatar-tooltip",
56+
lightbulb: "lightbulb-avatar-tooltip",
57+
makeup: "makeup-avatar-tooltip",
58+
message: "message-avatar-tooltip",
59+
"musical-note": "musical-note-avatar-tooltip",
60+
palette: "palette-avatar-tooltip",
61+
"paw-print": "paw-print-avatar-tooltip",
62+
plane: "plane-avatar-tooltip",
63+
present: "present-avatar-tooltip",
64+
shopping: "shopping-avatar-tooltip",
65+
soccer: "soccer-ball-avatar-tooltip",
66+
"sparkle-single": "sparkle-single-avatar-tooltip",
67+
star: "star-avatar-tooltip",
68+
"video-game-controller": "video-game-controller-avatar-tooltip",
69+
};
70+
4071
const VIEWS = {
4172
ICON: "icon",
4273
CUSTOM: "custom",
@@ -178,7 +209,6 @@ export class ProfileAvatarSelector extends MozLitElement {
178209
window.removeEventListener("pointerup", this);
179210
document.documentElement.classList.remove("disable-text-selection");
180211
}
181-
182212
getAvatarL10nId(value) {
183213
switch (value) {
184214
case "barbell":
@@ -279,6 +309,8 @@ export class ProfileAvatarSelector extends MozLitElement {
279309
type="ghost"
280310
iconSrc="chrome://browser/content/profiles/assets/16_${avatar}.svg"
281311
tabindex="-1"
312+
data-l10n-id=${AVATAR_TOOLTIP_IDS[avatar]}
313+
data-l10n-attrs="tooltiptext"
282314
></moz-button
283315
></moz-visual-picker-item>`
284316
)}</moz-visual-picker

browser/locales/en-US/browser/profiles.ftl

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,70 @@ sparkle-single-avatar = Sparkle
241241
star-avatar = Star
242242
video-game-controller-avatar = Video game controller
243243
244+
## Tooltips for default avatar icons
245+
246+
barbell-avatar-tooltip =
247+
.tooltiptext = Apply barbell avatar
248+
bike-avatar-tooltip =
249+
.tooltiptext = Apply bike avatar
250+
book-avatar-tooltip =
251+
.tooltiptext = Apply book avatar
252+
briefcase-avatar-tooltip =
253+
.tooltiptext = Apply briefcase avatar
254+
picture-avatar-tooltip =
255+
.tooltiptext = Apply picture avatar
256+
# Craft refers to hobby arts and crafts, represented by a button/fastener commonly found on clothing like shirts
257+
craft-avatar-tooltip =
258+
.tooltiptext = Apply craft avatar
259+
# Globe refers to the generic globe/world icon that appears in browser tabs when a website doesn't have its own favicon.
260+
globe-avatar-tooltip =
261+
.tooltiptext = Apply globe avatar
262+
diamond-avatar-tooltip =
263+
.tooltiptext = Apply diamond avatar
264+
flower-avatar-tooltip =
265+
.tooltiptext = Apply flower avatar
266+
folder-avatar-tooltip =
267+
.tooltiptext = Apply folder avatar
268+
hammer-avatar-tooltip =
269+
.tooltiptext = Apply hammer avatar
270+
heart-avatar-tooltip =
271+
.tooltiptext = Apply heart avatar
272+
heart-rate-avatar-tooltip =
273+
.tooltiptext = Apply heart rate avatar
274+
clock-avatar-tooltip =
275+
.tooltiptext = Apply clock avatar
276+
leaf-avatar-tooltip =
277+
.tooltiptext = Apply leaf avatar
278+
lightbulb-avatar-tooltip =
279+
.tooltiptext = Apply lightbulb avatar
280+
makeup-avatar-tooltip =
281+
.tooltiptext = Apply makeup avatar
282+
# Message refers to a text message, not a traditional letter/envelope message
283+
message-avatar-tooltip =
284+
.tooltiptext = Apply message avatar
285+
musical-note-avatar-tooltip =
286+
.tooltiptext = Apply musical note avatar
287+
palette-avatar-tooltip =
288+
.tooltiptext = Apply palette avatar
289+
paw-print-avatar-tooltip =
290+
.tooltiptext = Apply paw print avatar
291+
plane-avatar-tooltip =
292+
.tooltiptext = Apply plane avatar
293+
# Present refers to a gift box, not the current time period
294+
present-avatar-tooltip =
295+
.tooltiptext = Apply present avatar
296+
shopping-avatar-tooltip =
297+
.tooltiptext = Apply shopping cart avatar
298+
soccer-ball-avatar-tooltip =
299+
.tooltiptext = Apply soccer ball avatar
300+
sparkle-single-avatar-tooltip =
301+
.tooltiptext = Apply sparkle avatar
302+
star-avatar-tooltip =
303+
.tooltiptext = Apply star avatar
304+
video-game-controller-avatar-tooltip =
305+
.tooltiptext = Apply video game controller avatar
306+
307+
244308
custom-avatar-crop-back-button =
245309
.aria-label = Back
246310
custom-avatar-crop-view =

0 commit comments

Comments
 (0)