Showing extension icons on the bottom of the browser



  • I'd like to make it so that all the icons for my extensions that currently display in the top right, next to the search box display down at the bottom. I'd like to either add a new bar to the bottom that I can put them all in or make it so I can put them on the status bar, next to the capture page, image toggle etc. Firefox has an addon that creates an addon bar at the bottom, so I'd imagine it would be possible for Vivaldi too. Does anyone know how to do this? Does anything already exist?



  • @rebanar Moving them about is easy enough. A hacky way of doing it is

    .extensions-wrapper {
        position: fixed;
        top: calc(100vh - 30px);
        z-index: 2;
        transform: scale(0.5);
        right: 300px;
    }
    .extensionaction {
        transform: scale(2);
        bottom: 400px !important;
        top: unset !important;
        left: unset !important;
    }
    

    The issue with this method is the little pop-ups that normally appear get cut off, so I have to use a hacky fix which may not always work depending on the size of the popup. This could be a starting point for you to fix your problem. I'm not sure how one could solve the problem neatly though.

    You would install this as a custom mod: https://forum.vivaldi.net/post/10549

    As for customising the toolbars in general, that's a feature we have yet to see come to fruition.



  • Just to make a note if you or anyone else wants to implement the js for this:

    1. Individually scale the icons so you don't scale everything which is messy
    2. observe the .extensionaction class and whenever it becomes active you could move the popup as needed by the size


  • Thanks for the quick and dirty fix to at least get them out of the top right corner. I'd love it if someone could tweak it and implement your suggestions since my understanding of how all of it works is limited. I know that's it's probably not very likely for anyone to do, so I appreciate what I have so far.



  • I'm working on a proper solution, but this will take time. If anyone else is looking into this, I will stop work though, since this will be time-intensive, so please tell me.

    Here is what I have so far:
    0_1504645232853_Screenshot 2017-09-05 22.59.22.png



  • Ok, here is what I have so far. I'm having trouble with the pop-up menus, but that was to be expected. Everything else works decently.

    You will need 1 custom.js file and 1 custom.css file to implement this. Both have to be referenced in browser.html and placed correctly in the application.


    custom.js:

    setTimeout(function wait() {
    	var wrapper = document.querySelector(".toolbar-addressbar.toolbar > .extensions-wrapper");
    	var footer = document.getElementById('footer');
    	if (wrapper != null) {
    		footer.style = "height: 27px";
    		footer.appendChild(wrapper);
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);
    

    custom.css:

    /* extensions-wrapper configurations */
    #footer .extensions-wrapper {
    	-webkit-app-region: no-drag;
    }
    #footer .extensions-wrapper img {
    	height: 19px;
    	width: 19px;
    	margin-top: 2px;
    }
    #footer .extensions-wrapper .button-badge {
    	max-height: 10px;
    	max-width: 10px;
    	min-width: 5px;
    }
    #footer .toggle-extensions-group svg {
    	vertical-align: middle;
    }
    #footer .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
    	border-right: none;
    }
    
    /* background colors */
    #footer .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
    	background-color: transparent;
    }
    #footer .extensions-wrapper span:hover, #footer .toggle-extensions-group:hover {
    	background-color: var(--colorBgDark);
    }
    
    /* popup */
    #footer .extensionaction .popup.top::before, #footer .extensionaction .popup.top::after {
    	display: none !important;
    }
    #footer .extensionaction {
    	position: absolute;
    	top: unset !important;
    	bottom: 35px;
    }
    
    /* footer button alignment */
    #footer button.button-toolbar-small {
    	height: 27px;
    }
    #footer input.button-toolbar-small:last-of-type {
    	margin-right: 6px;
    }
    #footer button.button-toolbar-small svg {
    	padding-top: 4px;
    }
    #footer .tilingtoggle {
    	padding-top: 1px;
    }
    

    last edit: 2017-09-07



  • @luetage It's definitely looking good so far. One thing to note is that I have the button hidden on one of the extensions. The icon is hidden, but there's still a spot for it. This is definitely a nit pick, so if there's no solution for it I won't feel too bad. The menu for the items when I click on them comes up more in the middle of the page instead of right by where the icon is, but this is not a big deal either. I'm very happy with what you've provided and not trying to complain. I'm just trying to give feedback in case you or someone feels inclined to address them. Thanks a lot.



  • My mistake, I didn't check hidden buttons. Made it a little tighter and fixed this. Exchange both files -- I have made the according edits in the post above.

    The display height of the popup can be configured with the last entry in custom.css file -- #footer .extensionaction {top: 40% !important;}, adjust it as needed. Having all popus start exactly at the bottom is probably complicated. We would need a javascript that listens for a click on each button, checks the height of the popup and then spawns it correctly. Haven't looked into it, might do it later.



  • @luetage Good work. I really appreciate it.



  • Oh boy, I'm far too complicated as usual. The popup height can be fixed with css only, no javascript needed. Now it works.
    #footer .extensionaction {position: absolute; top: unset !important; bottom: 35px;}



  • This is working great. Thanks a lot.


Log in to reply
 

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