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:
- Individually scale the icons so you don't scale everything which is messy
- 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:
-
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 a custom.js file to implement this. It has to be referenced in
browser.html
and placed correctly in the application.
custom.js:
function csse() { const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` #footer .extensions-wrapper { -webkit-app-region: no-drag; } #footer .extensions-wrapper img { height: 16px; width: 16px; } #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; } #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); } #footer .extensions-wrapper button:focus:not([tabindex='-1']) { box-shadow: none; border-color: var(--colorBorder); } #footer .extension-popup.top::before, #footer .extension-popup.top::after { display: none !important; } #footer .extension-popup { position: absolute; top: unset !important; bottom: 22px; } #footer input.button-toolbar-small:last-of-type { margin-right: 6px; } `; document.getElementsByTagName('head')[0].appendChild(style); }; function extStatus() { csse(); const wrapper = document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper'); const footer = document.getElementById('footer'); footer.appendChild(wrapper); }; // 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) { extStatus(); } else { setTimeout(wait, 300); } }, 300);
last edit: 2018-10-05
-
@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.
-
@luetage The mod works great. Is there any way extensions could be centered between the hide panel icon and the Capture Page icon?
It would be great if Vivaldi created additional extensions-wrappers: Addressbar-left, Addressbar-right, Sidebar, and statusbar-center.
-
Hmm, there is no between. What you are referring to is the status info field, and it's size varies depending on the width of your browser. And links are displayed there. But it's possible to move the extensions before or after the status info.
-
@titzi If the address bar is disabled in settings, the mod has no way to fetch the extensions from it, therefore you can't use this setting. Try hiding the address bar with css instead.
-
Either I missed this or forgot about it but this worked nicely with the status bar toggle and doesn't require any of that css for the pop out menus (though I do have some to style the toggle button).
-
@luetage This is fabulous, thank you.
-
I looked at this again since snapshot had the change to 16px extension icons in the address bar. It's possible to run this mod without the height change of the status bar as consequence, which means less code, but also a little less space for hitting extension buttons. I do think the new code is the cleaner solution, but it's a matter of preference. Also removed some ugly focus borders, which weren't present previously.
css
/* extensions-wrapper configurations */ #footer .extensions-wrapper { -webkit-app-region: no-drag; } #footer .extensions-wrapper img { height: 16px; width: 16px; } #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; } /* 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); } #footer .extensions-wrapper button:focus:not([tabindex='-1']) { box-shadow: none; border-color: var(--colorBorder); } /* popup */ #footer .extensionaction .popup.top::before, #footer .extensionaction .popup.top::after { display: none !important; } #footer .extensionaction { position: absolute; top: unset !important; bottom: 22px; } /* footer button alignment */ #footer input.button-toolbar-small:last-of-type { margin-right: 6px; }
js
function extStatus() { const wrapper = document.querySelector('.toolbar-addressbar.toolbar > .extensions-wrapper'); const footer = document.getElementById('footer'); footer.appendChild(wrapper); }; // Below code is a loop waiting for the browser to load the UI. Something like it has to be used in all similar javascript mods to ensure the interface has loaded before running dependent functions. You can call all functions you might use from just one instance. let adr = {}; setTimeout(function wait() { adr = document.querySelector('.toolbar-addressbar.toolbar'); if (adr) { extStatus(); } else { setTimeout(wait, 300); } }, 300);
-
@luetage said in Showing extension icons on the bottom of the browser:
since snapshot had the change to 16px extension icons in the address bar
To clarify, do i correctly interpret you to mean that your new "cleaner" code is currently applicable only to Snapshot, but not yet also Stable?
EDIT: Ugh, i closed Snapshot, replaced the text in each of your original file versions with your latest text, relaunched Snapshot, but am dismayed to see that now all the Extension Icons are back up at the top. Somehow i seem to have misunderstood how to deploy your new code...
-
@steffie Should probably work on stable too, but it's untested and I wouldn't be too sure of it. I tested the posted code without any other modifications on 1.16 snapshot and it works. Just make sure you completely overwrite the previous code with the new one (both js and css files).
If the extension icons are back on top this means you have a javascript error somewhere. You can check this by starting Vivaldi in debug mode and inspecting the UI (right click inspect on any Vivaldi UI Element will bring up developer tools). Just open the console tab in devtools and there should be an error in red telling you what is wrong with which file (only custom.css and custom.js matter, other application errors just ignore).
how to: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools -
@luetage Update:
- Yes it does work fine in Stable as well, & i think the v2 Status Bar height reduction compared to your v1 is a good outcome -- nice one you.
- I began but did not complete your suggested debug mode troubleshooting test [no disrespect intended], coz i became distracted by noticing that in my Manjaro VM [used for testing this kind of innovative stuff before deploying into my real OS later], your v2 code worked just fine in Snapshot, despite as i said before my "real" Snapshot had reverted to the extensions up top... & this was with the same new files that were fine in the VM. Huh? After lots of fruitless investigations i discovered what i regard as a frustratingly dumb cause... once i deleted my real V Snapshot's Cache directory, it all behaved perfectly. Bleedin' heck!
Anyway, this is now a really great outcome... Lilo's bash script now works fine in Manjaro, & your clever mod has given me the Holy Grail of simultaneous address & search fields without compromising my extension icons' visibility & functionality. Many thanks to you indeed.