Unwanted button borders from 2.37.26

ice051128 commented 1 year ago

Bug description

The latest release has introduced a border bug that was not there previously. In older version, there are no borders around buttons on the watch page which is the expected and correct behavior. Now, it overrides any custom CSS which should not be the case.

Steps to reproduce the behavior

Update the extension to 2.37.26
Watch any video
Observe the buttons

Refer to screenshots for the issue:

How it looks now:

How it used to look:

Browser

Microsoft Edge

Operating system

Windows

Extension version

2.37.26

The bug still happens in these conditions

[X] The bug still persist when I disable all other extensions (ex. in incognito mode with only this extension enabled)
[ ] When I logged out of my YouTube account (ex. in incognito mode)
[X] In incognito mode

Additional context and/or screenshots

No response

WesselKroos commented 1 year ago

Thanks for your report. I didn't know that YouTube still displays those button in the old style for some users.

The buttons look like this on my account, which is the new YouTube style (ignore my custom dislike/like ratio bar):

[ ] I'll make sure to remove the borders from the buttons with the old style in the next version

Is the rest of the old layout still styled correctly and working? (The related tags, playlists, transcripts, video description, comments, etc)

ice051128 commented 1 year ago

Thanks for your report. I didn't know that YouTube still displays those button in the old style for some users.

The buttons look like this on my account, which is the new YouTube style (ignore my custom dislike/like ratio bar):

[ ] I'll make sure to remove the borders from the buttons with the old style in the next version

Is the rest of the old layout still styled correctly and working? (The related tags, playlists, transcripts, video description, comments, etc)

Thanks for the quick reply, the rest of the old layout still works correctly

WesselKroos commented 1 year ago

@ice051128 I can't reproduce your bug when I turn off all YouTube's experiment flags:

Could you share the YouTube's experiment flags that are enabled in your account? You can share them by following these steps:

Press F12 to open a DevTools window
Open the Console tab (if not already opened)
Type or paste this text and press enter: ytcfg.get('EXPERIMENT_FLAGS')
Right click on the text output and click on Copy object

WesselKroos commented 1 year ago

I found 3 experiment flags that change the style of the buttons, but none of them resulted in squared buttons with borders:

ytcfg.set('EXPERIMENT_FLAGS', {
    ...ytcfg.get('EXPERIMENT_FLAGS'),
    web_button_rework: false,
    web_modern_buttons: false,
    web_segmented_like_dislike_button: false
})

Could you maybe also list the other extensions that you are using? Maybe you are using an extension / custom stylesheet that styles some of the buttons back to the old layout? In that case it might be difficult to remove the borders on the old buttons, because YouTube removed the attribute modern-metapanel that made it possible for me to distinct between the old an new buttons with the css selector ytd-watch-metadata[modern-metapanel]

ice051128 commented 1 year ago

I found 3 experiment flags that change the style of the buttons, but none of them resulted in squared buttons with borders:
ytcfg.set('EXPERIMENT_FLAGS', {
    ...ytcfg.get('EXPERIMENT_FLAGS'),
    web_button_rework: false,
    web_modern_buttons: false,
    web_segmented_like_dislike_button: false
})
Could you maybe also list the other extensions that you are using? Maybe you are using an extension / custom stylesheet that styles some of the buttons back to the old layout? In that case it might be difficult to remove the borders on the old buttons, because YouTube removed the attribute modern-metapanel that made it possible for me to distinct between the old an new buttons with the css selector ytd-watch-metadata[modern-metapanel]

I'm using a custom CSS with stylus that brings back the old layout and it has worked up to 2.37.25 perfectly, turning this extension off fixes the border issue immediately.

I put the code in console but nothing shows up

Repo of the old youtube layout CSS: https://github.com/sapondanaisriwan/AdashimaaTube

WesselKroos commented 1 year ago

Aha, that explains a lot. The problem is that if I revert the stylesheet back to version 2.37.24 it brings back this bug in YouTube's new style: https://github.com/WesselKroos/youtube-ambilight/issues/169

PS: Even if I remove the borders from the buttons you'll still be left with the modern style semi-transparent background on those buttons.

WesselKroos commented 1 year ago

I had some time to think about the available options.

With the philosophy of overriding YouTube's style as minimal as possible, I'm going to reduce the custom stylesheet so that the additional button borders are removed. This will still give you the semi-transparent background colors on buttons by default, but you can remove those by changing the "Buttons & boxes background color" setting to 0%:

This way the default modern style will also stay intact for others:

WesselKroos commented 1 year ago

@ice051128 Version 2.37.27 has just been released to the Edge Add-ons store.

WesselKroos / youtube-ambilight