unpredictable html attribute on avatars

[benjaminbhollon]

Hey, we've been discussing this at https://github.com/HabitRPG/habitica-chat-extension/pull/51 and @Alys requested I create an issue here.

The basic problem is that any part of the avatar needs to have a data attribute in order to be able to be styled by the CSS.

For example: <span data-v-42e99447 class="weapon_special_nomadsScimitar"></span>

The number after data-v- is constantly changing and there's no way to predict what it will be, so the chat-extension has to be constantly updated so that the avatars keep showing.

@Alys suggested that Habitica's code be modified to manually add another attribute usable by the chat extension.

[paglias]

@benjaminbhollon as mentioned in the other issue I'd need to know which element in the avatar need to be marked with an extra class for styling. You can see the template here https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/avatar.vue#L8

[benjaminbhollon]

@paglias Unless I'm wrong, the attribute is used on every part of the avatar, even the background.

[paglias]

@benjaminbhollon Sorry, I think there's some misunderstanding. The data attribute is not something that is going to be remain stable, it's an unique and random identifier used to apply css styling. The way it works cannot be changed.

What I'm proposing is to add a new class on each avatar element to better identify the avatar part it displays (for example head accessory, ..)

But I may be missing what you actually need for the extension to work, I understood you needed a way to better identify elements on the avatar.

The fact that the data attribute changes doesn't stop matching the avatar element or any sub element through other existing classes that already exist or that we can add if missing

[benjaminbhollon]

@paglias Oh, I see. The problem is that the extension needs to get the CSS styling applied to it as well, but couldn't without the data attribute, so how would we go about that?

[Alys]

@benjaminbhollon Does everything below describe the issue correctly? Please tell me if I've got any of this wrong.

1. When you've viewing the website, you see it has generated HTML code like in the screenshot below, containing HTML elements like this one: <span data-v-42e99447="" class="hair_flower_0"></span>

2. The data-v-42e99447="" attribute is the important part of that HTML element.

3. In the generated CSS code, you see the style below containing the data-v-42e99447 attribute name:

   .avatar[data-v-42e99447] {
   width:141px;
   height:147px;
   -ms-interpolation-mode:nearest-neighbor;
   image-rendering:-webkit-optimize-contrast;
   image-rendering:-moz-crisp-edges;
   image-rendering:-o-pixelated;
   image-rendering:pixelated;
   position:relative;
   cursor:pointer
   }

