Attack on the status bar

luetage

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 moves the statusbar to the top of the webcontainer 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).

Screenshot from 2020-11-25 20-59-17.png

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

JAVASCRIPT

// Attack on the statusbar
// https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar
// Moves the statusbar to the top and makes it compact. Furthermore introduces a button in the statusbar
// to toggle the status-info (link address, status information) and a biscuit button for showing and
// copying the Vivaldi version (biscuit mode needs to be enabled for this).

{
    function statusInfoLogic() {
        const statusInfoToggle = document.getElementById('statusInfoToggle');
        const statusInfo = document.querySelector('.StatusInfo');
        if (statusInfoToggle.classList.contains('zeig')) {
            statusInfoToggle.classList.remove('zeig');
            statusInfo.removeAttribute('id');
            var info = 'off';
        }
        else {
            statusInfoToggle.classList.add('zeig');
            statusInfo.id = 'zeig';
            var info = 'on';
        }
        chrome.storage.local.set ({'statusInfo': info});
    }

    function statusMod() {
        const cont = document.createElement('div');
        const statusBar = document.querySelector('.toolbar-statusbar');
        const statusInfo = document.querySelector('.StatusInfo');
        cont.id = 'statusContainer';
        document.querySelector('.inner').appendChild(cont);
        cont.appendChild(statusBar);
        if (document.querySelector('.biscuit-string')) {
            const version = document.querySelector('.biscuit-string').innerText;
            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('div');
        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);
        chrome.storage.local.get({'statusInfo': 'on'}, function(check) {
            const info = check.statusInfo;
            if (info === 'on') {
                document.querySelector('.StatusInfo').id = 'zeig';
                document.getElementById('statusInfoToggle').classList.add('zeig');
            }
        })
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
            const style = document.createElement('style');
            style.type = 'text/css';
            style.id = 'statusMod';
            style.innerHTML = `#statusContainer {position: absolute;z-index: 1;max-width: 100vw;right: 0;top: 0;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);}.toolbar-statusbar {display: none;border-top: none;border-bottom: 1px solid var(--colorBorder);}#statusContainer .toolbar-statusbar {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);}.StatusInfo {display: none;}#zeig.StatusInfo.StatusInfo--Visible {display: inline-block;}`;
            document.getElementsByTagName('head')[0].appendChild(style);
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300)

    var appendChild = Element.prototype.appendChild;
    Element.prototype.appendChild = function () {
        if (arguments[0].tagName === 'DIV') {
            setTimeout(function() {
                if (this.classList.contains('toolbar-statusbar')) {
                    const statusContainer = document.getElementById('statusContainer');
                    if (!statusContainer) {
                        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('statusContainer').remove();
        }
        else {
            return removeChild.apply(this, arguments);
        }
    }
}

Notes

Moving buttons from addressbar to statusbar and back works with shift‐click. Hover the biscuit button (vivaldi icon) to see Vivaldi and Chromium version info. Click the biscuit button to copy the version info to clipboard. Click the link button to toggle the status info (current link and information display).
Enable biscuit mode by visiting vivaldi://settings/ and pasting the dog face emoji into search.
Toggling the statusbar from menu, with keyboard shortcut, from settings, or quick commands works as expected. Personally I set Ctrl S to toggle the statusbar and have an additional entry in the tabbar menu for clicking (menu customisation!).
Currently the statusbar is being displayed top right. By changing the CSS code within the mod you can move it anywhere you like.

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.
2020-03-16 Fixing display of dropdowns for latest Vivaldi releases.
2020-08-14 Fixes for Snapshot 3.3.2009.3
2020-10-07 Fixes for Snapshot 3.4.2064.6
2020-11-25 Rewrite for 3.5.2115.4 (Mail release)
2020-11-28 Persistent statusinfo logic

luetage

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.

Ornorm

@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! ️

XepherXV

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

luetage

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

mib2berlin

@luetage
Thank you, work like a charm.

CHeers, mib

GoldNoway

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

luetage

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

luetage

@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

@raed

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

@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

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.

Stardust

@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

luetage

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

luetage

@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

@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

luetage

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.

mib2berlin

@luetage
Hi, it seams latest snapshot breaks this mod or is it still working for you?

Opensuse Tumbleweed x86_64
CPU i7-3520M 8 GB
GPU Intel HD4000
xf86-video-intel 2.99.917-6.1
KDE Plasma 5.54.5.11
Vivaldi 2.4.1476.4 (Official Build) snapshot (64-bit)

Cheers, mib

luetage

@mib2berlin Nope, in fact almost all my mods I currently use broke in the latest snapshot. Gonna post updates when I'm finished. The sad thing is I have so many mods I don't use and I don't think I will fix them. Anyway, this one will be done.

mib2berlin

@luetage
Thank you for the information and take your time.

Cheers, mib