VivaldiHooks Revival with Plain JS [Work in Progress]

[ppgm]

@Pathduck
Thanks and nice very usefull CSS! I like it!

I applied this CSS every time qc update in qc-close-tab.js so check it

[Pathduck]

@ppgm Hey, that's cool - and thanks, I like it too, even if it bugs out when scrolling...

To be honest though - I am a firm believer in not mixing up functionality with style. So if your JS mod is about adding tab close functionality to the QC, it does not fit in adding style to the QC dialog. It would mean other people who might have their own CSS style for the QC might have conflicts.

So to be honest, I think it would best to keep the CSS out of the JS. Of course, I would not stop you using it, just think it's a bad idea. But of course, feel free to still recommend adding it for some cool QC style

Also, if you'd like me to fork these QC-Tab-Close mod posts off to its own topic I can do it for you if you prefer. Might be an idea to keep it as a separate topic for discussion, even if it's slightly related to @nomadic's WIP/on-hold/abandoned attempt to revive the VivialdiHooks

Oh and if someone can figure out what might be wrong with the CSS when scrolling up it would be much appreciated - I suspect it might only be solvable by JS though (i.e. the entries just aren't there)...

[ppgm]

@Pathduck
hmm...That's right.
I guessed js and css should be mixed up because both mod subscribe html code. It's reudandant if both mod is applied by each js code base.
But these divede each code base as you say because width-height-style don't relate qc-close-tab functions

I update original post! Thank you advice

[utiltiy]

Is it possible that the mod no longer works under version 6.2.3105.45 or something must be adjusted?

[Hadden89]

@utiltiy JS Mods since 6.2 have to be hooked in window.html now due new portal feature.

[utiltiy]

@Hadden89
Thank you! Now works as before

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