Bookmark Bar only on Speed Dial (like chrome)

MasterLeo29

One feature that was missing (at least i didn't find it) on Vivaldi was to display the bookmark bar only on the speed dial, like Chrome does, so I made this tiny mod. Hope it helps someone.

/**
 * Author: Leonardo Domingues
 */

setTimeout(function wait() 
{
    var adr = document.querySelector(".toolbar-addressbar.toolbar");
        if (adr != null) 
        {
            const vivaldi = window.chrome;

            var bar = document.getElementsByClassName('bookmark-bar')[0];
                
            function change_display()
            {
                var tab = document.querySelector('.active.webpageview');

                if (tab.classList.contains('internal')) 
                {
                    bar.style.display = "flex";
                }else
                {
                    bar.style.display = "none";
                }
            }

            vivaldi.tabs.onCreated.addListener(e => change_display());

            vivaldi.tabs.onUpdated.addListener(e => change_display());

            vivaldi.tabs.onActivated.addListener(e => change_display());
        }
        else {
            setTimeout(wait, 300);
        }
}, 300);

luetage

Interesting idea

MasterLeo29

@luetage Thanks ! Funny story: A co-worker gave me the ideia once (it was a feature that he used on chrome) . Now that I made it, he doesnt want it

CharlieMHz

Does this still work? I tried it following the Adding Functionality instructions here: https://forum.vivaldi.net/topic/10549/modding-vivaldi, but it doesn't seem to be working. Am I doing something wrong?

I added the line into browser.html, then created a new JS file alongside browser.html and put all of your code into it.

tam710562

@CharlieMHz It still works with me.

CharlieMHz

@tam710562 Was it following the guide that I linked as well? Also, how can I test if my custom scripts are even loaded/running? E.g. add an "alert()" anywhere to test it?

A Former User

@CharlieMHz You can check the console (vivaldi://inspect#apps → click the first inspect → switch to tab console) if there are any errors like Failed to load resource addressing your mod.

CharlieMHz

This post is deleted!

CharlieMHz

UPDATE: Sorry for the trouble everyone, turns out, I had to show the Bookmarks bar (I've kept it turned off all this while), then restart Vivaldi with that, and now it works! Thank you so much everyone who offered their precious time and effort to help me, cheers!

MasterLeo29

@CharlieMHz happens to the best!

shingen2018

This doesn't works.

shingen2018

This post is deleted!

dpn

@masterleo29 Doesn't seem to be working ?

MasterLeo29

@dpn Hi. Seems Vivaldi has updated some internal namings. I've updated it and tested. Let me know if it works for you

/**
 * Author: Leonardo Domingues
 */

setTimeout(function wait() 
{
    var adr = document.querySelector(".toolbar-mainbar.toolbar");
        if (adr != null) 
        {
            const vivaldi = window.chrome;

            var bar = document.getElementsByClassName('bookmark-bar')[0];
                
            function change_display()
            {
                var tab = document.querySelector('.active.webpageview');

                if (tab.classList.contains('internal')) 
                {
                    bar.style.display = "flex";
                }else
                {
                    bar.style.display = "none";
                }
            }

            vivaldi.tabs.onCreated.addListener(e => change_display());

            vivaldi.tabs.onUpdated.addListener(e => change_display());

            vivaldi.tabs.onActivated.addListener(e => change_display());
        }
        else {
            setTimeout(wait, 300);
        }
}, 300);

nomadic

@masterleo29 .toolbar-addressbar changed to .UrlBar a few updates ago if you want to use that in the querySelector for adr.

dpn

@masterleo29 Hi Master, Thanks. But unfortunately, this did not work for me.

dpn

@nomadic Tried swapping those values; didn't work either.

/**
 * Author: Leonardo Domingues
 */

setTimeout(function wait() 
{
    var adr = document.querySelector(".UrlBar");
        if (adr != null) 
        {
            const vivaldi = window.chrome;

            var bar = document.getElementsByClassName('bookmark-bar')[0];
                
            function change_display()
            {
                var tab = document.querySelector('.active.webpageview');

                if (tab.classList.contains('internal')) 
                {
                    bar.style.display = "flex";
                }else
                {
                    bar.style.display = "none";
                }
            }

            vivaldi.tabs.onCreated.addListener(e => change_display());

            vivaldi.tabs.onUpdated.addListener(e => change_display());

            vivaldi.tabs.onActivated.addListener(e => change_display());
        }
        else {
            setTimeout(wait, 300);
        }
}, 300);

MasterLeo29

@dpn Hum .. Just to be sure, you have the "show bookmark bar" activated, correct ? I'm asking 'cause I tried (with it on) on the snapshot and it worked. Do you have Vivaldi up to date ?

hlehyaric

@vegardheimdal You missed the purpose of a JS mod: to modify Vivaldi UI.

Extensions & user scripts don't work on Vivaldi UI (or any chromium-based browser UI afaik), that's why you need to put it in the application folder, otherwise it will do nothing.

dpn

@masterleo29 Sorry, the script does work. I think the problem was, I put an underscore in the file name .

The script shows the bookmark bar on the settings page too .

I tried the script with both the different querySelector values ( .toolbar-addressbar and .UrlBar ) and they both worked.

Unfortunately the script doesn't work when the Start Page / New Tab Page is controlled by an Extension. Which is a shame, because that's the set-up I have, specifically my NTP is controlled by the 'Earth View by Google Earth' extension.