Skip to content

Conversation

@SunsetTechuila
Copy link
Contributor

@SunsetTechuila SunsetTechuila commented Oct 31, 2025

Less attention to detail, but also less code to maintain

  • Menus are not sticky on react-based pages
  • Issue description headers start to move a little bit earlier than they should
  • Header background is rounded when the header is sticky

resolves #8463
previous PR #8544

CC @karlhorky @Vangelis66

Test URLs

refined-github/sandbox#117
refined-github/sandbox#118
https://gist.github.com/anthonyeden/0088b07de8951403a643a8485af2709b

Screenshot

Screenshot 2025-10-31 194958

@fregante
Copy link
Member

fregante commented Nov 1, 2025

No need to force push here, it makes it difficult to see what changed between reviews of the code

@SunsetTechuila
Copy link
Contributor Author

I've accidentally committed lockfile changes, sorry

@Vangelis66
Copy link

When one of my own comments has been hidden, either by me or the tracker's owner, the bluish stickied-header becomes transparent when I click the show comment header button:

yt-dlp/yt-dlp#14847 (comment)

bug1

The above is with latest artifact installed in Firefox (Nightly 144.0a1) ...

I don't believe myself this should fall under

Less attention to detail

😉 ; kind regards.

@SunsetTechuila
Copy link
Contributor Author

I click the show comment header button

this triggers a re-render, undoing any changes to the class list

@karlhorky
Copy link
Contributor

karlhorky commented Nov 2, 2025

When one of my own comments has been hidden, either by me or the tracker's owner, the bluish stickied-header becomes transparent when I click the show comment header button:

This doesn't appear to be a problem with the current Custom CSS version from my comment:

Screenshot 2025-11-02 at 14 16 36

@SunsetTechuila
Copy link
Contributor Author

SunsetTechuila commented Nov 2, 2025

This doesn't appear to be a problem with #8463 (comment):

Because it doesn't rely on classes added by RGH

And you have to check your own comment. Also, I've already fixed that in 94a092d

@Vangelis66
Copy link

When one of my own comments has been hidden, either by me or the tracker's owner, the bluish stickied-header becomes transparent when I click the show comment header button

... I can confirm this is now fixed 👍 🎉 when installing artifact:

https://github.com/refined-github/refined-github/actions/runs/19009740536/artifacts/4441037790

bugfixed

Thanks for your swift action ❤️ ...

@Vangelis66
Copy link

Well, I had brought this up when PR #8544 was still open, but I think now is the time for a decision to be made...

At this very moment, judging by its manifest.json file,

	"browser_specific_settings": {
		"gecko": {
			"id": "{a4c4eda4-fb84-4a84-b4a1-f7c1cbf2a1ad}",
			"strict_min_version": "128.0"
		},

RGH still supports Mozilla Firefox 128.x.x, which includes the FxESR-128 branch...
Indeed, I can install artifact sticky-comment-header - New feature #14806 on FxESR-128.14.0 without an issue...
Be that as it may, this PR #8726 is quite broken on that version of Fx, because it uses CSS code implemented in later Fx versions; to get an idea, you can have a look at the comment I had posted in #8544, shortly after it was closed; also, below I have attached two new screenshots with the referenced artifact installed on 128.14.0:

PR own comment, e.g. #8726 (comment)

bug128

Issue own comment, e.g. #8463 (comment)

bug128-2

In both images, the "own" comment header has a solid black background, which becomes transparent when the header is being stickied 😞 ...

Mozilla have EoL'ed the 128esr branch with v128.14.0, the current ESR branch being 140-based 😉 ; so, it isn't imperative that RGH extends that 128esr support...

@SunsetTechuila can find and document the absolutely minimum version of Firefox that fully supports his #8726 code, and set that as the new minimum supported version inside the extension's manifest.json file.

If, for whatever other reason, the extension devs want to sustain 128esr support, then, perhaps, the extension could dynamically check the platform (browser engine) for specific CSS feature(s) support and if not found a) disable the sticky-comment-header feature altogether b) fallback to some 128esr-compatible "workaround" code, if at all possible...

Personally, for 128esr I still use the CSS code in @karlhorky 's comment ; "own" comment header background is dark grey (not bluish) and stays opaque when stickied:

#8544 (comment)

bug128-3

PS: This comment was written in FxESR-128.14.0 (32-bit) 😜 ; GitHub is still functioning here 😄 ...

@fregante
Copy link
Member

fregante commented Nov 3, 2025

