Top of Photon Tabs not clickable when using Compact Mode on FF 101+

[jairrencora]

Describe the bug When using Compact Density and clicking on the top of a tab, instead of clicking the tab, the click event is relayed to the window. Previously it changed to the tab being clicked, that behavior is also still present on Normal Density. See video for more information.

Expected behavior When clicking the top of the tab, Firefox should change to that tab

Screenshots Please note, I don't know how to capture clicks visually, but while traversing through tabs I was clicking them to try to switch to them but as can be seen, nothing happens. I show in the recording the buggy behavior on Compact density and also the correct behavior on Normal Density. If there is a problem with the file host, let me know where it is appropriate to upload the recording. https://we.tl/t-PdgJoLnffj

https://user-images.githubusercontent.com/25581533/166869151-b39a7ba3-bb46-441b-9a2b-74ca4f810b84.mp4

Environment:

• Distribution
  • [ ] Original Lepton
  • [X] Lepton's photon style
  • [ ] Lepton's proton style
• Firefox Version: 101.0.b2 and 102.0.a1
• OS:
  • [ ] Linux
  • [X] Windows
  • [ ] Mac
  • [ ] Other:
• Theme:
  • [ ] Light
  • [X] Dark
  • [ ] Alpenglow (System: Light)
  • [ ] Alpenglow (System: Dark)
  • [ ] System Default
    • GTK Theme Name (Linux only):
  • [ ] Other: (e.g. Photon Colors, Google Chrome Dark, Fairytale Of Nature)

user.js setup Default for Lepton Photon Fix 5.0.2

Additional context Bug only seems to happen on Compact Density and seems to have been caused by Firefox update 101. Hopefully the fix isn't outside of the scope of this project.

[tokariu]

it appears that this is the cause of the issue:

i fixed it for myself overwriting the code with:

:root[tabsintitlebar][sizemode="maximized"] #titlebar {
appearance: unset !important;
}

haven't tested for side effects, though. but this might be a fix.

[black7375]

Oh..Thank you I'll check it. It's a bit tricky issue.

[jairrencora]

Tried @tokariu 's fix. It fixes the issue, but for me, it adds a thick dark border to all context menus. Also causes the screenshot function to display the selection grid completely dark. I'm using dark theme.

EDIT: Tested the screenshot issue on Dark Theme a bit more, noticed it doesn't happen everywhere. For example, it doesn't happen on Github issues, but it does on the Firefox Homepage (https://www.mozilla.org/en-US/firefox/). Also tested on Light Theme. Borders on context menu are present, though they are shade of white. Couldn't reproduce the issue on the screenshot tool using Light theme. Using FF 102.0.b2

[tokariu]

@jairrencora I'm only using FF v101.0, I don't have these issues, everything seems to be fine for now. Seems FF 102.0.b2 introduces new problems which I'll probably face first when v102 becomes live. Reading the upstream issues though, there might be new issues coming with v102..

[jairrencora]

Yes @tokariu . Just saw this has been reported in Issue 401 as an issue in FF 102.0.b2 . It seems I added your fix at the same time my FF got updated and I mistakenly assumed it was due to the fix, when it was caused by the update. Please disregard my previous comment.

[black7375]

@jairrencora Can I close this issue?

[UncleScrooge85]

Starting with FF 101 they have added a "window frame" bar on top of the tabs, thus slightly increasing the height that the top bars take on screen and reducing the available vertical space for web contents (again).

I suppose this issue is related to this change. Is it possible to fix the UI to make it as it was before?

[phx7]

it appears that this is the cause of the issue:

i fixed it for myself overwriting the code with:

:root[tabsintitlebar][sizemode="maximized"] #titlebar {
appearance: unset !important;
}

haven't tested for side effects, though. but this might be a fix.

Works just fine for me, big thanks. No issues found yet, context menus look unchanged.

[jairrencora]

@black7375 No, please. The original issue that I reported is still valid. Only my second comment about (what I thought were) side-effects from tokariu's fix is to be disregarded since it was related to issue Issue 401, but the original issue of the space between tabs and window in Compact mode is still present unless the fix is applied.

[black7375]

I tried to try VM because the windows computer was broken.

In general, @tokariu solution seems to work well. Try to use the last commit.

[black7375]

It seems to have been solved by the latest nightly. #414 It will be changed to the compatibility option in the next release.

[duncanyoyo1]

