782793 - per-platform chat window icons

Status: RESOLVED FIXED

(Firefox Graveyard :: SocialAPI, defect)

Description

[Shane Caraveo (:mixedpuppy)]

we need a minimize/maximize icon, and a close icon for the chat window.  Right now we're just grabbing some preexisting icons from the themes.

Comment 1

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Mockup: Chat window on OSX and Windows in read and unread

Attached are a mockup and the image files for chat window default colors on OSX and on Windows.  The first version won’t include the pop_out icon, but I’m attaching it to this bug for future use.  Clicking on the titlebar collapses the window.

Comment 2

[Jennifer Morrow [:Boriss] (UX)]

Attachment: Icons: OSX & Windows chat controls on default, hover, click states

Comment 3

[Shane Caraveo (:mixedpuppy)]

taking this to create the patch

Comment 4

[Shane Caraveo (:mixedpuppy)]

Attachment: chat style.patch

adds close icons and colors for all platforms.  needs verification on linux.

Comment 5

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

Comment on attachment 657442 [details] [diff] [review]
chat style.patch

Review of attachment 657442 [details] [diff] [review]:
-----------------------------------------------------------------

Please make the chat_close, chat_close_onclick, and chat_close_onhover all part of one image sprite. Using CSS to switch the current image like this when they reside in different files can show a flicker during the transition.

::: browser/themes/gnomestripe/browser.css
@@ +2748,5 @@
>    font-weight: bold;
>    color: -moz-dialogtext;
>  }
>  
>  .chat-titlebar {

Please add |cursor: pointer;| for the titlebar now that it will toggle the minimized/restored state and help with discoverability.

@@ +2763,5 @@
>  .chat-titlebar[minimized="true"] {
>    border-bottom: none;
>  }
>  
> +.chat-titlebar[selected="true"] {

.chat-titlebar[selected] since we never have a non-"true" value for the attribute.

Comment 6

[Shane Caraveo (:mixedpuppy)]

Attachment: chat style.patch

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 658243 [details] [diff] [review]
chat style.patch

>--- a/browser/themes/winstripe/jar.mn
>+++ b/browser/themes/winstripe/jar.mn
>@@ -99,16 +99,17 @@ browser.jar:
>         skin/classic/browser/preferences/Options-sync.png            (preferences/Options-sync.png)
> #endif
>         skin/classic/browser/preferences/saveFile.png                (preferences/saveFile.png)
> *       skin/classic/browser/preferences/preferences.css             (preferences/preferences.css)
>         skin/classic/browser/preferences/in-content/preferences.css  (preferences/in-content/preferences.css)
>         skin/classic/browser/preferences/applications.css            (preferences/applications.css)
>         skin/classic/browser/preferences/aboutPermissions.css        (preferences/aboutPermissions.css)
>         skin/classic/browser/social/social.png                       (social/social.png)
>+        skin/classic/browser/social/chat_close.png                   (social/chat_close.png)
>         skin/classic/browser/tabbrowser/alltabs.png                  (tabbrowser/alltabs.png)
>         skin/classic/browser/tabbrowser/newtab.png                   (tabbrowser/newtab.png)
>         skin/classic/browser/tabbrowser/newtab-inverted.png          (tabbrowser/newtab-inverted.png)
>         skin/classic/browser/tabbrowser/connecting.png               (tabbrowser/connecting.png)
>         skin/classic/browser/tabbrowser/loading.png                  (tabbrowser/loading.png)
>         skin/classic/browser/tabbrowser/tab.png                      (tabbrowser/tab.png)
>         skin/classic/browser/tabbrowser/tab-arrow-left.png           (tabbrowser/tab-arrow-left.png)
>         skin/classic/browser/tabbrowser/tab-arrow-left-inverted.png  (tabbrowser/tab-arrow-left-inverted.png)

You forgot adding this to the aero section.

Comment 8

[:Felipe Gomes (needinfo for replies!)]

yeah I noticed that before pushing and added it to the patch. Also changed the file name to chat-close.png (using the dash) to follow the convention

https://hg.mozilla.org/integration/mozilla-inbound/rev/d3c66f475f33

Comment 9

[Shane Caraveo (:mixedpuppy)]

Comment on attachment 658243 [details] [diff] [review]
chat style.patch

[Approval Request Comment]
status and flyout panel appearance needs to match the ux design.  the correct patch is in comment #8, which was modified to add aero styles

Comment 10

[Shane Caraveo (:mixedpuppy)]

(In reply to Shane Caraveo (:mixedpuppy) from comment #9)
> Comment on attachment 658243 [details] [diff] [review]
> chat style.patch
> 
> [Approval Request Comment]
> status and flyout panel appearance needs to match the ux design.  the
> correct patch is in comment #8, which was modified to add aero styles

make that, chat icons :(  but also correcting to match ux design

Comment 11

[Lukas Blakk [:lsblakk] use ?needinfo]

Fwiw, usually the nomination for branch uplift comes after the patch has landed on trunk and ben resolved fixed (ideally, verified). Will come back to check on this at another time.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/d3c66f475f33

Comment 13

[:Gavin Sharp [email: [e-mail]]]

Can you attach the landed patch for approval, so that I don't have to a+ an r-ed patch?

Comment 14

[:Felipe Gomes (needinfo for replies!)]

Attachment: Landed patch

Comment 15

[:Gavin Sharp [email: [e-mail]]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/53f2c795e802