Spacing and Alignment

[maymage]

Hi all,

as you can see here on Firefox-Youtube-PWA with

Hamburger Menu
--> More tools
-- > Customize toolbar
--> Density

set to Touch

the following issues occur on the headerbar

• Youtube icon and YouTube text to the left are not centered
• the Hamurger Menu is not aligned close to the Close Button, which is disturbing in comparison to other apps on my system

---

This is on

• Fedora 38
• GNOME 44.2
• FirefoxPWA 2.6.1
• Firefox 114.0.2

[filips123]

I don't know why the icon and title aren't vertically centered for you. I tested it on Fedora GNOME and it appears fine, even when using the touch density. Does it also happen if you create a fresh profile?

By default, the icon and title are left aligned on all platforms (other than macOS), because there are quite a lot of different desktop environments and configuration options, and it's hard to detect which style should be used, so there is just a single default (Windows-like) style. However, you can add custom CSS yourself to customize how the icon bar should look.

For example, for a more GNOME-like experience, you can add this CSS to your userChrome.css:

@-moz-document url('chrome://browser/content/browser.xhtml') {
  /* Horizontally center the title element */
  .site-info {
    justify-content: center !important;
  }

  /* Remove the icon element */
  .tab-icon-image {
    display: none !important;
  }

  /* Remove space between hamburger menu and window controls */
  .titlebar-spacer[type="post-tabs"] {
    width: 0 !important;
  }
}

With those changes, this is how the titlebar should look:

You also need to enable toolkit.legacyUserProfileCustomizations.stylesheets inside about:config for this to work. However, centering the title horizontally currently doesn't work because of a bug. I'll fix it in the next version.

[maymage]

Hi,

thanks for the tips..

So I

• created a new clean profile
• customized the topbar
  • removing all removable icons
  • switched to touch density

The result with the non vertically centered left icon and title remains.

Readding some icon to the topbar makes icons and title correctly vertically centered!

[filips123]

Interesting, I'll check if I can fix this.

[maymage]

For example, for a more GNOME-like experience, you can add this CSS to your userChrome.css

I applied, as suggested under ~/.local/share/firefoxpwa/PROFILE/chrome/userChrome.css

This is what I get

Effect

• Hamburger Menu correctly close to the Close Button
• Icon vanished - actually I liked it
• Title not centered

---

Aside: I wonder, whether you could not create a copy-to-terminal script to apply the theme to all PWAs like for the Firefox GNOME theme here

[filips123]

Those two bugs (text not being centered vertically when there are no icons and inability to center horizontally with custom CSS) will be fixed in the next release.

That script to copy CSS to all existing profiles is kinda out-of-scope for this project. However, you could instead use profile templates to add CSS once as a template and copy it to all new profiles. In the extension settings, you can enter a custom path in the "Default profile template" option. You need to set this to some directory that contains your template userChrome.css (and probably user.js to enable toolkit.legacyUserProfileCustomizations.stylesheets). When you then create a new profile, all files in that template directory will be copied to your new profile.

[maymage]

Thanks a lot!

For posteriority

rafaelmardojai/firefox-gnome-theme#547