Closed ElektroStudios closed 2 years ago
@ElektroStudios hi. looks like this is second "new" style. Your real location is Spain \ or may be u use vpn? havent seen this style before , and cant find vpn \ fake location to display it for me.
You can share your html of page by right click on this new like\dislike buttons -> Inspect - then you can screenshot for ex. like that https://github.com/NC22/KellyC-Show-YouTube-Dislikes/issues/4#issuecomment-1119968780 or choose some of the parent elements and also right click -> copy -> outer html and share for ex. on my mail - torrenttvi@gmail.com also you can share the whole page html.
any information will help
I get this new style as well (germany, no proxy/vpn whatever)
Without original RYD: devtools pic
With original RYD (as buttons are longer it automatically puts buttons below I guess): devtools pic
While I'm at it also some shorts debug: For shorts it seems that kellyc only works when RYD is also active.
https://gist.github.com/Janmm14/e2497139345541cef21a943a5a6502ac layout pic both extensions layout pic only kellyc layout pic only RYD layout pic default
Your real location is Spain \ or may be u use vpn?
Yes, my real location is Spain. I don't navigate through VPN.
You can share your html of page by right click on this new like\dislike buttons -> Inspect - then you can screenshot or choose some of the parent elements and also right click -> copy -> outer html and share
Sample video url from which I get this html: https://www.youtube.com/watch?v=C3h0zYu4yuU
I'm not sure whether the entire Youtube video's webpage source-code could contain personal information about my account. If you can confirm that it will not compromise me then I can share the entire source-code.
This is the (beautified)outer html of "top-level-buttons-computed" element which contains "segmented-like-button" and "segmented-dislike-button" elements:
<div id="top-level-buttons-computed" class="top-level-buttons style-scope ytd-menu-renderer">
<ytd-segmented-like-dislike-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
<!--css-build:shady-->
<div id="segmented-like-button" class="style-scope ytd-segmented-like-dislike-button-renderer">
<ytd-toggle-button-renderer class="style-scope ytd-segmented-like-dislike-button-renderer" button-renderer="true">
<yt-button-shape>
<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start " style="" aria-pressed="false" aria-label="haz clic en Me gusta en este vídeo junto con otras 1296 personas">
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px;">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
<g class="style-scope yt-icon">
<path d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z" class="style-scope yt-icon"></path>
</g>
</svg>
<!--css-build:shady-->
</yt-icon>
</div>
<div class="cbox">
<span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">1296</span>
</div>
<yt-touch-feedback-shape style="border-radius: inherit;">
<div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
<div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
<div class="yt-spec-touch-feedback-shape__fill" style=""></div>
</div>
</yt-touch-feedback-shape>
</button>
</yt-button-shape>
<tp-yt-paper-tooltip fit-to-visible-bounds="" offset="8" role="tooltip" tabindex="-1" style="inset: 44px auto auto 0px;">
<!--css-build:shady-->
<div id="tooltip" class="style-scope tp-yt-paper-tooltip hidden" style-target="tooltip"> Me gusta este vídeo </div>
</tp-yt-paper-tooltip>
</ytd-toggle-button-renderer>
</div>
<div id="segmented-dislike-button" class="style-scope ytd-segmented-like-dislike-button-renderer">
<ytd-toggle-button-renderer class="style-scope ytd-segmented-like-dislike-button-renderer" button-renderer="true">
<yt-button-shape>
<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end " style="" aria-pressed="false" aria-label="No me gusta este vídeo">
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px;">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
<g class="style-scope yt-icon">
<path d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z" class="style-scope yt-icon"></path>
</g>
</svg>
<!--css-build:shady-->
</yt-icon>
</div>
<yt-touch-feedback-shape style="border-radius: inherit;">
<div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
<div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
<div class="yt-spec-touch-feedback-shape__fill" style=""></div>
</div>
</yt-touch-feedback-shape>
</button>
</yt-button-shape>
<tp-yt-paper-tooltip fit-to-visible-bounds="" offset="8" role="tooltip" tabindex="-1" style="inset: 44px auto auto 57.9px;">
<!--css-build:shady-->
<div id="tooltip" class="style-scope tp-yt-paper-tooltip hidden" style-target="tooltip"> No me gusta este vídeo </div>
</tp-yt-paper-tooltip>
</ytd-toggle-button-renderer>
</div>
</ytd-segmented-like-dislike-button-renderer>
<ytd-button-renderer class="style-scope ytd-menu-renderer" button-renderer="">
<yt-button-shape>
<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading " style="" aria-label="Compartir">
<div class="yt-spec-button-shape-next__icon" aria-hidden="true">
<yt-icon style="width: 24px; height: 24px;">
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon">
<g mirror-in-rtl="" class="style-scope yt-icon">
<path d="M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z" class="style-scope yt-icon"></path>
</g>
</svg>
<!--css-build:shady-->
</yt-icon>
</div>
<div class="cbox">
<span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Compartir</span>
</div>
<yt-touch-feedback-shape style="border-radius: inherit;">
<div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true">
<div class="yt-spec-touch-feedback-shape__stroke" style=""></div>
<div class="yt-spec-touch-feedback-shape__fill" style=""></div>
</div>
</yt-touch-feedback-shape>
</button>
</yt-button-shape>
<tp-yt-paper-tooltip fit-to-visible-bounds="" offset="8" role="tooltip" tabindex="-1" style="inset: 44px auto auto 190.708px;">
<!--css-build:shady-->
<div id="tooltip" class="style-scope tp-yt-paper-tooltip hidden" style-target="tooltip"> Compartir </div>
</tp-yt-paper-tooltip>
</ytd-button-renderer>
</div>
A screenshot if useful:
@ElektroStudios
Thanks. updated according to this html. Still can be issues, because its better to find way to check it directly. Version 1.1.4.2 in FF for test. May be will try to check from German \ Spain vpn when I'll be able to buy one of this later.
@Janmm14
upd : shorts format looks the same, at least on "actions" box level. Can you copypaste whole block that represents the video + name of main container - like shorts-container - > "ytd-reel-video-renderer" if its named the same or mabe have some other name
@ElektroStudios
Still can be issues, because its better to find way to check it directly. Version 1.1.4.2 in FF for test. May be will try to check from German \ Spain vpn when I'll be able to buy one of this later.
Thanks to you. However, I Installed v1.1.4.2 and the problem persists.
I tried to find a free VPN for you with servers on Spain, but I didn't found it. I found this paid ExpressVPN with this firefox addon and they say to have three servers on Spain. But probably you already have your own paid-VPN software preferences.
EDIT: As mentioned by @Janmm14 in the post below, it seems not country-based. I used a free VPN extension for Firefox (Hoox VPN) using EEUU server, reloaded the Youtube webpage and I still can't see the dislike count and ratio bar.
@NC22 Its definitely not just country-based. My other yt account has the old format for example and not-logged-in is also old format here.
@ElektroStudios ok. Can you enable debug log and screenshot output. https://catface.ru/userfiles/media/udata_1662554487_wtagrbpo.png
Also may be some specifed errors that wasnt noticed...
@ElektroStudios ok. Can you enable debug log and screenshot output.
It seems to get stuck with [updatePageStateWaitDomReady]:
Another log:
[14:57] kellyShowRate : [initCss] Load resources from BG
kellyTools.js:264:33
[14:57] kellyShowRate : [Desktop] version controller Drivers : [2] [loopsMax 6]
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : No buttonsWraper detected
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
27 kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
6 kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
27 kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
33 kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
88 kellyTools.js:264:33
[14:57] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
36 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
23 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
27 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
4 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
6 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
19 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
49 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
33 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
8 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
10 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
8 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
2 kellyTools.js:264:33
[14:58] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
2 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
3 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
8 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
13 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
43 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
9 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
3 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
6 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
28 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
23 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
10 kellyTools.js:264:33
[14:59] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
2 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
6 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
7 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
8 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
70 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
32 kellyTools.js:264:33
[15:00] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready...
1.1.4.2 says that is waits on DOM ready even if dom is already loaded.
@NC22 Here is a burn-on-read link to full html https://pastebin.com/Cn7Xjj10
@Janmm14 checked. one of parent selectors was also moved. Updated for tests on 1.1.4.3
Still not working for me the v1.1.4.3
<div id="top-level-buttons-computed" class="top-level-buttons style-scope ytd-menu-renderer">
__dataHost: <ytd-menu-renderer class="style-scope ytd-watch-metadata" tonal-override="" has-items="2">
__domApi: Object { node: div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer
}
__shady: Object { parentNode: DocumentFragment [], nextSibling: div#flexible-item-buttons.style-scope.ytd-menu-renderer
, previousSibling: <!-- css-build:shady -->, … }
__shady_native_childElementCount: 2
__shady_native_childNodes: NodeList [ ytd-segmented-like-dislike-button-renderer.style-scope.ytd-menu-renderer, ytd-button-renderer.style-scope.ytd-menu-renderer
]
__shady_native_children: HTMLCollection { 0: ytd-segmented-like-dislike-button-renderer.style-scope.ytd-menu-renderer, 1: ytd-button-renderer.style-scope.ytd-menu-renderer
, length: 2 }
__shady_native_className: "top-level-buttons style-scope ytd-menu-renderer"
__shady_native_firstChild: <ytd-segmented-like-dislike-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
__shady_native_firstElementChild: <ytd-segmented-like-dislike-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
__shady_native_innerHTML: "<ytd-segmented-like-dislike-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"true\"><!--css-build:shady--><div id=\"segmented-like-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start \" style=\"\" aria-pressed=\"true\" aria-label=\"1901 Me gusta\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">1901</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Ya no me gusta\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div><div id=\"segmented-dislike-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end \" style=\"\" aria-pressed=\"false\" aria-label=\"No me gusta este vídeo\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n No me gusta este vídeo\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div></ytd-segmented-like-dislike-button-renderer><ytd-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading \" style=\"\" aria-label=\"Compartir\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g mirror-in-rtl=\"\" class=\"style-scope yt-icon\"><path d=\"M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">Compartir</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape><tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Compartir\n</div>\n</tp-yt-paper-tooltip></ytd-button-renderer>"
firstChild: <ytd-segmented-like-dislike-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
firstElementChild: <ytd-segmented-like-dislike-button-renderer class="style-scope ytd-menu-renderer" button-renderer="true">
id: "top-level-buttons-computed"
innerHTML: "<ytd-segmented-like-dislike-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"true\"><!--css-build:shady--><div id=\"segmented-like-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start \" style=\"\" aria-pressed=\"true\" aria-label=\"1901 Me gusta\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">1901</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Ya no me gusta\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div><div id=\"segmented-dislike-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end \" style=\"\" aria-pressed=\"false\" aria-label=\"No me gusta este vídeo\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n No me gusta este vídeo\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div></ytd-segmented-like-dislike-button-renderer><ytd-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading \" style=\"\" aria-label=\"Compartir\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g mirror-in-rtl=\"\" class=\"style-scope yt-icon\"><path d=\"M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">Compartir</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape><tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Compartir\n</div>\n</tp-yt-paper-tooltip></ytd-button-renderer>"
outerHTML: "<div id=\"top-level-buttons-computed\" class=\"top-level-buttons style-scope ytd-menu-renderer\"><ytd-segmented-like-dislike-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"true\"><!--css-build:shady--><div id=\"segmented-like-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading yt-spec-button-shape-next--segmented-start \" style=\"\" aria-pressed=\"true\" aria-label=\"1901 Me gusta\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M3,11h3v10H3V11z M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11v10h10.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">1901</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Ya no me gusta\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div><div id=\"segmented-dislike-button\" class=\"style-scope ytd-segmented-like-dislike-button-renderer\"><ytd-toggle-button-renderer class=\"style-scope ytd-segmented-like-dislike-button-renderer\" button-renderer=\"true\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-button yt-spec-button-shape-next--segmented-end \" style=\"\" aria-pressed=\"false\" aria-label=\"No me gusta este vídeo\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g class=\"style-scope yt-icon\"><path d=\"M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape>\n<tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n No me gusta este vídeo\n</div>\n</tp-yt-paper-tooltip>\n</ytd-toggle-button-renderer></div></ytd-segmented-like-dislike-button-renderer><ytd-button-renderer class=\"style-scope ytd-menu-renderer\" button-renderer=\"\"><yt-button-shape><button class=\"yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading \" style=\"\" aria-label=\"Compartir\"><div class=\"yt-spec-button-shape-next__icon\" aria-hidden=\"true\"><yt-icon style=\"width: 24px; height: 24px;\"><svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"xMidYMid meet\" focusable=\"false\" style=\"pointer-events: none; display: block; width: 100%; height: 100%;\" class=\"style-scope yt-icon\"><g mirror-in-rtl=\"\" class=\"style-scope yt-icon\"><path d=\"M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z\" class=\"style-scope yt-icon\"></path></g></svg><!--css-build:shady--></yt-icon></div><div class=\"cbox\"><span class=\"yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap\" role=\"text\">Compartir</span></div><yt-touch-feedback-shape style=\"border-radius: inherit;\"><div class=\"yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response\" aria-hidden=\"true\"><div class=\"yt-spec-touch-feedback-shape__stroke\" style=\"\"></div><div class=\"yt-spec-touch-feedback-shape__fill\" style=\"\"></div></div></yt-touch-feedback-shape></button></yt-button-shape><tp-yt-paper-tooltip fit-to-visible-bounds=\"\" offset=\"8\" role=\"tooltip\" tabindex=\"-1\"><!--css-build:shady--><div id=\"tooltip\" class=\"hidden style-scope tp-yt-paper-tooltip\" style-target=\"tooltip\">\n Compartir\n</div>\n</tp-yt-paper-tooltip></ytd-button-renderer></div>"
outerText: "1901\nCompartir"
ownerDocument: HTMLDocument https://www.youtube.com/watch?v=LF_y3jW4avc
parentElement: <ytd-menu-renderer class="style-scope ytd-watch-metadata" tonal-override="" has-items="2">
parentNode: <ytd-menu-renderer class="style-scope ytd-watch-metadata" tonal-override="" has-items="2">
part: DOMTokenList []
@NC22 when I put
document.querySelectorAll("#above-the-fold #top-level-buttons-computed")[0].children[0].children[1]
into the console it does return me the div#segmented-dislike-button I do think thats exactly what your code does atm. So I have no clue why getPageDom returns false :(
@Janmm14 thanks for testing, I think its should work, I'll recheck, but any way code for button selectors still incorect - after feedback from @ElektroStudios I see that dislike button currently can be empty and do not have text placeholder node \ element that used in selector also, so I need to always check this also for this style additionaly. Currently I write code to add this placeholder if its missing.
@Janmm14 updated. please check output \ display for current version 1.1.4.4
@Janmm14 updated. please check output \ display for current version 1.1.4.4
Last version for Firefox shows 1.1.4.3, ¿did you updated it?.
@ElektroStudios yes, but may be cached. You can try to restart browser. It's shows on product page that its confirmed and published
Thanks for the update, its working again for me now (using 1.1.4.5, didnt got to test 1.1.4.4):
Some suggestions about layout:
For the new design I would just suggest to set left: 0
instead of 8px
.
Yes, this can be changed in the configuration, but I think the default could be altered for this design.
And the height configuration does not work for me, its always 5px.
I also can confirm v1.1.4.5 shows the dislike count and ratio bar on my side.
Great job, thank you so much.
I just noticed the ratio bar does not align when I do zoom-in in the webpage, this is with 120% zoom-in:
But at least it is working again. And it is aligned with a 100% zoom page:
Weird, your zoom behaves different than mine then. When I zoom, the bar stays where it should.
Also another little desgn thingy: Add a 6px margin to the left somewhere in one of the elements you add for the dislike counter. The thumb-up button has 6px right margin, but the thumb-down button doesn't get right margin by youtube.
@ElektroStudios
this is with 120% zoom-in
original sentiment bar by Youtube still supose to be in the same place, just hidden. Would be interesting to see if its have the same problem or not. Or maybe they completely forgot about it.
I currently added optional "offset" parameters (just sets addition margin from left and bottom for bar), just as temporary static work out, may be will remove this params later, when find more good solution.
@Janmm14
For the new design I would just suggest to set to set left: 0 instead of 8px And the height configuration does not work for me, its always 5px. Add a 6px margin to the left somewhere
updated in 1.1.4.7
Thanks all these updates.
@Janmm14 @ElektroStudios Hi. Since now YT currently update design for my region too, was able to check how this looks by myself. So added auto align ratio bar by default for this style \ fixes for YT Shorts
should be look like this by default without any manual corrections on any zoom %
https://catface.ru/userfiles/media/udata_1665792488_nsfxnnxr.png
(option "Auto align ratio bar" enabled by default, manual offsets still available, but reseted)
changes related to version 1.1.5.0 (currently FF only, Chrome - in moderation process)
I just noticed that the extension has suddenly stopped working since Youtube changed the like/dislike button style to this kind of actual rounded buttons:
I'm not really sure when it has stopped working since I normally don't use neither focus my attention on the dislike button, but I think it was after that aesthetic change.
I'm using Firefox Dev. Edition 105.0b7 x64. I'm not running the browser in a private window and I allowed the extension to run in private windows. I use a webpage zoom of 120% for Youtube site.
It seems a strange issue to me since I seen that the author has updated the extension (for Firefox) yesterday 6 of September.
If this is a isolated problem that only occurs to me, and if you require that I provide any info of my browser, just ask me for that.
Thanks in advance.