Attack on the status bar

  • Truth be told, I never liked the status bar. It has useful functionality, but having a bar open at the bottom of the browser at all times, just doesn't suit me. That's why I decided to do something about it. Following mod introduces a Tools button in the address bar, which opens a modified status bar as overlay. It's a menu-like implementation, which doesn't move the site content. The status bar keyboard shortcut and the equivalent menu commands can still toggle it. This mod also introduces a button to toggle the status-info (from status-bar/menu).

    0_1512221277448_Screenshot 2017-12-02 14.27.24.png

    You will need a custom.js file to run this mod –> modding vivaldi. Please read the Notes below, as you might have to modify (and add to) the code at hand, to make this work.


    * Tools Menu */
    function create() {
        const footer = document.getElementById('footer')
        var spanT = document.createElement('span');
        var divT = document.createElement('div'); = 'droptool';
        var btnT = document.createElement('button'); = 'tools';
        btnT.setAttribute('tabindex', '-1');
        btnT.setAttribute('title', 'Tools');
        btnT.innerHTML = '<svg width="26" height="26" viewBox="-150 -150 812 812" xmlns=""><path d="M483.97,105.709c-2.491-9.958-14.903-13.424-22.157-6.165l-58.913,58.914c-13.083,13.077-34.291,13.077-47.372,0   l-27.03-27.031c-13.082-13.081-13.082-34.289,0-47.372l58.196-58.197c7.307-7.307,3.751-19.838-6.306-22.193   c-13.772-3.218-28.327-4.406-43.339-3.208c-64.522,5.148-123.907,65.649-127.923,130.254c-1.521,24.503,3.43,47.667,13.077,68.186   L16.253,375.878c-9.263,7.96-14.81,19.401-15.323,31.602c-0.519,12.201,4.042,24.068,12.599,32.78l34.902,35.541   c8.64,8.802,20.57,13.586,32.899,13.19c12.33-0.399,23.928-5.936,31.986-15.271l178.388-206.684   c19.917,8.889,42.21,13.424,65.747,11.956c65.041-4.058,125.554-63.92,130.29-128.91   C488.863,134.686,487.482,119.777,483.97,105.709z"></path>';
        var infdiv = document.createElement('div'); = 'divID';
        infdiv.innerHTML = '<button id="toggle-links" title="Hide Status Info" class="button-toolbar-small" tabindex="-1"><svg width="16" height="16" viewBox="0 0 26 26" xmlns=""><path d="M17.6 20.4l-1.6 1.6-9-9 9-9 1.6 1.6-7.2 7.4 7.2 7.4z" fill="var(--colorHighlightBg)"></path></svg></button>';
    function cssT() {
        var styleS = document.createElement('style');
        styleS.type = 'text/css';
        styleS.innerHTML = '#droptool {position: absolute;z-index: 1;right: 0;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);}.callout {bottom: unset;margin-top: 1px;}.callout::before, .callout::after {display: none;}#divID {order: 1 }.sync-status {order: 2;}.status-toolbar {order: 3;}#footer {border-right: none;}#status_info {display: none;}#footer.zeig #status_info.visible {display: flex;max-width: 500px;}.paneltogglefooter {display: none !important;}';
    function menuT() {
        if (footer.classList.contains('disabled')) {
        else {
    function statusT() {
        const fill = document.querySelector('#toggle-links svg path');
        const infbtn = document.getElementById('toggle-links');
        if (footer.classList.contains('zeig')) {
            fill.setAttribute('fill', 'var(--colorFg)');
            infbtn.setAttribute('title', 'Show Status Info');
        else {
            fill.setAttribute('fill', 'var(--colorHighlightBg)');
            infbtn.setAttribute('title', 'Hide Status Info');
    function toolsMenu() {
        document.getElementById('tools').addEventListener('click', menuT);
        document.getElementById('toggle-links').addEventListener('click', statusT);
    let adr = {};
    setTimeout(function wait() {
        adr = document.querySelector('.toolbar-addressbar.toolbar');
        if (adr) {
        else {
            setTimeout(wait, 300);
    }, 300);


    • The button will only appear, if you have the search field enabled in address bar. If you don't like the search field, or if you want to put the tools toggle somewhere else, just change the code to relate to the address field instead, or the extensions wrapper (anything is possible). You can also ask for help on this. Additionally the address bar needs to be on top.
    • The panel toggle is being hidden with css. If you want to show it just delete the according line -- you might wanna set the order on it too then (to make it appear after status-info and status-info toggle. But it might be a better idea to move the panel toggle as its own entity to the address bar instead (just above the panel).
    • The status-info (displaying link URL or gestures) is set to a max-width of 500px. You can change and adapt this to your needs in the css.
    • In vivaldi://settings/appearance/ tick "Use buttons in range controls" to save some space (also looks nicer).
    • As always, if you have similar mods depending on a wait function to assure the UI has finished loading, just insert this code. One wait function is more than enough.

    This mod is relatively new, but it works pretty well. If you have any suggestions or questions, let me know.

    2017-12-07: Changed border settings for the overlay.
    2018-09-07: Just one javascript file instead of js and css separate.
    2018-09-16: Status Info enabled by default.

  • I completely failed at this. I created it while my other mods were running, and this is apparently a grave mistake. Turns out this relies on a z-index being set in another mod. The error is now dealt with, I have edited the original post. My apologies.

  • @luetage Just passing by to let you know how I'm impressed by your creations and your contribution to Vivaldi in general! luetage for president! 🗳️

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.