Zoom Controls in Address Bar with Slide Out Animation

nomadic

@adacom Sorry, I am still new to sharing mods. Should have tested it on a clean install first...

Button Icons Not Showing Up
The easiest way to get the +/- buttons to show up is to change the css to this:

.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 {
  /* Changes Here */
  padding-top: 2px;
  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;
}

The only real change is to give the SVGs a height and a width. (I also adjusted the padding for alignment.)

Reset Button
The reset button was removed and put into clicking the percentage instead. This is to help the other post about copying Firefox's zoom controls.

If you really want a reset button instead of clicking the percentage area, I can change that for you too.

Adding to the Right of the Tab Bar
In the JavaScript you can change where the controls are located fairly easily. There was an additional issue created by this when clicking rapidly because double clicking in the tab bar makes the window maximize/go to windowed mode.

I think I fixed it, but who knows...

(function() {
  // ============================================================================================================
  // Gives Zoom Interface in the Tab Bar
  //    - 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>
          `;

        // CHANGES =================================================================================================

        // inserts the controls to the beginning of the extensions area
        // let extensionsArea = document.querySelector(".toolbar-extensions");
        // extensionsArea.prepend(zoomControls);

        // inserts the controls to the end of the tab bar
        let tabBar = document.querySelector("#tabs-container");
        let trashCan = tabBar.querySelector(".sync-and-trash-container");
        tabBar.insertBefore(zoomControls, trashCan);

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-in-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-out-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-reset-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // END CHANGES =================================================================================================

        // 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));
    }

    // CHANGE: Added in Update #1 (see original post for details)
    // updates zoom percentage on tab change
    function tabChangeUpdateZoomWrapper() {
      chrome.tabs.getZoom(function(zoomLevel) {
        let zoomInfo = {
          newZoomFactor: zoomLevel
        };
        updatePercent(zoomInfo);
      });
    }

    // zoom change listener
    chrome.tabs.onZoomChange.addListener(updatePercent);

    // CHANGE: Added in Update #1 (see original post for details)
    // Listener for active tab change
    chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper);
  }

  // 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);
})();

I put comments where the changes were made if you want to learn some more about how it works.

Hope it is bug free now (jinxed myself for sure)

adacom

@nomadic thats great thanks - will compare the 2 css files and learn

if its easy to add the reset button then i think its useful and makes things clearer

nomadic

I just edited the post with the +/- icons not showing up in case someone comes along and copies it without looking at the other posts below it.

sjudenim

I've taken the liberty of adjusting the original version (inside the address field). This will work if using the js from the first post.

Changes

adjusted alignment
moved the reset button to the percentage area
themed colouring

GIF 3-10-2020 2-04-16 AM.gif

CSS

.zoom-parent {
  display: inline-block;
  position: relative;
}

.zoom-panel {
  background: var(--colorBgDark);
  position: absolute;
  width: 0;
  height: 24px;
  bottom: -11.5px;
  right: 0;
  padding-top: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.5s !important;
  z-index: 1;
  opacity: .5;
}

.expanded-nav-c {
  border-radius: var(--radiusHalf);
  width: 100px !important;
  padding-left: 5px;
  opacity: 1;
}

.expanded-left-c {margin-right: 100px !important}

.page-zoom-controls-c, .button-toolbar-c {display: inline-block}

#zoomBtn.active {fill: var(--colorHighlightBg)}

.button-toolbar-c > button {
  height: 22px;
  color: inherit;
  align-items: center;
  justify-content: center;
}

.button-toolbar-c > button svg {
  margin-top: -1px;
  height: 18px;
  width: 18px;
}

.button-toolbar-c > button:hover {
  background-color: transparent;
  fill: var(--colorHighlightBg)
}

.button-textonly-c {
  width: 100% !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
}

.zoom-percent-c {
  align-self: center;
  text-align: center;
  width: 40px;
  display: inline-block;
}

.zoom-hover-target {transition: 0.5s !important}

.reset-zoom-c {
  display: inline-block;
  position: absolute;
  margin-left: 20px;
  margin-top: -2px;
  z-index: 5;
  opacity: 0;
}

nomadic

@sjudenim Looks great! I think I will go back and put the theme colors in the original post. Definitely a better solution.

Also, it looks like the margin/transition aren't working properly on the url in the address field of your window (the url jumps to the left suddenly.) In the js, there is the line:

elementToTheLeft.style.transition = "0.5s";

Does adding an !important to that line help?

elementToTheLeft.style.transition = "0.5s !important";

There also could be some conflict from another mod that is breaking it. I can't reproduce it with my setup or a clean install.

sjudenim

@nomadic

That's my fault, there is nothing wrong with your code. It jumps because I don't have animations enabled in the settings. I don't like Vivaldi's animations for the side panel or speed dial. That's why I use !important for the transition to animate just the things I want.

Unfortunately your fix doesn't work since I need to override Vivaldi's common.css. I can't find the selector for that either

nomadic

@sjudenim @adacom @Stardust and anyone else that might be using this modification. I just updated the js in all versions of this mod.

Changes are labeled with "// CHANGE: Added in Update #1" above the chunk of code that was added.

This is a bug fix for the percentage not updating when the active tab changes.

All the posts have been edited to include this change.
**** YOU DO NOT NEED TO FIGURE OUT WHERE THE NEW CODE, SHOWN BELOW, GOES. IT IS ALREADY ADDED IN THE CORRECT LOCATION IN THE PREVIOUS POSTS.****

The added code should look like this for the version in the original post:

    // updates zoom percentage on tab change
    function tabChangeUpdateZoomWrapper() {
      chrome.tabs.getZoom(function(zoomLevel) {
        let zoomInfo = {
          newZoomFactor: zoomLevel
        };
        updateZoomIcon(zoomInfo);
      });
    }

    // Listener for active tab change
    chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper);

And this for the versions that are static in the Extensions Area and in the Tab Bar:

    // updates zoom percentage on tab change
    function tabChangeUpdateZoomWrapper() {
      chrome.tabs.getZoom(function(zoomLevel) {
        let zoomInfo = {
          newZoomFactor: zoomLevel
        };
        updatePercent(zoomInfo);
      });
    }

    // Listener for active tab change
    chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper);

Stardust

@nomadic this is very cool but I am waiting for the native implementation

sjudenim

@nomadic

Thanks for the update.

I've actually done a little one myself. I noticed that the zoom icon was 1px bigger than my bookmark (which is the same size as the default one as you can see in your image). Resizing it was the simplest thing to do but the zoom in and zoom out icons didn't render nice, so I made some new ones. I also added a theme based fill for when it is active (which matches bookmarked pages).

GIF 3-14-2020 2-14-37 AM.gif

If interested,

      // set the icon based on the new zoom level
      if (newZoom < RESET_ZOOM_LEVEL / 100) {
        // zoomed out
        zoomIconPath = `
          <path d="M9.17 1.5c-2.94 0-5.33 2.39-5.33 5.33 0 1.287.458 2.47 1.22 3.393l-3.56 3.56.719.717 3.558-3.56a5.306 5.306 0 003.393 1.22 5.337 5.337 0 005.33-5.33A5.337 5.337 0 009.17 1.5zM6.355 6.186h5.579a.614.614 0 110 1.229H6.355a.615.615 0 110-1.23z" fill="var(--colorHighlightBg)"/>
        `;
      } else if (newZoom > RESET_ZOOM_LEVEL / 100) {
        // zoomed in
        zoomIconPath = `
          <path d="M9.17 1.5c-2.94 0-5.33 2.39-5.33 5.33 0 1.287.458 2.47 1.22 3.393l-3.56 3.56.719.717 3.558-3.56a5.306 5.306 0 003.393 1.22 5.337 5.337 0 005.33-5.33A5.337 5.337 0 009.17 1.5zm-.006 1.916c.341 0 .615.274.615.615v2.153h2.155a.614.614 0 110 1.23H9.78V9.61a.614.614 0 01-.615.616.614.614 0 01-.615-.616V7.414H6.355a.614.614 0 110-1.229h2.196V4.032c0-.34.272-.615.613-.615z" fill="var(--colorHighlightBg)"/>
        `;
      } else {
        // default zoom icon
        zoomIconPath = `
          <path d="M9.17 1.5a5.336 5.336 0 00-5.331 5.331c0 1.287.458 2.469 1.221 3.392l-3.56 3.56.718.717 3.56-3.561a5.305 5.305 0 003.392 1.222A5.337 5.337 0 0014.5 6.83 5.337 5.337 0 009.17 1.5zm0 9.646c-2.38 0-4.315-1.937-4.315-4.315S6.79 2.515 9.17 2.515c2.379 0 4.314 1.936 4.314 4.315s-1.935 4.316-4.314 4.316z"/>
        `;
      }

adacom

just come back to this as the controls moved from the status bar dont show more than they do

as far as i can see the reset button never got added - is this possible - its not 100% necessary but would be nice to have to make the mod complete

nomadic

@adacom Will work on it later today. Sorry I forgot about that request. This is for the tab bar version, right?

adacom

@nomadic

yes on the tab bar if possible

nomadic

@adacom Sorry, didn't have a lot of time today. Made some quick edits and it should be good to go. I didn't test it extensively, so as always, let me know of any bugs or changes you want.

Zoom Controls in Tab Bar ... with Reset Button Visible
JS

(function() {
  // ============================================================================================================
  // Gives Zoom Interface in the Tab Bar - with visible reset button
  //    - 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 reset-zoom-s" title="Reset Zoom">
                  <button tabindex="-1" class="button-textonly-s slight-padding" id="zoom-reset-s">
                    <span class="button-title">Reset</span>
                  </button>
                </div>
                <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">
                        <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);

        // inserts the controls to the end of the tab bar
        let tabBar = document.querySelector("#tabs-container");
        let trashCan = tabBar.querySelector(".sync-and-trash-container");
        tabBar.insertBefore(zoomControls, trashCan);

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-in-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-out-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // prevents double clicks from resizing the window
        document
          .getElementById("zoom-reset-s")
          .addEventListener("dblclick", function(e) {
            e.stopPropagation();
          });

        // 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));
    }

    // updates zoom percentage on tab change
    function tabChangeUpdateZoomWrapper() {
      chrome.tabs.getZoom(function(zoomLevel) {
        let zoomInfo = {
          newZoomFactor: zoomLevel
        };
        updatePercent(zoomInfo);
      });
    }

    // zoom change listener
    chrome.tabs.onZoomChange.addListener(updatePercent);

    // Listener for active tab change
    chrome.tabs.onActivated.addListener(tabChangeUpdateZoomWrapper);
  }

  // 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: 2px;
  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;
}

.slight-padding {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

adacom

@nomadic

thats great - thanks - need to tidy it up for my skin as i thin the tabbar and have a very light background so the white text does not work but sure i can do that - the main code works well - again thanks

sjudenim

This has been broken in the snapshot thanks to elements being renamed.

A small change is all that is needed though, just replace this

JS

        // inserts the button to the left of the bookmark icon
        let addressBar = document.querySelector(".addressfield > .toolbar");

with this
JS

        // inserts the button to the left of the bookmark icon
        let addressBar = document.querySelector(".toolbar.toolbar-small.toolbar-insideinput");

NNickolov

Great script but seems did not working in latest Vivaldi stable realize.
Any ideas and suggestion how to get this script working?

nomadic

@NNickolov Sorry, I have been busy recently and haven't even gotten around to fixing it on my install.

Did you try the suggestion made by @sjudenim in the post above your's? The renaming of elements from snapshot has made its way to stable.

nomadic

@NNickolov Ok, I updated the main code. I don't currently have time to check all the configurations are working, but I will in the coming days.

NNickolov

@nomadic From where to get updated code?

nomadic

@NNickolov You can find the updated code in the initial post. If you want one of the alternative versions in the followup posts updated, let me know.

Sorry I didn't catch that a new bug popped up, but it should be fixed now. There is also a new minor annoyance that has been introduced (see update notes) will look into it when I have some time.

I haven't been using my mods recently because I have been fairly busy and haven't felt like going through my CSS and JS to update everything that got broken with the updates to the address bar. The limited energy and time I have had for coding has been going into some bespoke mods to help other users.