Top bar buttons displayed vertically when used together with Refined GitHub extension

[tomasz1986]

Description

I have been using the script for a few weeks so far, and I am very happy with it. Thank you very much.

Now, I am not sure whether the culprit lies in this in the script, or rather in the Refined GitHub (https://github.com/sindresorhus/refined-github) extension, but when the two are used together, the buttons at the top are displayed as below.

One strange thing is that this does not happen always. Sometimes the buttons get lined up horizontally after a page refresh, but break again on a next reload. It seems as if there was a conflict between the script and the extension during the page load.

Screenshot

Other information

• Link to page with the issue: https://github.com/Kir-Antipov/GitHub-Defreshed
• Browser: Chromium 84.0.4147.125
• Operating System: Windows 10
• GitHub-Defreshed version: 2.1.5

[Kir-Antipov]

Well, that's interesting. At least I was unable to reproduce this behavior in Firefox (my home browser). Will try it in chromium later. Do you have any other GitHub scripts/extensions/styles installed (except Refined GitHub, of course)?

[tomasz1986]

No other GitHub-related additions on my side. I have tested only in Chromium, so I cannot speak for other browsers though. The issue is gone after disabling the Refined Github extension, but comes back immediately after re-enabling it.

As for the extension itself, I basically keep everything at default. It does have an option to add a Releases button to the top bar, which I suppose could potentially cause issues when used together with the script, but the buttons get moved like that even with that option disabled.

[Kir-Antipov]

Thanks for this information, hope it will help me to find out the problem's root :)

[Kir-Antipov]

Confirmed. Refined GitHub changes some tab buttons (and adds new), but it's using new layout (of course):

<li class="d-flex">
    <a href="js-selected-navigation-item UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item">...</a>
</li>

Not:

<li>
    <a href="js-selected-navigation-item reponav-item">...</a>
</li>

In Firefox extensions always run before user scripts, so GitHub-Defreshed can take care about new tabs, but in Chrome things seem kinda chaotic, so sometimes it's okay and sometimes not, just like you're saying.

[Kir-Antipov]

But there's one thing: Refined GitHub does not really care about dynamic loading, so it's not really compatible with GitHub-Defreshed in general, so I don't think this small issue should be "fixed".

At this time the best I can offer you is implementing some features you've installed Refined GitHub for :)

[Kir-Antipov]

May be in future I'll change script's "engine" (the way it's handling GitHub dynamic page loading), but it's not the theme of the present day, so today Refined GitHub is totally incompatible with GitHub Defreshed just like many other GitHub scripts/extensions with each other, so I don't see any purpose to fix this small issue when the whole Refined GitHub is not doing well while GitHub Defreshed is active ¯\(ツ)/¯

[Kir-Antipov]

Goddamn stale...

[tomasz1986]

At this time the best I can offer you is implementing some features you've installed Refined GitHub for :)

Thank you for the investigation. I am not really a heavy user or such, and the features I mostly "use" the Refined Github extension for seem to be mostly the cosmetic stuff, e.g. showing a download count next to files in Releases, showing usernames next to reactions, hiding useless "+1" comments, etc.

[Kir-Antipov]

GitHub Defreshed is about "cosmetic stuff" too, so you're welcome to open new feature request issues about something you wanna see as part of GitHub Defreshed :)

[Kir-Antipov]

I am currently working on a second engine for GitHub Defreshed that will be fully compatible with extensions like Refined GitHub, so it's time to reopen this issue

[Kir-Antipov]

v4.0.0 brings compatibility with another scripts and extensions by introducing pjax-based engine