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

Log in to reply

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