This is still an issue for me on FF version 103.0.2, using latest master b7d3da3a0b57d0cf3350310a09022eab933098cc

Compact mode tabs are still not clickable from the top of the screen when maximized. Have to move down 2px.

I tried @tokariu's fix but it didn't seem to work for me. I didn't notice any change.

[hiyokosan]

There is no entry for userChrome.compatibility.os.windows_maximized in the user.js file.

After adding the above item.

 :root[tabsintitlebar][sizemode="maximized"] #titlebar { 
/* -moz-default-appearance: -moz-window-titlebar */
  appearance: none ! 
  padding-top: 0px; 
}

This solved the problem.

[black7375]

First of all, I will open the issue again.

[duncanyoyo1]

 :root[tabsintitlebar][sizemode="maximized"] #titlebar { 
/* -moz-default-appearance: -moz-window-titlebar */
  appearance: none ! 
  padding-top: 0px; 
}

There is no entry for userChrome.compatibility.os.windows_maximized in the user.js file.

Mine certainly has a userChrome.compatibility.os.windows_maximized entry. Line 67. But it's commented out by default, and there's a spelling mistake.

It is currently user_pref("userChrome.compatibility.os.windows_maximized, true"); instead of user_pref("userChrome.compatibility.os.windows_maximized", true);

That said, even enabling it and adding the css you showed did not make the tabs clickable from the top of the screen. And it actually made the area above the tabs larger.

I ended up setting margin-top: -8px; and it's working for me now.

So to summarize what I did to get it working ( probably not correct, I am no CSS master ),

1. Fix line 67 in user.js by uncommenting the line and moving the quotation marks to the correct location.
2. Added the following to leptonChrome.css

 :root[tabsintitlebar][sizemode="maximized"] #titlebar { 
 /* -moz-default-appearance: -moz-window-titlebar */
   appearance: none ! 
   padding-top: 0px; 
   margin-top: -8px;
 }

This was on FF 104.0 and latest master 02fa9bd036ff416f100689bedebf94f3af8c61b1

[hiyokosan]

Thanks for fixing user.js.

Correction regarding the above css. It seems that the "!important" is needed instead of "appearance: none;". Also, it seems that "padding-top: -6px" is not necessary.

[duncanyoyo1]

When I don't have the negative margin I get this,

Might be difficult to see, but there is extra space above the tabs that is not clickable.

With the margin it looks like below,

Not sure why this is the case as I haven't changed anything else.

After some testing it seems I only actually need this,

:root[tabsintitlebar="true"][sizemode="maximized"] #titlebar { 
 margin-top: -8px;
} 

[Urist0595]

How has this still not been fixed yet? The last reply here is the clear solution to the issue, why hasn't it been implemented yet after months of updates? Getting tired of having to fix this every time I install a new version.

[black7375]

@Urist0595 What version of Firefox do you use? It seems to work well in the latest version.

[Urist0595]

@Urist0595 What version of Firefox do you use? It seems to work well in the latest version.

I'm using the latest version of Firefox. I was previously using the ESR version of Firefox but I switched to the latest version in hopes that this problem would stop happening, but it still is.

[hiyokosan]

Does it reproduce if I try a new profile?

[black7375]

It is not reproduced when you run v102.6.0ESR and v108.0.1 versions in Windows10.

https://user-images.githubusercontent.com/25581533/208485478-1c930304-2075-4412-b770-abd28127c3ee.mp4

https://user-images.githubusercontent.com/25581533/208485601-91917e9f-8441-4ab2-8ef8-81aad4a5d6c0.mp4

---

It is possible to reproduce if there is more accurate information about OS version and Firefox version.

[Urist0595]

OS Version is Windows_NT 10.0 19045 and Firefox version is 108.0.1 according to the about:support page.

[Urist0595]

Does it reproduce if I try a new profile?

I just tried making a new profile, and the issue did not reproduce. The top bar was clickable without me needing to edit leptonChrome.css like I always do. So for some reason this only happens on my default profile.

[black7375]

Is the userChrome.compatibility.os.windows_maximized option to true in about:config? If it is true, try to modify it to false.

[Urist0595]

Is the userChrome.compatibility.os.windows_maximized option to true in about:config? If it is true, try to modify it to false.

It was set to true, I just set it to false. After reinstalling Lepton on the default profile, the top bar was clickable. Thanks a lot, it looks like that was the issue.