Bookmarks in address bar Mod



    1. Install CSS mod
    2. Show bookmarks bar on top
    3. Change width of bar or other things in CSS for your needs
    4. Enjoy!

    CSS:

    /*width of bookmarks bar*/
    :root {
    	--bar-width: 200px;
    }
    @media  (max-width: 700px) {
    	:root {
    		--bar-width: 22px;
    	}
    }
    
    /*bookmarks bar in address bar*/
    #browser.bookmark-bar-top > #main > .toolbar-addressbar{
    	padding-right: var(--bar-width);
    }
    #browser.bookmark-bar-top > #main > .bookmark-bar{
    	width: var(--bar-width);
    	position: absolute;
    	right: 0;
    	height: 35px;
    }
    
    /*hide folder icons*/
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon{
    	display:none
    }
    #browser.bookmark-bar-top > #main > .bookmark-bar .folder-icon+span{
    	margin-left: 0px;
    }
    

    0_1518102757108_bookmarks-adres.png

    0_1518102764099_bookmarks-adres2.png



  • Good idea, for me personally (testing this without any other mods running), the bookmarks bar overlaps with the last extension icon in the address bar. Otherwise I like the css only approach, would be far easier with js obviously, but this is simpler and easier on resources.



  • Adding a simple .extensions-wrapper::after {content:""; width: 24px;} to your code fixes this.



  • cool idea, I'll try it for sure



  • @luetage this for me only add useless space.



  • @kurevska_registracia Hmm, seems like your variable does the same thing but doesn't work on macOS. Probably needs an !important or something, but I'm too lazy to look at it again right now.



  • Nice, this is exactly what Vivaldi is lacking, good job. Is it possible to make that button appear on the left of the adress bar?



  • Attempt at bookmarks button in JavaScript:

    setTimeout(function wait(){
    
        toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        bookmarkbar = document.querySelector("div.bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
    
        if (bookmarkbar != null){
            // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button
            bookmarkbar.style.width = 0;
        }
    
        if (toolbar != null && bookmarkbar != null && morebookmarks != null){
            // Move "More bookmarks" button from bookmarkbar to toolbar,...
            toolbar.appendChild(morebookmarks);
            // style it like a toolbar button,...
            morebookmarks.classList.add("button-toolbar");
            // 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);
    

    bookmarks button in action



  • @wea0 This even works better for me, just don't try to hide bookmarks bar or Vivaldi will show the splash screen and has to be closed and restarted =)
    Maybe it's better to add a check if it's visible or not.



  • setTimeout(function wait(){
    
        toolbar = document.querySelector("div.toolbar-addressbar.toolbar>div.toolbar");
        bookmarkbar = document.querySelector("div.bookmark-bar");
        morebookmarks = document.querySelector("button[title='More bookmarks']");
    
        if (bookmarkbar != null){
            // By setting the bookmarkbar to zero width, all bookmarks are forced into the "More bookmarks" button
            bookmarkbar.style.width = 0;
        }
    
        if (toolbar != null && bookmarkbar != null && morebookmarks != null){
            // Move "More bookmarks" button from bookmarkbar to toolbar,...
            toolbar.appendChild(morebookmarks);
            // style it like a toolbar button,...
            morebookmarks.classList.add("button-toolbar");
            // and hide the rest of the bookmarkbar
            bookmarkbar.style.display = "none";
            // 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);
    

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser. If you really want showing and hiding the bookmarks button as a feature, then you will have to make a different script that runs all the time. For me, just setting it up once at the start was enough.
    [Also: You still can't create a new folder from the bookmarks button without messing up the browser. I suspect this one requires... a bookmarks bar. Just use the panel to manage your bookmarks instead.]



  • @wea0 said in Bookmarks in address bar Mod:

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser.

    This way is really better, it's preferable if it doesn't hang the browser. Cheers.



  • @wea0 said in Bookmarks in address bar Mod:

    There, now you can untick "Show Bookmarks Bar" without messing up the browser. Instead, the bookmarks button will simply become useless. And reenabling the bar won't make the button work again; you'll have to restart the browser. If you really want showing and hiding the bookmarks button as a feature, then you will have to make a different script that runs all the time. For me, just setting it up once at the start was enough.
    [Also: You still can't create a new folder from the bookmarks button without messing up the browser. I suspect this one requires... a bookmarks bar. Just use the panel to manage your bookmarks instead.]

    This is great. Can the button be moved to the left (before the Back button)?



  • @ovalseven toolbar.insertBefore(morebookmarks, toolbar.firstChild);



  • @luetage said in Bookmarks in address bar Mod:

    @ovalseven toolbar.insertBefore(morebookmarks, toolbar.firstChild);

    Perfect. Thank you.

    This is off topic now, but if I could just put a New Tab button to the right of the Home button, I'll have a perfect replacement for Pale Moon. Is that even possible?



  • @ovalseven Hmm, that's possible, you could just move the new tab button from the tab bar into the address bar. You can actually do this right from this very script, just find the selector, assign a variable and append to toolbar. But you probably have some adjusting to do concerning the format, size and alignment of the button to get a perfect result.


Log in to reply
 

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