Stylish bug - Many Errors in style --> unusable UI (Partially fixed)

edited January 2012 in Stylish
Steps to reproduce:
  1. Create a style with just a few errors in it.
  2. Resize the window quite low, but so you still can use it.
  3. Preview. So far, no problems.
  4. Add more and more errors in the style and preview often.
Result: The code textbox becomes taller and taller, eventually making the errors box, the findbar and the bottom buttons unreachable.
Expected result: The code textbox does not grow, and no UI elements becomes unreachable.
Tested with and without Orion. Tested with Stylish version 1.2.4 and 1.2.5b.
Firefox 9.0.1, Windows 7 Home Premium SP1 64bit with Aero.


  • The errors section is limited to 8ems high. This is enough to show about 6 lines of errors. After that, it will start scrolling. I suppose I could reduce this somewhat, but I don't think that this is a particularly common situation (lots of errors and a window resized to be short).
  • You are entirely correct. However, the height of the error section is not the problem. It is the height of the code textbox. The more errors, the more it grows in height for no reason. But, the taller window, the more errors are required to trigger the bug.

    Here are some screen shots:
    1: How it looks with no errors. No problems.

    2: Now there are so many errors that the error section has a scrollbar. No problems.

    3: Now there are a few more errors. Notice how the code toolbox now is a little bit taller, and how everything below it is shifted a bit downwards. Still no big deal, though.

    4: Now 1 error has been added.The code toolbox is now even taller, and half of the bottom buttons are lost. It's starting to get problematic.

    5: Yet some errors have been added. Everything below the code textbox is lost.
    611 x 369 - 27K
    611 x 369 - 33K
    611 x 369 - 33K
    611 x 369 - 32K
    611 x 369 - 25K
  • OK, I see the problem now. I think it related to how XUL flex and CSS max-height don't play nice together. I'm not sure how else I can implement it. Do you know of any other UI in Firefox that's similar - where a box is as small as possible, has a maximum height, and another element fills the remaining available space?
  • Thanks for looking into it!
    If I ever encounter the bug anywhere else, I'll let you know.
Sign In or Register to comment.