Gap between top of screen and Firefox tabs

[rander38]

Windows 10, FIrefox 47.0

There's a very small gap between the top of the screen and the Firefox tabs, which makes it difficult to quickly click a tab with the cursor by moving it to the top edge of the screen.

Can confirm this issue was not present on Windows 10, FF 46. Also is not an issue on Windows 7, FF 47.0.

Happy to help in testing or any way I can. Thanks.

[johngraciliano]

I understand you are saying this is an issue in _Simple White X_ on Windows 10, Firefox 47, but it is not present when you try Windows 7 or earlier Firefox. Thank you for that information, I am assuming it is not an issue with the _classic/default_ theme for Firefox. I will try to figure out what I can. P.S. I have limited communication, so I may not be able to check again for a few days.

[johngraciliano]

@rander38: Please try installing the xpi in the latest pre-release. There was some code removed in the _default/classic_ theme for Firefox 47, but I did not remove it from the code used here in order to secure compatibility with previous versions. The pre-release includes the change but lacks of any technique for making it available for the earlier versions of Firefox. I suspect that may be the problem and I am working to make the extra code just be available for versions previous to Firefox 47.

Please note the last pre-release is listed below the last official release.

[rander38]

@johngraciliano I downloaded and installed the SimpleWhiteXXX.S01.xpi listed under "1st Experiment For Issue #30 (OUT OF ORDER!)." Unfortunately the same problem persists. I can confirm there is no gap using the classic/default theme. Let me know if you need anything else, thanks!

[johngraciliano]

I will investigate further. Since you use the term gap I want to know if there is any visible difference in the browser layout from between Firefox 46 and Firefox 47 when using the theme regarding the tabs. I want to know if there is a visible gap, although it may be as hard to see as a one pixel difference. Note that tab borders are drawn with a transparent section on top border, one pixel height. You should only see a one pixel gap above the visible border of the tab if you use Windows _Magnifier_ (I hope that is available in Windows 10). There are two extensions for Firefox that can help diagnosing the problem quickly: _DOM Inspector_ and _Element Inspector_. The second extension is an important enhancement for the first. Using them you can examine quickly the structure being displayed. If you had both of them installed, you could simply move the mouse over to the top of the screen (having Firefox in full screen mode) and press [Shift]+[right-mouse-button]. It would bring a window with the structure you at the spot being pointed. It should be a tab node of the class tabbrowser-tab. I expect you would find something that could make the problem a bit more evident. Please let me know what you find. After you are done, you may close that _DOM Inspector_ window, then point at a tab and press [Shift]+[right-mouse-button] again. Please move the selector on the left panel so it points at a tab node if necessary. Then press on the icon at the top left of the right panel, and select Box Model. The Position section should report screen y = 0. Please let me know what you find. Feel free to investigate further using these tools.

[rander38]

@johngraciliano Thanks for the advice and apologies for the late response, I've been out of town. I installed the inspector add-ons and looked into the issue. The first image shows the gap is indeed visible. When I inspect the gap it shows as a titlebar node (image 2). When I inspect a tab it does show that screen y = 1 (image 3). Seems that's where the issue is. I hope this helps - please let me know if you need anything else.

[johngraciliano]

@rander38: Actually the problem has to do with the second image where .titlebar-content shows height 28px. If you look into the parent node .tilebar, it has by default a margin of -27px to hide it entirely, but a pixel is escaping that value. Now I have to figure what inside it may be too large! Again, you are welcome to help with this, but I will try to figure it.

[johngraciliano]

All I am able to find inside the titlebar are the max/min/close buttons. I cannot explain the change.

[bwat47]

This userstyle should work as a workaround: https://userstyles.org/styles/99707/remove-gap-above-tabs-when-maximized

[johngraciliano]

Thank you. I appreciate all the help. I still need to understand and fix the problem.

[mikerockett]

So I'm using the workaround above for now, but I did notice that the system menu appears when you right click on the top pixel when the workaround is disabled. The pixel underneath that will bring up the Firefox tab menu. I have a feeling (without having read any of the above) that the caption buttons may have something to do with it, but I'm not familiar enough with FF themes to know that for sure - it's just a guess. That said, my initial note about the system menu appearing might point you in the right direction.

[johngraciliano]

The following piece of code has the potential of having a negative effect (it should crop the title bar) but in my system (Windows 8) it seems to have no effective visible or practical effect (the max/min/close buttons in #titlebar-content simply overflow the box). It does affect some values used for the layout but they seem to be ignored. I believe that it may fix the problem yet is by no means a good solution, but I could use it as a temporary patch if any user of Windows 10 can test it and find it effective. It is based on the information provided by @rander38 yet I need more information if I was to provide a proper solution. The code is:

titlebar-content{

max-height: 5px; min-height: 5px; } The value 5px could be 27px to avoid potential problems but I prefer 5px to see if any problem arises. I have not found any problem in my system but this code is not intended for it!

[Lootyhoof]

This greatly affects the caption buttons on Windows 10 and shouldn't be used on that platform. It also moves the tops of the tabs off-screen. See before and after:

The following seems to work however, instead:

#TabsToolbar {
  margin-top: -1px !important;
}

[johngraciliano]

Thank you. That may work but I not clear if it may rise a problem in the layout elsewhere (I have not analyzed it). After a more careful analysis I am convinced the proper solution is a change in the code equivalent to adding:

@media (-moz-windows-compositor) {
  @media not all and (-moz-os-version: windows-vista) {
    @media not all and (-moz-os-version: windows-win7) {
      @media not all and (-moz-os-version: windows-win8) {

        #main-window[sizemode=maximized] .titlebar-button {
          padding-top: 8px;
          padding-bottom: 7px;
        }

      }
    }
  }
}

It is possible a code line needs the clause !important, i.e.,

          padding-bottom: 7px !important;

but only when the code is added via userChrome.css to ensure it overrides the value in the theme:

          padding-bottom: 8px;

which this intends to change. I am yet puzzled about how this issue does not happen in the default theme, but it is very difficult to understand it without the trying it in the platform.

[johngraciliano]

I am also considering adding

        #main-window[sizemode=maximized] .titlebar-button {
          margin-bottom: -1px;
        }

or

        #main-window[sizemode=maximized] #titlebar-buttonbox {
          margin-bottom: -1px;
        }

instead of changing the value for padding-bottom, i.e., adding one of those rules after

        #main-window[sizemode=maximized] .titlebar-button {
          padding-top: 8px;
          padding-bottom: 8px;
        }

that is currently in the code. Anybody can try adding the rule using Stylish. Simply make a new style with the code

@media (-moz-windows-compositor) {
  @media not all and (-moz-os-version: windows-vista) {
    @media not all and (-moz-os-version: windows-win7) {
      @media not all and (-moz-os-version: windows-win8) {

        #main-window[sizemode=maximized] #titlebar-buttonbox {
          margin-bottom: -1px;
        }

      }
    }
  }
}

Give it a name and save it. Please let me know if it solves the problem. Make sure to resize the window and test that no window mode is affected except for the maximized mode which should be fixed with this code.