CustomCSSforFx icon indicating copy to clipboard operation
CustomCSSforFx copied to clipboard

Padding Above the Tabs is Back in FF v101

Open gashtal opened this issue 2 years ago • 13 comments

  1. Issue description:

Starting from Firefox v101, the padding above the tabs (between top of tabs and top of browser) is back while using the latest version of CustomCSSforFx.

  1. Does the issue occur with latest CustomCSSforFx release?

Yes, tested with 4.1.8v3.

  1. Steps to reproduce the issue:

- Update to Firefox v101. - Use CustomCSSforFx 4.1.8v3 with default configuration.

  1. SCREENSHOT(S) of the issue (drag & drop images into this post): 171982305-7b30fc5e-2f49-45f9-8301-56efbc73c8ab

  2. Is 'about:config > toolkit.legacyUserProfileCustomizations.stylesheets' set to 'true'?

Yes.

  1. System information
  • OS & OS version: Windows 10 21H1 x64
  • DPI / HiDPI (e.g. 100%, 125%...): 100%
  • Firefox version: 101.0.1 (64-bit)
  • Firefox theme (e.g. default, dark, 'theme name & link'): default
  • This projects userChrome.css/userContent.css 'settings' the issue occurs with: default

gashtal avatar Jun 11 '22 20:06 gashtal

Test https://github.com/Aris-t2/CustomCSSforFx/releases/tag/4.1.9pre

Aris-t2 avatar Jun 11 '22 23:06 Aris-t2

@Aris-t2 The test build solved the problem; than you for the very quick fix. 😄

gashtal avatar Jun 12 '22 02:06 gashtal

This fixes it for me too. I noticed the min/max/close buttons on Windows 10 are a bit too close to the top/right position

dcoder42 avatar Jun 14 '22 06:06 dcoder42

@Aris-t2 thanks

schelef avatar Jun 15 '22 22:06 schelef

I'm guessing whatever change you did with this now causes the tabs text to shift upward when moving tabs around? Was working fine before with v4.1.8, noticed this new behavior when I updated to 4.1.9.

ImSpecial avatar Jun 17 '22 09:06 ImSpecial

The recent tab changes are using this code:

/* Fx 101+ */
#main-window[sizemode="maximized"][tabsintitlebar] #titlebar {
  margin-top: -5px !important;
}

#main-window[sizemode="fullscreen"][tabsintitlebar] #titlebar {
  margin-top: -3px !important;
}

#main-window[sizemode="maximized"][tabsintitlebar] #toolbar-menubar {
  padding-top: 5px !important;
}

Any chance you post a screenshot of the environment this change causes the mentioned issue for you.

Edit:

Are you using Win7 or 8? Just found out the about changes are only needed for Win 10 & 11 on Fx 101+.

Aris-t2 avatar Jun 17 '22 13:06 Aris-t2

A screenshot probably won't do, so I made a pretty bad gif instead, you'll have to look close, but once you "release" a tab you'll see how the text all kinda shifts upward. (I'm on Win10 / FF101.1, btw)

Animation1

ImSpecial avatar Jun 17 '22 18:06 ImSpecial

@ImSpecial I had no luck to reproduce this glitch on Windows 10 (Fx 101) or 11 (Fx 103).

Could you edit default_tabs_photon.css file and remove the change for 101+ at the bottom of it? This was the only change for photon tabs between 4.1.8 and 4.1.9


Did you modify the tab height somewhere in this projects files? In my tests even a height of 24px did not cause this glitch when set inside general_variables.css. It might also be button/icon related. Did you move any buttons to tabs toolbar or removed the default ones?

Aris-t2 avatar Jun 18 '22 08:06 Aris-t2

Weird, so I was able to fix this but it wasn't some custom code or anything...

In Firefox's own Customization menu, there is a "New Tab" button, I removed it off the bar and now all tabs move around perfectly afterwards, adding the button back causes the same "glitch" to happen like shown in my gif.

https://i.imgur.com/nHVyFvq.png https://i.imgur.com/Q1BJ7N7.png https://i.imgur.com/NXnSc4p.png

I'm kinda torn on this, I like the button there, but hate this glitch, is there a way to fix this? I'll deal either way, but maybe (and hoping) there's a simple tweak one can do.

ImSpecial avatar Jun 18 '22 23:06 ImSpecial

I know this is a bit old but the issue is still here, is there a way I can shrink the "New Tab" button with some css? Like 10 or 15%, or maybe just reduce the height by a few pixels to see if it helps?

ImSpecial avatar Jun 28 '22 00:06 ImSpecial

Sorry, I forgot to respond here.

Try this:

#TabsToolbar #tabs-newtab-button .toolbarbutton-icon {
  padding: 0 !important;
  height: 16px !important;
  width: 16px !important;
}

Aris-t2 avatar Jun 28 '22 20:06 Aris-t2

No change in the behavior unfortunately, in fact the button doesn't seem to look any different either in size or padding, etc. even with crazy numbers like "height: 56px" or "width: 1px"

ImSpecial avatar Jun 28 '22 21:06 ImSpecial

I'm not sure what causes the size not to be changeable for you. Maybe testing a new /chrome/ setup might give you clue?

Aris-t2 avatar Jul 04 '22 17:07 Aris-t2

I think we can close this for now. If the issue is still present with latest release, feel free to post here. I will reopen this thread again.

Aris-t2 avatar Aug 29 '22 17:08 Aris-t2

It still happens with 4.2.1 if the "add tab" button is on the same bar as the tabs, I've never been able to fix it other then just removing the tab button, or moving it to somewhere else, "my" fix was to just remove the button, and have already kinda just gotten used to not having it now. it's a mystery...

I did notice that when the "add tab" button is on the tab bar it has a different graphic vs if it's somewhere else, weird.

one tab bar: https://i.imgur.com/tJ15xL5.png

Same button but moved: https://i.imgur.com/EpI4Hq9.png

ImSpecial avatar Aug 29 '22 21:08 ImSpecial

@ImSpecial Could you start a new Portable Firefox setup and recreate the issue there?

Upload the full Portable Firefox archive to Google drive or https://www.upload.ee or https://www.mediafire.com or something similar.

Aris-t2 avatar Aug 30 '22 15:08 Aris-t2

@ImSpecial

Tests from today could still not reproduce your issue.

(started with default setup)

userChrome.css

  • disabled icons_colorized.css
  • disabled buttons_on_navbar_classic_appearance.css
  • disabled classic_squared_tabs.css
  • enabled default_tabs_photon.css
  • enabled tabs_below_navigation_toolbar.css

general_variables.css

  • enabled and set --tab-min-height: 24px !important;

General

  • switched to dark theme
  • tested compact and normal modes
  • tested OS titlebar and Firefox titlebar (-> customizing mode)

Aris-t2 avatar Aug 30 '22 15:08 Aris-t2

Sorry to keep you waiting, yes I can reproduce using a clean userChrome setup, with ALL custom code removed, only yours, but honestly I just don't care about this anymore to try and figure it out... and I don't want you to waste any time on it either, if you say all's good, then I'm just going to assume it's a weird DPI issue, graphics driver, or something else "my computer", that makes it this way...

Short of just uploading my userChrome folder to you to plug in a try... but again I just removed the button and all is good. :)

You should probably/can close this topic now. :P

ImSpecial avatar Sep 01 '22 00:09 ImSpecial

OK, I will close it. Feel free to open a new issue about this, if you want.

Aris-t2 avatar Sep 01 '22 15:09 Aris-t2