Moving extension icons next to the panel toggles

calops

Hi,

I don't know much CSS or JS, so I found myself stuck pretty fast when wanting to perform some tweaks of the UI.

My goal is to eventually completely hide the address bar, while keeping the extension icons somewhere else in the UI. I've successfully moved the icons around thanks to a bit of custom JS:

(function () {
   var checkExist = setInterval(function() {
      document.getElementById("switch")
              .appendChild(document.getElementsByClassName("extensions-wrapper")[0]);
   }, 100);
})();

I have no idea if this is the right way to go about doing this, I merely copied a bit of code I found somewhere. This yields the following result:

this result .

The big icon below the "+" in the left panel is the first of my extension icons. As you can see, the icons are way too big and displayed horizontally instead of vertically. I would like them to neatly align themselves just like the other icons in the side panel, but I have no idea how to tweak the CSS to achieve that.

Not helping: there seems to be a bug in the code inspector, as the "extensions-wrapper" div appears twice in the code and is impossible to expand.

Could anybody give me pointers?

Thanks.

luetage

That's not easy to do. For starters, you can get them to display one after the other like this
.extensions-wrapper {display: flex; flex-flow: row wrap}
The only icon which displays the correct size is one that I made myself, so exchanging the icons would be a possibility. The next issue is the dropdown menus, they gotta be displayed to the right now. I'm gonna look at this a little later.

calops

@luetage Thanks, this is a good start. I'll try to tinker around as well so that the hover menus are correctly displayed.

luetage

Hmm, I think the javascript part needs work, it gives errors in console. In addition you are executing the code 10 times a second. When clicking on an extension button to open the dropdown it flashes 10 times a second because of this. This is probably the reason why you can't expand it in devtools too.

calops

@luetage Oh, wow, that's pretty bad. I guess I copied the wrong code when starting my script. Is replacing setInterval with setTimeout supposed to fix this issue? When I try that, the icons aren't moved anymore.

luetage

I'm really bad with javascript... Do you have a stackoverflow account? Maybe it would be best to ask for help concerning this issue there.

calops

@luetage You're right, it may be better to ask there. Thanks for your help anyway!

sjudenim

@calops

I've been wanting to do this as well but haven't gotten around to attempting it.

I'm not sure if your code is the right way to go about it though. What you have now seems to lock the popout boxes to the switch panel. I tried a few things in css to move them but it seemed to only make adjustments to the wrapper within that panel. I think the popout boxes will need to be moved in js as well.

One of @den_po's hooks does something very similar, it moves the menu button as well as the drop down menu. So this might be of some help
https://github.com/justdanpo/VivaldiHooks/blob/master/vivaldi/hooks/move-V-button-to-addressbar.js

To get your code to stop redrawing so that you can use devtools on that element again, use this

var startMove = setInterval(function(){moveWrapper() }, 100);

function moveWrapper() {
    document.getElementById("switch")
        .appendChild(document.getElementsByClassName("extensions-wrapper")[0]);

    if(moveWrapper) clearInterval(startMove);
}

calops

@sjudenim
Wouldn't this be equivalent to just replacing setInterval with setTimeout? Or does it do something besides just calling the function once?

Anyway, thanks for the link, I'll look into it. And yes, I think I'll need to move the boxes as well somehow.

sjudenim

@calops

In theory, yes. In your code, no. But I'm not sure the reason that is. I think It's because the countdown timer (setTimeout) is not being triggered, or that there is no function associated with the timer. At least your setInterval code tells it to do a function, but it wants to repeat it so the additions I made will stop that once the function has been enacted.

I'm no expert, but while your code does move the extensions wrapper, I don't think you should be using an automation timer at all to do it. You'll notice the link I provided doesn't use any to move the menu button around.

luetage

Keep us updated in case you get something working from stackoverflow, this is interesting. Btw, yesterday I tried your code, but instead of the interval I listened for a click. Worked as well, and didn't have the problem of flashing the menus. I really don't know how to trigger this without some kind of listener or interval... And I had the same problems when I wrote some javascript for vivaldi forums, sigh

