Bookmarks in Address Bar Mod
-
To get the bookmarks to work in css, I'm adding <link rel="stylesheet" href="style/bookmark.css" /> to the browser file. I don't know what to add to make the js work though, anyone?
-
@Viryu You need to add
<script src="custom.js"></script>
(replacecustom.js
with path to the file), usually it's added on the line above</body>
-
@potmeklecbohdan Thank you. It did read the js file I think, it doesn't exactly work. Any ideas?
-
When I saw the new version of Vivaldi allows editing the menus, I was hoping that also meant you could edit the tool bars to do what this mod does, but it doesn't seem to.
-
@Spyderr Thank you SO MUCH for that. Great fix!
-
Does anyone knows why the js code (in this post) broke with the last update?
From this:
it turned to this:
I think that it has to do with the toolbar selector:
toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
@Spyderr I tried to replace the
div.toolbar-addressbar
with your suggestion (.UrlBar
) but it didn't change anything..EDIT: My bad!
I forgot to re-copy the fixed code...
@Spyderr It does work. Thanks allot! -
UrlBar fixed the css code, but I still can't seem to get the js version to work instead. Could someone please post a ready js file with bookmarks button on the left of the adress bar?
-
The
js
file has the wrong selectortoolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
I haven't tested it but try replacing that with
.UrlBar
-
This is now BROKEN in 5.3.2679.38. How can we fix it?
-
@Spyderr Thanks so much, this seems to work.
The update broke my layout of address bar - extensions - bookmarks in the same row, but this now works. Thanks so much for your help! :_)
-
Thank you all for inputs on the JS code. I prefer this alternative, rather than the CSS one as it allow to put the menu where I want, even if itβs slightly more invasive than using the CSS feature that is natively available.
For vivaldi 5.4, I had to make some changes to have the bookmark button just before the urlbar.
For those that are new to this change, you have to add a script reference in the browser.html file:
diff -rNu vivaldi.orig/resources/vivaldi/browser.html vivaldi/resources/vivaldi/browser.html --- a/opt/vivaldi/resources/vivaldi/browser.html 2022-09-04 08:38:05.202590870 +0200 +++ b/opt/vivaldi/resources/vivaldi/browser.html 2022-09-04 08:37:02.999154000 +0200 @@ -12,5 +12,6 @@ <script src="vendor-bundle.js"></script> <script src="background-common-bundle.js"></script> <script src="bundle.js"></script> + <script src="vivaldi-bookmarks-toolbar.js"></script> </body> </html>
Then, use this javascript (in the new file called in browser.html of course), in my case:
/opt/vivaldi/resources/vivaldi/vivaldi-bookmarks-toolbar.js
setTimeout(function wait() { bookmarkbar = document.querySelector("div.bookmark-bar"); if (bookmarkbar != null) { // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button bookmarkbar.style.width = 0; } toolbar = document.querySelector("div.mainbar > div.toolbar"); urlbar = document.querySelector("div.mainbar > div.toolbar > div.UrlBar-AddressField"); morebookmarks = document.querySelector("div.bookmark-bar button.bookmarkbarItem.chevron"); if (toolbar != null && urlbar != null && bookmarkbar != null && morebookmarks != null) { // create button container bookmarksdiv = document.createElement("div"); bookmarksdiv.classList.add("button-toolbar"); // Move "More bookmarks" button from bookmarkbar to toolbar, before urlbar toolbar.insertBefore(bookmarksdiv, urlbar); bookmarksdiv.appendChild(morebookmarks); // and remove the rest of the bookmarkbar bookmarkbar.remove(); // Make a bookmarks icon (copied from the bookmarks panel) morebookmarks.firstElementChild.firstElementChild.setAttribute("d", "M7 22.5l6-3.5 6 3.5v-16.5h-12v16.5zm2-3.5v-11h8v11l-4-2.2-4 2.2z"); morebookmarks.firstElementChild.setAttribute("viewBox", "0 0 26 26"); morebookmarks.firstElementChild.setAttribute("height", "26"); morebookmarks.firstElementChild.setAttribute("width", "26"); } else { setTimeout(wait, 100); } }, 100);
And the result:
-
@guilc I really like your version of the Bookmark button, and think it looks the most "official"
But one thing I'm trying to figure out is what part should I change to move its position from to the left of the address bar to just to the right of the search bar (and more the buttons for extensions)...
I know you said your version allows you to "put the menu where you want", so I'm trying to figure out how to change its position
-
@jmaeshawn Itβs easy
Just replace
urlbar = document.querySelector("div.mainbar > div.toolbar > div.UrlBar-AddressField");
by
urlbar = document.querySelector("div.mainbar > div.toolbar > div.toolbar-extensions");
It will insert the new bookmark button right before the div that contains all the extensions icons instead of before the address field
-
@guilc That's exactly what I was looking for. Thank you so much!
-
This post is deleted! -
@flatline23 No this code is all wrong. Your timeout has to be 300ms.
-
@luetage Only thing I touched was the icon settings. The rest is exactly the same as guilc's original post.
-
@Spyderr Exactlyβ¦ While watching netflix or youtube, if you make the video full screen then this MOD fails and it adds the bookmarks to the header by removing the icons. I am facing it from long time and need to launch the browser again to make it workβ¦
-
Again, I am NOT the mod author.
But if you look at it, it runs at startup. When you go full screen, it erases the UI. Then when you go back, it redraws it. When it redraws, it does not call the script that makes the button (shrink/remove/redraw).
In order to do that in your use case, the script would need to watch for the event of coming back from full screen, or some other trigger. Far beyond me to try to find out what that event is.
Simpler would be for Vivladi to just give us a darn button.
-
@flatline23 said in Bookmarks in Address Bar Mod:
In order to do that in your use case, the script would need to watch for the event of coming back from full screen, or some other trigger
Try this feature that tracks the status of full screen mode in VIVALDI :
vivaldi.windowPrivate.onFullscreen.addListener(function(x, status) { if (status === false) { //your code } });