Attack on the status bar



  • Truth be told, I never liked the status bar. It has useful functionality, but having a bar open at the bottom of the browser at all times, just doesn't suit me. That's why I decided to do something about it. Following mod introduces a Tools button in the address bar, which opens a modified status bar as overlay. It's a menu-like implementation, which doesn't move the site content. The status bar keyboard shortcut and the equivalent menu commands can still toggle it. This mod also introduces a button to toggle the status-info (from status-bar/menu).

    0_1512221277448_Screenshot 2017-12-02 14.27.24.png

    You will need both a custom.js file and a custom.css file to run this (modding vivaldi). Please read the Notes below, as you might have to modify (and add to) the code at hand, to make this work.


    JS

    setTimeout(function wait() {
    	var adr = document.querySelector(".toolbar-addressbar.toolbar");
    	if (adr != null) {
    
    
    // Tools-Menu
    
    		var footer = document.getElementById('footer')
    		var spanT = document.createElement('span');
    		var divT = document.createElement('div');
    		var btnT = document.createElement('button');
    		var svgT = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    		var pathT = document.createElementNS("http://www.w3.org/2000/svg", "path");
    		var infstat = document.getElementById('status_info');
    		var infdiv = document.createElement('div');
    		var infbtn = document.createElement('button');
    		var infsvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    		var infpath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    		 
    		divT.id = 'droptool';
    		btnT.id = 'tools';
    		btnT.classList.add('button-toolbar');
    		btnT.setAttribute("tabindex", "-1");
    		btnT.setAttribute("title", "Tools");
    		svgT.setAttributeNS(null, "width", "26");
    		svgT.setAttributeNS(null, "height", "26");
    		svgT.setAttributeNS(null, "viewBox", "-150 -150 812 812");
    		infdiv.id = 'divID';
    		infbtn.id = 'toggle-links';
    		infbtn.classList.add('button-toolbar-small');
    		infbtn.setAttribute("tabindex", "-1");
    		infbtn.setAttribute("title", "Show Status Info");
    		infsvg.setAttributeNS(null, "width", "16");
    		infsvg.setAttributeNS(null, "height", "16");
    		infsvg.setAttributeNS(null, "viewBox", "0 0 26 26");
    		
    		adr.insertBefore(spanT,document.querySelector(".searchfield").nextSibling);
    		spanT.appendChild(btnT);
    		btnT.appendChild(svgT);
    		svgT.appendChild(pathT);
    		spanT.appendChild(divT);
    		divT.appendChild(footer);
    		footer.classList.add('disabled');
    		footer.appendChild(infdiv);
    		infdiv.appendChild(infbtn);
    		infbtn.appendChild(infsvg);
    		infsvg.appendChild(infpath);
    		
    		document.getElementById('tools').addEventListener('click', function() {
    			if (footer.classList.contains('disabled')) {
    				footer.classList.remove('disabled');
    			}
    			else {
    				footer.classList.add('disabled');
    			}
    		});
    		
    		document.getElementById('toggle-links').addEventListener('click', function () {
    			if (footer.classList.contains('zeig')) {
    				footer.classList.remove('zeig');
    				infpath.style.fill = 'var(--colorFg)';
    				infbtn.setAttribute("title", "Show Status Info");
    			}
    			else {
    				footer.classList.add('zeig');
    				infpath.style.fill = 'var(--colorHighlightBg)';
    				infbtn.setAttribute("title", "Hide Status Info");
    			}
    		});
    
    
    	}
    	else {
    		setTimeout(wait, 300);
    	}
    }, 300);
    

    CSS

    /* tools menu */
    
    #tools svg path {
    	d: path('M483.97,105.709c-2.491-9.958-14.903-13.424-22.157-6.165l-58.913,58.914c-13.083,13.077-34.291,13.077-47.372,0   l-27.03-27.031c-13.082-13.081-13.082-34.289,0-47.372l58.196-58.197c7.307-7.307,3.751-19.838-6.306-22.193   c-13.772-3.218-28.327-4.406-43.339-3.208c-64.522,5.148-123.907,65.649-127.923,130.254c-1.521,24.503,3.43,47.667,13.077,68.186   L16.253,375.878c-9.263,7.96-14.81,19.401-15.323,31.602c-0.519,12.201,4.042,24.068,12.599,32.78l34.902,35.541   c8.64,8.802,20.57,13.586,32.899,13.19c12.33-0.399,23.928-5.936,31.986-15.271l178.388-206.684   c19.917,8.889,42.21,13.424,65.747,11.956c65.041-4.058,125.554-63.92,130.29-128.91   C488.863,134.686,487.482,119.777,483.97,105.709z');
    }
    #toggle-links svg path {
    	d: path('M17.6 20.4l-1.6 1.6-9-9 9-9 1.6 1.6-7.2 7.4 7.2 7.4z');
    }
    #toggle-links svg {
    	margin-top: 2px;
    }
    #droptool {
        position: absolute;
        z-index: 1;
        right: 0;
        border: 1px solid var(--colorBorder);
        border-top: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .callout {
    	bottom: unset;
    	margin-top: 1px;
    }
    .callout::before, .callout::after {
    	display: none;
    }
    #divID {
    	order: 1
    }
    .sync-status {
    	order: 2;
    }
    .status-toolbar {
    	order: 3;
    }
    #status_info {
    	display: none;
    }
    #footer.zeig #status_info.visible {
    	display: flex;
    	max-width: 500px;
    }
    

    Notes

    • The button will only appear, if you have the search field enabled in address bar. If you don't like the search field, or if you want to put the tools toggle somewhere else, just change the code to relate to the address field instead, or the extensions wrapper (anything is possible). You can also ask for help on this. Additionally the address bar needs to be on top.
    • The panel toggle is being hidden with css. If you want to show it just delete the according line -- you might wanna set the order on it too then (to make it appear after status-info and status-info toggle. But it might be a better idea to move the panel toggle as its own entity to the address bar instead (just above the panel).
    • The status-info (displaying link URL or gestures) is set to a max-width of 500px. You can change and adapt this to your needs in the css.
    • In vivaldi://settings/appearance/ tick "Use buttons in range controls" to save some space (also looks nicer).
    • As always, if you have similar mods depending on a wait function to assure the UI has finished loading, just insert this code. One wait function is more than enough.

    This mod is relatively new, but it works pretty well. If you have any suggestions or questions, let me know.


    Updates
    07-12-2017: Changed border settings for the overlay.



  • I completely failed at this. I created it while my other mods were running, and this is apparently a grave mistake. Turns out this relies on a z-index being set in another mod. The error is now dealt with, I have edited the original post. My apologies.


Log in to reply
 

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