Address Bar like in Yandex Browser

aminought

Github: https://github.com/aminought/vivaldi-yb-address-bar

I thought that someone might be interested in the feature that I implemented in my theme Ribbon Theme. This is the address bar, which displays the title of the current page and the domain, clicking on which leads to the homepage of the website.

Screenshots

Color Behind Tabs: ON
color_behind_tabs_on

Color Behind Tabs: OFF
color_behind_tabs_off

Accent From Page: OFF
accent_from_page_off

Installation

You need to act as described in the post about modding:

Place yb_address_bar.js inside <YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi.
Add line <body> in the <body> of window.html.
Restart Vivaldi.

UPD 3/23/2024:

Fixed domain extraction for chrome extensions.

oudstand

Great job, looks good! Even works fine with my mods:

oudstand

I noticed, that if you visit the website of a extension, the domain button becomes way to large:

To fix this I've added this style:

.YBDomain {
    height: 100%;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.YBDomain::after {
    content: attr(data-tooltip);
    position: absolute;
    padding: 0.25px 6px;
    background-color: var(--colorAccentBg);
    color: var(--colorAccentFg);
    border-radius: var(--radius);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 2;
    transform: translateX(calc(-100% + 6px));
}

.YBDomain:hover::after {
  opacity: 1;
  visibility: visible;
}

removed line-height: 0; from .YBDomainButton and called ybDomain.setAttribute('data-tooltip', domain); in #createYBDomain.

This reduces the size of the button and added a tooltip:

aminought

@oudstand Thank you, but I have another simple solution:

d9e510ba-b80b-4885-bd0e-a7d23b13b7cd-2024-03-24 01.19.44 padekgcemlokbadohgkifijomclgjgif 9120eda2806f.jpg

aminought

UPD 3/23/2024:

Fixed domain extraction for chrome extensions.

oudstand

I've updated the last few lines of the mod, because sometimes the mod tries to do stuff, before everything is loaded and fails.

function initMod() {
    if (document.querySelector('#urlFieldInput')) {
        window.ybAddressBar = new YBAddressBar();
    } else {
        setTimeout(initMod, 500);
    }    
}

setTimeout(initMod, 500);

oudstand

@aminought said in Address Bar like in Yandex Browser:

UPD 3/23/2024:

Fixed domain extraction for chrome extensions.

regarding this fix I had an idea. It's possible to display the extension name, instead of 'extension'.

Therefore I've updated the code of #parseUrlDomain and made the function #createYBDomainButton async as well.

async #parseUrlDomain(url) {
    if (url.startsWith('vivaldi://')) {
        const domain = this.#parseVivaldiDomain(url);
        return {type: 'vivaldi', domain: domain, clickable: true};
    } else if (url.startsWith('file://')) {
        return {type: 'file', domain: 'file', clickable: false};
    } else if (url.startsWith('about:')) {
        return {type: 'about', domain: url, clickable: true};
    } else if (url.startsWith('chrome-extension://')) {
        let extension = await chrome.management.get(url.match(/chrome-extension:\/\/([^/]+)/)[1]);
        return {type: 'extension', domain: extension.name, clickable: false};
    } else {
        return {type: 'url', domain: url, clickable: true};
    }
}

Artex

Love this tbh, I think Vivaldi should integrate this in the browser as an option that the user can enable or disable

mrjimshim

Hi,is there a CSS version for this?

aminought

@mrjimshim No, that's impossible

mrjimshim

@aminought Ohhh okayy thanks for the reply

oneakira

@aminought How do you turn on accent from page mine doesn't seem to work( I user vertical tabs), also do you need this mod along with ribbon theme mod? If I'm right this is one functionality from Ribbon theme

oneakira

@oneakira said in Address Bar like in Yandex Browser:

@aminought How do you turn on accent from page mine doesn't seem to work( I user vertical tabs), also do you need this mod along with ribbon theme mod? If I'm right this is one functionality from Ribbon theme

Nevermind, Figured it out. It's in themes section in settings, it looks very bad when used with vertical tabs.