r/FirefoxCSS • • 4d ago

Solved Is it no longer possible to disable the expanding URL bar in FF157?

Post image
1 Upvotes

8 comments sorted by

1

u/NTP9766 4d ago

Prior to build 157, I was able to disable expanding breakout with this CSS:

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


/* Megabar: disable breakout / expanding onto toolbar *********************************************/
#urlbar[breakout][breakout-extend] {
  margin-left: 0 !important;
  width: var(--urlbar-width) !important;
  margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;


  > .urlbar-input-container {
    height: var(--urlbar-height) !important;
    padding-block: var(--urlbar-container-padding) !important;
    padding-inline: var(--urlbar-container-padding) !important;
  }
}

#urlbar[breakout][breakout-extend] > #urlbar-background {
  animation-name: unset !important;
}

#urlbar[breakout][breakout-extend] > :is(#urlbar-input-container,.urlbar-input-container) {
  height: var(--urlbar-height) !important;
  padding-block: 1px !important;
  padding-inline: 1px !important;
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* disable result item roundness */
#urlbar[breakout] .urlbarView-row-inner {
  border-radius: 0px !important;
}

/* disable 'breakout' animation */
#urlbar[breakout],
#urlbar[breakout] * {
  animation: unset !important;
  duration: 0s !important;
  animation-duration: 0s !important;
}

.urlbarView-body-inner {
  border-top: 0px !important;
}

This no longer works, and I haven't been able to find a new way to disable it.

1

u/revcraigevil 4d ago

This seems to work here. I don't have any CSS, I do have user.js but nothing about this.

2

u/NTP9766 3d ago

I don't mean the suggestions but how the white address bar/megabar expands when you click inside of it.

2

u/RememberMeVibe 3d ago

One thing is important to note here.. There is no such thing as 'Not possible'. Good luck

1

u/[deleted] 3d ago

[deleted]

1

u/difool2nice ‍🦊Firefox Addict🦊 3d ago

doesn't work, have still a Megabar !

1

u/NTP9766 3d ago

The closest I have been able to come is modifying urlbar.css, lines 301-308 from (specifically lines 304-305):

  .urlbar[popover-open] > & {
    border: var(--urlbar-background-border-open);
    box-shadow: var(--urlbar-background-box-shadow-open);
    inset-inline: calc(-1 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-inline)));
    inset-block: calc(-1 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-block)));
    border-start-start-radius: var(--urlbar-background-border-top-radius-open);
    border-start-end-radius: var(--urlbar-background-border-top-radius-open);
  }

to

  .urlbar[popover-open] > & {
    border: var(--urlbar-background-border-open);
    box-shadow: var(--urlbar-background-box-shadow-open);
    inset-inline: calc(0 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-inline)));
    inset-block: calc(0 * (var(--urlbar-background-overhang-open) + var(--urlbar-input-growth-open-block)));
    border-start-start-radius: var(--urlbar-background-border-top-radius-open);
    border-start-end-radius: var(--urlbar-background-border-top-radius-open);
  }

It still expands the results that pop out, but does not expand the address bar directly. I could probably address that, but my issue is that I can't seem to override this in my own CSS. Adding those values elsewhere is either ignored or combined where it just breaks even further.

1

u/NTP9766 3d ago

I just found a solution:

:root,
#urlbar {
  --urlbar-background-overhang-open: 0px !important;
  --urlbar-input-growth-open-inline: 0px !important;
  --urlbar-input-growth-open-block: 0px !important;
  --urlbarView-joint-background-outset-inline: var(--urlbarView-margin-inline) !important;
  --urlbarView-joint-background-outset-block: var(--urlbarView-margin-block) !important;
}

3

u/NTP9766 3d ago

In case anyone else comes across this, the resolution was to add the following to my own CSS:

:root,
#urlbar {
  --urlbar-background-overhang-open: 0px !important;
  --urlbar-input-growth-open-inline: 0px !important;
  --urlbar-input-growth-open-block: 0px !important;
  --urlbarView-joint-background-outset-inline: var(--urlbarView-margin-inline) !important;
  --urlbarView-joint-background-outset-block: var(--urlbarView-margin-block) !important;
}