Greasemonkey script to add thumbs up and thumbs down buttons beside GitLab tabs in merge requests

gitlab-thumbs-in-tabs.js

// ==UserScript==
// @name         Gitlab thumbs in tabs
// @version      1.0
// @description  Add thumbs up/down buttons in the "tab" section (tested with gitlab 12.7)
// @author       Romuald Brunet <[email protected]>
// @match        https://gitlab.com/*/merge_requests/*
//               ^ Add your gitlab instance(s) here ^
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const tabs = document.querySelector(".merge-request-tabs");
    if ( ! tabs ) {return}

    let initialMargin = "20px";

    function cloneButton(name) {
        const originalChild = document.querySelector(`.award-control [data-name="${name}"]`)
        if ( ! originalChild ) {return}

        const original = originalChild.parentNode
        const counter = original.querySelector('.js-counter');

        const clone = original.cloneNode(true);
        const mCounter = clone.querySelector('.js-counter');

        const observer = new MutationObserver(function(mutationsList, observer) {
            mCounter.innerText = counter.innerText;
        });
        observer.observe(counter, {childList: true});

        clone.addEventListener("click", function(event) {
            var ev = document.createEvent('Events');
            ev.initEvent("click", true, false);
            original.dispatchEvent(ev);
        });
        clone.style.marginLeft = initialMargin;
        initialMargin = "";

        tabs.appendChild(clone);
    }

    cloneButton("thumbsup")
    cloneButton("thumbsdown");
})();