Vimium is now using top z-index layer

Author: JulianDeal

content_scripts/link_hints.js

@@ -379,7 +379,7 @@ class LinkHintsMode {
     this.stableSortCount = 0;
     this.hintMarkers = hintDescriptors.map((desc) => this.createMarkerFor(desc));
     this.markerMatcher = Settings.get("filterLinkHints") ? new FilterHints() : new AlphabetHints();
-    this.markerMatcher.fillInMarkers(this.hintMarkers, this.getNextZIndex.bind(this));
+    this.markerMatcher.fillInMarkers(this.hintMarkers);
 
     this.hintMode = new Mode();
     this.hintMode.init({
@@ -402,11 +402,16 @@ class LinkHintsMode {
       }
     });
 
+    this.renderHints();
+    this.setIndicator();
+  }
+
+  renderHints() {
     // Append these markers as top level children instead of as child nodes to the link itself,
     // because some clickable elements cannot contain children, e.g. submit buttons.
     this.hintMarkerContainingDiv = DomUtils.addElementsToPage(
       this.hintMarkers.filter((m) => m.isLocalMarker()).map((m) => m.element),
-      { id: "vimiumHintMarkerContainer", className: "vimiumReset" },
+      { id: "vimiumHintMarkerContainer", className: "vimiumReset" }
     );
 
     // TODO(philc): 2024-03-27 Remove this hasPopoverSupport check once Firefox has popover support.
@@ -431,16 +436,6 @@ class LinkHintsMode {
     this.setIndicator();
   }
 
-  // Increments and returns the Z index that should be used for the next hint marker on the page.
-  getNextZIndex() {
-    if (this.currentZIndex == null) {
-      // This is the starting z-index value; it produces z-index values which are greater than all
-      // of the other z-index values used by Vimium.
-      this.currentZIndex = 2140000000;
-    }
-    return ++this.currentZIndex;
-  }
-
   setOpenLinkMode(mode, shouldPropagateToOtherFrames) {
     this.mode = mode;
     if (shouldPropagateToOtherFrames == null) {
@@ -476,7 +471,6 @@ class LinkHintsMode {
       el.style.left = localHint.rect.left + "px";
       el.style.top = localHint.rect.top + "px";
       // Each hint marker is assigned a different z-index.
-      el.style.zIndex = this.getNextZIndex();
       el.className = "vimiumReset internalVimiumHintMarker vimiumHintMarker";
       Object.assign(marker, {
         element: el,
@@ -589,7 +583,6 @@ class LinkHintsMode {
     const { linksMatched, userMightOverType } = this.markerMatcher.getMatchingHints(
       this.hintMarkers,
       tabCount,
-      this.getNextZIndex.bind(this),
     );
     if (linksMatched.length === 0) {
       this.deactivateMode();
@@ -622,7 +615,6 @@ class LinkHintsMode {
     const localHintMarkers = this.hintMarkers.filter((m) =>
       m.isLocalMarker() && (m.element.style.display !== "none")
     );
-
     // Fill in the markers' rects, if necessary.
     for (const marker of localHintMarkers) {
       if (marker.markerRect == null) {
@@ -659,17 +651,16 @@ class LinkHintsMode {
       }
     }
 
-    // Rotate the z-indexes within each stack.
-    for (const stack of stacks) {
+    const newMarkers = []
+    for (let stack of stacks) {
       if (stack.length > 1) {
-        const zIndexes = stack.map((marker) => marker.element.style.zIndex);
-        zIndexes.push(zIndexes[0]);
-        for (let index = 0; index < stack.length; index++) {
-          const marker = stack[index];
-          marker.element.style.zIndex = zIndexes[index + 1];
-        }
+        // Push the last element to the beginning.
+        stack = stack.splice(-1, 1).concat(stack)
       }
+      newMarkers.push(...stack)
     }
+    this.hintMarkers = newMarkers;
+    this.renderHints();
   }
 
   // When only one hint remains, activate it in the appropriate way. The current frame may or may
@@ -877,7 +868,7 @@ class FilterHints {
     marker.element.innerHTML = spanWrap(caption);
   }
 
-  fillInMarkers(hintMarkers, getNextZIndex) {
+  fillInMarkers(hintMarkers) {
     for (const marker of hintMarkers) {
       if (marker.isLocalMarker()) {
         this.renderMarker(marker);
@@ -886,10 +877,10 @@ class FilterHints {
 
     // We use getMatchingHints() here (although we know that all of the hints will match) to get an
     // order on the hints and highlight the first one.
-    return this.getMatchingHints(hintMarkers, 0, getNextZIndex);
+    return this.getMatchingHints(hintMarkers, 0);
   }
 
-  getMatchingHints(hintMarkers, tabCount, getNextZIndex) {
+  getMatchingHints(hintMarkers, tabCount) {
     // At this point, linkTextKeystrokeQueue and hintKeystrokeQueue have been updated to reflect the
     // latest input. Use them to filter the link hints accordingly.
     const matchString = this.hintKeystrokeQueue.join("");
@@ -910,7 +901,6 @@ class FilterHints {
 
     if (this.activeHintMarker?.element) {
       this.activeHintMarker.element.classList.add("vimiumActiveHintMarker");
-      this.activeHintMarker.element.style.zIndex = getNextZIndex();
     }
 
     return {

content_scripts/vimium.css

@@ -3,10 +3,9 @@
  * don't use the same CSS class names that the page is using, so the page's CSS doesn't mess with
  * the style of our Vimium dialogs.
  *
- * The z-indexes of Vimium elements are very large, because we always want them to show on top. We
- * know that Chrome supports z-index values up to about 2^31. The values we use are large numbers
- * approaching that bound. However, we must leave headroom for link hints. Hint marker z-indexes
- * start at 2140000001.
+ * We use the maximum z-index value for all Vimium elements to guarantee that they always appear on
+ * top. Chrome supports z-index values up to 2,147,483,647 (= 2^31 - 1). We utilize the maximum
+ * z-index value allowable to ensure Vimium elements have precedence over all other page elements.
  */
 
 /*
@@ -60,7 +59,7 @@ tr.vimiumReset {
   vertical-align: baseline;
   white-space: normal;
   width: auto;
-  z-index: 2140000000; /* Vimium's reference z-index value. */
+  z-index: 2147483647;
 }
 
 thead.vimiumReset, tbody.vimiumReset {
@@ -90,6 +89,7 @@ div.internalVimiumHintMarker {
   border: solid 1px #C38A22;
   border-radius: 3px;
   box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.3);
+  z-index: 2147483647;
 }
 
 div.internalVimiumHintMarker span {
@@ -153,7 +153,7 @@ iframe.vimiumHelpDialogFrame {
   display: block;
   position: fixed;
   border: none;
-  z-index: 2139999997; /* Three less than the reference value. */
+  z-index: 2147483647;
 }
 
 div#vimiumHelpDialogContainer {
@@ -320,7 +320,7 @@ div.vimiumHUD {
   border-radius: 4px;
   box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
   border: 1px solid #aaa;
-  z-index: 2139999999;
+  z-index: 2147483647;
 }
 
 iframe.vimiumHUDFrame {
@@ -336,7 +336,7 @@ iframe.vimiumHUDFrame {
   right: 20px;
   margin: 0 0 0 -40%;
   border: none;
-  z-index: 2139999998; /* Two less than the reference value. */
+  z-index: 2147483647;
   opacity: 0;
 }
 
@@ -413,15 +413,15 @@ iframe.vomnibarFrame {
   margin: 0 0 0 -40%;
   border: none;
   font-family: sans-serif;
-  z-index: 2139999998; /* Two less than the reference value. */
+  z-index: 2147483647;
 }
 
 div.vimiumFlash {
   box-shadow: 0px 0px 4px 2px #4183C4;
   padding: 1px;
   background-color: transparent;
   position: absolute;
-  z-index: 2140000000;
+  z-index: 2147483647;
 }
 
 /* UIComponent CSS */

lib/dom_utils.js

@@ -86,7 +86,8 @@ const DomUtils = {
   // Note that adding these nodes all at once (via a parent div) is significantly faster than
   // one-by-one.
   addElementsToPage(elements, containerOptions) {
-    const parent = this.createElement("div");
+    // Don't create a new container if we already have one.
+    const parent = document.getElementById(containerOptions.id) || this.createElement("div");
     if (containerOptions.id != null) parent.id = containerOptions.id;
     if (containerOptions.className != null) parent.className = containerOptions.className;
     for (const el of elements) parent.appendChild(el);