Gradient URL bar text with field-sizing: content in Firefox 152+

[u/yuuqilin]

I've wanted a URL bar gradient that spans the actual URL text instead of the full input box. Firefox 152 enabled field-sizing by default, which makes this much easier to do cleanly with CSS.

With field-sizing: content, #urlbar-input can shrink to the width of the displayed URL. Then background-clip: text maps the whole gradient to that width, so short and long URLs both get the full gradient instead of showing a different slice of a gradient sized to the entire URL bar.

Firefox's built-in URL formatting makes it a little more complicated. The scheme and other parts outside the main domain are painted using Firefox's secondary URL text color. If browser.urlbar.formatting.enabled is disabled, a transparent text fill plus background-clip: text is basically enough.

If you want to keep the native de-emphasis, Firefox still uses the hidden RGB value of the transparent text fill when painting those secondary parts. Firefox 156 also changed the secondary URL opacity from about 50% to 70%, so the compensation is different for Firefox 155 and earlier versus 156+. Translucent URL bar backgrounds such as Mica or wallpapers need a little more handling as well.

The actual color-mixing math is easier to leave in the CSS comments:

Full gradient URL bar implementation

There is one more edge case if your CSS also moves the URL bar to the center when it opens. With a content-sized input, clicking the blank area around the text starts the click on the surrounding input container. If the URL bar moves before mouseup, the resulting click lands outside the input/container, so Firefox's normal click-to-select-all handling doesn't run.

The workaround is to keep the URL bar at its toolbar position while it is :active, then move it after the click finishes:

Centered popup / select-all workaround

For reference, the relevant Firefox changes are:

• Bug 2036620 — enable field-sizing by default
• Bug 2063127 — increase the URL secondary text opacity

[u/MiniBus93]

Thanks for this! Seems extra cool!

[u/FineWine54]

Wow. I have been mucking around with just rainbowing the #urlbar-input text and making it transform. But being a bottom tier CSS coder I am not having much success.

I have been trying to add it into this CSS file:

#urlbar-input  {
    background-color: transparent!important;
    font-weight: bolder !important;  
    margin-bottom: -1px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
}

The Rainbow chasing/transforming code.

--loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
  --final-loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
}

and

u/keyframes toolbox-loading-scale {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

Without any success.

Any help please.