Keep closeboxes over other elements to keep them clickable

webextensions/sidebar/styles/base.css

@@ -49,7 +49,27 @@
 
   --multiselected-color: transparent;
   --multiselected-color-opacity: 0.15;
+
+  /* z-index of elements: we should define them here to keep their strict priorities */
+  --invisible-z-index:       -100;
+  --dummy-element-z-index:   1; /* dummy tab */
+  --background-z-index:      10; /* background screen */
+  --accessible-ui-z-index:   100; /* tabbar itself, and others */
+  --over-tabs-z-index:       100; /* buttons after tabs, pinned tabs (required to make pinned tabs clickable) */
+  --over-buttons-z-index:    200; /* buttons on buttons after tabs */
+  --notification-ui-z-index: 9000;
+  --blocking-ui-z-index:     10000; /* frontmost of others */
+
+  --tab-extra-contents-behind-z-index: 10;
+  --tab-base-z-index:                  100;
+  --tab-burster-z-index:               4000;
+  --tab-highlighter-z-index:           5000;
+  --tab-attention-z-index:             5500;
+  --tab-extra-contents-front-z-index:  6000;
+  --tab-ui-z-index:                    9000;
+  --tab-drop-marker-z-index:           10000;
 }
+
 tab-item {
   --tab-current-size: var(--tab-size);
   --attention-marker-x-offset: calc(0px - ((var(--tab-current-size) - var(--favicon-size)) / 2) + ((var(--tab-current-size) - var(--faviconized-tab-size)) / 2));
@@ -123,7 +143,7 @@ button {
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 100;
+  z-index: var(--accessible-ui-z-index);
 }
 
 #tabbar {
@@ -145,7 +165,7 @@ button {
 #background {
   background-color: -moz-dialog; /* This is required to cover dummy elements. See also: https://github.com/piroor/treestyletab/issues/1703#issuecomment-354646405 */
   pointer-events: none;
-  z-index: 10;
+  z-index: var(--background-z-index);
 }
 
 /* put scrollbar leftside */
@@ -179,7 +199,7 @@ ul {
   pointer-events: none;
   position: fixed;
   right: 0;
-  z-index: 1; /* Put it below the background. See also: https://github.com/piroor/treestyletab/issues/1703#issuecomment-354646405 */
+  z-index: var(--dummy-element-z-index); /* Put it below the background. See also: https://github.com/piroor/treestyletab/issues/1703#issuecomment-354646405 */
 }
 
 #dummy-favicon-size-box {
@@ -231,7 +251,7 @@ tab-item * {
 
 tab-item > * {
   position: relative;
-  z-index: 100;
+  z-index: var(--tab-base-z-index);
 }
 
 tab-item.hidden {
@@ -256,7 +276,7 @@ tab-item.duplicating {
   margin-top: calc(0px - var(--tab-size));
   opacity: 0;
   pointer-events: none;
-  z-index: -100;
+  z-index: var(--invisible-z-index);
 }
 
 tab-item:not(.pinned).collapsed.collapsed-completely {
@@ -309,19 +329,19 @@ tab-item .extra-items-container.front {
   left: var(--tab-label-start-offset);
   pointer-events: auto;
   right: var(--tab-label-end-offset);
-  z-index: 6000;
+  z-index: var(--tab-extra-contents-front-z-index);
 }
 
 tab-item:not(.bursting) .burster {
   display: none;
 }
 
 tab-item .highlighter {
-  z-index: 5000;
+  z-index: var(--tab-highlighter-z-index);
 }
 
 tab-item .burster {
-  z-index: 4000;
+  z-index: var(--tab-burster-z-index);
 }
 
 tab-item.faviconized.unread tab-favicon::before,
@@ -333,11 +353,11 @@ tab-item.attention tab-favicon::before {
   right: auto;
   top: var(--attention-marker-y-offset);
   width: var(--faviconized-tab-size);
-  z-index: 10;
+  z-index: var(--tab-attention-z-index);
 }
 
 tab-item .extra-items-container.behind {
-  z-index: 10;
+  z-index: var(--tab-extra-contents-behind-z-index);
 }
 
 
@@ -348,7 +368,7 @@ tab-item.pinned {
   border-left: none;
   margin: 0;
   position: fixed;
-  z-index: 1; /* this is required to make pinned tabs clickable */
+  z-index: var(--over-tabs-z-index);
 }
 
 tab-item.pinned:not(.faviconized) {
@@ -430,6 +450,7 @@ tab-closebox {
   line-height: 0;
   opacity: var(--button-opacity);
   position: relative;
+  z-index: var(--tab-ui-z-index);
 }
 
 tab-closebox::after {
@@ -529,7 +550,7 @@ tab-item.faviconized .contextual-identity-marker {
   overflow: visible;
   position: absolute;
   right: 0;
-  z-index: 100;
+  z-index: var(--over-tabs-z-index);
 }
 
 
@@ -592,7 +613,7 @@ tab-item.faviconized .contextual-identity-marker {
   position: absolute;
   top: 0;
   transition: opacity var(--collapse-animation);
-  z-index: 200;
+  z-index: var(--over-buttons-z-index);
 }
 :root.contextual-identity-selectable
   .after-tabs
@@ -761,7 +782,7 @@ iframe#subpanel {
   position: fixed;
   right: 0;
   top: 0;
-  z-index: 10000;
+  z-index: var(--blocking-ui-z-index);
 }
 
 :root.blocking-throbber #blocking-screen {

webextensions/sidebar/styles/drag-and-drop.css

@@ -29,7 +29,7 @@ tab-item[data-drop-position]:not([data-drop-position="self"])::before {
   border-radius: var(--tab-dropmarker-size);
   overflow: hidden;
   position: absolute;
-  z-index: 10000;
+  z-index: var(--tab-drop-marker-z-index);
 }
 tab-item[data-drop-position]:not([data-drop-position="self"]).faviconized::before {
   max-height: none;
@@ -68,7 +68,7 @@ tab-item-drop-blocker {
   min-height: calc(var(--favicon-size) / 5);
   min-width: calc(var(--favicon-size) / 5);
   position: fixed;
-  z-index: 100000;
+  z-index: var(--blocking-ui-z-index);
 }
 
 :root.debug tab-item-drop-blocker {
@@ -122,7 +122,7 @@ tab-item-drop-blocker#tab-drop-blocker-left {
   position: fixed;
   transition: opacity var(--collapse-animation);
   right: 0;
-  z-index: 2000;
+  z-index: var(--notification-ui-z-index);
 }
 
 #tab-drag-notification.shown {

webextensions/sidebar/styles/favicon.css

@@ -18,14 +18,17 @@ tab-favicon {
   position: relative;
   white-space: pre;
   width: var(--favicon-size);
+
+  --favicon-base-z-index:            20;
+  --favicon-preferred-image-z-index: 100;
 }
 tab-item tab-favicon,
 tab-item tab-favicon * {
   vertical-align: baseline;
 }
 tab-item tab-favicon * {
   position: relative;
-  z-index: 20;
+  z-index: var(--favicon-base-z-index);
 }
 
 .favicon-image {
@@ -121,7 +124,7 @@ tab-item.group-tab tab-favicon:not(.error) .favicon-image[src] {
   max-width: 10px;
   position: absolute;
   right: 0;
-  z-index: 100;
+  z-index: var(--favicon-preferred-image-z-index);
 }
 
 

webextensions/sidebar/styles/sound-button.css

@@ -21,7 +21,7 @@ tab-sound-button {
   padding: 0;
   position: relative;
   width: var(--sound-button-size);
-  z-index: 9000; /* higher than extra items container */
+  z-index: var(--tab-ui-z-index);
 }
 
 tab-item.faviconized tab-sound-button::before,

webextensions/sidebar/styles/twisty.css

@@ -19,6 +19,7 @@ tab-item tab-twisty {
   transform-origin: 50% 50%;
   white-space: pre;
   width: var(--favicon-size);
+  z-index: var(--tab-ui-z-index);
 }
 
 :root.animation tab-item:not(.collapsed) tab-twisty {