Site Security Box Favicons Mod



  • Preview
    Puts the current site's favicon into the site security box, next to the padlock.
    0_1516392642496_GIF.gif
    Also works for sites that don't have a padlock (though if at all possible you should probably stop going to those).

    Why
    I though that the request of @wagner was an interesting one, and it seemed not overly difficult to implement.

    Installation
    As a custom.js mod:

    /*
    * Site Security Box Favicons (a mod for Vivaldi)
    * Written by LonM
    * No Copyright Reserved
    * This mod takes the favicon from a tab and places it into the address bar site info box
    * Assumes presence of both the tab bar and the address bar
    */
    
    // Constant CSS Selectors
    const SECURITY_ZONE_ICON = "div.addressfield > button.button-addressfield.addressfield-siteinfo > div > svg";
    const ACTIVE_TAB = ".tab.active .favicon";
    const SECURITY_ZONE = "div.addressfield > button.button-addressfield.addressfield-siteinfo > div.siteinfo-symbol";
    
    // Selectors and config for observers
    const BROWSER_STATE_INDICATOR = "#browser"
    const BROWSER_STATE_INDICATOR_CONFIG = {attributes: true}
    const TAB_CHANGE_INDICATOR = ".tab-strip";
    const TAB_CHANGE_INDICATOR_CONFIG = {attributes: true, subtree: true}
    
    // Observer for changes to tab and browser state
    const browserStateChangeObserver = new MutationObserver(browser_state_changed)
    const differentTabActivatedObserver = new MutationObserver(tab_changed);
    
    // The browser changed state,
    // May need to re-observe deleted elements
    // E.g. if enter and exit of fullscreen / hide UI mode
    function browser_state_changed(m, o){
        //console.log("BROWSER STATE CHANGE");
        remove_existing_cloned_favicon();
        clone_favicon_and_add_to_security();
        differentTabActivatedObserver.disconnect();
        browserStateChangeObserver.disconnect();
        load_favicon_security_mod();
    }
    
    // The tab was changed, so favicon needs changing
    // this will cover changes to the .active tab AND
    // cover changes to the favicon span thru subtree
    function tab_changed(m, o){
        //console.log("TAB STRIP ATTRIBUTE CHANGE");
        clone_favicon_and_add_to_security();
    }
    
    // Clone the favicon and add a copy to the security zone
    // also style it appropriately
    function clone_favicon_and_add_to_security(){
        // make sure everything we need to access exists
        const sz_icon = document.querySelector(SECURITY_ZONE_ICON);
        const favicon_original = document.querySelector(ACTIVE_TAB);
        const siteinfo = document.querySelector(SECURITY_ZONE);
        if(!favicon_original || !sz_icon || !siteinfo){return;}
        remove_existing_cloned_favicon();
        // copy, style and set the favicon
        // use deep clone to also copy svg icons
        const favicon = favicon_original.cloneNode(true);
        favicon.style.width = "16px";
        favicon.style.height = "16px";
        favicon.style.display = "block";
        favicon.style.margin = "3px";
        siteinfo.style.display = "flex";
        sz_icon.parentNode.insertBefore(favicon, sz_icon);
    }
    
    // Remove any existing cloned favicon
    function remove_existing_cloned_favicon(){
        const old_sz_favicon = document.querySelector(SECURITY_ZONE+" .favicon");
        if(old_sz_favicon){
            old_sz_favicon.parentElement.removeChild(old_sz_favicon);
        }
    }
    
    // Load the mod
    function load_favicon_security_mod(){
        const browser = document.querySelector(BROWSER_STATE_INDICATOR)
        const tab_change_indicator = document.querySelector(TAB_CHANGE_INDICATOR);
        if (browser && tab_change_indicator) {
            browserStateChangeObserver.observe(browser, BROWSER_STATE_INDICATOR_CONFIG);
            differentTabActivatedObserver.observe(tab_change_indicator, TAB_CHANGE_INDICATOR_CONFIG);
            clone_favicon_and_add_to_security();
        } else {
            setTimeout(load_favicon_security_mod, 100);
        }
    }
    
    // BROWSER LOADED - entry point
    setTimeout(load_favicon_security_mod, 500);
    

    How it works

    1. Observe for changes in the tab strip children's attributes
    2. If there is (e.g. a favicon changes or the active tab changes, clone to the site security box favicon
    3. Observe for changes to the browser classes, so that the mod can be re-initialised if the tab strip goes missing from Hide UI or fullscreen mode

    Performance
    I've been running this mod on my own PC and haven' noticed any glaring issues (performance or functionality-wise), but I would be interested to know if this functions as well on someone with many tabs, as I only keep the few that I immediately need open.

    Known Issues

    • The mod pulls the favicon from the tab bar, so the tab bar needs to be somewhere on the page

    Additional notes

    • Yes, the name of the mod is a bit of a mouthful. Securicons maybe?
    • Please excuse the grainy preview .gif, the vivaldi forum doesn't allow webm uploads


  • @lonm

    Woaaaa! What a great suprise! :astonished:
    This is absolutely fantastic, this is exactly what I was looking for!
    Thank you for your giant help and the time you put into it.

    it seemed not overly difficult to implement

    I can not do anything other than assume you're a professional programmer. This is the perception from someone with apparently deep knowledge on how all this works.
    I doubt I will be able to do what you have done here, or even to understand how you have done it. All this is like chinese for me.

    This is why I want you to know I'm extremely grateful to you.
    I'm not sure you can realize how much this makes me happy :)
    It is like a major upgrade to me.

    Installation was easy and it works totally smoothly.
    I don't notice any issue with performance or functionality. Just perfect!

    About your additional note concerning the name, I think a more generic appellation like "Site Favicon in Address Field Mod" would be suitable, since as you mentionned, it works everywhere without security box.

    Thank you
    Thank you
    Thank you



  • While I don't have any need of this, apart studying the source, I find it cool that there are users like LonM sharing their knowledge and put some of their spare time to help the community, way to go.


  • Moderator

    very nice!



  • Good. But maybe you could remove default favicon for HTTP pages if page has custom favicon.
    0_1516789645309_Snímka obrazovky (4).png



  • @kurevska_registracia I'd rather not include this in the original mod, but you can install it as an additional mod along with this one.
    If you install the following as a custom.css mod:

    .addressfield-siteinfo.web .siteinfo-symbol :nth-child(2) {
        display: none;
    }
    

    You can achieve the functionality you want. It will hide:

    • Globe icons on regular HTTP pages
    • Globe icons on chrome:// pages

    It will not hide:

    • The secured padlock on HTTPS pages
    • The open padlock on unsafe pages (broken HTTPS or HTTP with form inputs)
    • The Vivaldi icon on internal pages

    If you prefer to hide everything, delete the .web selector, though I wouldn't recommend that as the padlocks are a good security prompt.



  • @lonm - this is truly amazing - thank you for posting it. This is a feature/option that should be part of the browser.


Log in to reply
 

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