@@ -361,7 +361,7 @@ class LinkHintsMode {
361
361
// We need documentElement to be ready in order to append links.
362
362
if ( ! document . documentElement ) return ;
363
363
364
- this . hintMarkerContainingDiv = null ;
364
+ this . containerEl = null ;
365
365
// Function that does the appropriate action on the selected link.
366
366
this . linkActivator = undefined ;
367
367
// The link-hints "mode" (in the key-handler, indicator sense).
@@ -379,7 +379,7 @@ class LinkHintsMode {
379
379
this . stableSortCount = 0 ;
380
380
this . hintMarkers = hintDescriptors . map ( ( desc ) => this . createMarkerFor ( desc ) ) ;
381
381
this . markerMatcher = Settings . get ( "filterLinkHints" ) ? new FilterHints ( ) : new AlphabetHints ( ) ;
382
- this . markerMatcher . fillInMarkers ( this . hintMarkers , this . getNextZIndex . bind ( this ) ) ;
382
+ this . markerMatcher . fillInMarkers ( this . hintMarkers ) ;
383
383
384
384
this . hintMode = new Mode ( ) ;
385
385
this . hintMode . init ( {
@@ -402,20 +402,33 @@ class LinkHintsMode {
402
402
}
403
403
} ) ;
404
404
405
+ this . renderHints ( ) ;
406
+ this . setIndicator ( ) ;
407
+ }
408
+
409
+ renderHints ( ) {
410
+ if ( this . containerEl == null ) {
411
+ const div = DomUtils . createElement ( "div" ) ;
412
+ div . id = "vimiumHintMarkerContainer" ;
413
+ div . className = "vimiumReset" ;
414
+ this . containerEl = div ;
415
+ document . documentElement . appendChild ( div ) ;
416
+ }
417
+
405
418
// Append these markers as top level children instead of as child nodes to the link itself,
406
419
// because some clickable elements cannot contain children, e.g. submit buttons.
407
- this . hintMarkerContainingDiv = DomUtils . addElementsToPage (
408
- this . hintMarkers . filter ( ( m ) => m . isLocalMarker ( ) ) . map ( ( m ) => m . element ) ,
409
- { id : "vimiumHintMarkerContainer" , className : "vimiumReset" } ,
410
- ) ;
420
+ const markerEls = this . hintMarkers . filter ( ( m ) => m . isLocalMarker ( ) ) . map ( ( m ) => m . element ) ;
421
+ for ( const el of markerEls ) {
422
+ this . containerEl . appendChild ( el ) ;
423
+ }
411
424
412
425
// TODO(philc): 2024-03-27 Remove this hasPopoverSupport check once Firefox has popover support.
413
426
// Also move this CSS into vimium.css.
414
- const hasPopoverSupport = this . hintMarkerContainingDiv . showPopover != null ;
427
+ const hasPopoverSupport = this . containerEl . showPopover != null ;
415
428
if ( hasPopoverSupport ) {
416
- this . hintMarkerContainingDiv . popover = "manual" ;
417
- this . hintMarkerContainingDiv . showPopover ( ) ;
418
- Object . assign ( this . hintMarkerContainingDiv . style , {
429
+ this . containerEl . popover = "manual" ;
430
+ this . containerEl . showPopover ( ) ;
431
+ Object . assign ( this . containerEl . style , {
419
432
top : 0 ,
420
433
left : 0 ,
421
434
position : "absolute" ,
@@ -431,16 +444,6 @@ class LinkHintsMode {
431
444
this . setIndicator ( ) ;
432
445
}
433
446
434
- // Increments and returns the Z index that should be used for the next hint marker on the page.
435
- getNextZIndex ( ) {
436
- if ( this . currentZIndex == null ) {
437
- // This is the starting z-index value; it produces z-index values which are greater than all
438
- // of the other z-index values used by Vimium.
439
- this . currentZIndex = 2140000000 ;
440
- }
441
- return ++ this . currentZIndex ;
442
- }
443
-
444
447
setOpenLinkMode ( mode , shouldPropagateToOtherFrames ) {
445
448
this . mode = mode ;
446
449
if ( shouldPropagateToOtherFrames == null ) {
@@ -476,7 +479,6 @@ class LinkHintsMode {
476
479
el . style . left = localHint . rect . left + "px" ;
477
480
el . style . top = localHint . rect . top + "px" ;
478
481
// Each hint marker is assigned a different z-index.
479
- el . style . zIndex = this . getNextZIndex ( ) ;
480
482
el . className = "vimiumReset internalVimiumHintMarker vimiumHintMarker" ;
481
483
Object . assign ( marker , {
482
484
element : el ,
@@ -589,7 +591,6 @@ class LinkHintsMode {
589
591
const { linksMatched, userMightOverType } = this . markerMatcher . getMatchingHints (
590
592
this . hintMarkers ,
591
593
tabCount ,
592
- this . getNextZIndex . bind ( this ) ,
593
594
) ;
594
595
if ( linksMatched . length === 0 ) {
595
596
this . deactivateMode ( ) ;
@@ -622,7 +623,6 @@ class LinkHintsMode {
622
623
const localHintMarkers = this . hintMarkers . filter ( ( m ) =>
623
624
m . isLocalMarker ( ) && ( m . element . style . display !== "none" )
624
625
) ;
625
-
626
626
// Fill in the markers' rects, if necessary.
627
627
for ( const marker of localHintMarkers ) {
628
628
if ( marker . markerRect == null ) {
@@ -659,17 +659,16 @@ class LinkHintsMode {
659
659
}
660
660
}
661
661
662
- // Rotate the z-indexes within each stack.
663
- for ( const stack of stacks ) {
662
+ const newMarkers = [ ]
663
+ for ( let stack of stacks ) {
664
664
if ( stack . length > 1 ) {
665
- const zIndexes = stack . map ( ( marker ) => marker . element . style . zIndex ) ;
666
- zIndexes . push ( zIndexes [ 0 ] ) ;
667
- for ( let index = 0 ; index < stack . length ; index ++ ) {
668
- const marker = stack [ index ] ;
669
- marker . element . style . zIndex = zIndexes [ index + 1 ] ;
670
- }
665
+ // Push the last element to the beginning.
666
+ stack = stack . splice ( - 1 , 1 ) . concat ( stack )
671
667
}
668
+ newMarkers . push ( ...stack )
672
669
}
670
+ this . hintMarkers = newMarkers ;
671
+ this . renderHints ( ) ;
673
672
}
674
673
675
674
// When only one hint remains, activate it in the appropriate way. The current frame may or may
@@ -771,10 +770,10 @@ class LinkHintsMode {
771
770
}
772
771
773
772
removeHintMarkers ( ) {
774
- if ( this . hintMarkerContainingDiv ) {
775
- DomUtils . removeElement ( this . hintMarkerContainingDiv ) ;
773
+ if ( this . containerEl ) {
774
+ DomUtils . removeElement ( this . containerEl ) ;
776
775
}
777
- this . hintMarkerContainingDiv = null ;
776
+ this . containerEl = null ;
778
777
}
779
778
}
780
779
@@ -877,7 +876,7 @@ class FilterHints {
877
876
marker . element . innerHTML = spanWrap ( caption ) ;
878
877
}
879
878
880
- fillInMarkers ( hintMarkers , getNextZIndex ) {
879
+ fillInMarkers ( hintMarkers ) {
881
880
for ( const marker of hintMarkers ) {
882
881
if ( marker . isLocalMarker ( ) ) {
883
882
this . renderMarker ( marker ) ;
@@ -886,10 +885,10 @@ class FilterHints {
886
885
887
886
// We use getMatchingHints() here (although we know that all of the hints will match) to get an
888
887
// order on the hints and highlight the first one.
889
- return this . getMatchingHints ( hintMarkers , 0 , getNextZIndex ) ;
888
+ return this . getMatchingHints ( hintMarkers , 0 ) ;
890
889
}
891
890
892
- getMatchingHints ( hintMarkers , tabCount , getNextZIndex ) {
891
+ getMatchingHints ( hintMarkers , tabCount ) {
893
892
// At this point, linkTextKeystrokeQueue and hintKeystrokeQueue have been updated to reflect the
894
893
// latest input. Use them to filter the link hints accordingly.
895
894
const matchString = this . hintKeystrokeQueue . join ( "" ) ;
@@ -910,7 +909,6 @@ class FilterHints {
910
909
911
910
if ( this . activeHintMarker ?. element ) {
912
911
this . activeHintMarker . element . classList . add ( "vimiumActiveHintMarker" ) ;
913
- this . activeHintMarker . element . style . zIndex = getNextZIndex ( ) ;
914
912
}
915
913
916
914
return {
@@ -927,7 +925,7 @@ class FilterHints {
927
925
( keyChar . toLowerCase ( ) !== keyChar ) &&
928
926
( this . linkHintNumbers . toLowerCase ( ) !== this . linkHintNumbers . toUpperCase ( ) )
929
927
) {
930
- // The the keyChar is upper case and the link hint "numbers" contain characters (e.g.
928
+ // The keyChar is upper case and the link hint "numbers" contain characters (e.g.
931
929
// [a-zA-Z]). We don't want some upper-case letters matching hints (above) and some matching
932
930
// text (below), so we ignore such keys.
933
931
return ;
0 commit comments