Layout and color bugs on Windows

[TheNetAdmin]

Describe the bug

I'm using Firefox 105.0.3 on Windows 10, and cascade has layout and color bugs as shown in the screenshot:

1. As #47 mentioned, the tabs are squeezed and overlapped, as shown on the right side of the URL bar
2. The cascade color does not work, everything is just plain color, not as show in the README

   The previous cascade's color also doesn't work on Windows Firefox

3. ~The responsive oneliner style doesn't work, no matter how I change the Firfox window width, it's always oneliner with the above bugs~ Update: not an issue on Windows, I didn't narrow the window enough to trigger the two line style.

This screenshot is taken after a clean install of Firefox, without any add-on or config.

Expected behavior

The tabs should be displayed as show in the README, not squeezed into a tiny region, and colors should work.

Additional info

I found commenting the following line will make the URL bar under the tab bar and that works fine. But I want the oneliner style

https://github.com/andreasgrafen/cascade/blob/504215d1e245cbd135e866e0cb12e0c8e06a0805/chrome/includes/cascade-responsive.css#L4

Screenshots (optional)

[TheNetAdmin]

I might be able to help with debugging on Windows, but IDK where to start. Maybe we can discuss something to try and I can post the results here.

[unseen-ninja]

Uugh, so it is a Windows issue. Part of me just wants to say that I don't support Windows – done.. But yeah, that sadly is not an option, I guess. :D

I'd assume that points 1 and 3 are tightly connected. This is a complete shot in the blue, but could you try to add #TabsToolbar { width: 100% !important; } into the responsive layout file? That should scale the inner Tabbar container to the full width available and I wonder if that at least helps with the One-Line layout on windows. cc: #47

Regarding the colour issue – first of all; good to know that this issue also happens with v2. I'll boldly assume that #48 is Windows related as well. I'd hope that the suggested solution there works, but I don't have the highest of hopes.

[TheNetAdmin]

I've added the line but it still doesn't work:

@media (min-width: 1000px) {

  #navigator-toolbox { display: flex; flex-wrap: wrap; }
  #TabsToolbar { width: 100% !important; }

  #nav-bar {

    order: var(--uc-urlbar-position);
    width: var(--uc-urlbar-min-width);

  }

  #titlebar {

    order: 2;
    width: calc(100vw - var(--uc-urlbar-min-width) - 1px);

  }

  #PersonalToolbar {

    order: var(--uc-toolbar-position);
    width: 100%;

  }

  #navigator-toolbox:focus-within #nav-bar { width: var(--uc-urlbar-max-width); }
  #navigator-toolbox:focus-within #titlebar { width: calc(100vw - var(--uc-urlbar-max-width) - 1px); }

}

[TheNetAdmin]

And problem 3 seems to be not an issue, I just did not narrow the window enough... I have a wide screen and didn't realize what 1000px should look like on this screen.

[unseen-ninja]

Meh… It was worth a shot. But, wait.. that screenshot regarding your third point still shows the overflow indicators for the tab bar. That kinda makes it seem like this is not an issue with the One-Line layout, but happens as a general problem.

I really wonder what causes this.. could you, just for the sake of it, try to set the same line as mentioned above in the regular layout include? It didn't change anything on the One-Line layout, so I'd assume that this wouldn't result in this being fixed, but better be safe than sorry. c:

[TheNetAdmin]

I've tried but it still doesn't work, here is the code:

#TabsToolbar { width: 100% !important; }

:root {

  --toolbarbutton-border-radius: var(--uc-border-radius) !important;
  --tab-border-radius: var(--uc-border-radius) !important;
  --arrowpanel-border-radius: var(--uc-border-radius) !important;

}

#main-window,
#toolbar-menubar,
#TabsToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar { box-shadow: none !important; }

#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar {

  -moz-appearance: none !important;
  border: none !important;

}

/* remove "padding" left and right from tabs */
.titlebar-spacer { display: none !important; }

