Constrain URL bar drop-down width

[smithfred]

At the moment the drop-down occupies the entire screen width, covering up tabs, despite its actual text contents being constrained to the width of the URL bar.

Instead the drop-down should be the same width as the URL bar (see Web for GNOME design precedent).

[smithfred]

The following is 90% of the way there:

#PopupAutoCompleteRichResult {
    margin-left: 0px !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    max-width: calc(100vw - var(--item-padding-start) - var(--item-padding-end) - 25px) !important;
}
.autocomplete-richlistitem {
    padding: 0 !important;
}

The above sets the drop-down width and position correctly, and removes the LHS/RHS padding from the results (ironically, that was used to position them under the URL bar because the dropdown is 100% width..). It also seems to be robust in terms of different window sizes and variable numbers of spacers.

Unfortunately, there seems (?) to be some JS (_onOverflow()/_onUnderflow()) that truncates the URL text too early (at 50-75% of available dropdown width) - especially noticeable with a narrow window + spaced URL bar.

[smithfred]

And with just a mere one or two more lines, the trivial 10% remaining is solved 🤣

This now kills the JS-set max-widths, and implements the same relative widths for each result (title+tags=2/3, URL=1/3, with title/tags split 1/3 to 2/3 in turn if tags are present) entirely without JS, despite Mozilla's shitty (non-)semantic tag structuring 😁.

The complete CSS:

#PopupAutoCompleteRichResult {
    margin-left: 0 !important;
}
#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    --box-width: calc(100vw - var(--item-padding-start) - var(--item-padding-end) - 25px);
    /* bookmark icon, site icon, separator */
    --fixed-widths: calc((6px + 16px + 6px) + (16px + 9px) + 11px);
    max-width: var(--box-width);
}
#PopupAutoCompleteRichResult .autocomplete-richlistitem {
    padding-left: 0 !important;
    padding-right: 5px !important;
    border-inline-end-width: 0 !important;
    max-width: calc(var(--box-width) - 5px);
    display: flex;
    align-items: center;
}
#PopupAutoCompleteRichResult .ac-type-icon,
#PopupAutoCompleteRichResult .ac-site-icon,
#PopupAutoCompleteRichResult .ac-separator {
    flex: 0 0 auto;
}
#PopupAutoCompleteRichResult .ac-title,
#PopupAutoCompleteRichResult .ac-tags,
#PopupAutoCompleteRichResult .ac-url,
#PopupAutoCompleteRichResult .ac-action {
    flex: 1 0 0;
    min-width: 0;
    max-width: -moz-fit-content;
}
/* Relative widths with tags */
#PopupAutoCompleteRichResult .ac-title {
    flex-grow: 2;
}
#PopupAutoCompleteRichResult .ac-tags {
    flex-grow: 4;
}
#PopupAutoCompleteRichResult .ac-url,
#PopupAutoCompleteRichResult .ac-action {
    flex-grow: 3;
}
/* */
/* Relative widths without tags */
#PopupAutoCompleteRichResult .ac-tags[empty] {
    flex-grow: 0;
}
#PopupAutoCompleteRichResult .ac-tags[empty] ~ .ac-url,
#PopupAutoCompleteRichResult .ac-tags[empty] ~ .ac-action {
    flex-grow: 1;
}
/* */
#PopupAutoCompleteRichResult .ac-text-overflow-container {
    max-width: 100%;
}
#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
#PopupAutoCompleteRichResult .ac-url-text,
#PopupAutoCompleteRichResult .ac-action-text {
    max-width: 100% !important;
    text-overflow: ellipsis;
}

[smithfred]

Screenshot:

[lunakurame]

This code is art, I just copied it without changes (except for indentation since this repo uses tabs) and added as an optional feature. Thanks and good job, that really looks better than the default fat menu.

Also, I added a crapton of icons to the headerbar for testing their popups and I noticed the autocomplete menu kinda glitches out when the window is about 1000px ± 200px wide, works ok if it's smaller or bigger tho.

That's stock FF 57.0.4, seems to depend on the number of headerbar icons, config:

@import "ui/gnome-3.18-dark.css";
@import "ui/hide-single-tab.css";
@import "ui/private-urlbar.css";
@import "ui/matching-autocomplete-width.css";
@import "ui/symbolic-tab-icons.css";

