help to move trash icon

  • I'd like to move the trash icon near the + button (tab bar).

  • It's not in the same element as the plus button. You first have resize, then trash+sync. That means you need js to do this.

  • @luetage I know, but I really don't know how can be done (expect maybe for css part xD)

  • The JS for this would be quite tricky, though not impossible, because the "new tab" button is actually absolutely positioned. That means you would also need to absolutely position the trash icon after moving it around. That would require a mutation observer. And it all starts to get a bit messy. I could give a go at trying to implement this, if you still feel you need it.

  • @lonm I like the idea, if can be done in an almost "clean" way without messing too much with tabbar area/overall performance.
    So in the same "block" - both plus icon and trash are present.
    Currently when tabbar is full, plus icon is hidden visible only scrolling to last tab but it should be always displayed as the horizontal space is sufficient for both.

  • The plus button never disappears. There's something wrong with your custom code. Try and find out what it is.

  • @luetage said in help to move trash icon:

    The plus button never disappears. There's something wrong with your custom code. Try and find out what it is.

    mmh... I'll check the css part for the whole tab strip then (I haven't any mod specific for plus button).
    Actually, plus button don't disappear. I only have to scroll down to last tab to see it. (Trash is still there. But it's another class)

    The culprit, is probably this
    #tabs-container {zoom: 120%;}
    I replaced almost any zoom, but on tab strip I hadn't any luck

  • @hadden89 Bon appetit! Loads in as trashmove.js without the need for an additional css file.

    /* apply same attribute changes to trash */
    var newtabObserver = new MutationObserver(
        function(mutations, observer){
    function updateTrash(){
        /* get newtab left style & top style*/
        /* apply to trash icon */
        var trash = document.querySelector(".tab-strip button.toggle-trash");
        var newtab = document.querySelector(".tab-strip button.newtab");
        if(trash && newtab){
            var leftAttrib =;
            var leftAttribValue = Number(leftAttrib.substring(0, leftAttrib.length - 2));
   = leftAttribValue + 30 + "px";
   = "relative";
    /*move button beside plus with generic mover*/
    setTimeout(function wait() {
        var Elements_To_Move = [
            /*["original_element", "desired_location", "child"],*/
            /*["original_element", "desired_location", "before"],*/
            /*["original_element", "desired_location", "after"],*/
            [".sync-and-trash-container button.toggle-trash", ".tab-strip button.newtab", "after"]
        /* check the final element in the vivaldi dom is loaded */
        var everything_loaded = document.querySelector("#vivaldi-tooltip");
            Elements_To_Move.forEach(function(mover, index){
               if(mover.length == 3){
                   /* load this move */
                   var item_to_move = document.querySelector(mover[0]);
                   var place_to_move_to = document.querySelector(mover[1]);
                   var move_method = mover[2];
                   /* check move possible */
                   if(item_to_move && place_to_move_to){
                       /* do appropriate move */
                       if(move_method === "child"){
                       } else if(move_method === "before"){
                           place_to_move_to.parentNode.insertBefore(item_to_move, place_to_move_to);
                       } else if (move_method === "after") {
                               place_to_move_to.parentNode.insertBefore(item_to_move, place_to_move_to.nextSibling);
                           } else {
    	} else {
            /* wait for vivaldi to fully load */
    		setTimeout(wait, 300);
    }, 300);
    /* observe for attribute changes to plus */
    setTimeout(function engageObserver(){
        var newtab = document.querySelector(".tab-strip button.newtab");
        if (newtab != null) {
            var config = { attributes: true };
            newtabObserver.observe(newtab, config);
        } else {
            setTimeout(engageObserver, 300);
    }, 300)

    Known issues: If you switch tab locations you will need to restart vivaldi or reload the window before the changes are applied. After that it will work as expected with tabs on top, left, right and bottom.

  • @lonm woah, thank you a lot ^^

  • @lonm
    Ditto. Thank you for this. I added your code to my custom.js and it loaded perfectly. Seeing it now, it makes perfect sense to have this next to the + button (thanks Hadden89 for original request).

  • @LonM The mod "lost" the known issue in 1.14 ^__^
    Just for info 🙂

  • But... it has another glitch now 😛
    Sometimes, during the transitions - when a tab is opened/closed - a stuttering could happen. Less then a second, but noticeable.
    This usually happen when the tab is doing something big like a video playback.
    I'd try to inspect what triggers this, but most part of devtools are like a sorcery book for me 😃

  • @hadden89 The devtools aren't my forte either, but I recently found out how to inspect animations. Open the console drawer and click the dotted menu button to the left, then open the tab for animations presented. Then just trigger the animation in the browser, select it in the drawer and you are presented with a replay of it, while being able to see what goes on.

    edit: hmm, this is not an animation, might be useful info anyway 😛

  • @LonM As now I have a nice cloud icon, I up this thread.
    How can I add sync icon to the js script you previously made? 🙂

  • @hadden89 It's been a while (12 months apparently) so I forget what exactly that code was originally doing 🙂

    However, if you want to move the sync and the trash icon at once, it should be doable by changing the line

    var trash = document.querySelector(".tab-strip button.toggle-trash");


    var trash = document.querySelector(".sync-and-trash-container");

  • @lonm Thanks.
    I think sync button (so probably the same trash button ) need a kind of delay as is not shown a the same time of new tab and trash buttons.

    I forget what exactly that code was originally doing 🙂

    The mod put the three buttons in a row below the last opened tab. (Well, of course I'll fix the margins, then).

    I'll do some tests in the meanwhile to see if I borked something else ^^,

    What I understood: sometimes, after V load, the sync container seems to be moved behind the tab bar near the first tab and the tabs container; other times I actually can't understand where the buttons are gone - inspecting items let me fear they're far far away from the vivaldi window - as I can't see them when selected with devtool.


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