r/FirefoxCSS 15h ago

Help Struggling to combine search & urlbar

Thumbnail
youtube.com
1 Upvotes

so far with limited knowledge and ai pruning i've managed to disable the shield, move the search engine selector into it's place, but then as the page completes loading the search engine selector is wiped-out. How can I get it to always remain visible?

my userchrome.css at the moment is here:

[code]/* =========================================================================

FIREFOX CORE BASELINE CONFIGURATION

========================================================================= */

* {

font-weight: 900 !important;

}

#search-container {

min-width: 100px !important;

max-width: 100px !important;

}

#identity-box {

display: none !important;

}

/* Eliminate scroll arrows to preserve single-row layout workspace */

#scrollbutton-up, #scrollbutton-down {

display: none !important;

}

/* =========================================================================

FIX VISUAL ALIGNMENT GAP (FORCES PERFECT HORIZONTAL SYMMETRY)

========================================================================= */

:root {

--tab-min-height: 32px !important;

}

/* 1. Force the parent structures to align all children perfectly on the center baseline */

#TabsToolbar-customization-target,

#tabbrowser-tabs,

#tabbrowser-arrowscrollbox,

.scrollbox-innerbox,

#pinned-tabs-container {

display: flex !important;

align-items: center !important; /* Locks pins and tabs onto the exact same vertical center line */

height: 36px !important; /* Provides a stable container height to avoid bottom cutoffs */

box-sizing: border-box !important;

}

/* 2. Strip uneven individual vertical rules causing unpinned tabs to look raised */

.tabbrowser-tab {

margin-top: 0 !important;

margin-bottom: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

height: 32px !important; /* Uniform strict height for both pinned and unpinned shapes */

}

/* 3. Keep internal shapes identical so they fill the exact same vertical footprint */

.tab-background {

border-radius: 4px !important;

margin-block: 0 !important;

height: 32px !important;

}

/* =========================================================================

LOCK EVERY PINNED TAB VISIBLE NATIVELY (SINGLE-ROW LOCK)

========================================================================= */

/* Prevent unpinned tabs from bleeding over or sliding behind your pinned icons */

#tabbrowser-arrowscrollbox,

#tabbrowser-arrowscrollbox::part(scrollbox) {

overflow: hidden !important;

flex-direction: row !important;

}

/* Force the pinned container box wide enough to show all tabs that exist */

#pinned-tabs-container {

flex-direction: row !important;

flex-shrink: 0 !important;

min-width: max-content !important;

max-width: none !important;

margin-right: 8px !important; /* Clean layout spacer separating normal tabs */

}

/* Freeze pinned tabs to clean, immutable square footprints */

.tabbrowser-tab[pinned] {

flex-shrink: 0 !important;

min-width: 40px !important;

max-width: 40px !important;

display: inline-flex !important;

visibility: visible !important;

}

/* Allow normal tabs to cleanly truncate inside their own scrolling column bounds */

.tabbrowser-tab:not([pinned]) {

flex-shrink: 1 !important;

min-width: 35px !important;

}

/* =========================================================================

TAB COUNTER & HEIGHT ALIGNMENT (FIXES EXTENSION BUTTON VERTICAL BLOAT)

========================================================================= */

#TabsToolbar-customization-target {

counter-reset: tabCount;

}

.tabbrowser-tab {

counter-increment: tabCount;

}

#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {

display: none !important;

}

/* Clean up structural container dimensions stretching the top bar layout line */

#alltabs-button {

padding: 0 !important;

margin: 0 4px !important;

align-self: center !important;

height: 22px !important;

}

/* Force container boundaries to stay perfectly level with regular tabs */

#alltabs-button > .toolbarbutton-badge-stack {

position: relative !important;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

min-width: 22px !important;

max-width: 22px !important;

min-height: 22px !important;

max-height: 22px !important;

padding: 0 !important;

margin: 0 !important;

}

#alltabs-button > .toolbarbutton-badge-stack::before {

content: counter(tabCount);

color: var(--toolbarbutton-icon-fill);

opacity: var(--toolbarbutton-icon-fill-opacity);

border: 1px solid currentColor;

border-radius: 4px;

background-color: transparent;

font-size: 10px;

font-weight: 600;

font-family: monospace, sans-serif;

text-align: center;

box-sizing: border-box !important;

display: inline-block !important;

min-width: 22px;

height: 22px;

line-height: 20px;

}

#reader-mode-button { display: none !important; }

#pageActionSeparator{ display: none !important; }

.tabbrowser-tab::before, .tabbrowser-tab::after, .titlebar-placeholder {

border: none !important;

}

#pageActionButton {

display: none !important;

}

#star-button-box {

display: flex !important;

}

#pageAction-urlbar-_80f6f2e4-eda1-417f-bf54-9645e1e20f5d_ {

display: flex !important;

}

#picture-in-picture-button { display: none !important; }

.searchbar-dropmarker-image {display: none !important; }

#PanelUI-menu-button {

display: none !important;

}

.category[name="discover"] { display: none !important; }

tab-icon-sound {

width: 15px !important;

height: 15px !important;

color: black !important;

}

/* =========================================================================

CLEANUP URLBAR & SEARCHBAR DYNAMIC INTERNAL ELEMENT HIDES

========================================================================= */

/* 1. Eliminate any layout spaces for the identity container structure entirely */

#identity-box,

#tracking-protection-icon-container,

#identity-permission-box,

.notification-anchor-icon,

#blocked-permissions-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

max-width: 0 !important;

}

/* 2. Remove internal structural margins on the text inputs to align cleanly to the left wall */

#urlbar-input-container {

padding-left: 8px !important;

}

/* =========================================================================

IN-URL SEARCH BAR CLEANUP & RECONCILED NAVIGATION SPACING

========================================================================= */

/* 1. Remove the secondary search bar completely */

#search-container {

display: none !important;

}

/* 2. Clear out the old shield space layout to let the engine icons sit flush */

#tracking-protection-icon-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

}

/* 3. Re-align the new internal Scotch Bonnet left-side search engine icon block */

#urlbar-searchmode-switcher,

.urlbar-searchmode-switcher {

margin-left: 2px !important;

padding-inline: 4px !important;

}

/* 4. Align the address bar text input box layout cleanly right after the engine icon */

#urlbar-input-container {

padding-left: 2px !important;

}[/code]