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.


    JAVASCRIPT

    /* Tools Menu */
    
    function create() {
        const footer = document.getElementById('footer');
        const adr = document.querySelector('.toolbar-addressbar.toolbar');
        footer.classList.add('disabled','zeig');
        var spanT = document.createElement('span');
        var divT = document.createElement('div');
        divT.id = 'droptool';
        var btnT = document.createElement('button');
        btnT.id = 'tools';
        btnT.classList.add('button-toolbar');
        btnT.setAttribute('tabindex', '-1');
        btnT.setAttribute('title', 'Tools');
        btnT.innerHTML = '<svg width="26" height="26" viewBox="-150 -150 812 812" xmlns="http://www.w3.org/2000/svg"><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');
        infdiv.id = '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="http://www.w3.org/2000/svg"><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>';
        adr.insertBefore(spanT,document.querySelector('.searchfield').nextSibling);
        spanT.appendChild(btnT);
        spanT.appendChild(divT);
        divT.appendChild(footer);
        footer.appendChild(infdiv);
    };
    
    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;}';
        document.getElementsByTagName('head')[0].appendChild(styleS);
    };
    
    function menuT() {
        if (footer.classList.contains('disabled')) {
            footer.classList.remove('disabled');
        }
        else {
            footer.classList.add('disabled');
        }
    };
    
    function statusT() {
        const fill = document.querySelector('#toggle-links svg path');
        const infbtn = document.getElementById('toggle-links');
        if (footer.classList.contains('zeig')) {
            footer.classList.remove('zeig');
            fill.setAttribute('fill', 'var(--colorFg)');
            infbtn.setAttribute('title', 'Show Status Info');
        }
        else {
            footer.classList.add('zeig');
            fill.setAttribute('fill', 'var(--colorHighlightBg)');
            infbtn.setAttribute('title', 'Hide Status Info');
        }
    };
    
    function toolsMenu() {
        create();
        cssT();
        document.getElementById('tools').addEventListener('click', menuT);
        document.getElementById('toggle-links').addEventListener('click', statusT);
    };
    
    // Loop waiting for the browser to load the UI. You can call all functions from just one instance.
    
    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
            toolsMenu();
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    

    Notes

    • 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.


    Updates
    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.
    2019-09-30: Better loop πŸ˜›



  • 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! πŸ—³οΈ



  • im a huge noob to js and editing vivaldi, how do i enable this WITHOUT using the search bar?



  • @xepherxv You simply replace this line
    adr.insertBefore(spanT,document.querySelector('.searchfield').nextSibling);
    with this one
    adr.insertBefore(spanT,document.querySelector('.addressfield').nextSibling);



  • @luetage
    Thank you, work like a charm.

    CHeers, mib



  • Hi,
    As said a few days ago in your other thread, I wanted to know if there was a way to keep the status-info as in the "Show Status Info Overlay" option of the browser, down left? Thanks πŸ™‚



  • @goldnoway I don't see an easy way right now.



  • @luetage Oh well, actually strike that. Just remove
    #status_info{display: none,}
    from the css part of the mod. Then in settings pick "show status info overlay" and it will work. It's not elegant but it does what you want.



  • @luetage two questions:
    0_1538666685622_overlay.png
    1- how can I make the Tools button appear to the right of the address field (needless to say using "adr.insertafter" did not work) between address field and home icon.
    2- how can I control the shape of the edges of the status-bar overlay to make them appear round.
    Thank you
    Raed

    Note to self: must avoid visiting modifications forum, modifications forum must avoid visiting.



  • @raed

    1. Can't tell you, because you got an awful lot of css modification going on. You will either have to show me your whole code, or you will have to set the order on the tools button appropriately yourself. It looks like you set an order on everything but the tools button.
    2. The right edge closes with the window which isn't round and the left edge is actually not the end, because the status info is being shown there when you have it enabled. If you wanna force it you can add to the css and try corner rounding.


  • @luetage this is my .css file that sets the order of items on the address bar:

    #addbookmarks {
    	order: 1;
    }
    .addressfield {
    	order: 2;
    }
    .toolbar-addressbar.toolbar .toolbar {
    	order: 3;
    }
    .searchfield {
    	order: 4;
            margin-left: 5px;
    }
    .toolbar-addressbar.toolbar > .extensions-wrapper {
    	order: 5;
    }
    
    
    button.button-toolbar.home {
    	order: 1;
    }
    button.button-toolbar.back {
    	order: 2;
    }
    button.button-toolbar.rewind {
    	order: 3;
    }
    button.button-toolbar.reload {
    	order: 4;
    }
    button.button-toolbar.next {
    	order: 5;
    }
    button.button-toolbar.forward {
    	order: 6;
    }
    

    I also have a costume .js file that you yourself have provided many moons ago to set up the Vivaldi icon as a bookmarks icon on the address bar:

    setTimeout(function wait(){
        toolbar = document.querySelector(".toolbar-addressbar.toolbar");
        bookmarkbar = document.querySelector(".bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
        if (bookmarkbar != null){
            bookmarkbar.style.width = 0;
        }
        if (toolbar !== null && bookmarkbar !== null && morebookmarks !== null){
        	morebookmarks.classList.add("button-toolbar");
            morebookmarks.id = "addbookmarks";
            bookmarkbar.remove();
            var svg = morebookmarks.firstElementChild;
            svg.setAttribute("viewBox", "0 4 34 34");
            svg.setAttribute("height", "34");
            svg.setAttribute("width", "34");
    	svg.innerHTML = '<path d="M16 32c7 0 10.91 0 13.45-2.54S32 23 32 16s0-10.9-2.55-13.44S23 0 16 0 5.09 0 2.55 2.54 0 9 0 16s0 10.9 2.55 13.44S9 32 16 32z" fill="#ef3939"></path><path d="M24.43 7.53a12 12 0 1 0 0 16.94 12 12 0 0 0 0-16.94zM23.71 13l-5.93 10.35a2 2 0 0 1-1.63 1.08 1.89 1.89 0 0 1-1.88-1C13 21.27 11.79 19.11 10.55 17l-2.27-4a2 2 0 0 1 1.62-3 1.91 1.91 0 0 1 1.83 1c.56 1 1.1 1.92 1.66 2.88.4.69.79 1.39 1.2 2.07a3.13 3.13 0 0 0 2.62 1.62 3.19 3.19 0 0 0 3.36-2.84v-.33a3.35 3.35 0 0 0-.34-1.49A2 2 0 1 1 24 11.69a2.08 2.08 0 0 1-.29 1.31z" fill="#fff"></path>';
            toolbar.appendChild(morebookmarks);
        } else {
            setTimeout(wait, 300);
        }
    }, 300);
    
    


  • @raed First of all use 3 backticks ``` before and after code…
    And yeah, it's a simple fix.

    .addressfield {
    order: 1;
    }
    #tools {
    order 2;
    }
    .toolbar-addressbar.toolbar .toolbar {
    order: 3;
    }
    .searchfield {
    order: 4;
    margin-left: 5px;
    }
    .toolbar-addressbar.toolbar > .extensions-wrapper {
    order: 5;
    }
    


  • @luetage Thank you, I have tried the .css fie change you suggested, but it has not made a difference, the icon still appears before the addressfield element.
    In the .js code there is a line that specifies the location of the icon:

    adr.insertBefore(spanT,document.querySelector('.addressfield').nextSibling);
    

    which I suspect is over riding the .css code. but I do not know how to fix.
    p.s: there as a typo in the code you provided it reads:

    #tools {
    order 2;
    }
    

    when it should read:

    #tools {
    order: 2;
    }
    

    And thank you for correcting my code display on the forum.
    Regards
    Raed



  • Try with adr.appendChild(spanT); then. The whole problem is that you set orders, as you can see the css order overwrites the javscript, because the mod actually ads the tools button after the address field.



  • @luetage said in 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.

    Cool idea! I just wait for it integration to the address bar



  • @stardust I don't believe the devs would ever implement something like this. But what do I know.



  • Great! It's almost what i want to do. Can someone see if possible to do like this? Toggle Extensions near (or in??) this button.
    Because, in this post i'm trying to move Toggle Extensions button somewhere away (thought maybe near the minimize button), and then hide address bar, but need an easy access to extensions. But this idea even better.
    0_1544651503140_toggle.png



  • @cafosse Not sure what you want. This topic is about making the status bar a menu in the address bar. Since you are hiding the address bar, you shouldn't be moving the status bar to it. Not even sure if it would work. In my personal version I'm preventing the tools button from displaying when the address bar is hidden. This is because there is simply no space for this button, it floats in mid air, which is bad design.



  • @luetage As you can see on this image above, when i hide the address bar, and press, for example, Ctrl+L (default for Focus Address Field), the wrench button going here. And now all i want to do is take the Toggle Extensions button, and move it near it. If it's possible though.


 

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