Top bar broken in full screen (Mac)

[dude681]

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]]

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

[Richard-Woessner]

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]

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

[greeeen-dev]

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.

[mauro-balades]

browser-fullScreenAndPointerLock

this file doesnt exist

[greeeen-dev]

browser-fullScreenAndPointerLock

this file doesnt exist

It does exist:

[mauro-balades]

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

[greeeen-dev]

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