Thanks for testing! Yeah we can definitely bump the minimum version in this PR to v140 for Firefox only

@SunsetTechuila
Copy link
Contributor Author

SunsetTechuila commented Nov 3, 2025

Support for single-color stop in linear-gradient() is limited, so it is best to avoid using it

@Vangelis66 try now

@Vangelis66
Copy link

@Vangelis66 , try now

Well, back to fx-128.14.0esr, where I have just installed artifact

sticky-comment-header - New feature #14809

Test results 😉 :

PR own comment, e.g. #8726 (comment)

128pr

Issue own comment, e.g. #8463 (comment)

128is

Issue unhidden own comment, e.g. yt-dlp/yt-dlp#14847 (comment)

128is-uh

So, all cases above appear as expected 🥇 🎉 ; many thanks indeed for your attention and prompt fixes to this specific "older" Fx support issue 😉 ...

@fregante, no need then to up the minimum supported Fx version in RGH itself, at least with regards to this specific "New feature" 😄 PR ...

Thanks for SunsetTechuila's coding efforts ❤️ , thanks overall for this indispensable extension for anyone using GH!

Best regards.

(Again, this comment was written using fx-128.14.0esr; there's a quite small "lag" in the editor, probably because GitHub are polyfilling (some of the) missing features - but it all works as it should!)

@fregante
Copy link
Member

fregante commented Nov 4, 2025

This feels awfully familiar. @yakov116 did we have this feature before?

@yakov116
Copy link
Member

yakov116 commented Nov 4, 2025

#3577 we had this for the issue, I don't think we ever had it for the comment

@SunsetTechuila
Copy link
Contributor Author

don't merge this rn please

@fregante fregante marked this pull request as draft November 8, 2025 08:16
@SunsetTechuila
Copy link
Contributor Author

safe to merge

@SunsetTechuila
Copy link
Contributor Author

Is there anything I can do to help get this merged?

@fregante
Copy link
Member

fregante commented Nov 17, 2025

When the PR is ready for review, it should be marked as ready for review.

I'll check it this week and release a new version

@fregante fregante marked this pull request as ready for review November 17, 2025 11:34
@fregante fregante merged commit cd9f305 into refined-github:main Nov 18, 2025
9 checks passed
@fregante
Copy link
Member

Let's give this a go 🚀

@SunsetTechuila SunsetTechuila deleted the sticky-headers branch November 18, 2025 11:23
"id": "sticky-comment-header",
"description": "Makes the comment header sticky when scrolling through long comments. Requires <code>show-names</code> to be enabled.",
"css": true,
"screenshot": "https://github.com/user-attachments/assets/0d6deca0-0f49-4aa3-ab23-0cfbde4fa4e8"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you replace the screenshot with a gif? Refer to sticky-sidebar, but it can be smaller than that / more focused.

Use Licecap because it produces very lightweight images

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I find the task of creating a good gif surprisingly hard. If I record a gif, I can’t trim unwanted parts without ruining quality or exploding the file size. If I record a video, I can’t convert it to a gif with a reasonable size and quality. Could be a skill issue 🤷‍♂️

@karlhorky
Copy link
Contributor

karlhorky commented Dec 3, 2025

@SunsetTechuila it looks like there's a visual bug with issue comments by the viewing user (your own issue comments) which are not the issue description comment at the top - the background is transparent and allows the content to make the header text unreadable:

Screenshot 2025-12-03 at 12 27 39

This does not affect an issue description from the viewing user - the background is not transparent there:

Screenshot 2025-12-03 at 12 27 30

All PR comments by the viewing user are also unaffected by this bug:

Screenshot 2025-12-03 at 12 33 12

Should be visible for you in the issue, eg:

@SunsetTechuila
Copy link
Contributor Author

Do you have show-names enabled?

@karlhorky
Copy link
Contributor

karlhorky commented Dec 3, 2025

No, I disable show-names because it makes the username ambiguous:

I remember reading somewhere that show-names was somehow tied to sticky-comment-header.

Would it be possible to use the CSS cascade to gracefully degrade in the case that show-names is disabled? For example:

  1. by default using a hardcoded opaque dark blue - or even dark gray - instead of transparent
  2. overriding this with another selector if show-names is enabled

@karlhorky
Copy link
Contributor

karlhorky commented Jan 3, 2026

@fregante @SunsetTechuila I see that #8809 was merged, but the fallback fixing the transparent header problem was reverted?

Does that mean that the problem still exists? Or am I misunderstanding the code in #8809?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

Sticky header for issue / PR / discussion comments

5 participants