fix: commits button not showing consistently

js/addCommitsButton.js

@@ -1,59 +1,72 @@
 var isCommitsTabOpen = false;
 function addCommitsButton() {
-    // parentObject is the bar which contains all the
-    // tab buttons, (code, issues, pull requests,..)
-    var parentObject = document.querySelector('[data-pjax="#js-repo-pjax-container"]').children[0];
-
-    // Copies the "Issues" tab button, and edit it to commits
-    // so that the UI matches even if GitHub choose to change UI
-    var newButton = parentObject.children[1].cloneNode(true);
-    var newButtonChild = newButton.children[0];
-    newButtonChild.id = "commits-tab";
-    newButtonChild.setAttribute("aria-disabled", "true");
-    newButtonChild.setAttribute("data-tab-item", "commits-tab");
+  // parentObject is the bar which contains all the
+  // tab buttons, (code, issues, pull requests,..)
+  var parentObject = document.querySelector('[data-pjax="#js-repo-pjax-container"]').children[0];
+
+  // Clean up the old Commits button if exists
+  const oldCommitsButton = document.getElementById("commits-tab");
+  if (oldCommitsButton) {
+    oldCommitsButton.removeEventListener("click", openCommitsTab);
+    oldCommitsButton.removeAttribute("aria-current");
+    oldCommitsButton.removeAttribute("data-selected-links");
+    oldCommitsButton.remove();
+    // remove old Commits button's <li> from the parent Nav
+    const oldCommitsLiElement = parentObject.children[1];
+    const removedLi = parentObject.removeChild(oldCommitsLiElement);
+  }
+
+  // Copies the "Issues" tab button, and edit it to commits
+  // so that the UI matches even if GitHub choose to change UI
+  var newButton = parentObject.children[1].cloneNode(true);
+  var newButtonChild = newButton.children[0];
+  newButtonChild.id = "commits-tab";
+  newButtonChild.setAttribute("aria-disabled", "true");
+  newButtonChild.setAttribute("data-tab-item", "commits-tab");
+  newButtonChild.removeAttribute("aria-current");
+  newButtonChild.classList.remove("selected");
+  newButtonChild.setAttribute("data-selected-links", "repo_commits repo_milestones /NirmalScaria/le-git-graph/commits")
+
+  // Remove the href. We wont navigate anywhere.
+  newButtonChild.removeAttribute("href");
+  newButtonChild.addEventListener("click", openCommitsTab);
+
+  Array.from(parentObject.children).forEach((child) => {
+    thisChild = child.children[0];
+    thisChild.addEventListener("click", closeCommitsTab);
+  });
+
+  // Set the commits button SVG
+  newButtonChild.children[0].setAttribute("class", "octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline");
+  // newButtonChild.children[0].removeChild(newButtonChild.children[0].children[0]);
+  newButtonChild.children[0].children[0].setAttribute("d", "M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z");
+  newButtonChild.children[0].children[0].setAttribute("fill-rule", "evenodd");
+  // remove the second child
+  try {
+    newButtonChild.children[0].removeChild(newButtonChild.children[0].children[1]);
+  } catch {
+    // The repo has no issues tab
+  }
+  // Set the label to "Commits"
+  newButtonChild.children[1].setAttribute("data-content", "Commits");
+  newButtonChild.children[1].innerText = "Commits";
+
+  // Remove the count indicator if exists.
+  if (newButtonChild.children[2]) {
+    newButtonChild.removeChild(newButtonChild.children[2]);
+  }
+
+  // Add the commits button to the UI
+  parentObject.insertBefore(newButton, parentObject.children[1]);
+
+  function closeCommitsTab() {
+    // Deselect the commits tab.
+    // Navigation would be handled automatically by the original GitHub code.
+    isCommitsTabOpen = false;
+    var commitsTabButton = document.getElementById("commits-tab");
+    commitsTabButton.removeEventListener("click", openCommitsTab);
+    commitsTabButton.addEventListener("click", openCommitsTab);
     newButtonChild.removeAttribute("aria-current");
-    newButtonChild.classList.remove("selected");
-    newButtonChild.setAttribute("data-selected-links", "repo_commits repo_milestones /NirmalScaria/le-git-graph/commits")
-
-    // Remove the href. We wont navigate anywhere.
-    newButtonChild.removeAttribute("href");
-    newButtonChild.addEventListener("click", openCommitsTab);
-
-    Array.from(parentObject.children).forEach((child) => {
-        thisChild = child.children[0];
-        thisChild.addEventListener("click", closeCommitsTab);
-    });
-
-    // Set the commits button SVG
-    newButtonChild.children[0].setAttribute("class", "octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline");
-    // newButtonChild.children[0].removeChild(newButtonChild.children[0].children[0]);
-    newButtonChild.children[0].children[0].setAttribute("d", "M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z");
-    newButtonChild.children[0].children[0].setAttribute("fill-rule", "evenodd");
-    // remove the second child
-    try {
-        newButtonChild.children[0].removeChild(newButtonChild.children[0].children[1]);
-    } catch {
-        // The repo has no issues tab
-    }
-    // Set the label to "Commits"
-    newButtonChild.children[1].setAttribute("data-content", "Commits");
-    newButtonChild.children[1].innerText = "Commits";
-
-    // Remove the count indicator if exists.
-    if (newButtonChild.children[2]) {
-        newButtonChild.removeChild(newButtonChild.children[2]);
-    }
-
-    // Add the commits button to the UI
-    parentObject.insertBefore(newButton, parentObject.children[1]);
-
-    function closeCommitsTab() {
-        // Deselect the commits tab.
-        // Navigation would be handled automatically by the original GitHub code.
-        isCommitsTabOpen = false;
-        var commitsTabButton = document.getElementById("commits-tab");
-        commitsTabButton.addEventListener("click", openCommitsTab);
-        newButtonChild.removeAttribute("aria-current");
-        newButtonChild.removeAttribute("data-selected-links");
-    }
+    newButtonChild.removeAttribute("data-selected-links");
+  }
 }

