Confluence Inline Comment Navigator via prev & next Links

confluence-comment-navigator.user.js

// ==UserScript==
// @name         Confluence Inline Comment Navigator
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Navigate through all open inline comments on a confluence page
// @author       kunz@ideadapt.net
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.2/babel.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.16.0/polyfill.js
// @include      *://*/*confluence/display/*
// @include      *://*/*confluence/display/*
// @run-at       document-idle
// ==/UserScript==

/* jshint ignore:start */
var inline_src = (<><![CDATA[
/* jshint ignore:end */
    /* jshint esnext: false */
    /* jshint esversion: 6 */
    window.setTimeout(function(){
        let idx = 0;
        const $els = document.querySelectorAll('.inline-comment-marker.valid');
        if($els.length === 0) return;
        const $overlay = document.createElement('div');
        $overlay.innerHTML = `<div style="position:fixed; top: 100px; right: 50px; cursor:pointer; border: 1px solid black; padding: 10px; background-color: rgba(0, 0, 0, 0.25);">
                                <a id=cs-next>next</a>&nbsp;|&nbsp;<a id=cs-prev>prev</a></div>`;
        document.body.appendChild($overlay);
        $overlay.addEventListener('click', ({target}) => {
            if(target.id === 'cs-prev' && idx > 0) idx-=1;
            if(target.id === 'cs-next' && idx < $els.length-1) idx+=1;
            toggleLinks(idx);
            scrollToComment(idx);
        });
        function toggleLinks(){
            if(idx === 0) document.getElementById('cs-prev').style.display = 'none'; else document.getElementById('cs-prev').style.display = 'inline';
            if(idx === $els.length-1) document.getElementById('cs-next').style.display = 'none'; else document.getElementById('cs-next').style.display = 'inline';
        }
        function offset(el) {
            const rect = el.getBoundingClientRect(),
                  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
                  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
        }
        function scrollToComment(idx){
            console.log($els, idx);
            window.scrollTo({top: offset($els[idx]).top - 100});
        }
    }, 2000);
/* jshint ignore:start */
]]></>).toString();
var c = Babel.transform(inline_src, { presets: [ "es2015" ] });
eval(c.code);
/* jshint ignore:end */