Zoom Controls in Address Bar with Slide Out Animation

Buglocker

@nomadic
After today's update (5.3.2679.68) it crashes again :

JS code :

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

    // 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;
      const isMailBar = document.querySelector(".toolbar-mailbar");

      if (isMailBar) return;

      // create the button if it isn't already there
      let alreadyExists = document.getElementById("zoom-hover-target");
      if (alreadyExists) {
        alreadyExists.remove();
        document.getElementById("el2left").remove();
      }

      // CHANGE: Added in Update #4
      // a guaranteed div to the left of the button
      let elementToTheLeft = document.createElement("div");
      elementToTheLeft.style.transition = "0.5s";
      elementToTheLeft.id = "el2left";

      let 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 reset-zoom-c" title="Reset Zoom">
                  <button tabindex="-1" class="button-textonly-c" id="zoom-reset-c">
                    <span class="button-title-c">Reset</span>
                  </button>
                </div>
                <div class="button-toolbar button-toolbar-c" title="Zoom Out">
                  <button tabindex="-1" id="zoom-out-c">
                    <span>
                      <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>
                <span id="zoom-percent-c"></span>
                <div class="button-toolbar button-toolbar-c" title="Zoom In">
                  <button tabindex="-1" id="zoom-in-c">
                    <span>
                      <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>
        `;

      // 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];
      if (!bookmarkBtn) {
        addressBarEnd.appendChild(zoomBtn);
      } else {
        addressBarEnd.insertBefore(zoomBtn, bookmarkBtn);
      }
      // CHANGE:Added in Update #4
      // divs next to the button aren't static,so created my own div to push
      addressBarEnd.insertBefore(elementToTheLeft, zoomBtn);

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

      // set the icon based on the new zoom level
      if (newZoom < RESET_ZOOM_LEVEL / 100) {
        // 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"/>
        `;
      } else if (newZoom > RESET_ZOOM_LEVEL / 100) {
        // 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"/>
        `;
      } else {
        // default zoom icon
        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.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);
      zoomControl();
    }
  }, 300);
})();

I dont want to do an image restore because i have many changes since the last backup. Any ideas ?

stardepp

@Buglocker I can't confirm that. I have also updated to Vivaldi 5.3.2679.68 (Stable channel) (64-bit) and I do not get this error.

Bild Text

Buglocker

@stardepp Could you give the codes of .css and .js that you use to be sure that I use the correct versions ?
I'm also thinking of doing a clean install of Vivaldi because it seems like something has crashed.

stardepp

@Buglocker

CSS:

/* ==================================================
 * Zoom indicator - made by nomadic on the Vivaldi Forums *
 * ================================================== */
#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%;
}

.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: 150px !important;
  opacity: 1;
}

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

JS:

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

    // 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;
      const isMailBar = document.querySelector(".toolbar-mailbar");

      if (isMailBar) return;

      // create the button if it isn't already there
      let alreadyExists = document.getElementById("zoom-hover-target");
      if (alreadyExists) {
        alreadyExists.remove();
        document.getElementById("el2left").remove();
      }

      // CHANGE: Added in Update #4
      // a guaranteed div to the left of the button
      let elementToTheLeft = document.createElement("div");
      elementToTheLeft.style.transition = "0.5s";
      elementToTheLeft.id = "el2left";

      let 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 reset-zoom-c" title="Reset Zoom">
                  <button tabindex="-1" class="button-textonly-c" id="zoom-reset-c">
                    <span class="button-title-c">Reset</span>
                  </button>
                </div>
                <div class="button-toolbar button-toolbar-c" title="Zoom Out">
                  <button tabindex="-1" id="zoom-out-c">
                    <span>
                      <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>
                <span id="zoom-percent-c"></span>
                <div class="button-toolbar button-toolbar-c" title="Zoom In">
                  <button tabindex="-1" id="zoom-in-c">
                    <span>
                      <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>
        `;

      // 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];
      if (!bookmarkBtn) {
        addressBarEnd.appendChild(zoomBtn);
      } else {
        addressBarEnd.insertBefore(zoomBtn, bookmarkBtn);
      }
      // CHANGE:Added in Update #4
      // divs next to the button aren't static,so created my own div to push
      addressBarEnd.insertBefore(elementToTheLeft, zoomBtn);

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

      // set the icon based on the new zoom level
      if (newZoom < RESET_ZOOM_LEVEL / 100) {
        // 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"/>
        `;
      } else if (newZoom > RESET_ZOOM_LEVEL / 100) {
        // 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"/>
        `;
      } else {
        // default zoom icon
        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.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);
      zoomControl();
    }
  }, 300);
})();

