Zoom Controls in Address Bar with Slide Out Animation

adacom

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.

nomadic

Updated initial post to make the mod work better in version 3.5 with the QR Code button.

This update also finally gets the zoom icon to stay next to the bookmark button, which broke a few Vivaldi updates ago

Affects both JS and CSS

hlehyaric

@nomadic said in Zoom Controls in Address Bar with Slide Out Animation:

Welcome. I'm not the only one.

rafiki

Very interested in this and looks to be exactly what I want. After reading through this thread my head is spinning. For the zoom controls to be in the address bar permanently visible which js and which css (which post) should I use?

nomadic

@rafiki Yeah, sorry this thread got a bit messy with alternate versions. Where exactly in the address bar do you want the zoom controls?

My guess is you would want it to the right of the address bar. I will update that version in the next few hours.

~~Not Updated Yet... I will remove this once it is updated.~~

You can find that version here. It contains the JS and CSS you need.

Edit: It is now up to date. Old version should have mostly worked, other than the controls not showing up after entering fullscreen or minimal-ui modes.

rafiki

@nomadic

Thank you! Just what I wanted.

Pushing my luck here but is there any possibility that the zoom steps can be set to 5% each step? I miss that from Firefox. Or, perhaps, that the zoom level could be overtyped into the display a la Vivaldi taskbar?

nomadic

@rafiki said in Zoom Controls in Address Bar with Slide Out Animation:

is there any possibility that the zoom steps can be set to 5% each step?

Yeah, check out the top few lines of the JS. There are a few configuration options.

const ZOOM_INCREMENT_AMOUNT = 5; should do what you want.

perhaps, that the zoom level could be overtyped into the display a la Vivaldi taskbar

Might look into this in the future, but it doesn't make as much sense with the original version.

I might ask a moderator to split the static version off into its own thread. Then it might be easier for people looking for a static version to find this mod. I could try to add a typed input in that context.

rafiki

@nomadic Perfect! Working fine. Thanks again.

rafiki

One final question: will this mod survive a version upgrade or will I have to re-do it again after each update?

nomadic

@rafiki Unfortunately, JavaScript mods, which this is, don't survive an update.

Fortunately, it is fairly fast to add back once to know that to are doing.

You could also take a look at some of the scripts people have made to automate the reapplying of JS mods. You can find them in the pinned posts on the modding forum. There are separate threads for Linux, OS X, and Windows.

rafiki

Thanks. I thought as much. Forewarned is forearmed! Thanks for all you help.

Buglocker

@nomadic
Hi. I tried the code but i didnt see any change.
My version is 3.7.2218.52 (Stable channel) (64-bit).
Do you know what's wrong ?
Thanks.