Transparent top bar stops working when scroll

[joaolscosta]

Bug Report:

⚬ BUG: When i activate transparent top bar in Appearance it changes firstly but when we scroll it just becomes default again.
⚬ HOW: When i activate transparent top bar in Appearance it changes firstly but when we scroll it just becomes default again.

More / optionally:

/ ⚬ Expected /preferred behavior: When we scroll it should continue transparent instead of the default grey bar.
⚬ Browser: Firefox
⚬ Settings: Appearance -> header -> Transparent

⚬ OS: Arch Linux
⚬ Device: Huawei Matebook D14
transparent_header.webm

I can fix this issue!

[raszpl]

Appearance -> header -> Transparent doesnt work at all for me in Vivaldi

[ImprovedTube]

thank you! @joaolscosta
option was added quickly and always worked in chrome afaik.
(while we are at it we can always take the opportunity to also think of related opportunities, reducing the header more just keeping a few icons or copying/linking the shortcuts:search element next to the header options. and so on. )

[joaolscosta]

Hi in the last few days i worked in this issue very hard and i think user deserve to have a better experience with the transparent top bar than that. I totally respect your work and the point is there but check my last commit "51cb3b6" and see what i did.
Admin requested a few little things extra like hidding some buttons and try to give to user a better experience with the top transparent bar and as a user of this extension i think what i coded was a good experience of interface.
Please feel free to comment something and if it is good, @raszpl and @ImprovedTube let me PR this issue with my solution.
Thank you a lot!!!!

[raszpl]

I just checked if my fix didnt work and it doesnt! when google puts

ytd-masthead[frosted-glass] #background.ytd-masthead {
    background: var(--yt-frosted-glass-desktop)

It wasnt doing this frosted-glass when I was sending my last patch :|

joaolscosta so you want icons hidden until scrolling up?
If implemented this should be another separate option, as is it screws with Appearance >Header

Improve logo
Hide right buttons
Hide country code
Hide voice search button

bug:
https://github.com/joaolscosta/youtube/blob/51cb3b63fbd7747647b83299b3f9649190c81fb8/js%26css/web-accessible/www.youtube.com/appearance.js#L572-L573
will crash event listener for users not using it-header-transparent, its contained to this event listener so harmless

doesnt need 4 scroll listeners, can be combined into 1

#logo-icon {
    display: none !important;

there is an option for that, no need to force users into your preference :)

tons of color changes

there is also "Settings > Developer options > CSS" for user personal preferences

CSS in general

you have a few doubled lines there, and double declarations

EDIT: how about hidden until hover over? that wouldnt require any additional javascript at all :-) We could modify Appearance >Header

Improve logo
Hide right buttons
Hide country code
Hide voice search button

menu from switch buttons to normal|hover|hidden like the Position setting

[joaolscosta]

@ImprovedTube I have conflicts in the PR i've opened and somewhy i can't fix them here. Can you accept both changes (mine and the new code conflicted) ?

[joaolscosta]

I just checked if my fix didnt work and it doesnt! when google puts

ytd-masthead[frosted-glass] #background.ytd-masthead {
    background: var(--yt-frosted-glass-desktop)

It wasnt doing this frosted-glass when I was sending my last patch :|

joaolscosta so you want icons hidden until scrolling up? If implemented this should be another separate option, as is it screws with Appearance >Header

Improve logo
Hide right buttons
Hide country code
Hide voice search button

bug: https://github.com/joaolscosta/youtube/blob/51cb3b63fbd7747647b83299b3f9649190c81fb8/js%26css/web-accessible/www.youtube.com/appearance.js#L572-L573 will crash event listener for users not using it-header-transparent, its contained to this event listener so harmless

doesnt need 4 scroll listeners, can be combined into 1

#logo-icon {
    display: none !important;

there is an option for that, no need to force users into your preference :)

tons of color changes

there is also "Settings > Developer options > CSS" for user personal preferences

CSS in general

you have a few doubled lines there, and double declarations

EDIT: how about hidden until hover over? that wouldnt require any additional javascript at all :-) We could modify Appearance >Header

Improve logo
Hide right buttons
Hide country code
Hide voice search button

menu from switch buttons to normal|hover|hidden like the Position setting

Hi! I just followed what @ImprovedTube recommended me to do a few comments before. I've tested a lot of combined features of this extension and did not have any crash. It isn't my preference.
I created a new separate option fot the new things i've added but still using some already options already created.

I've tried to using hidden until over but not succesfully and if it is there a file where i can do the same in js why not?

Thanks for your comment!!!!

[raszpl]

I've tested a lot of combined features of this extension and did not have any crash.

the crash is contained in the event handler. Open devtools, disable it-header-transparent, scroll
var masthead = document.querySelector('html[it-header-transparent=true] ytd-masthead');
will set masthead undefined
var endButtons = masthead.querySelector('#end');
will call undefined.querySelector('#end');

I created a new separate option fot the new things i've added but still using some already options already created.

option as in new entry in https://github.com/joaolscosta/youtube/blob/154a8416b7b62e4bbdcdc896598d69741c928092/menu/skeleton-parts/appearance.js#L50

I've tried to using hidden until over but not succesfully and if it is there a file where i can do the same in js why not?

ytd-masthead #end {
    visibility: hidden;
}

ytd-masthead #container:hover #end {
    visibility: visible;
}

[raszpl]

html[it-header-position=static] ytd-mini-guide-renderer {
	z-index: 2200 !important;
	z-index: 7 !important;
	z-index: 7 !important;
}

?