Tampermonkey - toggle sidebars on Figma

figma-toggle-sidebars.js

// ==UserScript==
// @name         Figma / toggle sidebars
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Ability to toggle sidebars on figma for better usability
// @author       Ruslan Kuzma
// @match        https://www.figma.com/file*
// @icon         https://www.google.com/s2/favicons?domain=figma.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let sidebarsOpen = true

    let initialCanvasWidth = 0
    let initialCanvasHeight = 0
    let initialInsetRightContainer
    let initialInsetLeftContainer

    function getElementByXpath(path) {
        return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    }

    function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }

    function toggleSidebars() {
        const leftSidebar = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[3]')
        const rightSidebar = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[4]/div/div/div/div/div[1]')
        const insetRightContainer = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div')
        const insetLeftContainer = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[1]')
        const canvas = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[1]/div/div/div/div[1]/div/div/canvas')

        if (sidebarsOpen){
            console.log('hide sidebars')

            leftSidebar.style.opacity = 0
            rightSidebar.style.opacity = 0

            initialCanvasWidth = canvas.style.width
            initialCanvasHeight = canvas.style.height
            canvas.style.width = 'auto'
            canvas.style.height = 'auto'

            initialInsetRightContainer = insetRightContainer.style.inset
            initialInsetLeftContainer = insetLeftContainer.style.inset

            insetRightContainer.style.inset = '48px 0px 0px 0px'
            insetLeftContainer.style.inset = '0px 0px 0px 0px'

            sidebarsOpen = false
        } else {
            console.log('open sidebars')

            leftSidebar.style.opacity = 1
            rightSidebar.style.opacity = 1

            canvas.style.width = initialCanvasWidth
            canvas.style.height = initialCanvasHeight

            insetRightContainer.style.inset = initialInsetRightContainer
            insetLeftContainer.style.inset = initialInsetLeftContainer

            sidebarsOpen = true
        }
    }

    let toolbarLastButton

    const intervalId = setTimeout(function() {
        toolbarLastButton = getElementByXpath('/html/body/div[2]/div/div/div[1]/div[2]/div[2]/div/div[2]/div[3]')

        if (toolbarLastButton) {
            const toggler = document.createElement("div");
            toggler.innerHTML = "Toggle sidebars";

            insertAfter(toggler, toolbarLastButton)

            toggler.addEventListener('click', toggleSidebars)
        }
    }, 10000)



    })();