Highlight tabs ?
-
Is there a method in Vivaldi that can essentially highlight a tab to put focus on tabs when having dozens of tabs open ?
-
@sparrows No, there is not, but this could potentially programmed with a custom modification. Shouldn't be too hard.
-
There might be in the future.
-
What do you mean by "highlight"?
-
@lonm Presumably, what is meant is something like Selected Tabs, but more permanent.
-
@luetage Are you able too, or unless you know of one already created ?
-
@pesala Similar except no dotted lines, solid background color; yellow, orange etc.
-
@sparrows Yeah, it's actually very similar to a mod I made yesterday, just simpler. I think I can reuse most of the code. You will have to input fitting colors yourself though.
I have a pretty neat idea for this I think, will just take a while.
-
@luetage Thanks, I look forward to it; update when ready
-
@sparrows Ok, I made code for this. A new button besides the trash icon toggles the highlight mode. If it's on you can highlight tabs by clicking a tab's favicon, if it's off clicking the favicon does nothing.
How to implement: https://forum.vivaldi.net/topic/10549/modding-vivaldi/
custom.js
function tabHi(event) { const hit = event.target; const mum = hit.parentNode; if (hit.classList.contains('svg')) { const gram = mum.parentNode; if (gram.classList.contains('tab-header') && gram.classList.contains('tabHi')) { gram.classList.remove('tabHi'); } else if (gram.classList.contains('tab-header') && !gram.classList.contains('tabHi')) { gram.classList.add('tabHi'); } } if (hit.classList.contains('favicon')) { if (mum.classList.contains('tab-header') && mum.classList.contains('tabHi')) { mum.classList.remove('tabHi'); } else if (mum.classList.contains('tab-header') && !mum.classList.contains('tabHi')) { mum.classList.add('tabHi'); } } }; function tabHighlight() { const styleTabHi = document.createElement('style'); styleTabHi.type = 'text/css'; styleTabHi.innerHTML = '#power {display: block;} #power.on svg path {fill: var(--colorHighlightBg)} .tabHi {background-color: var(--colorHighlightBg);}'; document.getElementsByTagName('head')[0].appendChild(styleTabHi); const cont = document.querySelector('.sync-and-trash-container'); const div = document.createElement('div'); div.innerHTML = '<button id="power" class="button-tabbar" tabindex="0" title="Activate tab highlighting"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path fill-rule="evenodd" d="M 9 9m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 9 9m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0"></path></svg></button>'; cont.insertBefore(div, cont.firstChild); const power = document.getElementById('power'); power.addEventListener('click', function() { if (power.classList.contains('on')) { power.classList.remove('on'); power.setAttribute('title', 'Activate tab highlighting'); document.body.removeEventListener('click', tabHi); } else { power.classList.add('on'); power.setAttribute('title', 'Deactivate tab highlighting'); document.body.addEventListener('click', tabHi); } }); }; let adr = {}; setTimeout(function wait() { adr = document.querySelector('.toolbar-addressbar.toolbar'); if (adr) { tabHighlight(); } else { setTimeout(wait, 300); } }, 300);
-
@sparrows Isn't it related to the feature request I did post here?
Make Current Tab More Distinguishable
If you're interested, I invite you to upvote it in order to have it (maybe) taken into account for a future version of Vivaldi.
I hope this helps. -
@luetage This is perfect. Does it save with a session
-
@ornorm Your feature request is for the current tab, not multiple tabs.
-
Side question, how do I access Vivaldi elements to style in CSS ?
-
@sparrows Instructions in the pinned posts - https://forum.vivaldi.net/category/52/modifications
-
@sparrows No, the mod is only valid for the current session. Tabs change their ids when you close windows, this would complicate things. For a lasting feature you would probably have to check for the address and tie the highlighting to it. And checking for elements is a bit hidden – https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
-
@sparrows Sorry then, I misunderstood your post. Do you mean, you would like to highlight multiple tabs at the same time or specific tabs apart from the current tab?
-
@luetage I assume you don't want to add this to the script ?
-
@ornorm As you mentioned, I want to highlight multiple tabs at the same time.
-
@sparrows You assume correctly I'm afraid.