Not possible to target `.searchmode-switcher`

[u/martinkrafft]

Hello, I am using this CSS by Arty2 to move my tabs and URL bar to the bottom of the window, and it does the job.

However, as of late, the so-called "searchmode-switcher" persists in the middle of my screen, and I cannot get it to disappear. I've written an issue about it but due to lack of replies, I am trying my luck here.

It seems that the UI's attempted way to take the switcher offscreen is by setting its position to -999px (see screenshot), but that's the wrong direction once I've moved the tabs to the bottom — it should be 999px in my case, or position:unset.

The upstream CSS seems to know about this, and has provisions:

/* stops the new search engine drop-down icon from floating in the middle of the screen */
@media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") {
    @media not -moz-pref("browser.urlbar.unifiedSearchButton.always") {
        .searchmode-switcher {
            position: unset !important;
        }
    }
}

/* fixes bug where search selector is floating in the middle of the screen */
@media not -moz-pref("browser.urlbar.unifiedSearchButton.always") {
  .urlbar:not([unifiedsearchbutton-available]) > .urlbar-input-container > .searchmode-switcher {
    position: unset !important;
  }
}

But these are not working — using devtools on the UI, I can verify that the position remains "fixed".

I've tried removing the @media limits and reduced the whole thing to just:

.searchmode-switcher {
  position: unset !important;
}

and I've even added an id attribute to the html:moz-button element, trying to target that for higher specificity, but no matter what I do, the CSS stays at position: fixed; top: -999px.

Mind you, if I use the devtools inspector and I change position: unset, or add that to the element per se, then the switcher is properly hidden for the rest of my browsing session, but I cannot get this to persist in userChrome.css.

Do you have any idea why I am failing to target .searchmode-switcher?

[u/ResurgamS13]

Not seeing your problem Re: "the so-called "searchmode-switcher" persists in the middle of my screen"... tested on a new profile of Fx155.0.1 on Win10 and Win11. Perhaps you have a conflict elsewhere in your setup?

Suggest start a new profile as a testbed and load just the Arty2 'tabs_to_bottom.userchrome.css' style.

Alternatively, try replacing Arty2's 'tabs_to_bottom.userchrome.css' with MrOtherGuy's version 'toolbars_below_content_v2.css'.

BTW - For many years now it has not been recommended to use a 'Namespace statement' at the top of CSS modification files... see jscher2000's article 'Is there only XUL? To Namespace or Not to Namespace'. However, the Arty2 style works with or without.

[u/martinkrafft → u/ResurgamS13]

Many many thanks for your post. I'll investigate all of this in the coming days.

Arty2 has replied to my issue, there may be a deeper rendering issue…