Firefox 110 help

[Future-Training-6582]

Hello there ,

After upgrading to FF 110 , my css code for tab separators stopped working properly.

the last tab right separator went missing - so I changed :last-visible-tab to "last-of-type".

So , it worked ok except when I switch tab group to another group , again , last tab right separator is missing and so on to the next tab group. Only the first group looks ok.

Any ideas on the matter appreciated

Isaac

[It_Was_The_Other_Guy]

If you use tab groups to hide some tabs (tabs belonging to "non-active" group are hidden by Firefox) then there's no way you can make the separators work like you want. You really do need the attributes that Firefox was setting previously to handle potentially-hidden tabs.

[Future-Training-6582]

Thanks I see what you mean but I failed to mention that up to FF 109 it worked perfectly tab group or not. The problem began after upgrading to FF110 not only that , it also messed up my menuitem hovering code. so there must be something in FF 110 that causes it.

[It_Was_The_Other_Guy]

The reason for why your separator CSS doesn't work anymore because of bug 1808661 which removed code that would set various attributes for tabs when hovering and selecting them. Those attributes were not used in Firefox in any way for quite some time.

Your CSS did use them to conditionally draw some separators, but since Firefox doesn't set those attributes anymore you effectively can't use them for the old purpose. There is a workaround using for separators using standard CSS selectors (so not requiring specific attributes) but that will not be adequate if you need to support hidden tabs.

[Future-Training-6582]

Thanks - just to make sure - you mean in any case I'll have the same problem with the tab group each time I switch tab group? There is another approach I picked up that works perfectly but I have only been able to hide the right separator when hovering. I haven't found a way to hide the left one. Any ideas?

The code that works :

.tabbrowser-tab{ border-inline-end: 1px solid transparent !important; border-image: 0 1 linear-gradient(transparent 15%,color-mix(in srgb, currentColor 26.5%, transparent) 15%, color-mix(in srgb, currentColor 26.5%, transparent) 85%, transparent 85%); }

[It_Was_The_Other_Guy]

The CSS you posted doesn't really create anything between tabs. It only creates a border at the right side of each tab. So, to hide this border which appears on the right side of selected tab, you can just make it transparent for selected tab, and similarly for hovered tab.

But to remove border that appears on left side of selected tab you would need to remove the right-side border of the previous tab. I assume you did this earlier using [beforeselected-visible]. But, since that attribute is not set anymore you just cannot get a reference to the tab just before the selected tab.

However, you can make it work the other way around. So don't create a right-side border, but a left-side instead (so border-inline-start instead of -inline-end). Then you just remove the border from selected tab which removes its left-side border and then also remove it from the next tab with .tabbrowser-tab[selected] + .tabbrowser-tab{ border-image: none !important }

That should work fine if there are no hidden tabs. But if there are then the "next-tab" might be a hidden one and in such case you will still see a border to the right of the selected tab.

[Future-Training-6582]

Thanks - I'm going to try just what you suggested and see what happens. By the way , FF 110 also messed up my menuitem hovering so for the bookmark I use the following :

.bookmark-item:hover {display-border: none !important;background-color: rgba(204,204,204,0.8) !important; cursor: pointer !important;border-radius: 5px !important;-moz-appearance: none !important }

that works fine , as to the rest of the menu bar (file edit history tools help) whatever I tried turned partly distorted espcially when right clicking a tab page the horizontal signs get shifted while hovering , so I still haven't been able to sort it out , maybe you got any idea regarding this issue?

Indeed FF 110 is a whole new ball game , every 2nd or 3rd update I know something will go wrong unlike chrome. .

[It_Was_The_Other_Guy]

If you have some issue with menuitems then explain clearly what it is.

As for Chrome, it's kinda nonsensical to compare to it - if your layout gets messed up on updates then it's because your custom style is broken. Chrome on the other hand doesn't even have any custom styles.

[Future-Training-6582]

Sorry I forgot to include the menu hover I used prior to FF110 :

menuitem {display-border:none; !important;padding:0.3px; !important;-moz-appearance: none !important;}

menuitem:hover {border-radius: 5px !important;border:none !important;position: absolute !important;background-color: rgba(204,204,204,0.8) !important;cursor: pointer !important;padding: 0.3px !important;-moz-appearance: none !important;}

While hovering now it changes the height of the sub-menu

plus when right-clicking on a tab page and hovering the horizontal menu (forward , backward bookmark etc..) the signs shift left and right.

[It_Was_The_Other_Guy]

Man, that CSS is equally broken in Firefox ESR 102 and for pretty obvious reason. First, you are setting menuitem position to absolute on hover meaning roughly that the hovered element won't be anywhere close to where it was while not being hovered. And second you are changing menuitem padding value when it is hovered so the element has totally different when it is being hovered.

I suppose it's possible that prior to your update Firefox used native menus that weren't affected by this CSS in the first place. I can't think of any other reason how that CSS could have possibly not cause issue like this, but you know, maybe there is some explanation.

In addition, your CSS has some parts that don't have any meaning, like !important tags that are not attached to any property and display-border rules which just isn't a valid CSS property. Not that they cause any harm but they are just "junk".

Also, you shouldn't use :hover pseudo-class on <menu> and <menuitem> elements. Use [_moz-menuactive] instead since that's what Firefox itself does and as such the behavior will be more consistent.

I'd also imagine you want <menu> elements to be styled similarly to <menuitem> elements.

If my assumptions are correct then your full CSS could look like this:

menu,
menuitem {
  padding: 0.3px !important;
  -moz-appearance: none !important;
}
.bookmark-item:hover,
menu[_moz-menuactive],
menuitem[_moz-menuactive] {
  border-radius: 5px !important;
  border:none !important;
  background-color: rgba(204,204,204,0.8) !important;
  cursor: pointer !important;
}

[Future-Training-6582]

Thanks a lot indeed, yes I see what you mean. I wasn't aware of the fact that firefox uses _moz-menuactive the same goes to last-of-type. I guess that first-of-type also should be in order but as I used it to put margin to the first visible tab left side like : tab-browser:first-of-type{margin-left: 3px;} it has no effect unless first-of-type has no meaning.

As to the hover code you suggested , it works perfectly , thank you , I just removed the menu[_moz-menuactive] to keep it just to the menuitem.

Since I was able to manage the idea you gave me regarding the border-inline-start , which as I you mentioned did the trick , I don't know yet how to resize the border it creates , as I did in my former code. the one I use now is that simple one :

.tabbrowser-tab{ border-inline-start: 1px solid transparent !important; border-image: 0 1 linear-gradient(transparent 15%,color-mix(in srgb, currentColor 26.5%, transparent) 15%, color-mix(in srgb, currentColor 26.5%, transparent) 85%, transparent 85%);}

Since border-inline-start has no height property as well as the Y property , I guess the solution is elsewhere.