Showing extension icons on the bottom of the browser
-
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.
-
Well i'm just tickled pink [or more accurately for me, purple]. Today's update to 1.16.1183.3 was the first opportunity to observe the mod vanish post-update [ie, Extension Icons revert to the Address Bar, as expected], then semi-automagically reappear in Status Bar after running Lilo's bash script. Tis simply lovely. Now i have a small glimpse into why all those Vusers for the past couple of years who understand css & js were excited about V's UI modding capability.
-
@luetage said in Showing extension icons on the bottom of the browser:
last edit: 2018-09-30
I'm on Windows 7. These codes of yours work as expected.
But when I clicked on the "Hide button" command in the right-click menu of an extension button, now on status bar, Vivaldi crashed. The whole program window became empty and turned gray, displaying a big Vivaldi logo in the center. I had to close Vivaldi from its thumnail (?) on Windows taskbar.
I opened Vivaldi again. Then I noticed that all the extension buttons, and the extention visibility toggle, were gone, either on the status bar or on the address bar.
Trying to remedy this error, I closed Vivaldi, renamed both custom.css and custom.js to disable them, re-booted my PC and then started Vivaldi again. But I still didn't see the extension icons anywhere in Vivaldi.
Fortunately I have backups of the two sub-folders under Vivaldi's installation folder (standalone): Application and User Data. So I deleted the two original sub-folders, copied the backups back. No problems now.
-
@drkh Don't hide extension icons in current Vivaldi I'm not gonna try to replicate this.
-
@luetage said in Showing extension icons on the bottom of the browser:
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.
last edit: 2018-09-30
A problem is found.
When F11 (full screen mode) is pressed, nothing but the big Vivaldi logo appears on the screen. Pressing F11 again only brings back the Windows task bar.
Vivaldi may still be closed from its thumnail on the Windows task bar. But after Vivalde starts the next time, only the menu icon and the window button group appear. But if a bookmark is now opened from Bookmark in the menu, you can see it open in the full screen mode.
Press F11 at this point and all the UI can be restored, only to find the extension icons are taken back to the address bar.
Close Vivaldi and then start it again. It goes back to the normal condition.