Chat titlebar and chat menubutton UI issues

VERIFIED FIXED in Firefox 17

Status

()

Firefox
SocialAPI
VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: mixedpuppy, Assigned: jaws)

Tracking

Trunk
Firefox 19
Points:
---
Bug Flags:
in-testsuite -

Firefox Tracking Flags

(firefox17+ verified, firefox18 verified)

Details

(Whiteboard: [Fx17])

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

5 years ago
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

5 years ago
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?
(Reporter)

Comment 2

5 years ago
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.
(Reporter)

Updated

5 years ago
Assignee: nobody → mixedpuppy
(Reporter)

Comment 3

5 years ago
Created attachment 668694 [details] [diff] [review]
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.
Attachment #668694 - Flags: review?(jaws)
(Reporter)

Updated

5 years ago
Duplicate of this bug: 794252
(Reporter)

Comment 5

5 years ago
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 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.
Attachment #668694 - Flags: review?(jaws) → review-

Comment 7

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

Updated

5 years ago
tracking-firefox17: --- → ?
tracking-firefox17: ? → +
Assignee: mixedpuppy → jaws
OS: Mac OS X → All
Hardware: x86 → All
Version: unspecified → Trunk
Status: NEW → ASSIGNED
Created attachment 673742 [details] [diff] [review]
Patch v2
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+
https://hg.mozilla.org/integration/mozilla-inbound/rev/63337e1b9643
Summary: chat menubutton ui issues → Chat titlebar and chat menubutton UI issues
https://hg.mozilla.org/mozilla-central/rev/63337e1b9643
Status: ASSIGNED → RESOLVED
Last Resolved: 5 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+
https://hg.mozilla.org/releases/mozilla-aurora/rev/ff1303caa975
https://hg.mozilla.org/releases/mozilla-beta/rev/9869424763c8
status-firefox17: --- → fixed
status-firefox18: --- → fixed
Looks fine across the board.
Status: RESOLVED → VERIFIED
status-firefox17: fixed → verified
status-firefox18: fixed → verified
You need to log in before you can comment on or make changes to this bug.