onlinesequencer more buttons!

// ==UserScript==
// @name        Onlinesequencer extra buttons
// @namespace   eepic
// @match        *://onlinesequencer.net/*
// @match        *://test.onlinesequencer.net/*
// @grant       none
// @version     1.0
// @author      eepic
// @description Adds buttons for: SetDetune, SetGrid, SetTimeSig, Solo Lock, Lock All, Unlock All
// @icon https://onlinesequencer.net/favicon.ico
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    if (!document.querySelector("#sequencer_main_row")) {
        console.log("sequencer not found");
        return;
    }

    // helper functions
    function lock(id, locked) {
      instMgr.setLocked(id, locked)
      setSimpleInstrumentSettingsLockState(id, locked)
    }
    function repaint() {
      fillAdvancedInstrumentSettings()
      fillSimpleInstrumentSettings()
      SequencerView.repaint(kRepaintNotesChanged)
    }

    function useFunction(promptMsg, useThisFunction) {
      let userInput = prompt(promptMsg);
      if (userInput === null) {
          return; // user cancelled?
      } else if (userInput !== null && /^[0-9+\-*/().\s]+$/.test(userInput)) {
          let number = parseFloat(eval(userInput));
          if (!isNaN(number)) {
              if (useThisFunction == setDetune) {
                  useThisFunction(instrument, number);
              } else {
                  useThisFunction(number);
              }
          } else {
              alert("Not a number!");
          }
      } else {
        alert("Invalid input!");
      }
    }

    const observe = new MutationObserver(() => {
        let dropDown = document.querySelector("#tools-menu > ul:nth-child(2)");
        if (dropDown) {
            observe.disconnect();

            function newButton(textContent, onClick) {
              let button = document.createElement("li");
              button.setAttribute("tabindex", "-1");
              button.textContent = textContent;
              button.addEventListener("click", onClick)
              dropDown.appendChild(button);
            }

            function divButton(textContent, onClick, inner) {
              let div = document.createElement('div');
              div.textContent = textContent;
              div.className = 'inner-option';
              div.addEventListener('click', e => {
                e.stopPropagation();
                onClick();
              })
              inner.append(div)
            }

            const li1 = document.createElement('li');
            li1.className = 'inner-parent';
            li1.tabIndex = 0;

            const inner1 = document.createElement('div');
            inner1.className = 'multi-buttons';

            divButton("Solo Lock", function() {
              instMgr.forEach((id) => {
                if (id == instrument) {
                  lock(id, false)
                } else {
                  lock(id, true)
                }
              });
              repaint();
            }, inner1);

            divButton("Lock All", function() {
              instMgr.forEach((id) => {
                lock(id, true)
              });
              repaint();
            }, inner1);

            divButton("Unlock All", function() {
              instMgr.forEach((id) => {
                lock(id, false)
              });
              repaint();
            }, inner1);

            li1.append(inner1);
            dropDown.append(li1);

            // more buttons
            newButton("Set time sig", () => useFunction("Please enter a number (4 = 4/4, 5 = 5/4, etc)", setTimeSig));
            newButton("Set grid size", () => useFunction("Please enter a number (divisions of one note, example: setGrid(1) -> 1/4, setGrid(4) -> 1/16)", setGrid));
            newButton("Set instrument detune", () => useFunction("Please enter a number (in cents) to detune the current instrument:", setDetune));
        }
    });

    const style = document.createElement('style');
    style.textContent = `
    .inner-parent:hover {
      background: none !important;
      color: inherit !important;
    }

    .multi-buttons {
      display: flex;
      cursor: default;
    }

    .inner-option {
      flex: 1;
      text-align: center;
      cursor: pointer;
      background: transparent;
    }

    .inner-option:hover {
      background: #d38b0d;
      color: white;
    }

    .os-dropdown-menu {
      width: 160px !important;
    }
    `;
    document.head.appendChild(style);

    observe.observe(document.body, { childList: true, subtree: true });
})();