Site Security Box Favicons Mod
-
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 acustom.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
-
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 -
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.
-
Good. But maybe you could remove default favicon for HTTP pages if page has custom favicon.
-
@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 acustom.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.
-
@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 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.
-
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); }); })();
-
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.
-
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); }); })();
-
Site Security Box Favicons Mod even displays a message counter.
-
@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.
-
Unfortunately, since the update to Vivaldi 6.0, this mod no longer works.
-
If you disable email, calendar and feeds in the settings then the Site Security Box favicons become visible again.
-
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.
-
@stardepp That sounds like a strange bug - I don't see how they could be connected. I am glad you fixed it, though.
-
@LonM I still like it very much
-
Is there a way to show current site's favicon on the right side of lock icon?
-
@Ariyan1382 There is a line
sz_icon.parentNode.insertBefore(favicon, sz_icon);
You could try changing that to
sz_icon.parentNode.append(favicon);