Move Vivaldi Button on Main Toolbar [Left|Right]

skribb

The code is for test only, may cause self-combustion.

There is an old mod which still work but I feel is became over complicated over the time (js is untouched since 1.4 or even before).

[JS] Move the button (top left)
setTimeout(function wait() {
    var vivbtn = document.querySelector(".vivaldi");
    var toolbar = document.querySelector(".toolbar-addressbar.toolbar");
    if (toolbar != null) {
        toolbar.appendChild(vivbtn);
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

where does this move the V button?

luetage

@Hadden89 Javascript looks suspiciously like my work, but I don't remember doing it, got a link to the original thread?

Hadden89

@luetage It's probably your own, but I could have mess with it.
I think this was made in chat some years ago

@skribb Top left.
Without strange css hacks:

With strange css hacks:

(Screenshot are from latest snapshot where I didn't centered the button yet as I feel I'm still doing something wrong)

luetage

@Hadden89 Anyway, you shouldn't do this with a background image, but with an svg instead. This makes it possible to use theme colors.

Hadden89

@luetage I'm not using a background image for the button - just the regular icons (hamburger/v-icon) manually adapted with margin and transform for some tab positioning.
The black area is part of the "window background image" which come from behind as I moved the toolbar to accomodate the button.
The error came out when V updated where in the code the window background image is generated.

Hadden89

@luetage Oh, I found the first iteration of the mod. Dated 2/9/17

On main profile (Snapshot 2.11 RC), of course, I keep the button (more or less)centered.

luetage

I see what the problem is, the button just needs to be moved to the main bar. Do you want the css integrated in the js?

Hadden89

@luetage said in [Help] Mod semplification?:

Do you want the css integrated in the js?

Yes, thank you ^^

luetage

Try this:

(function () {

function style() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = 'mvVivbtn';
    style.innerHTML = `.vivaldi {position: relative;}`;
    document.getElementsByTagName('head')[0].appendChild(style);
};

function mvVivbtn() {
        style();
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-addressbar");
        var div = document.createElement('div');
        div.classList.add('button-toolbar');
        bar.insertBefore(div, bar.firstChild);
        div.appendChild(btn);
    }

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
          mvVivbtn();
    }
    else {
         setTimeout(wait, 300);
    }
});

})();

Hadden89

@luetage Tnx, now is better; I only kept few margins for fine tuning and probably removed the last bits of bad code in my css

skribb

@luetage that's absolutely fabulous. what would someone who isn't a JS/CSS novice do to get the V button to the right of the extension buttons?

luetage

@skribb Should work:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        style();
        var btn = document.querySelector(".vivaldi");
        btn.setAttribute('tabindex', '-1');
        var bar = document.querySelector(".toolbar-addressbar");
        var div = document.createElement('div');
        div.classList.add('button-toolbar');
        bar.appendChild(div);
        div.appendChild(btn);
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
              mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });

    })();

skribb

@luetage that is soooooooooooooo good

thanks a million

luetage

@Hadden89 I edited the initial code too, there is no need to make the button a child of the main toolbar. It even seems detrimental, at least on Gnome the new version triggers the menu with shortcut (alt), while the original version doesn't. Something I came to realise just now.

Hadden89

@luetage Windows trigger the menu anyway, but I'll update the code

ChimeraLove

Hello,

I would love your help in moving the Vivaldi button to the vertical panel above the bookmarks button.

I don't know js, and was trying to play with panelbtn and .switch with no luck

Thanks!

luetage

@ChimeraLove

Here:

(function () {

    function style() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.id = 'mvVivbtn';
        style.innerHTML = `.vivaldi {position: relative;}`;
        document.getElementsByTagName('head')[0].appendChild(style);
    };

    function mvVivbtn() {
        style();
        var btn = document.querySelector('.vivaldi');
        btn.setAttribute('tabindex', '-1');
        var panel = document.getElementById('switch');
        panel.insertBefore(btn, panel.firstChild);
    }

    setTimeout(function wait() {
        const browser = document.getElementById('browser');
        if (browser) {
              mvVivbtn();
        }
        else {
             setTimeout(wait, 300);
        }
    });

    })();

ChimeraLove

@luetage Thank you! perfect

EvilSpark

Thanks a lot for this great Mod luetage.

oudstand

Did you adapt the mod for the latest update?