Zoom Level Indicator
-
Like @Stardust in this thread I also would like Firefox-style Zoom Buttons on the address bar. Instead of having to use the status bar for just this one feature.
In another thread @LonM posted the following code that is supposed to move the zoom controls from the status bar to the address bar.
setTimeout(function wait() { var zoom_controls = document.querySelector("#footer > div.status-toolbar > div.zoom-control"); if (zoom_controls != null) { var ext_wrap = document.querySelector('#main > div.toolbar-addressbar > span.extensions-wrapper'); ext_wrap.appendChild(zoom_controls); } else { setTimeout(wait, 300); } }, 300);
Unfortunately the code doesn't work for me. Does someone know to fix the code?
-
-
@Spyderr You can do this simply by running the code in the console of the inspector. One drawback is that it can only be added to the left of the address bar
vivaldi.prefs.get('vivaldi.toolbars.navigation', navigation => { var index = navigation.indexOf('Zoom'); if (index == -1) { navigation.push('Zoom'); vivaldi.prefs.set({path: 'vivaldi.toolbars.navigation', value: navigation}); vivaldi.prefs.get('vivaldi.toolbars.status', status => { index = status.indexOf('Zoom'); if (index > -1) { status.splice(index, 1); vivaldi.prefs.set({path: 'vivaldi.toolbars.status', value: status}); } }); } });
to switch back
vivaldi.prefs.get('vivaldi.toolbars.status', status => { var index = status.indexOf('Zoom'); if (index == -1) { status.push('Zoom'); vivaldi.prefs.set({path: 'vivaldi.toolbars.status', value: status}); vivaldi.prefs.get('vivaldi.toolbars.navigation', navigation => { index = navigation.indexOf('Zoom'); if (index > -1) { navigation.splice(index, 1); vivaldi.prefs.set({path: 'vivaldi.toolbars.navigation', value: navigation}); } }); } });
-
@raed I see no border there.
-
-
@raed You can add
.page-zoom-controls.zoom [title="Zoom Out"] > button, .page-zoom-controls.zoom [title="Zoom In"] > button { border: none; }
But I think it would be better if you instead
.page-zoom-controls.zoom [title="Zoom Out"] { border: none !important; } .page-zoom-controls.zoom [title="Zoom In"] { border: none !important; margin-right: 5px; }
to
.page-zoom-controls.zoom { margin-right: 5px; } .page-zoom-controls.zoom > .button-toolbar > button { border: none; }
-
I just made a a zoom control panel that goes in the address bar. Don't know if you would be interested since it auto hides, but the icon does show if a page is zoomed in or out.
Post is here: Zoom Controls in Address Bar with Slide Out Animation
-
@Spyderr I made something that is basically exactly the same as the one you initially posted. You can check it out here or see the original post for other options:
@nomadic said in Zoom Controls in Address Bar with Slide Out Animation:
@adacom It was different enough for me to not want to add a bunch of if-else statements, so it is it's own separate mod now.
Preview
* Ignore the magnifying glass in the address bar, that is just the previous mod in the thread. I can put an indicator there if you want it. Just let me know.
Because this isn't stealing buttons from another part of the interface, it should hopefully not have the same problems as the last mod you used.Javascript
(function() { // ============================================================================================================ // Gives Zoom Interface in the Extensions Toolbar // - made by nomadic on the Vivaldi Forums // ============================================================================================================ function zoomControlStatic() { // CONFIGURATION: --------------------------------------------------------------- // - in Vivaldi's settings you can set the default page zoom, this // will follow that if RESET_ZOOM_LEVEL is set to 100 const RESET_ZOOM_LEVEL = 100; // 100 % -> the zoom that hitting the reset button will default to const ZOOM_INCREMENT_AMOUNT = 10; // 10 % -> the amount the zoom is either raised or lowered // ------------------------------------------------------------------------------ // Creates the zoom controls initially, and then updates the percent depending on the zoom level function updatePercent(zoomInfo) { let newZoom = zoomInfo.newZoomFactor; // create the controls if they aren't already there let alreadyExists = document.querySelector(".page-zoom-controls-s"); if (!alreadyExists) { let zoomControls = document.createElement("div"); zoomControls.setAttribute("class", "button-toolbar"); zoomControls.innerHTML = ` <div class="page-zoom-controls-s"> <div class="button-toolbar-s" title="Zoom Out"> <button tabindex="-1" id="zoom-out-s"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path d="M4 8C4 8.55228 4.44772 9 5 9H11C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7H5C4.44772 7 4 7.44772 4 8Z"></path> </svg> </button> </div> <div class="button-toolbar-s reset-zoom-s" title="Reset Zoom"> <button tabindex="-1" class="button-textonly-s" id="zoom-reset-s"> <span class="zoom-percent-s button-title"></span> </button> </div> <div class="button-toolbar-s" title="Zoom In"> <button tabindex="-1" id="zoom-in-s"> <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path d="M7 7V5C7 4.44772 7.44772 4 8 4C8.55228 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55228 11.5523 9 11 9H9V11C9 11.5523 8.55228 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44772 4.44772 7 5 7H7Z"></path> </svg> </button> </div> </div> `; // inserts the controls to the beginning of the extensions area let extensionsArea = document.querySelector(".toolbar-extensions"); extensionsArea.prepend(zoomControls); // listener for the zoom in button in the zoom control panel document .getElementById("zoom-in-s") .addEventListener("click", incrementPercent); // listener for the zoom out button in the zoom control panel document .getElementById("zoom-out-s") .addEventListener("click", decrementPercent); // listener for the zoom reset button in the zoom control panel document .getElementById("zoom-reset-s") .addEventListener("click", resetZoom); } // Puts the zoom level percentage in the zoom controls let zoomPercent = Math.round(newZoom * 100); let percentageSpan = document.querySelector(".zoom-percent-s"); percentageSpan.innerHTML = zoomPercent + " %"; } // Zooms in the page by the specified increment function incrementPercent() { chrome.tabs.getZoom(function(zoomLevel) { let newZoomLevel = zoomLevel + ZOOM_INCREMENT_AMOUNT / 100; // Max zoom that Vivaldi allows is 500 % if (newZoomLevel <= 5) { chrome.tabs.setZoom(newZoomLevel, updatePercent(newZoomLevel)); } }); } // Zooms out the page by the specified increment function decrementPercent() { chrome.tabs.getZoom(function(zoomLevel) { let newZoomLevel = zoomLevel - ZOOM_INCREMENT_AMOUNT / 100; // Min zoom that Vivaldi allows is 20 % if (newZoomLevel >= 0.2) { chrome.tabs.setZoom(newZoomLevel, updatePercent(newZoomLevel)); } }); } // Sets the zoom back to the default zoom level // - in Vivaldi's settings you can set the default page zoom, this // will follow that if RESET_ZOOM_LEVEL is set to "100" function resetZoom() { let zoomLevel = RESET_ZOOM_LEVEL / 100; chrome.tabs.setZoom(zoomLevel, updatePercent(zoomLevel)); } // zoom change listner chrome.tabs.onZoomChange.addListener(updatePercent); } // Loop waiting for the browser to load the UI setTimeout(function wait() { const browser = document.getElementById("browser"); if (browser) { zoomControlStatic(); } else { setTimeout(wait, 300); } }, 300); })();
CSS
.page-zoom-controls-s { display: inline-block; height: 34px; } .button-toolbar-s > button { background-color: transparent; height: 100%; border-radius: var(--radiusHalf); border: unset !important; padding-top: unset !important; padding-bottom: unset !important; color: inherit; align-items: center; justify-content: center; } /* SVG's were slightly too high, couldn't figure out a better solution */ .button-toolbar-s > button svg { padding-top: 5px; /* Edited to avoid confusion in the future */ height: 16px; width: 16px; } .button-toolbar-s > button:hover { background-color: var(--colorAccentBgDark); } .button-toolbar-s { display: inline-block; height: 100%; } .button-textonly-s { width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; } .zoom-percent-s { display: inline-block; width: 40px; }
-