VivaldiHooks Revival with Plain JS [Work in Progress]

[giaaaacomo]

hi guys, do you think it's possible to have "Create tab with middle click on a free tabbar space" working again?

[Hadden89]

@giaaaacomo it seems to be just a css mod. So it should already work.

[giaaaacomo]

@Hadden89 didn't expect such a fast reply, nice! looks like i'm missing something about the installation or the activation. i tried to install the hooks through installhooks.bat, but nothing is changed, nor i see any new section in the settings

[Hadden89]

@giaaaacomo The hooks doesn't work anymore. The point of the thread is to recreate js hooks as js mods but in this case seems to be only css and you just need to add the string to the custom.css
https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1

[giaaaacomo]

uh ok, thanks for now!

[c4charge]

Hello! first time posting on a forum like this but I like many others have gotten fed up with Franz/Ferdi/Ferdium and similar apps for their pricing plans or "meltdowns" while the free/open source solutions do not allow extensions so I took it upon myself to recreate most of what I've been missing in Vivaldi.

I am not exactly available to maintain this code -- I just wanted to share it so that others may contribute/improve upon it for everyone else rather than keep it to myself... it kinda already does everything I need/want it to lol so I am not very motivated to polish it any further.

You can find/download the code here (or just copy it from the post):
https://github.com/oms9/VivaldiMod

Custom.js:

const tabX = 0;
const spacing = 3;
const ptabHeight = 60;
const ptabWidth = 60;
let lastY = 0;
let normExist = false;
const observer = new MutationObserver(setHeights);

function enlargePinnedTabs() {
    "use strict";   
    let pinnedTabs = document.getElementsByClassName("tab-position is-pinned");

    let idx = 0;
    Array.from(pinnedTabs).forEach(function (tab) {
        //Default cssText str: "--PositionX: 0px; --PositionY: 0px; --Height: 30px; --Width: 72px; --ZIndex: 2;"     
        let tabY = (idx * 60) + spacing;
        tab.style['cssText'] = `--PositionX: ${tabX}px; --PositionY: ${tabY+spacing}px; --Height: ${ptabHeight}px; --Width: ${ptabWidth}px; --ZIndex: 2;`;
        idx ++;
        lastY = tabY;
    });
};

function setHeights(){
    //<div id="tabs-tabbar-container" class="left dotted" style="width: 72px; height: 100%;">
    observer.disconnect()
    let CONT = document.getElementById("tabs-container");
    if (CONT.className == 'overflow left'){
        let CONT = document.getElementsByClassName("left dotted");
        CONT[0].style['cssText'] = `width: 82px; height: 100%;`
    }
    else{
        let CONT = document.getElementsByClassName("left dotted");
        CONT[0].style['cssText'] = `width: 72px; height: 100%;`
    }
    
    enlargePinnedTabs();
    let tabBar = document.getElementsByClassName("tab-strip");

    Array.from(tabBar[0].children).forEach(function (elem) {
        target = elem.firstChild; // Get the inside in a separate var
        if ((target.className).includes('is-pinned')){ // PINNED TABS HERE
            ; //skip
        } else if (elem.className == "separator"){ // SEPARATOR HERE
            elem.style['cssText'] = `--PositionX: 0px; --PositionY: ${lastY+ptabHeight+spacing}px; --Height: 20px; --Width: 72px; --ZIndex: 0;`
            lastY += spacing + 56; // 20 + 30 + 2x spacing
        } else if (target.className == "tab-position"){ // NORMAL TABS HERE
            target.style['cssText'] = `--PositionX: 0px; --PositionY: ${lastY+spacing+20}px; --Height: 30px; --Width: 72px; --ZIndex: 2;`
            lastY += 33;
        } else if (target.className == "button-toolbar newtab"){ // NEW TAB BUTTON HERE
            sepExist = document.getElementsByTagName("hr");
            if (sepExist.length == 1){ // SEPARATOR
                target.style['cssText'] = `--PositionX: 21px; --PositionY: ${lastY+spacing+20}px; --Height: 30px; --Width: 30px; --ZIndex: 0; left: 21px; top: ${lastY+spacing+20}px;`
            }
            else{ // NO SEPARATOR
                target.style['cssText'] = `--PositionX: 21px; --PositionY: ${lastY+ptabHeight+spacing+10}px; --Height: 30px; --Width: 30px; --ZIndex: 0; left: 21px; top: ${lastY+ptabHeight+spacing+10}px;`
            }

        } else { // everything else here (nothing as of yet)
            //console.log('Found ELSE: ' +  target.className);
        }
    });
    observer.observe(tabBar[0], {attributes: true, childlist: true, subtree: true});
}


// Loop waiting for the browser to load the UI
let intervalID = setInterval(function () {
    const browser = document.getElementById("browser");
    if (browser) {
      clearInterval(intervalID);
      // set init size
      document.getElementsByClassName("left dotted")[0].style['cssText'] = `width: 72px; height: 100%;`;
      // call function once
      setHeights();
    }
  }, 300);   // Don't forget to thank @luetage for the standard 300 ms
  

CSS:

#browser.color-behind-tabs-on .tab-position .tab.active.active {
    background-color: #7b7b7b;
    color: #FFFFFF;
}

:not(.ui-transparent-tabs).transparent-tabbar:not(.acc-dark.bg-dark.color-accent-from-page.color-behind-tabs-on) .tab-position .tab {
    background-color: #1c1c1c;
}

Preview:

[loomes]

Hello @nomadic
With the latest Vivaldi Version 6.9.3447.37 the Bookmark Button is not working anymore ):
Can you take a look when you have time?

[stardepp]

@loomes But it still works with Vivaldi 6.9.3447.37. Did you copy the .js modifications back into the correct Vivaldi folder after this update?

[loomes]

@stardepp
Yes you are totaly right. Im an idiot. My used Version was very old. I have updated to the latest one and the Button is back.

[stardepp]

@loomes No, you're not. Never talk badly about yourself.