2038764 - Remove Nova outer window padding when the window is fullscreen

Status: RESOLVED FIXED

(Firefox :: Theme, task, P1)

Description

[Stephen Thompson [:sthompson]]

The Nova chrome specs https://www.figma.com/design/XT0eDYh4RtbMNWaYQi0efM/Chrome-Sidebar-UX-Specifications--Sprint-1-?node-id=10043-83845&t=L4R4SSXZPd2qfopo-0 have the effect of creating a window "background" and the chrome blocks float on top of that background with a few pixels of spacing between and around each chrome block.

The current Nova specs do not specify exceptions to the spacing between/around chrome blocks, but there have been a few user reports of issues.

Maximized windows

• bug 2038022 clicking on the edges of maximized windows won't do anything; current clicking behavior can select tabs at the top, close firefox via X button, scroll scrollbars

Windows snapped to the sides of a screen

• bug 2026247 especially when snapped to the right side of a screen in a LTR locale, the scrollbar is several pixels away from the edge of the screen

Comment 1

[Stephen Thompson [:sthompson]]

:juliana would like to see us remove the outer window padding in all fullscreen modes (DOM fullscreen, OS fullscreen). I think this would address the linked bugs.

Comment 2

[Dão Gottwald [:dao]]

(In reply to Stephen Thompson [:sthompson] from comment #1)

:juliana would like to see us remove the outer window padding in all fullscreen modes (DOM fullscreen, OS fullscreen). I think this would address the linked bugs.

Afaik DOM fullscreen (e.g. fullscreen youtube videos) already work that way as they don't show any browser UI, right? Do you mean the OS UI being hidden, such that Firefox fills the entire window (F11 on Windows and Linux, dunno about macOS)?

OS fullscreen on the other hand is a bit of a fuzzy term, so... does this mean maximized windows on Windows and Linux?

Comment 3

[Stephen Thompson [:sthompson]]

I'm sad to report that https://searchfox.org/firefox-main/rev/c8c933829aec7786146f4dc5a11c575d9dcda258/browser/themes/shared/tabbrowser/content-area.css#32 applies in DOM fullscreen, so it needs to be updated.

I know DOM fullscreen is a real term, but I am not sure how to refer to the operating system's maximized window behavior. I can see outer window padding in macOS when the chrome document has [sizemode="fullscreen"] and bug 2038022 mentioned maximized windows on Windows 11. I'm guessing that's [sizemode="maximized"] but sounds like it's worth confirming on Windows.

Comment 4

[breakingspell]

This design regression is crippling in Linux (KDE/X11/Wayland) and denies Fitt's Law and cursor memory, specifically for the top tab row. Please refer to BUG 1919115 for a demonstration of the correct behavior.

The solution is simple, the outside border should only be visible in floating window mode, never while tiled or fullscreen.

Comment 5

[9ldbhhih]

Yes, any Firefox UI devs here? Please don't add the outer padding when maximized. It's so unintuitive to hover, choose and click the tabs now. And it just wastes more spaces for nothing.

Comment 6

[Stephen Thompson [:sthompson]]

This bug is going to remove the fullscreen window padding before Nova ships.

I would also like to remove the padding when a window is tiled, but I am not certain whether we have any signals in the frontend/UI that a window is tiled by the OS. We can look into that while fixing this bug.

Comment 7

[breakingspell]

I would also like to remove the padding when a window is tiled, but I am not certain whether we have any signals in the frontend/UI that a window is tiled by the OS

Not sure about other OS/DE, but yes KDE/Kwin should expose the tiled state to Firefox (Tiled: 1).

Much work was done to fix these top-screen-pixel interactions last year for both Wayland and X11, I'm hoping the notes in that previous thread will be useful to retain the behavior

Comment 8

[Dão Gottwald [:dao]]

On Linux we get the gtktiledwindow attribute on the root element.

Comment 10

[Sam Foster [:sfoster] (he/him)]

Attachment: Bug 2038764 - Remove unwanted decoration from DOM fullscreen and f11 fullscreen. r?#desktop-theme-reviewers!

• Remove all the padding etc for DOM fullscreen
• Leave the content radius and margin below the toolbars in f11 fullscreen for a better transition when showing the chrome

Comment 11

[Sam Foster [:sfoster] (he/him)]

Attachment: dom-fullscreen-f11-fullscreen-demo.mp4

The video shows

• transitioning the DOM fullscreen. This takes an element (in this case the <video>) and makes it fill the screen entirely - no borders, no padding, nothing.
• Then, f11 to "full screen". This state removes almost all the chrome and makes the content take up pretty much all of the screen. In this state, notice the thin gap and rounded border around the content. I think this is what we want?
• The video then shows hovering at the top edge to show the toolbars. Having the top padding and border makes more sense in this state. Otherwise those rounded corners would pop in when you show the toolbars.

Comment 12

[Sam Foster [:sfoster] (he/him)]

I left consideration of maximized windows and tiled windows out of this patch - it sounds like we have more questions to answer there which might benefit from locking in on how we're thinking about this smaller fullscreen scope first.

Comment 13

[breakingspell]

maximized windows and tiled windows.

I'm personally much more concerned for this use case than F11 fullscreen. Will it be handled in another bug?

Comment 14

[Dão Gottwald [:dao]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #12)

I left consideration of maximized windows and tiled windows out of this patch - it sounds like we have more questions to answer there which might benefit from locking in on how we're thinking about this smaller fullscreen scope first.

What questions specifically?

Comment 15

[Dão Gottwald [:dao]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #11)

• Then, f11 to "full screen". This state removes almost all the chrome and makes the content take up pretty much all of the screen. In this state, notice the thin gap and rounded border around the content. I think this is what we want?

F11 traditionally lets content take up the entire screen (except for the new sidebar ignoring that, bug 1927457), all chrome hidden except for a black 1px line as a mouse target for temporarily showing toolbars. The round corners and extra gaps and borders go against that basic concept and look weird when touching the screen edge, so I don't think we want these at all.

• The video then shows hovering at the top edge to show the toolbars. Having the top padding and border makes more sense in this state. Otherwise those rounded corners would pop in when you show the toolbars.

So for F11 specifically (i.e. inFullscreen), do we need round corners when showing toolbars or could we suppress those completely?

Comment 16

[Merci chao]

In addition, will the toolbox block still have a border when the margin is hidden?

Comment 17

[Vadim Makeev]

Attachment: macos-tiles.mp4

In native macOS tiled windows, it steals around 18px from each window for no good reason: 664px > 646px.

But the most annoying is the full-screen case: I had to disable Nova to deliver a talk using a browser-based slide deck. Otherwise, a thick white box wouldn’t go away.

Comment 18

[Sam Foster [:sfoster] (he/him)]

I've got a patch on here for the DOM Fullscreen and f11 fullscreen cases. The maximized window thing is still in active discussion. I've put leave-open on here for now, but we might break that out into a different bug depending on where we land with it.

The open questions are really about how the nova design language plays with a maximized window. Do we remove the outer padding and some rounded corners in that case?

Then for maximized vs. tiled windows - we set sizemode="maximized" for a maximized windows, but I dont think that's true for a tiled window. A spot check in windows 11 and Ubuntu with the Tiling Assistant extension gives me sizemode="normal". And AIUI that is the ask in this bug. So we would need to add something to support maximized-like chrome CSS for these cases.

Comment 19

[Dão Gottwald [:dao]]

(In reply to Sam Foster [:sfoster] (he/him) from comment #18)

The open questions are really about how the nova design language plays with a maximized window. Do we remove the outer padding and some rounded corners in that case?

Yeah I think so. I seem to remember that the compact mode design asked for the same basically? If so I'd use that as a starting point.

Then for maximized vs. tiled windows - we set sizemode="maximized" for a maximized windows, but I dont think that's true for a tiled window. A spot check in windows 11 and Ubuntu with the Tiling Assistant extension gives me sizemode="normal". And AIUI that is the ask in this bug. So we would need to add something to support maximized-like chrome CSS for these cases.

See:
(In reply to Dão Gottwald [:dao] from comment #8)

On Linux we get the gtktiledwindow attribute on the root element.

We might need platform support for Windows and macOS.

Comment 20

[breakingspell]

The open questions are really about how the nova design language plays with a maximized window. Do we remove the outer padding and some rounded corners in that case?

On the outer padding, absolutely. I would move to disable any visible borders by any means if they remained while maximized. Rounded corners are another discussion. Windows 11 and KDE Plasma decorations are already rounding corners on Firefox windows and removing them while maximized or tiled.

---

In my use case of maximizing and tiling windows, it is to make the most of my screen space, no entertaining whitespace, padding, or dividers. If a badly designed webpage has content centered with visible whitespace on the sides, I immediately tile it to fit the content properly. Any unnecessary outer or inner padding by the browser steals pixels from both the browser elements and page content.

Floating windows are the only single condition that should warrant outer padding, and each pixel used for that purpose should be weighed carefully against the screen space taken away from the content. Match the desktop environment's standard border width, for instance, but never exceed it, and ensure it can be disabled with a straightforward CSS tag.

---

Ubuntu with the Tiling Assistant extension gives me sizemode="normal"

It sounds like you're using GNOME. It ships with a top menubar just like MacOS, so the benefits of Fitt's Law in web browsers are unknown to those users. Please ensure this design is tested on KDE Plasma as well, in it's default configuration (panel on bottom, tiling extends to top).

I've tested with Browser Toolbox to confirm your findings: sizemode="maximized" while maximized and normal when tiled or floating. This also applies to KDE/Plasma Kwin (Wayland and X11) and Windows 10+11. Unfortunately, this does mean that work will be required on those platforms if that element will be used to track the tiled state.

To note, at the moment the Firefox experience on Plasma 6 with tiling is impeccable, so whatever it's doing elsewhere, it's doing right.

Comment 21

[Merci chao]

Attachment: win11-tiles.mp4

On Windows 11, padding should be removed on a maximized window to preserve accessibility for clicking tabs, window control buttons, and the scrollbar (as well as the sidebar button?).

In tiled mode, however, the cursor cannot interact with any elements along the screen edges, so padding makes no practical difference in a tiled window on Windows 11. I'm not sure about Windows 10, but it's probably the same.

Comment 22

[Sam Foster [:sfoster] (he/him)]

Thanks for all the input here on tiling and maximized window behavior. I'm splitting that piece off into bug 2054183 as we'll tackle it separately.
This might evolve further as we're getting UX specs to clarify, but all the comments here brought what had been overlooked UX to light so its much appreciated.

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/2d4b0d0b6622
https://hg.mozilla.org/integration/autoland/rev/946450f7746d
Remove unwanted decoration from DOM fullscreen and f11 fullscreen. r=desktop-theme-reviewers,tabbrowser-reviewers,dao

Comment 24

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/946450f7746d

Comment 28

[Ania]

Sam, noting the spec for maximized state is here.