Hadden89

And what about extension wrapper after menu bar items?
I'm tweaking there now

hxss

@calops why are you use setInterval()? Why custom functions not work if they would called just once at startup?
What about stopping interval after extensions would moved? e.g. setTimeout(function(){ clearInterval(checkExist); }, 10000);

upd:
I replaced the code with this one:

(function () {

	var extMove = setInterval(function() {
		var extWrapper = document.querySelector(".toolbar-addressbar > .extensions-wrapper");
		if ( extWrapper ) {
			document.getElementById("switch")
			        .appendChild(extWrapper);
			clearInterval(extMove);
		}
	}, 1000);

})();

luetage

@hxss This thread is old, and the OP hasn't been online in half a year. This mod should be doable, I've since moved the extension icons successfully to the status bar in another mod, this isn't too different. The only problem you have to solve is aligning the drop downs correctly. Take a look at the other thread and work from there.

https://forum.vivaldi.net/topic/20643/showing-extension-icons-on-the-bottom-of-the-browser/6

luetage

luetage

Ok, had to change code for this. Big thank you @tiamarth for solving another problem unwittingly.

custom.js

function csse() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
    #switch .extensions-wrapper {
        display: flex;
        flex-flow: row wrap;
    }
    #switch .extensions-wrapper {
        -webkit-app-region: no-drag;
    }
    #switch .button-toolbar.browserAction-button img {
        height: auto;
        width: 19px;
    }
    #switch .button-toolbar.toggle-extensions-group svg  {
        height: 16px;
        width: 4px;
    }
    #switch .extensions-wrapper .dragging-cancelled, #switch .toggle-extensions-group {
        background-color: transparent !important;
    }
    #switch .extensions-wrapper span:hover, #switch .toggle-extensions-group:hover {
        background-color: var(--colorBgDarker) !important;
    }
    #switch {
        contain: initial;
    }
    #switch .extension-popup.top::before, #switch .extension-popup.top::after {
        display: none !important;
    }
    #panels-container.left #switch .extension-popup {
        position: absolute !important;
        top: 1px !important;
        left: 35px !important;
    }
    #panels-container.right #switch .extensionaction {
        position: absolute !important;
        top: 1px !important;
            left: unset !important;
        right: 35px;
    }
    `;
    document.getElementsByTagName('head')[0].appendChild(style);
};

function extPanel() {
    csse();
    const wrapper = document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper');
    const pref = document.getElementById('overlay');
    const panel = document.getElementById('switch');
    panel.insertBefore(wrapper, pref);
};

// Loop waiting for the browser to load the UI. You can call all functions from just one instance.

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        extPanel();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

Updated for Vivaldi version 2.0, probably more work needed. Will only fix it completely, if someone actively uses it.

This works well, the extension toggle and moving extension icons is working as expected. The popup can either be displayed from top or bottom. Displaying it beside the actual extension icon would work too, but the problem is that certain popups are pretty high and can get cut-off.

Hadden89

@piekay said in Moving extension icons next to the panel toggles:

@luetage How to install this theme? I tried to install it using custom.css and custom.js on Linux.

Browser.html must be linked to your custom.css/js
Then it will be loaded.

luetage

By adding the wrapper to the end of the panel.
panel.appendChild(wrapper);
Additionally unset order of preferences button in css
#switch button.preferences {order: unset;}

luetage

@piekay Very strange, works for me. I have them below the settings button with this code change. The only problem was that the preferences button had order set to 100, if you unset that it works. Maybe add an !important, but for me it works without.

edit: wait, didn't i give you code to remove the settings button? remove that code, maybe that's the reason why it doesn't work.

luetage

Hmm, yeah, mods can collide sometimes, but I wonder why in this case. There aren't many mods around that mess with the order and display in panel.