js/fre/installFre.js

@@ -2,30 +2,39 @@
 // Make necessary changes to this file to change the FRE.
 
 function installFre(resume) {
-    openCommitsTab();
-    if (resume == "true") {
-        createOverlay();
-        installFreStep2();
-    } else {
-        installFreStep1();
-    }
+    const observer = new MutationObserver((mutations, obs) => {
+      const commitsButton = document.getElementById("commits-tab");
+      if (commitsButton) {
+        obs.disconnect();
+        openCommitsTab();
+        if (resume == "true") {
+          createOverlay();
+          installFreStep2();
+        } else {
+          installFreStep1();
+        }
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
 }
 
 async function installFreStep1() {
     createOverlay();
     clearToolTip();
-    var commitButton = document.getElementById("commits-tab");
-    focusOnItem(commitButton, 10);
-    showToolTip(
-        commitButton,
-        "top-left",
-        "",
-        "Notice the new tab added to GitHub?",
-        "Open this tab from any repository and it will give you this page, where you can find the git graph, and much more!",
-        ["Continue [1/3]"],
-        ["btn-primary"],
-        [installFreStep2]
-    );
+    window.onload = () => {
+        var commitsButton = document.getElementById("commits-tab");
+        focusOnItem(commitsButton, 10);
+        showToolTip(
+            commitsButton,
+            "top-left",
+            "",
+            "Notice the new tab added to GitHub?",
+            "Open this tab from any repository and it will give you this page, where you can find the git graph, and much more!",
+            ["Continue [1/3]"],
+            ["btn-primary"],
+            [installFreStep2]
+        );
+    }
 }
 
 function installFreStep2() {

js/loadBranchesButton.js

@@ -1,31 +1,35 @@
 async function loadBranchesButton() {
-    var contentView = document.getElementsByClassName("clearfix")[0];
-    var branchSelectionHtml = chrome.runtime.getURL('html/branchSelection.html');
-    await fetch(branchSelectionHtml).then(response => response.text()).then(branchSelectionHtmlText => {
-        var tempDiv = document.createElement('div');
-        tempDiv.innerHTML = branchSelectionHtmlText;
-        var newContent = tempDiv.firstChild;
-        contentView.innerHTML = "";
-        contentView.appendChild(newContent);
-        var token = getLocalToken();
-        var userName = getLocalUserName();
-        var url = "https://us-central1-github-tree-graph.cloudfunctions.net/prompt?userName=" + userName;
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", url, true);
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState == 4) {
-                var resp = JSON.parse(xhr.responseText);
-                var showPrompt = resp.showPrompt;
-                console.log("showPrompt: " + showPrompt);
-                if (showPrompt) {
-                    document.getElementById("promptImage").style.display = "inline-block";
-                    document.getElementById("promptImage").addEventListener("click", function () {
-                        window.open("https://scaria.dev/redirection.html", "_blank");
-                    });
-                }
-            }
+  var contentView =
+    document.getElementsByClassName("clearfix")[0] ||
+    document.getElementsByClassName("PageLayout")[0] ||
+    document.getElementsByClassName("repository-content")[0] ||
+    document.getElementsByTagName("react-app")[0];
+  var branchSelectionHtml = chrome.runtime.getURL('html/branchSelection.html');
+  await fetch(branchSelectionHtml).then(response => response.text()).then(branchSelectionHtmlText => {
+      var tempDiv = document.createElement('div');
+      tempDiv.innerHTML = branchSelectionHtmlText;
+      var newContent = tempDiv.firstChild;
+      contentView.innerHTML = "";
+      contentView.appendChild(newContent);
+      var token = getLocalToken();
+      var userName = getLocalUserName();
+      var url = "https://us-central1-github-tree-graph.cloudfunctions.net/prompt?userName=" + userName;
+      var xhr = new XMLHttpRequest();
+      xhr.open("GET", url, true);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState == 4) {
+          var resp = JSON.parse(xhr.responseText);
+          var showPrompt = resp.showPrompt;
+          console.log("showPrompt: " + showPrompt);
+          if (showPrompt) {
+            document.getElementById("promptImage").style.display = "inline-block";
+            document.getElementById("promptImage").addEventListener("click", function () {
+                window.open("https://scaria.dev/redirection.html", "_blank");
+              });
+          }
         }
-        xhr.send();
+      }
+      xhr.send();
     });
-    return;
+  return;
 }

js/main.js

@@ -11,6 +11,36 @@ var windowUrlLink = window.location.href;
 var windowUrl = new URL(windowUrlLink);
 var windowPath = windowUrl.pathname;
 var windowPathArray = windowPath.split("/");
-if (pathsToExclude.includes(windowPathArray[1]) == false) {
-    addCommitsButton();
-}
+const mo = new MutationObserver(onMutation);
+observer();
+
+let prevURL = window.location.href;
+
+function onMutation() {
+  const currentURL = window.location.href;
+  function addCommitsButtonToUI() {
+    if (
+      pathsToExclude.includes(windowPathArray[1]) == false &&
+      windowPathArray[2]
+    ) {
+      if (isCommitsTabOpen) return;
+      mo.disconnect();
+      addCommitsButton();
+      observer();
+    }
+  }
+
+  addCommitsButtonToUI();
+
+  if (currentURL !== prevURL) {
+    prevURL = currentURL;
+    addCommitsButtonToUI();
+  }
+}
+
+function observer() {
+  mo.observe(document, {
+    childList: true,
+    subtree: true,
+  });
+}