Site Security Box Favicons Mod

LonM

Preview
Puts the current site's favicon into the site security box, next to the padlock.

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

Observe for changes in the tab strip children's attributes
If there is (e.g. a favicon changes or the active tab changes, clone to the site security box favicon
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

wagner

@lonm

Woaaaa! What a great suprise!
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

iAN CooG

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.

kurevska_registracia

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

LonM

@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.

vongalin

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

kichrot

@lonm I constantly use this mod.
But, starting from 5.1.2562.3, this mod began to work incorrectly when closing all tabs or switching to express panel in the current tab.
I ask you to see and if it is possible to restore the operability of this wonderful fashion.

kichrot

@kichrot said in Site Security Box Favicons Mod:

But, starting from 5.1.2562.3, this mod began to work incorrectly when closing all tabs or switching to express panel in the current tab.

It feels like MutationObserver has stopped tracking some events. What this is connected with cannot be dealt with.
While making the mod work in an ugly and wrong way :

/*
* Site Security Box Favicons (a mod for Vivaldi)
https://forum.vivaldi.net/topic/23813/site-security-box-favicons-mod
* 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.SiteInfoButton-SecurityBadge svg";
const ACTIVE_TAB = ".tab.active .favicon";
const SECURITY_ZONE = "div.SiteInfoButton-SecurityBadge";

// Selectors and config for observers
const BROWSER_STATE_INDICATOR = "#browser"
const BROWSER_STATE_INDICATOR_CONFIG = {attributes: true, subtree: true}
const TAB_CHANGE_INDICATOR = ".tab-strip";
const TAB_CHANGE_INDICATOR_CONFIG = {}

// 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";
    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);

Additionally, the style :

.SiteInfoButton-SecurityBadge path[d="M6.5 11C7.38054 11 8.20201 10.7471 8.89574 10.31L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L10.3099 8.89574C10.7471 8.20201 11 7.38054 11 6.5C11 4.01472 8.98528 2 6.5 2C4.01472 2 2 4.01472 2 6.5C2 8.98528 4.01472 11 6.5 11ZM6.5 9C7.88071 9 9 7.88071 9 6.5C9 5.11929 7.88071 4 6.5 4C5.11929 4 4 5.11929 4 6.5C4 7.88071 5.11929 9 6.5 9Z"],
.SiteInfoButton-SecurityBadge path[d="M12.2 6.7C12.2 4 10.5 2 8 2 5.8 2 3.8 4 3.8 6.7V7H3v7h10V7h-.8v-.3zM10.7 8H5.3V6.7c0-1.7 1.4-3 2.8-3 1.7 0 2.8 1.3 2.8 3V8z"],
.SiteInfoButton-SecurityBadge g {
    display: none;
}

I hope that JS experts will help restore the full and correct operation of this wonderful fashion.

kichrot

I finalized the script. The script works stably and without errors:

/*
* Site Security Box Favicons (a mod for Vivaldi)
* https://forum.vivaldi.net/topic/23813/site-security-box-favicons-mod
* Written by LonM, kichrot
* 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
*/

(function faviconSecurity(){
    "use strict";

    // Constant CSS Selectors
    const SECURITY_ZONE_ICON = "div.SiteInfoButton-SecurityBadge";
	const ACTIVE_TAB = ".tab.active .favicon";
	const SECURITY_ZONE = "div.SiteInfoButton-SecurityBadge";
	
	// Selectors and config for observers
	const DOCUMENT_TITLE_INDICATOR = document.querySelector('title');
	const DOCUMENT_TITLE_INDICATOR_CONFIG = {subtree: true, characterData: true, childList: true}
	
	// 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";
        favicon.style.backgroundSize = "contain";
        siteinfo.style.display = "flex";
        sz_icon.parentNode.insertBefore(favicon, sz_icon);
    }

    // Remove any existing cloned favicon
    function remove_existing_cloned_favicon(){
       	var old_sz_favicon = document.querySelector(".SiteInfoButton > span[class='favicon'] > img");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
       	var old_sz_favicon = document.querySelector(".SiteInfoButton .favicon");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
   	  	var old_sz_favicon = document.querySelector(SECURITY_ZONE+" > span:not([class='favicon']) > svg");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
	}

    // Load the mod
    function load_favicon_security_mod(){
        const browser = document.querySelector(".favicon");
        if (browser) {
        	active_tab_observer.observe(DOCUMENT_TITLE_INDICATOR, DOCUMENT_TITLE_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);

    // 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
       
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    	setTimeout(function(){clone_favicon_and_add_to_security();}, 300);
    }); 
    
    chrome.tabs.onActivated.addListener((activeInfo) => {
    	setTimeout(function(){clone_favicon_and_add_to_security();}, 300);
    });
    
	// create an observer instance
	var active_tab_observer = new MutationObserver(function(mutations) {
		setTimeout(function(){clone_favicon_and_add_to_security();}, 300);
	});
	
})();

