NC22 / KellyC-Show-YouTube-Dislikes

Shows dislikes counter for Youtube videos. Optionaly ratio bar with configurable colors. Data sources controlled in extension setting
https://nradiowave.ru/webdev/
GNU General Public License v3.0
84 stars 3 forks source link

The extension for Firefox It is not working anymore. #5

Closed ElektroStudios closed 2 years ago

ElektroStudios commented 2 years ago

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.

NC22 commented 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

Janmm14 commented 2 years ago

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

ElektroStudios commented 2 years ago

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:

NC22 commented 2 years ago

@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 commented 2 years ago

@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.

Janmm14 commented 2 years ago

@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.

NC22 commented 2 years ago

@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 commented 2 years ago

@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...
Janmm14 commented 2 years ago

1.1.4.2 says that is waits on DOM ready even if dom is already loaded.

Log output ``` 12:54:19.586 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:19.746 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.205 [12:54] kellyShowRate : [initCss] Load resources from BG kellyTools.js:264:33 12:54:22.205 [12:54] kellyShowRate : [Desktop] version controller Drivers : [3] [loopsMax 9] kellyTools.js:264:33 12:54:22.206 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.206 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.358 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.358 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.517 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.517 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.668 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.668 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.829 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.829 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:22.985 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:22.986 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:23.159 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:23.159 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... kellyTools.js:264:33 12:54:23.394 [12:54] kellyShowRate : No buttonsWraper detected kellyTools.js:264:33 12:54:23.395 [12:54] kellyShowRate : [updatePageStateWaitDomReady] Wait dom ready... ``` After this it spams some more "Wait dom ready" as (blocked) requests are made in attempts to log stuff to ads/googleplay/youtube.
Janmm14 commented 2 years ago

@NC22 Here is a burn-on-read link to full html https://pastebin.com/Cn7Xjj10

NC22 commented 2 years ago

@Janmm14 checked. one of parent selectors was also moved. Updated for tests on 1.1.4.3

ElektroStudios commented 2 years ago

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 []
​
Janmm14 commented 2 years ago

@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 :(

NC22 commented 2 years ago

@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.

NC22 commented 2 years ago

@Janmm14 updated. please check output \ display for current version 1.1.4.4

ElektroStudios commented 2 years ago

@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?.

NC22 commented 2 years ago

@ElektroStudios yes, but may be cached. You can try to restart browser. It's shows on product page that its confirmed and published

Janmm14 commented 2 years ago

Thanks for the update, its working again for me now (using 1.1.4.5, didnt got to test 1.1.4.4): grafik

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.

ElektroStudios commented 2 years ago

I also can confirm v1.1.4.5 shows the dislike count and ratio bar on my side.

Great job, thank you so much.

ElektroStudios commented 2 years ago

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:

Janmm14 commented 2 years ago

Weird, your zoom behaves different than mine then. When I zoom, the bar stays where it should.

Janmm14 commented 2 years ago

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.

NC22 commented 2 years ago

@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

Janmm14 commented 2 years ago

Thanks all these updates.

NC22 commented 2 years ago

@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)