Move Vivaldi Button on Main Toolbar [Left|Right]

Hadden89

Go To Fixed version: Left | Right

Tnx again Luetage ^^ :

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);

[CSS] Hide header, fix colors, positions and uses workaround not to break Windows Background Image.

/* UI: HeaderLess Mod; NEED vbutton.js */
#browser.native:not(.tabs-top) #header {display: none;} 
#browser:not(.native) #header {display: block;} 
#browser #main {background-color: var(--colorAccentBg);} 
#browser #main .inner {background-color: var(--colorBg);} /*fixtabbar*/
.address-top .toolbar-mainbar:after {display: none;} 
.toolbar-addressbar {margin-left: 26px;}
.native .vivaldi {transform: scale(1.4); margin-top: 3px; margin-left: -27px;}
:not(.native) .vivaldi {transform: scale(1.2); margin-top: -2px; margin-left: -28px;}
.native:not(.tabs-top) .burger-icon {margin-top: 6px;  margin-right: 1px;}

/* Tabs: Manual point to background + "transparent" fix */
#tabs-container.right, #tabs-container.left {
	background-image: url("chrome://vivaldi-data/local-image/88407a27-63ce-4777-a600-76367ccf4eed");
}
.tab-position .tab .tab-header {background-color: rgba(0, 0, 0, 0.81);}
.stacks-on.tabs-right .tab.tab-group .tab-group-indicator, 
.stacks-on.tabs-left .tab.tab-group .tab-group-indicator,
.tab-position .tab.active .tab-header {background-color: inherit;}

Wondering if there is room for a better coded approach

Margins follow 2.11 and UI scale between 75-85% (Button may un-centered in 2.12)
(Your) background image path is found in developer tools.
Switching to horizontal menu will crash Vivaldi

The problem is, I guess, the moved button is at same "level" of #browser or #main - while it should be an "element" of the toolbar (to avoid some css hacks which mess with the overall UI).

skribb

@Hadden89 said in Mod semplification?:

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.