798124 - Chat titlebar and chat menubutton UI issues

Status: VERIFIED FIXED

(Firefox Graveyard :: SocialAPI, defect)

Description

[Shane Caraveo (:mixedpuppy)]

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
[3:38pm]

Comment 1

[Asa Dotzler [:asa]]

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?

Comment 2

[Shane Caraveo (:mixedpuppy)]

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.

Comment 3

[Shane Caraveo (:mixedpuppy)]

Attachment: chat ui styles.patch

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.

Comment 5

[Shane Caraveo (:mixedpuppy)]

this tries to address the activity color for bug 794252 as well.

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

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 http://screencast.com/t/bvJreTZDs 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;
>  }
>  
> +.chat-titlebar > hbox {

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

@@ +3450,5 @@
>    background-color: #dae3f0;
>  }
>  
> +.chat-titlebar[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.

Comment 7

[Alfred Kayser]

Note that the motown icon won't display if the browser is not 'online', causing an empty toolbarbutton.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch v2

Comment 9

[:Felipe Gomes (needinfo for replies!)]

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.

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

https://hg.mozilla.org/integration/mozilla-inbound/rev/63337e1b9643

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/63337e1b9643

Comment 12

[Jared Wein [:jaws] (please needinfo? me)]

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

Comment 13

[Alex Keybl [:akeybl]]

Comment on attachment 673742 [details] [diff] [review]
Patch v2

Styling change in support of a new feature. Approving for Aurora/Beta.

Comment 14

[:Felipe Gomes (needinfo for replies!)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/ff1303caa975
https://hg.mozilla.org/releases/mozilla-beta/rev/9869424763c8

Comment 15

[u279076]

Looks fine across the board.