Move "Toggle Extension" button up



  • Ok, so this is what i want to do:
    Move "Toggle Extension" button up, where previously, for me, was the trash button (near the minimize button, left to it). So i can hide the address bar, but still have access to extensions. @sjudenim did a very similar thing to what i want, but can't do it at all...
    https://forum.vivaldi.net/post/211562

    It's my first day of interaction with css, so go easy on me. I successfully changed a few things already, it's so much fun!

    Thanks guys!



  • From here to here 🙂 Probably, without js it can't be done?

    0_1544481480308_extension.png



  • EDIT: I went off of your pm but I should have read your post here more carefully. Easy fix though

    I borrowed heavily from some of @luetage's scripts to whip this up. Keep in mind that you might have to change some of the sizing and positions because Vivaldi displays the window buttons differently on different OS'

    function csse() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
         #browser .window-buttongroup .extensions-wrapper img {
            height: 19px;
            width: 19px;
        }
        #browser .window-buttongroup > span > button {
       	background: transparent;
       	opacity: .7;
       	border: 0;
       	margin-bottom: 0;
        }
        #browser .window-buttongroup > span > button:hover {
       	opacity: 1;
        }
        #browser .window-buttongroup .extensions-wrapper .button-badge {
            max-height: 20px;
            max-width: 10px;
            min-width: 5px;
        }
        #browser .window-buttongroup .toggle-extensions-group svg {
            vertical-align: middle;
        }
        #browser .window-buttongroup .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
            border: none;
        }
        #browser .window-buttongroup .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
            background-color: transparent;
        }
        #browser .window-buttongroup .extensions-wrapper span:hover, #footer .toggle-extensions-group:hover {
            background-color: var(--colorBgDark);
        }
        #browser .window-buttongroup .extensions-wrapper button:focus:not([tabindex='-1']) {
            box-shadow: none;
            border-color: var(--colorBorder);
        }
        #browser .window-buttongroup .extension-popup.top::before, #footer .extension-popup.top::after {
            display: none !important;
        }
        #browser .window-buttongroup .extension-popup {
            position: absolute;
            top: unset !important;
            bottom: 20px;
        }
        #browser .window-buttongroup  input.button-toolbar-small:last-of-type {
            margin-right: 6px;
        }
        `;
        document.getElementsByTagName('head')[0].appendChild(style);
    };
    
    function moveElements() {
        csse();
        const wrapper = document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper');
        buttongroup.insertBefore(wrapper,buttongroup.firstChild);
    };
    
    let buttongroup = {};
    setTimeout(function wait() {
        buttongroup = document.querySelector('#browser .window-buttongroup');
        if (buttongroup) {
            moveElements();
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    


  • @sjudenim Sooo close. It's going up, but it can't be pressed. When i untick Extensions Toggle in Standard Settings, neither of extensions buttons won't work too.
    Let's clear it out - the whole code need to be in a new .js file and of course in browser.html need to add a line for it. Right?

    Update: also, if i untick Show Address Bar in Settings (after i apply this mod) Vivaldi going blank.



  • @cafosse

    It should be working but the problem is that the tab strip overlaps the bottom portion. Originally I moved it to the trash container which worked much better, but you have removed that. Maybe we should put the trash container back and just reduce the size and opacity of it's icon so you don't see it.

    I'll try again, but do test these things without your other mods running because they might cause a conflict that I can't foresee



  • @sjudenim Ok, without any mods, yes, when trash container is back, it can be pressed (but need a position adjustments). But then extensions can't be pressed. Plus, if you go in settings and then untick Address Bar (that's important, bc it's why i want to move it in a first place) - this toggle button goes away. But thanks for trying!



  • Alright, let's try this again

    function csse() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
         .tab-strip {
    	height: 28px;
         }
         #tabs-container .sync-and-trash-container .extensions-wrapper img {
            height: 19px;
         }
         #tabs-container .sync-and-trash-container .extensions-wrapper {
    	height: 19px;
    	margin-right: 10px;
    	margin-bottom: 5px;
        }
        #tabs-container .sync-and-trash-container > span > button {
       	background: transparent;
       	opacity: .7;
       	border: 0;
       	margin-bottom: 5px !important;
        }
        #tabs-container .sync-and-trash-container > span > button:hover {
       	opacity: 1;
        }
        #tabs-container .sync-and-trash-container .extensions-wrapper .button-badge {
            max-height: 19px;
            max-width: 19px;
            min-width: 5px;
        }
        #tabs-container .sync-and-trash-container .toggle-extensions-group svg {
            vertical-align: middle;
        }
        #tabs-container .sync-and-trash-container .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
            border: none;
        }
        #tabs-container .sync-and-trash-container .extensions-wrapper .dragging-cancelled, #footer .toggle-extensions-group {
            background-color: transparent;
        }
        #tabs-container .sync-and-trash-container .extensions-wrapper span:hover, #footer .toggle-extensions-group:hover {
            background-color: var(--colorBgDark);
        }
        #tabs-container .sync-and-trash-container .extensions-wrapper button:focus:not([tabindex='-1']) {
            box-shadow: none;
            border-color: var(--colorBorder);
        }
        #tabs-container .sync-and-trash-container .extension-popup.top::before, #footer .extension-popup.top::after {
            display: none !important;
        }
        #tabs-container .sync-and-trash-container .extension-popup {
            position: absolute;
            top: unset !important;
            bottom: 19px;
        }
        #tabs-container .sync-and-trash-container  input.button-toolbar-small:last-of-type {
            margin-right: 6px;
        }
        #tabs-container .trash {
            display:none;
        }
        `;
        document.getElementsByTagName('head')[0].appendChild(style);
    };
    
    function moveElements() {
        csse();
        const wrapper = document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper');
        container.insertBefore(wrapper,container.firstChild);
    };
    
    let container = {};
    setTimeout(function wait() {
        container = document.querySelector('#tabs-container .sync-and-trash-container');
        if (container) {
            moveElements();
        }
        else {
            setTimeout(wait, 300);
        }
    }, 300);
    

    I've just hidden the trash icon and used it's container, let me know if this works better



  • @sjudenim So close! Here is a video of what is going on
    Buttons are working. Toggle button is grey-ish. Still, when untick Address Bar - button is gone.



  • @cafosse

    You are running other custom scripts with it though, there might be a conflict there. Just run this script and see if you still encounter that



  • @sjudenim Here is without any mods
    Tabs are gone now.



  • @cafosse

    The extension wrapper is still a part of the address bar, we've just moved it's position. By using Vivaldi to remove it, it's removing the wrapper as well.

    Use this instead to hide the address bar

    .toolbar {
        height: 0 !important;
    }
    


  • @sjudenim Great! Can we, somehow, change grey background to transparent?


 

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