1404074 - White space at the edge of the window with Light/Dark theme in windowed mode with compact UI density

Status: RESOLVED WORKSFORME

(Firefox :: Theme, defect, P4)

Description

[Edo Karabas]

Attachment: border.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20170928100123

Steps to reproduce:

After bug 1403951 landed (which fixed issues with Light/Dark themes after bug 
1366405) there seems to be a minor bug with a Light theme. Maybe it also affects Dark theme but I can not see any issues with this theme, however is still possible that dark color is just hiding it. 
In case of Light theme 2 px from top of the browser are not rendered and showed as white.

Comment 1

[Edo Karabas]

Yep, it is also affecting Dark theme, the line is not white but black and since the Dark theme is very dark (almost black) it's almost invisible.

Comment 2

[Edo Karabas]

It seems to be affecting only Compact density since only in this density there is a small gap above tabs in windowed mode. Looks good in Normal / Touch.

Comment 3

[Dão Gottwald [:dao]]

The border is actually there, but there's another white line next to it.

Comment 4

[Edo Karabas]

It's a minor glitch for sure. Maybe it is fixable from the other side since the question is why is there a 2px gap in windowed mode between top border of the tab and border of the browser. I don't think there is such gap in specs and it serves no purpose. In other densities there isn't.

Comment 5

[Kestrel]

userChrome.css workaround:

> :root[uidensity="compact"] > #titlebar {
>  margin-bottom: -31px !important;
> }

Comment 6

[Edo Karabas]

(In reply to Kestrel from comment #5)
> userChrome.css workaround:
> 
> > :root[uidensity="compact"] > #titlebar {
> >  margin-bottom: -31px !important;
> > }
not quite right,
although it basically fixed the point of this bug (no more gap with the white space), but regressed the maximized state.. title bar is too narrow and the tab highlight is not visible...

Comment 7

[Kestrel]

> :root[uidensity="compact"][sizemode="normal"] > #titlebar {
>   margin-bottom: -31px !important;
> }

Comment 8

[Edo Karabas]

Looks good to me, and it doesn't seem to break anything else. All themes are fine and behaviour is consistent with normal and touch density options.
The gap above tabs in windowed mode in compact density is not here also: http://design.firefox.com/people/shorlander/photon/Mockups/windows-10.html
so it basically fixed two things,
https://s1.postimg.org/8v5fpy9j4f/window.png

@Dao is this the way to do it ? Looks like an easy fix, can you look at it again if you have time pls ?

Comment 9

[Dão Gottwald [:dao]]

That's fine as userChrome.css workaround, but it's not a proper fix we can ship with Firefox.

Comment 10

[Edo Karabas]

I'm just wondering if this bug and bug 1398395 are not related together. The unnecessary space below caption buttons in windowed compact mode is about the same as unnecessary space above tabs in windowed mode. Moving everything a bit "up" could solve both issues or better saying three issues, since white/black space above tabs are due to this space which is not as per spec.

Comment 13

[Likivik]

If suggested userChrome fix doesn't cut it, where does one look for a proper solution?
I assume the negative margin is not hard coded? So, if I wanted to fix this do I look for a place where it is calculated?
I really want this fixed, and would like to help if I can. Just need some pointers.

Comment 14

[Kestrel]

The 2px gap above the tabs in compact density mode is correctly themed with light/dark themes both with and without titlebar accent color on latest Nightly 67. The gap itself is Bug 1398395.

Fix window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=0b162c810600246a9273f337c8b23481f7f721f1&tochange=e1f93e89556df2f1147ad2ef2cb38b1309d44ad4

Fixed by Bug 1503306.