Multiple bugs with new update

[Zabooby]

Describe the bug I made a fresh profile to test the new updates, installed it as instructed and am coming across several issues. The only setting I changed was --uc-urlbar-min-width: 0vw.

Currently icons are in the wrong place and overlap, the tab bar isn't visible, sometimes the oneline breaks and the tab bar shows separately.

My guess is that the default settings are messing things up?

The video below will showcase the bugs I'm experiencing.

Expected behaviour Taken from my current setup, when not focused the url bar shrinks so the top bar can be entirely filled with tabs.

Video

https://user-images.githubusercontent.com/78969986/195978684-a238c1b0-71ce-4e3c-90cd-d979ac2fc0eb.mp4

[unseen-ninja]

That indeed doesn't look good. I've tried a couple of things but can't reproduce this behaviour at all which makes it harder to approach. If you rightclick the toolbar and go into the customisation settins, are there any additional items or spacers placed in there that could cause this to break?

bar.webm

[Zabooby]

I always clean up the toolbar when installing Firefox, got rid of the spacers and the rest of it.

I also noticed that the bookmarks bar is above tab/url bar

In my current setup I also have these enabled in about:config could that be making a difference?

layers.acceleration.force-enabled gfx.webrender.all svg.context-properties.content.enabled

Like the option to change the url width is there something for tab widths?

[unseen-ninja]

Hmm.. so it's not the spacers or anything; there goes my best guess. Does it also switch to the tab overflow mode when you just have one or two tabs open? o:

If you want the Toolbar to be below the Nav- and Tab Bar you can change that in the settings file by setting the variable to 4. Since Cascade is using Flexbox under the hood this really is just the flex-order property being set.

  /*  Position of the Personal Toolbar
   *  possible values:
   *  0 – toolbar on top
   *  4 – toolbar on bottom
   */ --uc-toolbar-position: 4;

The Tab width can also be changed in the config file tho this really only affects the widths of the individual tabs and should not have any influence on the Tab Bar itself.

  /*  Allow tabs to have dynamic widths based on
   *  the Tab Bars maximum width
   */ --uc-active-tab-width:   clamp(100px, 30vw, 300px);
      --uc-inactive-tab-width: clamp(100px, 20vw, 200px);

The extra settings you've mentions also don't make a difference as I have them enabled too, they're just not necessary for Cascade which is why I removed them from the install instructions.

[Zabooby]

Ok after reinstalling it again, making sure the toolbar was completely cleaned up and moving some icons around the overlapping is fixed and the oneline doesn't break like in the video. With min width of the url bar as 0 it is working as expected.

The only issues that are still happening are the tabs not showing and the bookmarks bar being at the top.

I'll check the config file when I'm at my pc.

[Zabooby]

Toolbar is now in the right place.

It goes into tab overflow mode when I have one tab open.

[unseen-ninja]

That's so weird … I've tried a lot to reproduce this. Fullscreen, non-fullscreen, adding spacer, moving around icons.. There is nothing that breaks it like this on my end. The only thing I can think of now is that it might be system specific for some reason?

In your first screenshot you have window control buttons, but they don't appear in the video. The screenshot also shows the tab like it should be which is even more confusing.. o: I'm sorry, but right now I have no idea how to tackle this issue. :/

[Zabooby]

Oh, that was taken from my current setup which is using the old cascade setup.

Are you on windows too?

[unseen-ninja]

ooh! Okay, so there is a difference. And no, I've only tested this on Mac and Linux. I've banished Windows from my machines ages ago.. Maybe I should set up a VM for testing purposes. I'll do that right away and hopefully that will help in resolving this.

[Zabooby]

Fair enough, I've browsed r/unixporn and have been tempted to switch in the past.

Just spitballing, maybe its a scaling issue, I'm running 1920x1080 at 100% (windows usually recommends 125% at my res).

[unseen-ninja]

It seems like flexbox (within the Firefox UI) is inheritly broken on Windows. In order to fix the One-Line layout on windows please substitute the responsive include with the version for windows. This will ensure that the layout doesn't break but since it can't use flexbox the UI reordering does not work.

[Zabooby]

As minimising the url bar won't work, is there any point for me to even change from my current setup, everything else will be the same?

Is it worth making a post on r/firefoxcss about flexbox to see if anyone can help or is there nothing that can be done by css enthusiast?

[unseen-ninja]

Ah, right.. the hidden URL Bar. You could try the following CSS snippet, this is close to what my first tests for that feature were, but it in 1 out of 50 cases bugs out for some reason.

@media (min-width: 1000px) {

  #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 10px) calc(100vw - var(--uc-urlbar-min-width)) 0 0 !important; }
  #titlebar { margin-inline-start: var(--uc-urlbar-min-width) !important; }

  #navigator-toolbox:focus-within #nav-bar { margin-inline-end: 100vw !important; }
  #navigator-toolbox:focus-within #titlebar { width: 100vw !important; }

}

I've been in touch with a couple people about this already, but no luck so far. Maybe reaching out to a broader set of people would help. I'll give it a shot. c:

[Zabooby]

I replaced this with the snippet but all it does is black out the url bar. :(

[unseen-ninja]

Okay, so … turns out I shouldn't answer with code snippets I wrote without testing shortly after waking up … Jeebus I completely butchered that. I gave it a quick shot and this one should work

@media (min-width: 1000px) {

  #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 10px) calc(100vw - var(--uc-urlbar-min-width)) 0 0 !important; }
  #titlebar { margin-inline-start: var(--uc-urlbar-min-width) !important; }

  #navigator-toolbox:focus-within #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 10px) calc(100vw - var(--uc-urlbar-max-width)) 0 0 !important; }
  #navigator-toolbox:focus-within #titlebar { margin-inline-start: var(--uc-urlbar-max-width) !important; }

}

Sorry for that. o:

[Zabooby]

Np, this works but the url bar doesn't show on hover, only when I use a hot key. Also it takes up the whole bar when in focus but I should be able to change one of the numbers to fix that right?

How close can you get to the functionality of using flexbox with this method?

[unseen-ninja]

To make it work on hover too this should be the code to go. Also updated to respect the values set in the cascade config file. c:

@media (min-width: 1000px) {

  #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 12px) calc(100vw - var(--uc-urlbar-min-width)) 0 0 !important; }
  #titlebar { margin-inline-start: var(--uc-urlbar-min-width) !important; }

  #navigator-toolbox:focus-within #nav-bar,
  #navigator-toolbox:hover #nav-bar { margin: calc((var(--urlbar-min-height) * -1) - 12px) calc(100vw - var(--uc-urlbar-max-width)) 0 0 !important; }

  #navigator-toolbox:focus-within #titlebar,
  #navigator-toolbox:hover #titlebar { margin-inline-start: var(--uc-urlbar-max-width) !important; }

}

The functionality is like 75- to 80-ish percent of what flexbox can do? Flex just makes it a lot easier and less error prone I feel like.

[Zabooby]

Ok, almost there, the url bar pops out whenever I hover tabs, should only show when hovering over the top left corner.

[unseen-ninja]

Ha! uhm, I don't think as long as CSS :has() — which it is not in Firefox currently and doesn't work for userChrome even when enabled feate a feature flag — is not fully supported there is no way to target previous siblings of an element. But since it would require a :hover on the URL Bar which after the Tab Bar to trigger this properly, there is no way to achieve this. :/

[Zabooby]

I guess I'll stick to cascade v2 then, thanks for all the help though! :)

[unseen-ninja]

Sure thing. In case I find a solution I'll make sure to let you know! c: