Support for Android Firefox and m.youtube.com

should fix #68 and #143

List of changes:
* Suppress mobile user agents in background script
* Also look for the mobile equivalents of relevant HTML Elements
* More consistently use get[Dis]LikeButton() instead of getButtons().children
* Add mobile-specific css tweaks

Extensions/firefox/content-style.css

@@ -1,3 +1,9 @@
+html {
+  /* fallback values for mobile */
+  --yt-spec-icon-disabled: #909090;
+  --yt-spec-text-primary: #030303;
+}
+
 #return-youtube-dislike-bar-container {
   background: var(--yt-spec-icon-disabled);
   border-radius: 2px;
@@ -16,6 +22,16 @@
   top: 9px;
 }
 
+ytm-slim-video-action-bar-renderer > .ryd-tooltip {
+  padding-left: 12px;
+  top: 0px;
+}
+
+/* tp-yt-paper-tooltip not supported on mobile */
+ytm-slim-video-action-bar-renderer tp-yt-paper-tooltip {
+  display: none;
+}
+
 .ryd-tooltip-bar-container {
   width: 100%;
   height: 2px;

Extensions/firefox/return-youtube-dislike.background.js

@@ -46,8 +46,14 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
       toSend = [];
     }
   } else if (request.message == "fetch_from_youtube") {
+    let headers = {}
+    if (navigator && navigator.userAgent) {
+      // Never request mobile version
+      headers["User-Agent"] = navigator.userAgent.replace(/\(.*Mobile;/,"(X11; Linux x86_64;");
+    }
     fetch(`https://www.youtube.com/watch?v=${request.videoId}`, {
       method: "GET",
+      headers: headers
     })
       .then((response) => response.text())
       .then((text) => {

Extensions/firefox/return-youtube-dislike.script.js

@@ -19,14 +19,16 @@ function cLog(message, writer) {
 }
 
 function getButtons() {
-  //---   If Menu Element Is Displayed:   ---//
-  if (document.getElementById("menu-container")?.offsetParent === null) {
+  let menu_container = document.getElementById("menu-container");
+  //---   m.youtube.com:   ---//
+  if (menu_container === null) {
+    return document.querySelector(".slim-video-action-bar-actions");
+    //---   If Menu Element Is Displayed:   ---//
+  } else if (menu_container.offsetParent === null) {
     return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
     //---   If Menu Element Isnt Displayed:   ---//
   } else {
-    return document
-      .getElementById("menu-container")
-      ?.querySelector("#top-level-buttons-computed");
+    return menu_container.querySelector("#top-level-buttons-computed");
   }
 }
 
@@ -39,19 +41,23 @@ function getDislikeButton() {
 }
 
 function isVideoLiked() {
-  return getLikeButton().classList.contains("style-default-active");
+  return getLikeButton().classList.contains("style-default-active")
+      || getLikeButton().querySelector('[aria-pressed="true"]') !== null;
 }
 
 function isVideoDisliked() {
-  return getDislikeButton().classList.contains("style-default-active");
+  return getDislikeButton().classList.contains("style-default-active")
+      || getDislikeButton().querySelector('[aria-pressed="true"]') !== null;
 }
 
 function isVideoNotLiked() {
-  return getLikeButton().classList.contains("style-text");
+  return getLikeButton().classList.contains("style-text")
+      || getLikeButton().querySelector('[aria-pressed="false"]') !== null;
 }
 
 function isVideoNotDisliked() {
-  return getDislikeButton().classList.contains("style-text");
+  return getDislikeButton().classList.contains("style-text")
+      || getDislikeButton().querySelector('[aria-pressed="false"]') !== null;
 }
 
 function getState() {
@@ -66,10 +72,10 @@ function getState() {
 
 //---   Sets The Likes And Dislikes Values   ---//
 function setLikes(likesCount) {
-  getButtons().children[0].querySelector("#text").innerText = likesCount;
+  getLikeButton().querySelector("#text, .button-renderer-text").innerText = likesCount;
 }
 function setDislikes(dislikesCount) {
-  getButtons().children[1].querySelector("#text").innerText = dislikesCount;
+  getDislikeButton().querySelector("#text, .button-renderer-text").innerText = dislikesCount;
 }
 
 function setState() {
@@ -161,7 +167,9 @@ function getVideoId(url) {
 function isVideoLoaded() {
   const videoId = getVideoId(window.location.href);
   return (
-    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
+    document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null ||
+    // mobile: no video-id attribute
+    document.querySelector('#player[loading="false"]:not([hidden])') !== null
   );
 }
 
@@ -189,8 +197,8 @@ function setEventListeners(evt) {
       clearInterval(jsInitChecktimer);
       const buttons = getButtons();
       if (!window.returnDislikeButtonlistenersSet) {
-        buttons.children[0].addEventListener("click", likeClicked);
-        buttons.children[1].addEventListener("click", dislikeClicked);
+        getLikeButton().addEventListener("click", likeClicked);
+        getDislikeButton().addEventListener("click", dislikeClicked);
         let lastKnownScrollPosition = 0;
         let ticking = false;
         // document.addEventListener('scroll', function(e) {
@@ -220,8 +228,8 @@ function createRateBar(likes, dislikes) {
   var rateBar = document.getElementById("return-youtube-dislike-bar-container");
 
   const widthPx =
-    getButtons().children[0].clientWidth +
-    getButtons().children[1].clientWidth +
+    getLikeButton().clientWidth +
+    getDislikeButton().clientWidth +
     8;
 
   const widthPercent =
@@ -229,8 +237,9 @@ function createRateBar(likes, dislikes) {
 
   if (!rateBar) {
     (
-      document.querySelector("#actions-inner") ||
-      document.getElementById("menu-container")
+      document.getElementById("actions-inner") ||
+      document.getElementById("menu-container") ||
+      document.querySelector("ytm-slim-video-action-bar-renderer")
     ).insertAdjacentHTML(
       "beforeend",
       `
@@ -267,17 +276,20 @@ function createRateBar(likes, dislikes) {
 }
 
 function sendVideoIds() {
-  const ids = Array.from(
+  let links = Array.from(
     document.getElementsByClassName(
       "yt-simple-endpoint ytd-compact-video-renderer"
     )
-  )
-    .concat(
-      Array.from(
-        document.getElementsByClassName("yt-simple-endpoint ytd-thumbnail")
-      )
+  ).concat(
+    Array.from(
+      document.getElementsByClassName("yt-simple-endpoint ytd-thumbnail")
     )
-    .filter((x) => x.href && x.href.indexOf("/watch?v=") > 0)
+  );
+  // Also try mobile
+  if (links.length < 1) links = Array.from(
+    document.querySelectorAll(".large-media-item-metadata > a, a.large-media-item-thumbnail-container")
+  );
+  const ids = links.filter((x) => x.href && x.href.indexOf("/watch?v=") > 0)
     .map((x) => getVideoId(x.href));
   browser.runtime.sendMessage({
     message: "send_links",