Closed Bug 798124 Opened 12 years ago Closed 12 years ago

Chat titlebar and chat menubutton UI issues


(Firefox Graveyard :: SocialAPI, defect)

Not set


(firefox17+ verified, firefox18 verified)

Firefox 19
Tracking Status
firefox17 + verified
firefox18 --- verified


(Reporter: mixedpuppy, Assigned: jaws)



(Whiteboard: [Fx17])


(1 file, 1 obsolete file)

The menu containing overflowed chat windows needs some love, specifically

- fix icon size
- fix margin on chatbar
- fix hover on menubutton

mixedpuppy: jaws: if you open enough chats to get the overflow nub, are the icons the right size in that menu?
[3:31pm] jaws: i'll check
[3:31pm] davida joined the chat room.
[3:32pm] jaws: mixedpuppy: they're the incorrect size, and the hover state of the chat nub is incorrect too
[3:33pm] mixedpuppy: yeah, it doesn't do anything on hover for me.
[3:33pm] jaws: i also found it odd that the chat nub is on the far edge of the screen
[3:33pm] jaws: no margin between the chat nub and the edge of the window
[3:33pm] jaws: in fact, in restored window mode, the chat nub is -1 pixel too far to the left
[3:33pm] jaws: overlappig the glass
[3:36pm] mixedpuppy: hmm, that is probably the margin on the chatbar itself, I think it has -1px margin
I think the overflow chat case is an edge case and that we shouldn't blog v1 on issues that aren't horrible brokenness there. 

Also, how do I test this? Where is this overflow chat menu?
open up a bunch of chat windows until there are too many to fit in the window.  You'll get a button on the bottom left that has a menu for those that dont fit.  the fix is a few lines of css, already have it.
Assignee: nobody → mixedpuppy
Attached patch chat ui styles.patch (obsolete) — Splinter Review
This fixes items listed in this bug, plus fixes general appearance of the chat overflow menu on linux, brings the "activity" color more in line with platform colors where possible, and makes a fixed size container for the titlebar icon.
Attachment #668694 - Flags: review?(jaws)
this tries to address the activity color for bug 794252 as well.
Comment on attachment 668694 [details] [diff] [review]
chat ui styles.patch

Review of attachment 668694 [details] [diff] [review]:

On Windows Aero, the chat-titlebar should also have:
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
Please check pinstripe and gnomestripe to see what gradients they overlay on the background-color.

The .chat-title should have opacity: 0.85 to lessen the bold-#000 of the text. It is currently too heavy.

On Windows Aero, the chatbox should have border-top-left-radius and border-top-right-radius of 2.5px. Please check the correct border-radius of the tabs on pinstripe and gnomestripe.

The icon in the chat-overflow nub is not centered horizontally. See for what I'm seeing on Windows. chrome://global/skin/toolbarbutton.css on winstripe adds a -moz-margin-end:5px rule for .toolbarbutton-icons[menu]. We should reset that in the .chatbar-button > .toolbarbutton-icon rule.

::: browser/themes/winstripe/browser.css
@@ +3434,5 @@
>    border-bottom: 1px solid gray;
>    cursor: pointer;
>  }
> > hbox {

This should use a className or ID as the rightmost selector.

@@ +3450,5 @@
>    background-color: #dae3f0;
>  }
>[activity]:not([selected]) {
> +  background-image: -moz-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 80%);

This does not give a good indication of activity. It makes the chat titlebar subtly darker, but not enough to draw attention. I tried setting the background-image to that of the tab[titlechanged], along with tweaking it to use closest-side and a different background-size but it didn't look suitable with the short time that I tried playing with it.

nit: linear-gradients and radial-gradients were unprefixed in Firefox 16.
Attachment #668694 - Flags: review?(jaws) → review-
Note that the motown icon won't display if the browser is not 'online', causing an empty toolbarbutton.
Assignee: mixedpuppy → jaws
OS: Mac OS X → All
Hardware: x86 → All
Version: unspecified → Trunk
Attached patch Patch v2Splinter Review
Attachment #668694 - Attachment is obsolete: true
Attachment #673742 - Flags: review?(felipc)
Comment on attachment 673742 [details] [diff] [review]
Patch v2

Review of attachment 673742 [details] [diff] [review]:

Just make sure that the description says it also tweaks the appearance of the chats' titlebars.
Attachment #673742 - Flags: review?(felipc) → review+
Summary: chat menubutton ui issues → Chat titlebar and chat menubutton UI issues
Closed: 12 years ago
Flags: in-testsuite-
Resolution: --- → FIXED
Target Milestone: --- → Firefox 19
Comment on attachment 673742 [details] [diff] [review]
Patch v2

[Approval Request Comment]
Bug caused by (feature/regressing bug #): n/a
User impact if declined: less than ideal looking chats for social api
Testing completed (on m-c, etc.): on m-c
Risk to taking this patch (and alternatives if risky): n/a
String or UUID changes made by this patch: none
Attachment #673742 - Flags: approval-mozilla-beta?
Attachment #673742 - Flags: approval-mozilla-aurora?
Comment on attachment 673742 [details] [diff] [review]
Patch v2

Styling change in support of a new feature. Approving for Aurora/Beta.
Attachment #673742 - Flags: approval-mozilla-beta?
Attachment #673742 - Flags: approval-mozilla-beta+
Attachment #673742 - Flags: approval-mozilla-aurora?
Attachment #673742 - Flags: approval-mozilla-aurora+
Looks fine across the board.
Product: Firefox → Firefox Graveyard
You need to log in before you can comment on or make changes to this bug.