Top bar broken in full screen (Mac)

dude681 commented 2 months ago

Captchas

[X] I have read the instructions.
[X] I have searched existing issues and avoided creating duplicates.
[X] I am not filing an enhancement request.

What happened?

When in full screen mode on macos and the top bar is hidden the top bar is almost completely covered by the gray stoplight bar that appears when hovering near the top of the screen (only in full screen mode), in base firefox and other browsers the top bar moves down with the gray bar to remain fully visible.

Reproducible?

[X] I have checked that this issue cannot be reproduced on Mozilla Firefox.

Version

1.0.1-a.7

What platform are you seeing the problem on?

macOS - aarch64

Relevant log output

No response

linear[bot] commented 2 months ago

ZEN-1867 Top bar broken in full screen (Mac)

Richard-Woessner commented 1 month ago

I'm not sure if this is a Zen issue or something with macOS, but I've noticed it happening in other apps too. When it happens, I usually just move my mouse to the top of the screen (like you would to bring up the toolbar), and that seems to make it disappear.

greeeen-dev commented 1 month ago

Looks like a Zen issue. From what I'm seeing, sidebar gets a translateY attribute assigned, but the navbar doesn't.

greeeen-dev commented 1 month ago

Yep, found the issue in src/browser/base/content/browser-fullScreenAndPointerLock.js:

...
let toolbox = gNavToolbox;
if (shiftSize > 0) {
  toolbox.style.setProperty("transform", `translateY(${shiftSize}px)`);
  toolbox.style.setProperty("z-index", "2");

  // If the mouse tracking missed our fullScreenToggler, then the toolbox
  // might not have been shown before the menubar is animated down. Make
  // sure it is shown now.
  if (!this.fullScreenToggler.hidden) {
    this.showNavToolbox();
  }
} else {
  toolbox.style.removeProperty("transform");
  toolbox.style.removeProperty("z-index");
}
...

This seems to be the code responsible for doing the translation. Here, only the sidebar gets the translation, but not the navbar. Maybe something like this could help:

...
let toolbox = gNavToolbox;
let navbar = document.getElementById('zen-appcontent-navbar-container');
if (shiftSize > 0) {
  toolbox.style.setProperty("transform", `translateY(${shiftSize}px)`);
  toolbox.style.setProperty("z-index", "2");
  navbar.style.setProperty("transform", `translateY(${shiftSize}px)`);
  navbar.style.setProperty("z-index", "2");

  // If the mouse tracking missed our fullScreenToggler, then the toolbox
  // might not have been shown before the menubar is animated down. Make
  // sure it is shown now.
  if (!this.fullScreenToggler.hidden) {
    this.showNavToolbox();
  }
} else {
  toolbox.style.removeProperty("transform");
  toolbox.style.removeProperty("z-index");
  navbar.style.removeProperty("transform");
  navbar.style.removeProperty("z-index");
}
...

Do note that I haven't tested this code, and this is just a suggestion I came up with after digging through the JS files. The team will probably have a different way in mind to implement this.

mr-cheff commented 1 month ago

browser-fullScreenAndPointerLock

this file doesnt exist

greeeen-dev commented 1 month ago

browser-fullScreenAndPointerLock

this file doesnt exist

It does exist:

mr-cheff commented 1 month ago

It doesn't exist on zen's source code and you mentioned src/browser/base/content/browser-fullScreenAndPointerLock.js

greeeen-dev commented 1 month ago

Thought I'd just reference the file like that so you can know where the patch file should be created. My bad for the confusion

But anyways the problematic file still seems to be browser-fullScreenAndPointerLock.js, like I said it's only translating the sidebar and not the navbar

dosubot[bot] commented 1 week ago

Hi, @dude681. I'm Dosu, and I'm helping the desktop team manage their backlog. I'm marking this issue as stale.

Issue Summary:

The top bar is obscured by the gray stoplight bar in full screen mode on macOS, unlike other browsers.
Issue reported on version 1.0.1-a.7 for macOS aarch64.
User greeeen-dev suggested a potential cause related to translateY transformation in browser-fullScreenAndPointerLock.js.
mauro-balades noted that the mentioned file does not exist in the Zen source code, causing confusion about the file path.

Next Steps:

Please confirm if this issue is still relevant with the latest version of the desktop repository by commenting here.
If there is no further activity, this issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

dude681 commented 1 week ago

The bug is still present and relevant

dosubot[bot] commented 1 week ago

@mauro-balades, the user @dude681 has confirmed that the bug regarding the top bar being obscured in full screen mode on macOS is still present and relevant. Could you please assist them with this issue?

zen-browser / desktop