Showing extension icons on the bottom of the browser
-
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.
-
@drkh I updated the script only recently, but I just fixed the loop and didn't even test it. When I tested it now, it didn't work at all for me. The buttons were moved, but the popups didn't show. Turns out Vivaldi changed the class on them β at least on 2.1, haven't tested stable. That's something I fixed now, but a major error occurs when you hide UI, because Vivaldi wants to manipulate the extension buttons in the address bar, which simply aren't there anymore. I believe there's nothing I can do about it β don't hide the UI, if you wanna move the extension icons out of the address bar. It didn't use to be this way when the mod was created by the way, the change in Vivaldi code happened likely only recently when chromium version was updated to 67.
I'm not gonna do updates to the scripts in here right now, I'll have to test a few more things first.
-
@luetage Still thank you for the info and your caring.
FWIW, I still use Vivaldi 1.15.1147.64. As for the "popup" issue, I don't have problem in seeing the left-click menus, the right-click menus and the tooltips.
-
@drkh I updated the post on first page now, when you switch to 2.0 you will have to start using the new version. As for the UI toggle, don't think I can solve that. The error is being thrown in the Vivaldi code and I don't know a way of tricking Vivaldi into thinking the extensions wrapper is still where it's supposed to be.
-
@luetage Sorry for late reply.
I tried the updated script on Vivaldi 2.0.1309.37. Unfortunately it does not move the extension buttons to status bar (but the old script does). The good news is F11 no longer causes trouble indeed.
If the custom.js file contains only the updated script, the extension buttons are all missing and a vertical stripe appears at startup. See this: (Actually it doesn't matter if custom.css is in use.)
I also uses a JS script of yours (edited, though) for moving the Reload button between the address field and the search field. If I use that script together with the updated script for moving extension buttons, the extension buttons can appear but the Rload button is not moved, whether custom.css is used or not. (There are only those two scripts in custom.js now.)
-
@drkh No idea, script works for me. You will have to take a look at console and figure it out where the problem is.
-
The extension buttons are moved to the side panel rather than the status bar. That's why I don't see them if I don't open the panel.
I noticed that after I did the following, in an effort to, as you said, figure it out.
Firstly, I removed the two Vivaldi installaions on my PC: version 1.15.1147.64 x64 and version 2.0.1309.37 x64.
(When I installed them before, I had used an un-installer to record any changes made in the process. So, when I removed them, using that un-istaller, it must be a pretty clean removal. Even the startup run key in the Windows Registry for Vivaldi's update notifyer was deleted.)
Then I re-installed version 2.0.1309.37 x64 as a standalone in a folder different from the one for the regular installation.
After this installation, what I did for Vivaldi are only:
(1) get some extensions
(2) close Vivaldi
(3) modify browser.html to link custom.js
(4) create a custom.js file that only contains the script for moving the extension buttons
(5) launch Vivaldi
(No settings or anything else in Vivaldi was touched. Also no custom.css.)
After Vivaldi launched, I saw the extension buttons in the side panel.
-
@drkh True, while updating the script I incidentally copied the other script over that moves extensions to panel container, they are very similar. Fixed now.
-
Tried your latest script. Two issues.
(1) F11 still causes crash. You did mention "toggle UI" is an unsolved problem. But I'm not sure if F11 is also "toggle UI". Is it?
(2) I don't see the left-click popup menu of any extension button. So, it's still not fixed?
-
@drkh F11 toggles UI, breaks script, as I told you. And there is nothing I can do about it. Either don't toggle UI or don't use the script.
And the extension popup works for me, tested with just this one script running to make sure my setup doesn't interfere in any way.
-
I said that in stable version 2.0.1309.37 when I used the current script, I could not see the left-click popup of any extension button. But when I use the script (or one of the scripts, I don't remember exactly which.) you posted before the incorrect one, I can.
I compared those two scripts and found only two differences:
(1)
The current one:
#footer .extension-popup.top::before, #footer .extension-popup.top::after {
The old one:
#footer .extensionaction .popup.top::before, #footer .extensionaction .popup.top::after {
(2)
The current one:
#footer .extension-popup {
The old one:
#footer .extensionaction {
Can I just use the old one? But I seem to remember that the old one is not for version 2.0... But I may be wrong.
-
Hmm, maybe they changed it in 2.1. Of course you can use the old script, the only difference is the class change.
-
@sjudenim How you do it this? What CSS or JS trick you are using?
-
@luetage said in Showing extension icons on the bottom of the browser:
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);
Hi @luetage I used this code and works wonders. However, the last extension, the one on the right, always shows cropped and I am such a noob that I can find a way to give it a margin to move it to the left. Can you help me?
-
@kallon I assume you're using stable Vivaldi. This code doesn't work on snapshot, and when the 2.4 series hits stable, it will stop working too. So no, I can't help you at the moment. The next problem is that the status bar is programmatically hidden from 2.4 on. If you don't have it enabled all the time, the extension icons will likely disappear as soon as you toggle it. I'm afraid messing with the status bar has gotten much harderβ¦
These 2 major issues β extension container inaccessible while toggling UI and status bar being removed from the html completely when it is toggled (assuming this happens with an UI toggle too) β to me means too much breaks with this mod and I wouldn't recommend using it anymore. Unless the Vivaldi devs roll back some of the changes they made this mod is practically dead.
-
@luetage Thanks for your kind response, as always.
-
I've got this working again, but I wasn't able to just change the selectors on the existing mod.
You can fool around with this
setTimeout(function wait() { const extWrapper = document.querySelector('.toolbar.toolbar-mainbar.toolbar-extensions.toolbar-large'); const statusBar = document.querySelector('.toolbar-statusbar'); if (extWrapper != null) { statusBar.appendChild(extWrapper); } else { setTimeout(wait, 300); } }, 300);