[Mac] Status bar should be rounded, not square

RESOLVED WORKSFORME

Status

()

Firefox
Theme
RESOLVED WORKSFORME
9 years ago
7 years ago

People

(Reporter: Samuel Sidler (old account; do not CC), Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

A lot of apps do this, but Firefox doesn't (neither does Safari, actually). I think we should change the status bar on Mac to be rounded instead of square. It looks prettier.

Square: http://samuelsidler.com/imgupload/status-bar-square.png
Rounded: http://samuelsidler.com/imgupload/status-bar-rounded.png
Ooo, pretty. I wonder if rounding works well when there's no status bar (since you'd be chopping off a few pixels of the content, which might look odd). If that's the case, it might be possible to round the bottom of the window when there's a status bar, but leave it square when there's no status bar.
I've already played with this; it's a little tricky.
We need to make the content NSView transparent and paint the status bar gradient in the background color of the NSWindow, i.e. in the same place where we're painting the title bar gradient right now. Only the window background color is subject to Cocoa's rounded corner clipping; the content of the views that are put on top of the window won't be touched.

Last time I tried this, I ran into ugly flashing bugs when focusing / unfocusing windows (similar to bug 432131)... but there's hope that Compositor will make those problems go away.

Comment 3

8 years ago
Hi :-),

I did this for a XUL demo. I used a toolbox & toolbar with a @class set to "bottom".
Here is my tricks:
toolbox.bottom {
    border: #797979 solid;
    border-with: 1px 0 0 0;
}

toolbar.bottom {
    -moz-appearance: none;
    -moz-border-radius: 0 0 5px 5px;
    padding: 0 1em;
    border: #eaeaea solid;
    border-with: 1px 0 0 0;
    background: -moz-linear-gradient(top, #c6c6c6, #a4a4a4);
}

And when the window is disabled (or doesn't have the focus):
toolbar.with-no-focus {
    background: -moz-linear-gradient(top, #eaeaea, #d6d6d6);
}

Comment 4

8 years ago
Created attachment 456820 [details]
Rounded corner, when the window is active

Comment 5

8 years ago
Created attachment 456821 [details]
Rounded corner, when the window is inactive
Mac OS 10.7 enforces this, and we don't even have to do anything for it.
Doing anything for 10.5 / 10.6 is probably not worth it at this point.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.