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 dropdown toggle 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. This mod also introduces buttons to toggle the status-info (from status-bar/menu) and a biscuit mode button (when biscuit mode is enabled).

    0_1554692605247_Screenshot 2019-04-08 05.02.58.png

    You will need a custom.js file to run this mod –> modding vivaldi. Please read the Notes below for tips and explanations.


    JAVASCRIPT

    /* Status Bar Dropdown */
    
    (function () {
    
    function statusToggle() {
        const statusContainer = document.getElementById('statusContainer');
        const statusBar = document.querySelector('.toolbar-statusbar');
        if (statusContainer.style.display === 'block') {
            statusContainer.style.display = 'none';
            statusBar.classList.remove('zeig');
        }
        else {
            statusBar.classList.add('zeig');
            statusContainer.style.display = 'block';
        }
    };
    
    function statusInfoLogic() {
        const statusInfoToggle = document.getElementById('statusInfoToggle');
        const statusInfo = document.querySelector('.status-info');
        if (statusInfoToggle.classList.contains('zeig')) {
            statusInfoToggle.classList.remove('zeig');
            statusInfo.removeAttribute('id');
        }
        else {
            statusInfoToggle.classList.add('zeig');
            statusInfo.id = 'zeig';
        }
    };
    
    function statusStyle() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'statusDropdown';
        style.innerHTML = `
            #browser.address-off #statusButton {
                display: none;
            }
            #statusToggle svg {
                width: 14px;
                height: 14px;
            }
            #statusContainer {
                position: absolute;
                z-index: 1;
                max-width: 100vw;
                right: 0;
                top: 34px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
            }
            .toolbar-statusbar {
                display: none;
                border-top: none;
                border-bottom: 1px solid var(--colorBorder);
            }
            .toolbar-statusbar.zeig {
                display: flex;
            }
            .toolbar-statusbar .button-popup.button-popup-above {
                bottom: unset;
                top: 22px;
            }
            .toolbar-statusbar .button-popup.button-popup-above:before, .toolbar-statusbar .button-popup.button-popup-above:after {
                opacity: 0;
            }
            .biscuit-setting-version {
                display: none !important;
            }
            #biscuitButton button svg, #statusInfoToggle button svg {
                width: 14px;
                height: 14px;
            }
            #statusInfoToggle.zeig button svg {
                fill: var(--colorHighlightBg);
            }
            .status-info {
                display: none;
            }
            #zeig.status-info.visible {
                display: inline-block;
            }
        `;
        document.getElementsByTagName('head')[0].appendChild(style);
    };
    
    function statusMod() {
        const statusBar = document.querySelector('.toolbar-statusbar');
        const statusInfo = document.querySelector('.status-info');
        if (browser.classList.contains('biscuit-mode')) {
            const version = document.querySelector('.biscuit-string').value
            const divB = document.createElement('div');
            divB.classList.add('button-toolbar');
            divB.id = 'biscuitButton';
            divB.setAttribute('title', version + '\nClick to copy version string');
            divB.innerHTML = '<button draggable="false" tabindex="-1"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 12 24 C 17.26 24 20.18 24 22.09 22.09 C 24 20.18 24 17.29 24 12 C 24 6.71 24 3.82 22.09 1.91 C 20.18 0 17.26 0 12 0 C 6.74 0 3.82 0 1.9 1.94 C -0.02 3.88 0 6.77 0 12 C 0 17.23 0 20.21 1.9 22.12 C 3.8 24.03 6.74 24 12 24 Z  M 18.9 8.6 Q 16.11 13.42 13.34 18.24 C 13.042 18.82 12.461 19.199 11.81 19.24 C 11.088 19.323 10.388 18.954 10.05 18.31 Q 8.3 15.31 6.56 12.31 L 4.46 8.58 C 4.12 8.017 4.103 7.315 4.415 6.736 C 4.727 6.157 5.322 5.786 5.98 5.76 C 6.704 5.709 7.386 6.105 7.7 6.76 L 9.25 9.4 C 9.63 10.05 9.99 10.7 10.37 11.34 C 10.868 12.24 11.802 12.813 12.83 12.85 C 14.416 12.94 15.797 11.778 15.98 10.2 C 15.988 10.097 15.988 9.993 15.98 9.89 C 15.981 9.408 15.871 8.933 15.66 8.5 C 15.298 7.843 15.364 7.033 15.827 6.443 C 16.29 5.853 17.061 5.597 17.785 5.792 C 18.509 5.988 19.047 6.597 19.15 7.34 C 19.207 7.776 19.12 8.219 18.9 8.6 Z "></path></svg></button>';
            statusBar.insertBefore(divB, statusInfo);
            document.getElementById('biscuitButton').addEventListener('click', function() {
                navigator.clipboard.writeText(version);
            });
        }
        const divL = document.createElement('divL');
        divL.classList.add('button-toolbar');
        divL.id = 'statusInfoToggle';
        divL.setAttribute('title', 'Toggle status info');
        divL.innerHTML = '<button draggable="false" tabindex="-1"><svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/></svg></button>';
        statusBar.insertBefore(divL, statusInfo);
        document.getElementById('statusInfoToggle').addEventListener('click', statusInfoLogic);
    };
    
    function statusDropdown() {
        if (!document.getElementById('statusDropdown')) {
            statusStyle();
        }
        const adr = document.querySelector('.toolbar-addressbar');
        const btn = document.createElement('div');
        btn.id = 'statusButton';
        btn.classList.add('button-toolbar');
        btn.setAttribute('title', 'Toggle status bar');
        btn.innerHTML = '<button id="statusToggle" tabindex="-1"><svg width="14" height="14" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"></path></button>';
        adr.insertBefore(btn, document.querySelector('.toolbar-extensions'));
        const cont = document.createElement('div');
        cont.id = 'statusContainer';
        cont.style.display = 'none';
        adr.appendChild(cont);
        document.getElementById('statusToggle').addEventListener('click', statusToggle);
    };
    
    var appendChild = Element.prototype.appendChild;
    Element.prototype.appendChild = function () {
        if (arguments[0].tagName === 'BUTTON') {
            setTimeout(function() {
                if (this.classList.contains('profile-popup')) {
                    const statusButton = document.getElementById('statusButton');
                    if (statusButton) {
                        document.querySelector('.toolbar-addressbar').insertBefore(this, statusButton);
                    }
                }
            }.bind(this, arguments[0]));
        }
        if (arguments[0].tagName === 'DIV') {
            setTimeout(function() {
                if (this.classList.contains('toolbar-statusbar')) {
                    const statusContainer = document.getElementById('statusContainer');
                    if (!statusContainer) {
                        statusDropdown();
                    }
                    if (statusContainer && !document.getElementById('statusInfoToggle')) {
                        statusContainer.appendChild(document.querySelector('.toolbar-statusbar'));
                        statusMod();
                    }
                }
            }.bind(this, arguments[0]));
        }
        return appendChild.apply(this, arguments);
    };
    
    var removeChild = Element.prototype.removeChild;
    Element.prototype.removeChild = function () {
        if (arguments[0].tagName === 'DIV' && arguments[0].classList.contains('toolbar-statusbar')) {
            document.getElementById('statusButton').remove();
            document.getElementById('statusContainer').remove();
        }
        else {
            return removeChild.apply(this, arguments);
        }
    };
    
    })();
    
    

    Notes

    Moving buttons around generally works. If it should not work, click the sync icon once to open the sync settings and then moving buttons will be possible. Should the elements be misaligned after moving, simply toggle UI or toggle status bar with shortcut, or from menu, to bring everything back in order.

    Hover the biscuit button (vivaldi icon) to see Vivaldi and Chromium version info. Click the biscuit button to copy the version info to clipboard.

    Toggling the status bar from menu, with shortcut, or from settings will remove the dropdown toggle. Enabling the status bar will show the dropdown toggle again. If you shouldn't see the dropdown toggle on first load, enable status bar to create it.


    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.
    2018-09-30: Better loop 😛
    2019-02-06: Fix for Vivaldi 2.3.
    2019-03-03: New icon, new name.
    2019-04-07: Update for 2.5, complete rewrite.
    2019-04-10 Further improvements.



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



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



  • @cafosse That's not possible. When the address bar is hidden in settings and called with shortcut, there is no way to display extension icons anywhere in the UI. The same problem occurs when you toggle the UI.

    Read this post, which explains this in a bit more detail on the 2nd page – https://forum.vivaldi.net/topic/20643/showing-extension-icons-on-the-bottom-of-the-browser/20



  • The footer has new classes for distinguishing left, center and right now, therefore the order has been mixed up in Vivaldi 2.3. OP has been updated to make it work properly again.


Log in to reply
 

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