#PersonalToolbar {

  padding: 6px !important;
  box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important;;

}

#statuspanel #statuspanel-label {

  border: none !important;
  border-radius: var(--uc-border-radius) !important;

}

And screenshots

[unseen-ninja]

Okay, so I'm on a borrowed windows machine now. The issue is that for some reason the Titlebar just has an effective width of 0 no matter how much space there is and no matter what value is set via CSS. It just refuses to take up space, which is .. weird.

[unseen-ninja]

Update.. the overflow indicators are only showing up on the Tabbar if the Browser Window has been in Oneline Mode before. If the window opens in stacked everything looks and works fine. So the Issue is def. somewhere within the responsive layout..

[unseen-ninja]

Okay.. turns out that Windows has inherant issues with flexbox itself when it comes to laying out UI elements.. This kinda makes this unfixable tho, as the alternatives (i.e. -moz-box) don't allow for the same amount of customisation.

But using the same method as used in v2 we can at least achieve a simple version of the One-Line layout (tho without any of the reorderding capabilities) on windows. To do this simply replace the responsive include with:

@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; }

}

It would be awesome if you could confirm that this works wor you too; I'd then push this as an alternative config file for windows users to include.

[TheNetAdmin]

Right this works for the layout issue:

Thanks for the workaround! I don't really need the reordering so it's good enough for me. I'd suggest putting a note in README so others can find this workaround.

BTW how about the color issue, is there any change to get it to work on Windows? Though not an emergent issue.

[unseen-ninja]

Okay, very nice! I'll package that fix and put a note underneath the installation section on the readme. c: Thanks a lot for staying through this with me.

Regarding the colours.. I can't reproduce the issue of them not showing up. I can make it look as horrible as I want. Can you apply different colour schemes — i.e. removing the colour include and using regular Firefox Themes to change the colours?

[TheNetAdmin]

The color is weird, if I change the dark/light for Window, the Firefox title bar does switch but not respecting the cascade color.

I now suspect it's something to do with Wallpaper Engine, but quitting WE does not give the correct Firefox titlebar color...

[TheNetAdmin]

But the firefox theme extensions do work

[unseen-ninja]

Well, since #48 mentions this Issue too I'm not sure if we can just blame it on Wallpaper Engine. It also doesn't make much sense if that would influence the colours of Firefox, no? But if regular Firefox Themes work that's something at least. Another workaround for the colours, using Firefox Color use this custom theme. I've just quickly thrown this together but it produces an almost identical result. c:

[TheNetAdmin]

I think cascade color partially works on my firefox, maybe part of cascade color is overridden by theme extensions. Any way to entirely disable the firefox theme?

When using the default "System theme -- auto" Theme Extension, and cascade color commented

When using the default "System theme -- auto" Theme Extension, and cascade color NOT commented

When using the "Google Chrome Light" Theme Extension, and cascade color commented

When using the "Google Chrome Light" Theme Extension, and cascade color NOT commented

[TheNetAdmin]

Well, since #48 mentions this Issue too I'm not sure if we can just blame it on Wallpaper Engine. It also doesn't make much sense if that would influence the colours of Firefox, no? But if regular Firefox Themes work that's something at least. Another workaround for the colours, using Firefox Color use this custom theme. I've just quickly thrown this together but it produces an almost identical result. c:

Aha let me try this "Firefox Color"

[TheNetAdmin]

Firefox Color gives me something so guess I'll just play with it, although not exactly as shown in your figure. Here's mine, there is no small glowing bar on top of several tabs, is that from an add-on?

[TheNetAdmin]

The issue is pretty much resolved for me, so I'm closing it for now. Thank you @andreasgrafen for taking the time and fix the issue.

[unseen-ninja]

I'm a little upset that both solutions are just workarounds, but they do work. I gotta thank you for going through the different steps of resolving this. Your feedback really sped this up a lot! c:

The glowing line on top of some tabs is caused by Container Tabs and is the indicator which container the tab is using.