But I'd say that's a minor bug.

[smithfred]

Art? Haha.

It also seems to fail at full width on a 4K screen for no apparent reason (extends all the way to the right). Haven't poked at it to see why - there's no window width assumption in my CSS.

How are you still on Firefox 57? 😂

[lunakurame]

So I'm closing this, if you fix that bug somehow, feel free to create a pull request, for now it's good enough.

I haven't had time to migrate my profiles to FF 58 yet, Mozilla's autoupdates like to wreck them (addons, settings, tabs) for some reason, so I disabled autoupdates and migrate manually when I can. I even still have a not-yet-migrated profile on FF 56. Also a disk in my RAID array started failing, so I had to take care of that ASAP instead of coding... But I didn't lose any data, BTRFS RAID10 is awesome! 👌

[smithfred]

Decided to look at/fix the bug.

One of my other changes in my "layer" to more closely resemble GNOME Web was the following:

/* Max. width for URL bar */
#urlbar-container {
    max-width: calc(129ch + 24px + 2 * var(--toolbarbutton-inner-padding)) !important;
}

Unfortunately when max. width kicks in (~ 2880 px wide window), Firefox suddenly stops setting the --item-padding-start and --item-padding-end vars on #PopupAutoCompleteRichResult which I was using to constrain the dropdown width.

I was already using max-width to set the dropdown width, since Firefox directly sets the width attr on the element (so setting width in CSS does nothing, ugh), so I couldn't just use the same max-width CSS on the dropdown as I was on the URL bar.

And CSS has no min() or ability to apply two max-width constraints.

So, presenting the hackiest hack ever (replace the stanza above with the same selector):

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    --urlbar-max-width: calc(129ch + 24px + 2 * var(--toolbarbutton-inner-padding));
    /* Firefox doesn't set --item-padding-* vars when max. width kicks in on URL bar.
       fallback-hack var. below effectively undoes standard width calc. and applies URL bar max. width calc. instead
       when --item-padding-* are missing. 14px is tweak. */
    --box-width-fallback-hack: calc(100vw - 26px - var(--urlbar-max-width) + 14px);
    --box-width: calc(100vw - var(--item-padding-start, var(--box-width-fallback-hack)) - var(--item-padding-end, 0px) - 26px);
    max-width: var(--box-width);
}

[Tzedekh]

Decided to look at/fix the bug.

One of my other changes in my "layer" to more closely resemble GNOME Web was the following:

/* Max. width for URL bar */
#urlbar-container {
    max-width: calc(129ch + 24px + 2 * var(--toolbarbutton-inner-padding)) !important;
}

Unfortunately when max. width kicks in (~ 2880 px wide window), Firefox suddenly stops setting the --item-padding-start and --item-padding-end vars on #PopupAutoCompleteRichResult which I was using to constrain the dropdown width.

I was already using max-width to set the dropdown width, since Firefox directly sets the width attr on the element (so setting width in CSS does nothing, ugh), so I couldn't just use the same max-width CSS on the dropdown as I was on the URL bar.

And CSS has no min() or ability to apply two max-width constraints.

So, presenting the hackiest hack ever (replace the stanza above with the same selector):

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    --urlbar-max-width: calc(129ch + 24px + 2 * var(--toolbarbutton-inner-padding));
    /* Firefox doesn't set --item-padding-* vars when max. width kicks in on URL bar.
       fallback-hack var. below effectively undoes standard width calc. and applies URL bar max. width calc. instead
       when --item-padding-* are missing. 14px is tweak. */
    --box-width-fallback-hack: calc(100vw - 26px - var(--urlbar-max-width) + 14px);
    --box-width: calc(100vw - var(--item-padding-start, var(--box-width-fallback-hack)) - var(--item-padding-end, 0px) - 26px);
    max-width: var(--box-width);
}

Hate to resurrect an old thread, but I successfully used your CSS with Firefox until the underpinnings of the Quantum Bar were introduced with Firefox 68. Have you given any thought to updating it? I like to constrain the results dropdown to the width of the URL bar.

[rafaelmardojai]

@Tzedekh, this theme is almost unmaintained, now i'm working here: https://github.com/rafaelmardojai/firefox-gnome-theme.

But if you want to continue using this repo for GNOME 3.28 style i can consider pushing a fix.