Zoom Controls in Address Bar with Slide Out Animation
-
Hi did this mod break again? I have tried installing it and it looks a lot like vitormathews screenshot above. I have the .js and .css installed. I have tried removing other mods (both their css and js), re-patching my windows html file, re-copying your code on the first page and restarting my browser several times but the buttons just aren't going in their place.
They're FUNCTIONAL but either I'm somehow doing something wrong or the mod broke because I don't think it's supposed to look like this lol
-
@Balentay Sorry, don't have a chance to check it for a few days.
But it does look like something is preventing the CSS from loading. If something breaks, then a few CSS elements will not show properly, but nothing looks active. The JS is working properly.
A common issue is having spaces in the CSS file name. Those won't be loaded by Vivaldi.
-
@nomadic Okay yeah that was... Definitely my fault whoops. Things are loading in correctly now thanks to that hint
I did have to do a bit of troubleshooting with my mods- it turns out two different codes that affect zoom don't play well with each other. Had to remove Dude99's Compact Popup Page Zoom Gauge Control CSS mod to get the plus and minus buttons appearing and spaced out properly
-
The mod stopped working for me until I commented out the following lines:
const isMailBar = document.querySelector(".toolbar-mailbar"); if (isMailBar) return;Might be some issue related to Vivaldi Mail which I used recently.
-
@nomadic - i use this on the end of the tabbar - it seems to be broken again - not sure which update it stopped working - i will look further at that and post later - i dont think its anything i have done as i have changed nothing for a long time
fog plaiter
-
@adacom If you use Vivaldi's mail client, then it is probably the same issue @monchaso found.
The mail toolbar used to be completely removed when you switched back to the normal address bar, but now it is just hidden. Will have to update that selector.
Thanks @monchaso for troubleshooting the issue for me. Was helping someone else fix another mod a few weeks ago and it took a TeamViewer session with their computer for me to find this same issue.
-
@nomadic - i have never used the mail client afaik
mail is turned off in settings
-
Made some further adjustments to make the zoom button appear next to the bookmark button consistently. Here's my version of the mod (which also resizes a few containers, makes the zoom icon change color when zoomed in or out and replaces the reset button with the middle section that displays the zoom percentage).
The only main addition for the script is the function updatePosition:
(function () { // ============================================================================================================ // Gives Zoom Interface in the Address Bar // - made by nomadic on the Vivaldi Forums // ============================================================================================================ function zoomControl() { // 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 // MODES---------------- // Mode 0: only clicking button opens and closes the panel // Mode 1: clicking the button opens the panel and the panel auto closes if not hovered over // Option for mode 1: // FADE_OUT_TIME -> the number of seconds the panel goes without hover before closing // Mode 2: just hovering over the button will open the panel and the panel auto closes if not hovered over // Options for mode 2: // FADE_OUT_TIME -> the number of seconds the panel goes without hover before closing // IS_AUTO_OPENED_ON_ADDRESSBAR -> instead of only the button being hovered, the whole address bar is used const MODE = 1; // --------------------- // Option for modes 1 and 2: const FADE_OUT_TIME = 3; // 3 seconds -> can be set to any positive half second increment (ex. 0, 0.5, 1, 1.5 ...) // Option for mode 2: const IS_AUTO_OPENED_ON_ADDRESSBAR = false; // ------------------------------------------------------------------------------ function updatePosition(zoomBtn, elementToTheLeft) { // inserts the button to the left of the bookmark icon const addressBarEnd = document.querySelector(".UrlBar-AddressField .toolbar-insideinput:last-of-type"); const bookmarkBtn = addressBarEnd.getElementsByClassName("BookmarkButton")[0]; // inserts the button to the left of the bookmark icon if (bookmarkBtn) { addressBarEnd.insertBefore(zoomBtn, bookmarkBtn); zoomBtn.style.display = '' elementToTheLeft.style.display = '' // CHANGE:Added in Update #4 // divs next to the button aren't static,so created my own div to push addressBarEnd.insertBefore(elementToTheLeft, zoomBtn); } else { zoomBtn.style.display = 'none' elementToTheLeft.style.display = 'none' } } // Creates the zoom button and panel initially, and then updates the icon depending on the zoom level function updateZoomIcon(zoomInfo) { let newZoom = zoomInfo.newZoomFactor; let zoomIconPath; let zoomIconState; // create the button if it isn't already there let zoomBtn = document.getElementById("zoom-hover-target"); let elementToTheLeft if (!zoomBtn) { // CHANGE: Added in Update #4 // a guaranteed div to the left of the button elementToTheLeft = document.createElement("div"); elementToTheLeft.style.transition = "0.5s"; elementToTheLeft.id = "el2left"; zoomBtn = document.createElement("div"); zoomBtn.id = "zoom-hover-target"; zoomBtn.innerHTML = ` <div class="zoom-parent"> <div class="zoom-panel"> <div class="page-zoom-controls-c"> <div class="button-toolbar button-toolbar-c"> <button tabindex="-1" title="Zoom Out" type="button" class="ToolbarButton-Button" id="zoom-out-c"> <span class="button-icon"> <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> </span> </button> </div> <div class="button-toolbar button-toolbar-c reset-zoom-c" title="Reset Zoom"> <button tabindex="-1" class="button-textonly-c" id="zoom-reset-c"> <span class="button-title-c" id="zoom-percent-c"></span> </button> </div> <div class="button-toolbar button-toolbar-c"> <button tabindex="-1" title="Zoom In" type="button" class="ToolbarButton-Button" id="zoom-in-c"> <span class="button-icon"> <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> </span> </button> </div> </div> </div> </div> <div class="button-toolbar ZoomButton-Button"> <button tabindex="-1" title="Adjust Zoom" id="zoom-panel-btn" type="button" class="ToolbarButton-Button"> <span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" id="zoomIcon-c"> </svg> </span> </button> </div> `; // update zoom button position updatePosition(zoomBtn, elementToTheLeft) // listener for the magnifying glass button to expand or collapse the control panel document.getElementById("zoom-panel-btn").addEventListener("click", function () { let nav = document.getElementsByClassName("zoom-panel")[0]; navToggle(nav, elementToTheLeft); }); // listener for the zoom in button in the zoom control panel document.getElementById("zoom-in-c").addEventListener("click", incrementPercent); // listener for the zoom out button in the zoom control panel document.getElementById("zoom-out-c").addEventListener("click", decrementPercent); // listener for the zoom reset button in the zoom control panel document.getElementById("zoom-reset-c").addEventListener("click", resetZoom); // starts esentially a hover listener that modes 1 and 2 need if (MODE === 1 || MODE === 2) { zoomPanelHoverTracker(); } } else { // update zoom button position updatePosition(zoomBtn, zoomBtn.previousElementSibling) } // set the icon based on the new zoom level if (newZoom < RESET_ZOOM_LEVEL / 100) { // zoomed in zoomIconState = "zoomed-in"; zoomIconPath = ` <path d="M5.83 9.65a.5.5 0 00-.29.13L1.32 14c-.46.47.23 1.17.7.7l4.22-4.22a.5.5 0 00-.42-.83zm3.6-8.5a5.41 5.41 0 00-5.4 5.4 5.4 5.4 0 105.4-5.4zm0 .99a4.4 4.4 0 11-4.41 4.41 4.4 4.4 0 014.42-4.42zM7.16 6.06c-.66 0-.66.98 0 .98h4.57c.65 0 .65-.98 0-.98z" fill="var(--colorHighlightBg)"/> `; } else if (newZoom > RESET_ZOOM_LEVEL / 100) { // zoomed out zoomIconState = "zoomed-out"; zoomIconPath = ` <path d="M5.83 9.65a.5.5 0 00-.3.13L1.31 14c-.46.47.23 1.17.7.7l4.22-4.22a.5.5 0 00-.4-.84zm3.6-8.5a5.41 5.41 0 00-5.4 5.4 5.4 5.4 0 0010.81 0 5.4 5.4 0 00-5.4-5.4zm0 .98a4.4 4.4 0 014.42 4.41 4.41 4.41 0 11-4.41-4.4zm-.06 1.63a.5.5 0 00-.43.5v1.79h-1.8c-.65 0-.65.98 0 .98h1.8v1.81c0 .66.99.66.99 0v-1.8h1.79c.65 0 .65-.99 0-1h-1.8V4.27a.5.5 0 00-.55-.5z" fill="var(--colorHighlightBg)"/> `; } else { // default zoom icon zoomIconState = "default-zoom"; zoomIconPath = ` <path d="M5.87 9.71c-.11.01-.2.06-.29.14l-4.37 4.37c-.46.45.23 1.14.7.68l4.36-4.37a.48.48 0 00-.41-.82zm3.55-8.36A5.33 5.33 0 004.1 6.67a5.32 5.32 0 105.32-5.32zm0 .97a4.33 4.33 0 11-4.34 4.34 4.33 4.33 0 014.34-4.35z"/> `; } // insert the new icon let zoomSVG = document.getElementById("zoomIcon-c"); zoomSVG.setAttribute("data-zoomState", zoomIconState); zoomSVG.innerHTML = zoomIconPath; // make the percent in the controls match the current zoom level updatePercent(newZoom); } // Makes the zoom controls slide out function openNav(nav, elToLeft) { nav.classList.add("expanded-nav-c"); nav.parentElement.parentElement.classList.add("zoom-hover-target--active"); elToLeft.classList.add("expanded-left-c"); } // Hides the zoom controls function closeNav(nav, elToLeft) { nav.classList.remove("expanded-nav-c"); nav.parentElement.parentElement.classList.remove("zoom-hover-target--active"); elToLeft.classList.remove("expanded-left-c"); } // Toggles the zoom controls open or closed depending on the current state function navToggle(nav, elToLeft) { if (nav.offsetWidth === 0) { return openNav(nav, elToLeft); } else { return closeNav(nav, elToLeft); } } // Puts the zoom level percentage in the zoom controls panel function updatePercent(zoomLevel) { let zoomPercent = Math.round(zoomLevel * 100); let percentageSpan = document.getElementById("zoom-percent-c"); 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)); } // For modes 1 and 2: // Tracks if you are hovering over the zoom controls function zoomPanelHoverTracker() { let zoomPanel = document.getElementsByClassName("zoom-panel")[0]; let elementToTheLeft = zoomPanel.parentElement.parentElement.previousElementSibling; let isHovered = false; let intervalID = null; let count = 0; // selects which element must be hovered to trigger action let hoverElement; if (MODE === 2 && IS_AUTO_OPENED_ON_ADDRESSBAR) { let addressBar = document.querySelector(".UrlBar-AddressField"); hoverElement = addressBar; } else { let zoomBtnAndPanel = document.getElementById("zoom-hover-target"); hoverElement = zoomBtnAndPanel; } // when the element is hovered, reset the interval counter and opens the controls if needed hoverElement.onmouseover = function () { count = 0; isHovered = true; if (MODE !== 1) { openNav(zoomPanel, elementToTheLeft); } }; // when the element loses hover, closes the controls if enough time has passed hoverElement.onmouseout = function () { // removes any previous counters (needed for if hover is lost and regained multiple times) if (intervalID) { clearInterval(intervalID); } isHovered = false; // start a counter to see how long it has been since the element was last hovered intervalID = setInterval(function () { // only increment the counter as long as hover isn't regained if (isHovered === false) { count++; } // once the correct amount of time has ellapsed, close the controls panel if (count >= FADE_OUT_TIME * 2) { closeNav(zoomPanel, elementToTheLeft); clearInterval(intervalID); } }, 500); }; } // CHANGE: Added in Update #1 // updates zoom percentage on tab change function tabChangeUpdateZoomWrapper() { chrome.tabs.getZoom(function (zoomLevel) { let zoomInfo = { newZoomFactor: zoomLevel, }; updateZoomIcon(zoomInfo); }); } // zoom change listener chrome.tabs.onZoomChange.addListener(updateZoomIcon); // CHANGE: Added in Update #1 // Listener for active tab change chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper); // CHANGE: Added in Update #4 // Initially load icon, stopped getting added on startup in 3.5 chrome.tabs.getZoom(function (zoomLevel) { let zoomInfo = { newZoomFactor: zoomLevel, }; updateZoomIcon(zoomInfo); }); // mutation Observer for Address Bar Changes let main = document.getElementsByClassName("mainbar")[0]; // get the initial state of the addressbar as either urlbar or mailbar let oldIsMailBarActive = main.firstChild.classList.contains("toolbar-mailbar"); let addressBarObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { // only re-add on new nodes added. The list addedNodes will only have a // length attribute when it contains added nodes if (mutation.addedNodes.length) { // get the new state of the addressbar let isMailBarActive = mutation.addedNodes[0].classList.contains("toolbar-mailbar"); // if it is different from the previous state, we need to act on it if (oldIsMailBarActive !== isMailBarActive) { // update the old value for comparisons on future mutations oldIsMailBarActive = isMailBarActive; // if the addressbar isn't the mailbar, we can re-add the button if (!isMailBarActive) { // Run all changes that are only in the url bar and not the mail bar tabChangeUpdateZoomWrapper(); } } } }); }); addressBarObserver.observe(main, { childList: true }); } // Loop waiting for the browser to load the UI let intervalID = setInterval(function () { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); setTimeout(zoomControl, 1000); } }, 300); })();It should work with the .css from the first post but I'll also share it just in case:
/* ================================================== * Zoom indicator * ================================================== */ #zoom-hover-target { transition: 0.5s; } #zoom-hover-target { height: 22px; --BorderRadius: 4px; font-size: 11.5px; display: flex; } .ZoomButton-Button { height: 100%; border-radius: var(--BorderRadius); border: 1px solid transparent; } .ZoomButton-Button:hover, .zoom-hover-target--active { background-color: var(--colorBgDark); } .ZoomButton-Button:hover { border-color: var(--colorBorder); } .ZoomButton-Button .ToolbarButton-Button { border: none; width: auto; height: 100%; margin: 0; padding: 0 6px; margin: auto -3px; } /* ================================================== * Zoom slide out controls * ================================================== */ .zoom-parent { position: relative; } .zoom-panel { background: linear-gradient(90deg, var(--colorBgDark) 0%, var(--colorBgDark) 96%, rgba(0, 0, 0, 0) 100%); border-radius: var(--radiusHalf); height: 100%; overflow-x: hidden; overflow-y: hidden; position: absolute; right: 0; transition: 0.5s; /* hide */ width: 0; opacity: 0; } .page-zoom-controls-c { height: 100%; } .button-toolbar-c > button { border-radius: var(--radiusHalf); border: unset !important; display: inline-block; height: 100%; padding: 0 3px; } .button-toolbar-c { display: inline-block; height: 100%; } .button-toolbar-c > button:hover { background-color: var(--colorFgAlpha); } #zoom-percent-c { text-align: center; vertical-align: middle; width: 40px; display: inline-block; } .expanded-nav-c { width: 100px !important; opacity: 1; } .expanded-left-c { margin-right: 110px !important; } -
@monchaso will study the js but will be an uphill battle i think as i dont understand js - i want it in the tabbar - there is the old code for that earlier in the thread - maybe its easy - dont know
-
@adacom Here's what I came up with for a tab bar version:
(function () { // ============================================================================================================ // Gives Zoom Interface in the Address Bar // - made by nomadic on the Vivaldi Forums // ============================================================================================================ function zoomControl() { // 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 // MODES---------------- // Mode 0: only clicking button opens and closes the panel // Mode 1: clicking the button opens the panel and the panel auto closes if not hovered over // Option for mode 1: // FADE_OUT_TIME -> the number of seconds the panel goes without hover before closing // Mode 2: just hovering over the button will open the panel and the panel auto closes if not hovered over // Options for mode 2: // FADE_OUT_TIME -> the number of seconds the panel goes without hover before closing // IS_AUTO_OPENED_ON_ADDRESSBAR -> instead of only the button being hovered, the whole address bar is used const MODE = 1; // --------------------- // Option for modes 1 and 2: const FADE_OUT_TIME = 3; // 3 seconds -> can be set to any positive half second increment (ex. 0, 0.5, 1, 1.5 ...) // Option for mode 2: const IS_AUTO_OPENED_ON_ADDRESSBAR = false; // ------------------------------------------------------------------------------ function updatePosition(zoomBtn, elementToTheLeft) { // inserts the button to the left of the bookmark icon let addressBarEnd = document.querySelector(".UrlBar-AddressField.button-textonly.below"); console.log(addressBarEnd); addressBarEnd.parentElement.insertBefore(zoomBtn, addressBarEnd.nextElementSibling); addressBarEnd.parentElement.insertBefore(elementToTheLeft, zoomBtn); } // Creates the zoom button and panel initially, and then updates the icon depending on the zoom level function updateZoomIcon(zoomInfo) { let newZoom = zoomInfo.newZoomFactor; let zoomIconPath; let zoomIconState; // create the button if it isn't already there let zoomBtn = document.getElementById("zoom-hover-target"); let elementToTheLeft if (!zoomBtn) { // CHANGE: Added in Update #4 // a guaranteed div to the left of the button elementToTheLeft = document.createElement("div"); elementToTheLeft.style.transition = "0.5s"; elementToTheLeft.id = "el2left"; zoomBtn = document.createElement("div"); zoomBtn.id = "zoom-hover-target"; zoomBtn.innerHTML = ` <div class="zoom-parent"> <div class="zoom-panel"> <div class="page-zoom-controls-c"> <div class="button-toolbar button-toolbar-c"> <button tabindex="-1" title="Zoom Out" type="button" class="ToolbarButton-Button" id="zoom-out-c"> <span class="button-icon"> <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> </span> </button> </div> <div class="button-toolbar button-toolbar-c reset-zoom-c" title="Reset Zoom"> <button tabindex="-1" class="button-textonly-c" id="zoom-reset-c"> <span class="button-title-c" id="zoom-percent-c"></span> </button> </div> <div class="button-toolbar button-toolbar-c"> <button tabindex="-1" title="Zoom In" type="button" class="ToolbarButton-Button" id="zoom-in-c"> <span class="button-icon"> <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> </span> </button> </div> </div> </div> </div> <div class="button-toolbar ZoomButton-Button"> <button tabindex="-1" title="Adjust Zoom" id="zoom-panel-btn" type="button" class="ToolbarButton-Button"> <span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" id="zoomIcon-c"> </svg> </span> </button> </div> `; // update zoom button position updatePosition(zoomBtn, elementToTheLeft) // listener for the magnifying glass button to expand or collapse the control panel document.getElementById("zoom-panel-btn").addEventListener("click", function () { let nav = document.getElementsByClassName("zoom-panel")[0]; navToggle(nav, elementToTheLeft); }); // listener for the zoom in button in the zoom control panel document.getElementById("zoom-in-c").addEventListener("click", incrementPercent); // listener for the zoom out button in the zoom control panel document.getElementById("zoom-out-c").addEventListener("click", decrementPercent); // listener for the zoom reset button in the zoom control panel document.getElementById("zoom-reset-c").addEventListener("click", resetZoom); // starts esentially a hover listener that modes 1 and 2 need if (MODE === 1 || MODE === 2) { zoomPanelHoverTracker(); } } else { // update zoom button position updatePosition(zoomBtn, zoomBtn.previousElementSibling) } // set the icon based on the new zoom level if (newZoom < RESET_ZOOM_LEVEL / 100) { // zoomed in zoomIconState = "zoomed-in"; zoomIconPath = ` <path d="M5.83 9.65a.5.5 0 00-.29.13L1.32 14c-.46.47.23 1.17.7.7l4.22-4.22a.5.5 0 00-.42-.83zm3.6-8.5a5.41 5.41 0 00-5.4 5.4 5.4 5.4 0 105.4-5.4zm0 .99a4.4 4.4 0 11-4.41 4.41 4.4 4.4 0 014.42-4.42zM7.16 6.06c-.66 0-.66.98 0 .98h4.57c.65 0 .65-.98 0-.98z" fill="var(--colorHighlightBg)"/> `; } else if (newZoom > RESET_ZOOM_LEVEL / 100) { // zoomed out zoomIconState = "zoomed-out"; zoomIconPath = ` <path d="M5.83 9.65a.5.5 0 00-.3.13L1.31 14c-.46.47.23 1.17.7.7l4.22-4.22a.5.5 0 00-.4-.84zm3.6-8.5a5.41 5.41 0 00-5.4 5.4 5.4 5.4 0 0010.81 0 5.4 5.4 0 00-5.4-5.4zm0 .98a4.4 4.4 0 014.42 4.41 4.41 4.41 0 11-4.41-4.4zm-.06 1.63a.5.5 0 00-.43.5v1.79h-1.8c-.65 0-.65.98 0 .98h1.8v1.81c0 .66.99.66.99 0v-1.8h1.79c.65 0 .65-.99 0-1h-1.8V4.27a.5.5 0 00-.55-.5z" fill="var(--colorHighlightBg)"/> `; } else { // default zoom icon zoomIconState = "default-zoom"; zoomIconPath = ` <path d="M5.87 9.71c-.11.01-.2.06-.29.14l-4.37 4.37c-.46.45.23 1.14.7.68l4.36-4.37a.48.48 0 00-.41-.82zm3.55-8.36A5.33 5.33 0 004.1 6.67a5.32 5.32 0 105.32-5.32zm0 .97a4.33 4.33 0 11-4.34 4.34 4.33 4.33 0 014.34-4.35z"/> `; } // insert the new icon let zoomSVG = document.getElementById("zoomIcon-c"); zoomSVG.setAttribute("data-zoomState", zoomIconState); zoomSVG.innerHTML = zoomIconPath; // make the percent in the controls match the current zoom level updatePercent(newZoom); } // Makes the zoom controls slide out function openNav(nav, elToLeft) { nav.classList.add("expanded-nav-c"); nav.parentElement.parentElement.classList.add("zoom-hover-target--active"); elToLeft.classList.add("expanded-left-c"); } // Hides the zoom controls function closeNav(nav, elToLeft) { nav.classList.remove("expanded-nav-c"); nav.parentElement.parentElement.classList.remove("zoom-hover-target--active"); elToLeft.classList.remove("expanded-left-c"); } // Toggles the zoom controls open or closed depending on the current state function navToggle(nav, elToLeft) { if (nav.offsetWidth === 0) { return openNav(nav, elToLeft); } else { return closeNav(nav, elToLeft); } } // Puts the zoom level percentage in the zoom controls panel function updatePercent(zoomLevel) { let zoomPercent = Math.round(zoomLevel * 100); let percentageSpan = document.getElementById("zoom-percent-c"); 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)); } // For modes 1 and 2: // Tracks if you are hovering over the zoom controls function zoomPanelHoverTracker() { let zoomPanel = document.getElementsByClassName("zoom-panel")[0]; let elementToTheLeft = zoomPanel.parentElement.parentElement.previousElementSibling; let isHovered = false; let intervalID = null; let count = 0; // selects which element must be hovered to trigger action let hoverElement; if (MODE === 2 && IS_AUTO_OPENED_ON_ADDRESSBAR) { let addressBar = document.querySelector(".UrlBar-AddressField"); hoverElement = addressBar; } else { let zoomBtnAndPanel = document.getElementById("zoom-hover-target"); hoverElement = zoomBtnAndPanel; } // when the element is hovered, reset the interval counter and opens the controls if needed hoverElement.onmouseover = function () { count = 0; isHovered = true; if (MODE !== 1) { openNav(zoomPanel, elementToTheLeft); } }; // when the element loses hover, closes the controls if enough time has passed hoverElement.onmouseout = function () { // removes any previous counters (needed for if hover is lost and regained multiple times) if (intervalID) { clearInterval(intervalID); } isHovered = false; // start a counter to see how long it has been since the element was last hovered intervalID = setInterval(function () { // only increment the counter as long as hover isn't regained if (isHovered === false) { count++; } // once the correct amount of time has ellapsed, close the controls panel if (count >= FADE_OUT_TIME * 2) { closeNav(zoomPanel, elementToTheLeft); clearInterval(intervalID); } }, 500); }; } // CHANGE: Added in Update #1 // updates zoom percentage on tab change function tabChangeUpdateZoomWrapper() { chrome.tabs.getZoom(function (zoomLevel) { let zoomInfo = { newZoomFactor: zoomLevel, }; updateZoomIcon(zoomInfo); }); } // zoom change listener chrome.tabs.onZoomChange.addListener(updateZoomIcon); // CHANGE: Added in Update #1 // Listener for active tab change chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper); // CHANGE: Added in Update #4 // Initially load icon, stopped getting added on startup in 3.5 chrome.tabs.getZoom(function (zoomLevel) { let zoomInfo = { newZoomFactor: zoomLevel, }; updateZoomIcon(zoomInfo); }); // mutation Observer for Address Bar Changes let main = document.getElementsByClassName("mainbar")[0]; // get the initial state of the addressbar as either urlbar or mailbar let oldIsMailBarActive = main.firstChild.classList.contains("toolbar-mailbar"); let addressBarObserver = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { // only re-add on new nodes added. The list addedNodes will only have a // length attribute when it contains added nodes if (mutation.addedNodes.length) { // get the new state of the addressbar let isMailBarActive = mutation.addedNodes[0].classList.contains("toolbar-mailbar"); // if it is different from the previous state, we need to act on it if (oldIsMailBarActive !== isMailBarActive) { // update the old value for comparisons on future mutations oldIsMailBarActive = isMailBarActive; // if the addressbar isn't the mailbar, we can re-add the button if (!isMailBarActive) { // Run all changes that are only in the url bar and not the mail bar tabChangeUpdateZoomWrapper(); } } } }); }); addressBarObserver.observe(main, { childList: true }); } // Loop waiting for the browser to load the UI let intervalID = setInterval(function () { const browser = document.getElementById("browser"); if (browser) { clearInterval(intervalID); setTimeout(zoomControl, 1000); } }, 300); })();And the .css:
/* ================================================== * Zoom indicator * ================================================== */ #zoom-hover-target { transition: 0.5s; } #zoom-hover-target { height: 22px; --BorderRadius: 4px; font-size: 11.5px; display: flex; } .ZoomButton-Button { height: 100%; border-radius: var(--BorderRadius); border: 1px solid transparent; } .ZoomButton-Button:hover, .zoom-hover-target--active { background-color: var(--colorBgDark); } .ZoomButton-Button:hover { border-color: var(--colorBorder); } .ZoomButton-Button .ToolbarButton-Button { border: none; width: auto; height: 100%; margin: 0; padding: 0 6px; margin: auto -3px; } #zoom-out-c, #zoom-in-c { width: 20px; } #zoom-out-c .button-icon, #zoom-in-c .button-icon { width: 100%; height: 100%; } /* ================================================== * Zoom slide out controls * ================================================== */ .zoom-parent { position: relative; } .zoom-panel { background: linear-gradient(90deg, var(--colorBgDark) 0%, var(--colorBgDark) 96%, rgba(0, 0, 0, 0) 100%); border-radius: var(--radiusHalf); height: 100%; overflow-x: hidden; overflow-y: hidden; position: absolute; right: 0; transition: 0.5s; /* hide */ width: 0; opacity: 0; } .page-zoom-controls-c { height: 100%; } .button-toolbar-c > button { border-radius: var(--radiusHalf); border: unset !important; display: inline-block; height: 100%; padding: 0 3px; } .button-toolbar-c { display: inline-block; height: 100%; } .button-toolbar-c > button:hover { background-color: var(--colorFgAlpha); } #zoom-percent-c { text-align: center; vertical-align: middle; width: 40px; display: inline-block; } .expanded-nav-c { width: 100px !important; opacity: 1; } .expanded-left-c { margin-right: 110px !important; } -
@monchaso - thanks on first install i dont see the zoom controls but 1 have lots of mods and js scripts running so will go back to a clean install and see what that gives
-
@monchaso - tried a few configurations removing my mods and it did not work - its the latest snapshot i am working with
-
@adacom That's strange, it should appear next to the address bar. Here's what it should look like:
Maybe it's a snapshot only thing? I'll try using it too when I have some free time and see how it goes.
