Moving extension icons next to the panel toggles



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



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



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



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



  • @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.



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



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



  • @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);
    }


  • @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.



  • @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.



  • 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 :/


Log in to reply
 

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