After roughly three hours I've made huge success in cleaning up the GUI!
Click for full non-resized image:
Vivaldi Toolbars Cleaned Up 2
Improvements:
Fixed the toolbars for
power users not interested in arthritis, not masochist minimalists.
Moved most if not all toolbar buttons to the Main toolbar.
Added Italics effect for hover state to be more compatible with various themes though if this finds parity with Waterfox Classic I'll likely create a Black Theme and not focus on compatibility.
Manually cleaned up many buttons to better center icons (see my previous post above to see how non-consistent they were).
Fixed some button text that broke to a second line.
Set fixed button width to 100px to make the buttons appear less "choppy".
Centered the Page Title with the (full) File menu.
All toolbar buttons still have their full functionality.
Moved the Address bar on to the Bookmarks toolbar with bookmarks to the right.
Fixed Search panel to move the down button to the right.
Tabs are of course the fourth / bottom toolbar as the content of tabs do NOT have control over YOUR browsing sessions.
Current Issues (4.0.2312.33 · Stable · x64):
People with different screen resolutions (or who don't maximize their browsers because they hate web designers) might need to make some adjustments such as the Page Title margin-left bit (I use 2560x1440 with my current setup).
Settings ⇨ Address Bar ⇨ Show Full Address does NOT work!
The Address Bar does NOT have a Go button!
The Search Bar does NOT show the search engine icon (only displayed drop down)!
The F4 panel still appears after closing the panel!
Browser lacks a Dark Mode theme (e.g. default background-color should be black, not gray).
Fresh Install:
This requires two parts: the CSS and JavaScript bits. I've commented in both sets of code to make it easier to find items and tweak them (e.g. you don't want some, most or all text labels on buttons).
CSS:
The following code is ADDED to the existing file located at:
C:\MEDIA\INTERNET\Vivaldi\4.0\Application\4.0.2312.33\resources\vivaldi\style\common.css
/*** Toolbar 1: Centers Page Title, don't use below screen resolution/maximized window size of 1152. ***/
.horizontal-menu-pagetitle {margin-left: -375px !important;}
/*** Toolbar 2: Create more consistent button layout for Main buttons: ***/
.toolbar-mainbar .toolbar-mainbar .button-toolbar {width: 100px;}
.button-toolbar > button {padding-right: 4px;}
.button-toolbar > button + span {white-space: nowrap;}
.button-toolbar > button > span + span:nth-of-type(2) {padding-right: 4px;}/* background-color: #f0f;*/
.button-toolbar:hover > button > span:nth-last-of-type(1) {font-style: italic;}
/*** Toolbar 2: Search Field relative center (2560 screen; adjust accordingly): ***/
.UrlBar-SearchField {margin-left: 10%;}
JavaScript:
Step 1/4:
Find the following file (your install is likely in the Program Files garbage dump folder if on Windows):
C:\MEDIA\INTERNET\Vivaldi\4.0\Application\4.0.2312.33\resources\vivaldi\browser.html
Step 2/4:
After this line:
<div id="app" />
Add the following line:
<script src="custom.js"></script>
Step 3/4:
The following code is CREATED in a NEW FILE located at:
C:\MEDIA\INTERNET\Vivaldi\4.0\Application\4.0.2312.33\resources\vivaldi\custom.js
Step 4/4:
Add the following to the file you just created in step 3:
//Use this to highlight something to ensure you're targeting the correct element:
//$('[data-id="bookmarks"]')[0].style.backgroundColor = '#f0f';
function $(o)
{
var a = true;
try {document.querySelectorAll(o);}
catch(err) {a = false; error_report(new Error('The parameter "'+o+'" is not a valid CSS selector.')); sound.notice();}
return (a && document.querySelectorAll && document.querySelectorAll(o)) ? document.querySelectorAll(o) : false;
}
function class_(c)
{
var r = false;
if (typeof c != 'string') {error_report(new Error('Can not change class; the parameter \''+((typeof c == 'string') ? c : c.toString())+'\' is not valid.'));}
else if (document.getElementsByClassName(c)) {r = document.getElementsByClassName(c);}
return r;
}
function id_(id)
{
var r = false;
if (typeof id != 'string') {error_report(new Error('The id_ parameter "'+id.toString()+'" is not a string.'));}
else if (id.length == 0) {error_report(new Error('The id_ parameter was an empty string.'));}
else if (document.getElementById(id)) {r = document.getElementById(id);}
return r;
}
/**************** ****************/
function gui_fixes()
{
const toolbar_tabs = document.getElementById('tabs-tabbar-container');
const toolbar_address = document.querySelector('.UrlBar');
const toolbar_bookmarks = document.querySelector('.bookmark-bar');
const insertAfter = toolbar_bookmarks ? toolbar_bookmarks : toolbar_address;
if (toolbar_tabs && insertAfter)
{
toolbar_tabs.remove();
insertAfter.insertAdjacentElement('afterend', toolbar_tabs);
}
//Add text label for Back Button:
var d = document.createElement('span');
d.appendChild(document.createTextNode('Back'));
$('[title^="Go to previous"]')[0].getElementsByTagName('button')[0].appendChild(d);
//Add text label for Back Button:
var d = document.createElement('span');
d.appendChild(document.createTextNode('Forward'));
$('[title^="Go to next"]')[0].getElementsByTagName('button')[0].appendChild(d);
//Add text label for Reload Button:
var d = document.createElement('span');
d.appendChild(document.createTextNode('Reload'));
$('[title^="Reload"]')[0].appendChild(d);
//Add text label for Home Button:
var d = document.createElement('span');
d.appendChild(document.createTextNode('Home'));
$('[title="Go to homepage"]')[0].appendChild(d);
//Move Address bar to Bookmarks Toolbar:
class_('bookmark-bar default')[0].insertBefore(class_('UrlBar-AddressField')[0], class_('bookmark-bar default')[0].firstChild)
class_('UrlBar-AddressField')[0].style.minWidth = '800px';
//Main Toolbar:
var toolbar_main = class_('toolbar toolbar-droptarget toolbar-mainbar toolbar-large')[0];
//Move Bookmarks button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="bookmarks"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="bookmarks"]')[0].getElementsByTagName('svg')[0].style.marginTop = '12px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Bookmarks'));
$('[data-id="bookmarks"]')[0].appendChild(d);
//Move Calendar button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="calendar"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="calendar"]')[0].getElementsByTagName('svg')[0].style.margin = '12px 0 0 8px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Calendar'));
$('[data-id="calendar"]')[0].appendChild(d);
//Move Contacts button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="contacts"]')[0]);
toolbar_main.appendChild(d);
var d = document.createElement('span');
d.appendChild(document.createTextNode('Contacts'));
$('[data-id="contacts"]')[0].appendChild(d);
//Move Downloads button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="downloads"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="downloads"]')[0].getElementsByTagName('svg')[0].style.margin = '12px 0 0 8px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Downloads'));
$('[data-id="downloads"]')[0].insertBefore(d, $('[data-id="downloads"]')[0].getElementsByTagName('div')[0])
//$('[data-id="downloads"]')[0].appendChild(d);
//toolbar_main.appendChild(d);
//Move Feeds button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="feeds"]')[0]);
toolbar_main.appendChild(d);
var d = document.createElement('span');
d.appendChild(document.createTextNode('Feeds'));
$('[data-id="feeds"]')[0].appendChild(d);
//Move History button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="history"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="history"]')[0].getElementsByTagName('svg')[0].style.margin = '8px 0 0 8px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('History'));
$('[data-id="history"]')[0].appendChild(d);
//Move Mail button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="mail"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="mail"]')[0].getElementsByTagName('svg')[0].style.margin = '8px 0 0 0';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Mail'));
$('[data-id="mail"]')[0].appendChild(d);
//Move Mail Status button:
var d1 = document.createElement('div');
d1.setAttribute('class','button-toolbar');
d1.appendChild($('[class*="MailStatusButton"]')[0].firstChild);
var d2 = document.createElement('span');
d2.appendChild(document.createTextNode('Mail Status'));
d1.getElementsByTagName('button')[0].appendChild(d2);
toolbar_main.appendChild(d1);
//Move New Tab button:
var d1 = document.createElement('div');
d1.setAttribute('class','button-toolbar');
d1.appendChild($('[class*="newtab"]')[0].firstChild);
var d2 = document.createElement('span');
d2.appendChild(document.createTextNode('New Tab'));
d1.getElementsByTagName('button')[0].appendChild(d2);
toolbar_main.appendChild(d1);
//Move Notes button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="notes"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="notes"]')[0].getElementsByTagName('svg')[0].style.margin = '4px 0 0 4px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Notes'));
$('[data-id="notes"]')[0].appendChild(d);
//Move Profiles button:
var d1 = document.createElement('div');
d1.setAttribute('class','button-toolbar');
d1.appendChild($('[class*="profile-popup"]')[0].getElementsByTagName('button')[0]);
var d2 = document.createElement('span');
d2.appendChild(document.createTextNode('Profiles'));
d1.getElementsByTagName('button')[0].appendChild(d2);
toolbar_main.appendChild(d1);
//Move Settings button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[class="preferences panelbtn"]')[0]);
toolbar_main.appendChild(d);
var d = document.createElement('span');
d.appendChild(document.createTextNode('Settings'));
$('[class="preferences panelbtn"]')[0].appendChild(d);
//Move Tabs button:
var d = document.createElement('div');
d.setAttribute('class','button-toolbar');
d.appendChild($('[data-id="tabs"]')[0]);
toolbar_main.appendChild(d);
$('[data-id="tabs"]')[0].getElementsByTagName('svg')[0].style.margin = '8px 0 0 8px';
var d = document.createElement('span');
d.appendChild(document.createTextNode('Tabs'));
$('[data-id="tabs"]')[0].appendChild(d);
//Fix Search field select menu:
$('[class*="UrlBar-SearchField"]')[0].appendChild($('[class*="SearchEngineSelect-Icon"]')[0]);
//Fix sidebar not using 100% width:
class_('panel-collapse-guard')[0].style.maxWidth = '100%';
}
window.onload = function(event)
{
let interval_init = setInterval(() =>
{
const browser = document.getElementById('browser');
if (browser) {clearInterval(interval_init); gui_fixes();}
}, 50);
}
This really cleans up the GUI and makes the buttons not only one-click accessible though large enough that you don't have to pause your primary thought process (e.g. whatever you're working on) to try and click on a small button. I don't feel you should have to click twice to do what you should be able to do in a single click. I also feel that buttons shouldn't be splashed all over the place all willy-nilly.
Even if someone loathes this GUI layout I hope the cleaned up code makes it much easier for others to fix and modify the GUI to meet their needs. My primary browser is Waterfox Classic and I actually intend to create my own browser one day that won't need manual fixes to the DOM to customize regardless whether you're a power user or masochist minimalist who hates not having arthritis or getting any work done.
For now this will allow me to replace Firefox as my secondary browser since I'll actually have control over things.
If the following things were added to Vivaldi I'd swap Vivaldi and Waterfox Classic as primary and secondary browsers:
Go button.
Paste & Go button.
Paste & Search button.
Fix the Address Bar not showing the full address!
Fully hide the sidebar when it's not open.
Active search engine's favicon on the left side of the Search bar.
Search button for the Search bar (not the two-click stuff).
A button per each web developer tool (e.g. Console, Elements, Network).