4. The chat extension needs to reference that .avatar[data-v-42e99447] style in code like this: https://github.com/HabitRPG/habitica-chat-extension/blob/master/chrome/mainChat/chat_inPage.js#L557-L562

   DOMPurify.sanitize('<a href="/profile/' + uuid + '" target="_blank"><div class="herobox">' +
   '<div class="character-sprites">' +
   '<span class="chair_' + avatarData["preferences"].chair + '" data-v-114900ec></span>' +
   '<span class="' + gear.back + '" data-v-114900ec></span>' +
   '<span class="' + sleepClass + '" data-v-114900ec></span>' +
   '<span class="' + avatarData["preferences"].size + '_shirt_' + avatarData["preferences"].shirt + '" data-v-114900ec></span>' +

   and a lot of other code in many other files in the extension.

5. Every time the number in that data-v-42e99447 attribute is changed automatically, the Chrome and Firefox extensions need to be updated to use the new number.

6. To prevent the need for the repeated updates from point 5, the CSS style currently named .avatar[data-v-42e99447] would have to have a name that never changed, or some other workaround would be needed.

[paglias]

You could read the data-xxx value with JavaScript from the extension maybe?

Il giorno mer 6 nov 2019 alle 06:17 Alys notifications@github.com ha scritto:

@benjaminbhollon https://github.com/benjaminbhollon Does everything below describe the issue correctly? Please tell me if I've got any of this wrong.

1. When you've viewing the website, you see it has generated HTML code like in the screenshot below, containing HTML elements like this one:

[image: image] https://user-images.githubusercontent.com/1495809/68269693-76726100-00a6-11ea-8954-5b25c9ec4cc5.png

1.

The data-v-42e99447="" attribute is the important part of that HTML element. 2.

In the generated CSS code, you see the style below containing the data-v-42e99447 attribute name:

.avatar[data-v-42e99447] { width:141px; height:147px; -ms-interpolation-mode:nearest-neighbor; image-rendering:-webkit-optimize-contrast; image-rendering:-moz-crisp-edges; image-rendering:-o-pixelated; image-rendering:pixelated; position:relative; cursor:pointer }

1. The chat extension needs to reference that .avatar[data-v-42e99447] style in code like this:

   https://github.com/HabitRPG/habitica-chat-extension/blob/master/chrome/mainChat/chat_inPage.js#L557-L562

DOMPurify.sanitize('

' + '

' + '<span class="chair_' + avatarData["preferences"].chair + '" data-v-114900ec>' + '' + '' + '<span class="' + avatarData["preferences"].size + 'shirt' + avatarData["preferences"].shirt + '" data-v-114900ec>' +

and a lot of other code in many other files in the extension.

1.

Every time the number in that data-v-42e99447 attribute is changed automatically, the Chrome and Firefox extensions need to be updated to use the new number. 2.

To prevent the need for the repeated updates from point 5, the CSS style currently named .avatar[data-v-42e99447] would have to have a name that never changed, or some other workaround would be needed.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitica/issues/11515?email_source=notifications&email_token=AAEQAV2YL7CBAS476DU57SDQSJHQLA5CNFSM4JJBWFZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEDFJSPA#issuecomment-550148412, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEQAV64EAGDCXBTF46ZJTTQSJHQLANCNFSM4JJBWFZA .

-- Matteo Pagliazzi - paglias.net

[benjaminbhollon]

@Alys Yeah, that's the problem all right. But I like @paglias's idea. I haven't checked the code, but I think it's definitely a feasible idea.

I think it would probably be simple to locate an avatar via js and get its attribute list using the .attributes property of the element. Since it always starts with data-v, I could probably identify which is the relevant attribute pretty easily.

The only possible concern is making sure that the avatar has loaded before checking. (Is there any page on which there is no avatar? That might throw an error.)

The soonest I can start coding is this weekend.

[citrusella]

Would it ever be appropriate to bring this up for more unofficial (and CSS only so no JS help) styles?

I had a problem like this with some of the navbar text items (namely the ones with dropdowns, and the dropdown items) in one of the more extensive CSS styles I've tried to do. I kept trying to keep it up-to-date with the data value, then tried other ways to identify them (like naming every single individual item via nth child stuff), and since nothing seemed to stay stable for very long (read: more than a few days to a week or two) I eventually gave up. At the time I brought it up in a guild (probably Aspiring Tailors) because it was so persistent and frustrating but don't remember pursuing any sort of more official "is there a better way to fix this" kind of discussion.

I just tried, several months later (i.e. just now), to fix it up and managed to do it quick and the solution here didn't appear to need the data attribute anymore (so here's hoping it sticks this time!), so this is more a hypothetical if it were to happen again in the future, but it was so persistent/frustrating at the time that I figured I'd ask if this kind of thing is appropriate to address in that context too.

[Alys]

The only possible concern is making sure that the avatar has loaded before checking. (Is there any page on which there is no avatar? That might throw an error.)

The header with the avatar should appear on all pages, excluding the "/static/" ones like https://habitica.com/static/community-guidelines and https://habitica.com/static/faq

However if the player is also using an extension to hide the header (some exist for that) then I guess finding the avatar might fail.

Perhaps if the data-v-* value can't be read, the extension can deliberately not show the avatars at all? If there's a user-specified setting to hide avatars (from memory, I think there is but I might be wrong), perhaps that could be automatically set to being turned off if you can't read the data-v value.

[benjaminbhollon]

@Alys Thanks for the help! I'll definitely do that.

I think with the static pages, there's not as much of a concern, because the user is likely to have loaded another page before viewing one of them, so it would already have read the data-v- value.

[vamsijv]

is this still open? Or may be it's already fixed by this @Alys @paglias

[Tressley]

Hello @vamsijv -- Closing this issue as the Habitica chat extension is no longer being maintained.