ui: 1.11.2 user avatar is missed in the header navbar

[RiverVanRain]

• Gitea version (or commit ref): 1.11.2
• Git version: 2.11.0
• Operating system: Debian
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant
• Log gist:

Description

User avatar is not displayed after upgrading Gitea from 1.11.1 to 1.11.2.
All caches (system / browser) were cleared but this didn't help.
...

Screenshots

[guillep2k]

Hi, I can't reproduce. Would you please give us more information?:

1. Is every user affected?
2. Can you change your avatar? Does that have any effect?
3. Check the generated HTML and see what URL is given for that avatar.
4. Check the network log in the browser, check the server's response for the avatar picture (is it 404?).
5. Check Gitea's logs and see if the avatar is actually served. Make sure ENABLE_ACCESS_LOG is set to true so all accesses are logged. You should see something like:

172.30.2.250 - - [07/Mar/2020:12:08:46 -0300] "GET /avatars/08a4754bc70fb29d15eb938b0dc5de18 HTTP/1.1" 200 3610 "\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0"

A final question: are you using a docker installation?

[RiverVanRain]

1. Yes, it's.
2. I did it. Nothing. I've removed the custom avatar even but the problem is still.
3. In the browser's console is:
   <span class="text"></span>
   Instead of source.
4. I've checked - all responses are OK with 200 status.
   Also, I haven't this problem in other places on the site (e.g. in the 'Switch Dashboard Context', on the User's profile, timeline) but on the header navbar only.
5. Got it. All responses have 200 status.

No, i'm not using a docker installtion.

All browser's extensions and firewall are disabled.
Trying with the latest Chrome on the Windows 10.

Same issue on Firefox.

[zeripath]

hmm... I wonder if it could be related to this: #10653
(Maybe we need this workaround in 1.11 #10655 too?)

--

I think I'm wrong here - I don't think that bug can be the cause.

[guillep2k]

Only thing I can think of is that you're using a custom template that relies on something that has changed? A git blame doesn't show anything useful:

https://github.com/go-gitea/gitea/blame/v1.11.2/templates/base/head_navbar.tmpl

(lines 74-79)

Even when you've linked the template from master, the version from 1.11.2 linked above doesn't differ much in this aspect.

The template itself doesn't have any conditionals in that part, so if <span class="text"> appears, it must be followed by <img class="ui tiny avatar image" width="24" height="24" src="...">, even if the image had a bad link.

Just in case, we're talking about this, aren't we?

[guillep2k]

Did you build from sources? Because if you did, there's a 1 in 8 chance the build went wrong, as @zeripath pointed out. If you did, could you try building again (make clean-all ; make)? If you didn't, could you tell us the exact source of your binary? Maybe one of our generated binaries went wrong like that.

[RiverVanRain]

@guillep2k Yes, I've custom template but it doesn't change this piece of code:

<div class="ui dropdown jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
				<span class="text">
					<img class="ui tiny avatar image" src="{{.SignedUser.RelAvatarLink}}">
					<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
					<span class="mobile-only">{{.SignedUser.Name}}</span>
					<i class="fitted octicon octicon-triangle-down not-mobile" tabindex="-1"></i>
				</span>
				<div class="menu user-menu" tabindex="-1">
					<div class="ui header">
						{{.i18n.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
					</div>

This worked on version 1.11.1 before today's updating to 1.11.2:

I have been using Gitea since v1.8.6.
Gitea was installed from binary for Linux/Debian not from sources.
Subsequent updates were the same...

Another weird thing:
When I go to any page on the site the avatar appears for a short time and then disappears again.
As I wrote above, I turned off all browser extensions and cleared all caches.
Something (JS? CSS?) cuts out a piece of code between these tags: <span class="text"></span>
I tried in different layout modes using DevTools but that also doesn't help.
No errors in console.

I've created screencast in slow motion:

Thanks for your great support!

[silverwind]

Maybe we need this workaround in 1.11 #10655 too

Not needed, 1.11 still has statically vendored fomantic-ui, the custom build is only in 1.12.

Regarding this issue: Maybe is is a bad JS cache? Try setting ui.USE_SERVICE_WORKER = false and then force-reload the page (CTRL-Shift-R in Firefox). Also I'd try removing any custom templates.

[RiverVanRain]

@silverwind Thanks for advice but I can't find this option via about:config in Firefox.
Also, I CTRL+Shift+R always.
Maybe need to say about my browsers' versions: Chrome 80.0.3987.116 \ Firefox 73.0.1

Also I'd try removing any custom templates.

I did it, clean the caches. Nothing.
Seems, it's the browser's issue.

[zeripath]

I wonder if it's something to do with the dropdown accessibility js?

[silverwind]

ui.USE_SERVICE_WORKER is in app.ini of Gitea. You can also temporarily disable dom.serviceWorkers.enabled in Firefox's about:config.

I wonder if it's something to do with the dropdown accessibility js?

Certainly seems possible. I suggest #10672 for its removal.

[RiverVanRain]

@zeripath Ah.. Understand now. I will do it.

[RiverVanRain]

@silverwind Tricks with service worker didn't help.

[duchenpaul]

@RiverVanRain Just try to click avatar button in the settings

[RiverVanRain]

@duchenpaul Just read this.

[silverwind]

Something (JS? CSS?) cuts out a piece of code between these tags:

Check in Browser devtools if the HTML response comes with the expected tags. At least then you'll know whether JS is interfering. CSS can not remove tags so should be of no concern.