Buglocker

@stardepp
Thanks , confirmed. Files are OK. It looks like something else craches after the last update.
I will try an uninstall/install of Vivaldi by keeping the User Data folder to save my work. Thx.

Buglocker

This post is deleted!

Buglocker

@stardepp So , after the reinstall and when loading only zoom mod , zoom works OK. When i load my other mods it crashes. It looks like at this version my mods make conflict with my other mods.
Anyway , the best solution for zoom issue is that the zoom icon/ability to be contained in Vivaldi and thus not need mod.
Thx for the help.

Buglocker

@nomadic
Finally i found the bug.
I had a .css that named "adressBar" , and it has a section "Zoom".
I deleted "Zoom" section and it works OK.
Thx again.

dynamix

@nomadic Where do I put the javascript file?

nomadic

@dynamix You put the JS file in the same directory as browser.html and link to the file within browser.html.

See this post for more details: https://forum.vivaldi.net/topic/10549/modding-vivaldi

It will need to be re-added after each browser update. There are scripts and other tools to make it easier to re-add the mods, so check those out in the modding forum if that interests you.

dude99

@dynamix for windows user, you can try vivaldi mod manager: https://forum.vivaldi.net/post/241847

rafiki

I have used the "Zoom Interface in the Extensions Toolbar" js mod by @nomadic for years but it has stopped working. Is this due to the changes in 6x that I have just been reading about or might something have happened on my side?

Pathduck

@rafiki Hi, mods break all the time when updates occur. It's best to post in the topic you got the mod from - I have merged your post here, assuming it's the correct place, otherwise let me know.

You should make notes where you get mods from, either in the code (comments) or use the Notes in Vivaldi, to save time later.

I believe in this case the author is still active here, so will probably be around to help soon enough
(In the case of many mods, the authors are no longer active and you will have to learn CSS to fix stuff yourself).

rafiki

@Pathduck Yes, this is the one, much appreciated. In this case it has worked flawlessly for a very long time - until now.

nomadic

@rafiki Don't have much time to test now, but it might just be the new method of generating windows that is breaking it.

@nomadic said in Same old New Window now opens faster – Vivaldi Browser snapshot 3062.3:

From a quick test it looks like adding the script tags to the window.html instead of browser.html seems to work. Give that a try and see if it works.

Here is an easy bit of JS for testing. It prints "Working" to the UI devTools console:
(function test() {
  setInterval(() => {
    console.log("Working");
  }, 1000);
})();

Edit: Ok, had a chance to test and it is still broken even when added to window.html.

I fixed the button display issues, but it collapses the slide out menu when you click any of the buttons (actually removes the element and re-adds it).That bug may have existed before this browser update, since it looks like purely a problem with the logic of my code. Will need to refactor my updateZoomIcon function over the weekend.

rafiki

@nomadic Thanks. I'll await news.

nomadic

@rafiki Sorry it took longer than expected. Got busy with other things and had some of my other mods break as well, so felt a bit overwhelmed.

It should be mostly working now. The icon gets added to the end of the address field rather than to the left of the bookmark icon, but I didn't feel like writing another observer or interval loop just to check that.

Updated code is in the first post: here

vitormathews

It doesn't show properly here (JS version; CSS don't even appear at all):

nomadic

@vitormathews The mod requires both the CSS and JS to work; they aren't two different versions of the same mod.

I will rewrite it to package the CSS in the JS tomorrow because you aren't the first person to be confused by this. It was my first ever mod/post on the forum, so I made not the best design decision to keep the two parts separate. Having the CSS separate is nice for the writer of the mod because it allows auto code formatters to work, but it isn't super friendly for the actual uses of the mod.

vitormathews

@nomadic Ooooh, I see, now it worked!
Is there any way to make it auto-expand (auto-show the current zoom value) when I'm changing the page zoom, like others browsers do? Or at least expand it on mousehover? ~~And a way to make it show the current zoom value if it's different from 100%?~~ (nvm, I think it's good enough the way it is)

Btw, just a note for noobs saying both files are needed would be fine I think.

Zoom Controls in Address Bar with Slide Out Animation

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...