kichrot

Found a situation where the script processes the event of a change in the text of the tab header before the favicon on the active tab actually changes. Made the necessary changes to the script code in the previous post.

kichrot

Brought the script code to technological uniformity :

/*
* Site Security Box Favicons (a mod for Vivaldi)
* https://forum.vivaldi.net/topic/23813/site-security-box-favicons-mod
* Written by LonM, kichrot
* 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
*/

(function faviconSecurity(){
    "use strict";

    // Constant CSS Selectors
    const SECURITY_ZONE_ICON = "div.SiteInfoButton-SecurityBadge";
	const ACTIVE_TAB = ".tab.active .favicon";
	const SECURITY_ZONE = "div.SiteInfoButton-SecurityBadge";
	
	// 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";
        favicon.style.backgroundSize = "contain";
        siteinfo.style.display = "flex";
        sz_icon.parentNode.insertBefore(favicon, sz_icon);
    }

    // Remove any existing cloned favicon
    function remove_existing_cloned_favicon(){
       	var old_sz_favicon = document.querySelector(".SiteInfoButton > span[class='favicon'] > img");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
       	var old_sz_favicon = document.querySelector(".SiteInfoButton .favicon");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
   	  	var old_sz_favicon = document.querySelector(SECURITY_ZONE+" > span:not([class='favicon']) > svg");
    	if(old_sz_favicon){
    	   	old_sz_favicon.parentElement.removeChild(old_sz_favicon);
   	 	}
	}

    // Load the mod
    function load_favicon_security_mod(){
        const browser = document.querySelector(".favicon");
        if (browser) {
        	setTimeout(function(){clone_favicon_and_add_to_security();}, 300);
        } else {
            setTimeout(load_favicon_security_mod, 100);
        }
    }

    // BROWSER LOADED - entry point
    setTimeout(load_favicon_security_mod, 500);

    // 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
       
    chrome.tabs.onActivated.addListener((activeInfo) => {
    	setTimeout(function(){clone_favicon_and_add_to_security();}, 100);
    });
    
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    	setTimeout(function(){clone_favicon_and_add_to_security();}, 100);
    }); 
    
    chrome.tabs.onRemoved.addListener((removeInfo) => {
    	setTimeout(function(){clone_favicon_and_add_to_security();}, 300);
    });
		
})();

stardepp

Site Security Box Favicons Mod even displays a message counter.

kichrot

@stardepp said in Site Security Box Favicons Mod:

Site Security Box Favicons Mod even displays a message counter.

This is not a mod merit, it is the merit of the creators of the VIVALDI website. The mod clones favicons as they are.

stardepp

Unfortunately, since the update to Vivaldi 6.0, this mod no longer works.

stardepp

If you disable email, calendar and feeds in the settings then the Site Security Box favicons become visible again.

stardepp

The error was with my emails. Deleted all email accounts and then set them up again and now the Site Security Box favicon is visible again.

LonM

@stardepp That sounds like a strange bug - I don't see how they could be connected. I am glad you fixed it, though.

stardepp

@LonM I still like it very much

Bild Text

Ariyan1382

Is there a way to show current site's favicon on the right side of lock icon?

LonM

@Ariyan1382 There is a line
sz_icon.parentNode.insertBefore(favicon, sz_icon);

You could try changing that to

sz_icon.parentNode.append(favicon);