940844 - Australis: sync busy icon (sync pending) in menu is low quality/missing

Status: VERIFIED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

[Sören Hentzschel]

Attachment: sync-icon.png

STR:

1. move sync widget to new australis menu
2. click sync icon in menu
3. open menu while Firefox is syncing

Result:

see attached screenshot

Comment 1

[Daniel Holbert [:dholbert]]

In Linux, the icon disappears entirely while Firefox is syncing.

Comment 2

[Daniel Holbert [:dholbert]]

This is with today's nightly & fresh profile, just configured to do a first-time sync. During that first sync, the Sync button (placed either in Australis menu or on toolbar) renders without any icon. (just as a transparent button, basically)

Comment 5

[Thomas Stache]

Bug 947915 was not about the menu panel, but the tab toolbar. If duped it should be made clear that both locations need to be fixed!

Comment 6

[Sören Hentzschel]

I think this should get a higher priority since the "new Sync" and Firefox Accounts are a "top priority project" [1] and also planned for Firefox 29.

[1] https://wiki.mozilla.org/User_Services/Sync/Relaunch

Comment 7

[:Gijs (he/him)]

I'm not sure if this is still going to be used by new sync. Tim?

Also, Michael, should this be yours as it's about the icon?

In the meantime, I almost wonder if we could just CSS animate the icon... that'd probably have its own set of issues. :-\

Comment 8

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Sync_Progress.zip

Assets attached.

Sync progress interaction:
http://people.mozilla.org/~mmaslaney/Prototype/Sync_Progress.html

Comment 9

[Daniel Holbert [:dholbert]]

(In reply to mmaslaney from comment #8)
> Created attachment 8368553 [details]
> Sync_Progress.zip
> 
> Assets attached.

There's no "Linux" folder in that zip file -- just WinXP, 7, 8, OSX.  Presumably we need linux icons here as well? (or does Linux share another platform's sync icons?)

Comment 10

[Michael Maslaney [:mmaslaney] ([e-mail])]

Daniel, I believe we are using OSX's glyph library for Linux.

Comment 11

[:Gijs (he/him)]

(In reply to mmaslaney from comment #10)
> Daniel, I believe we are using OSX's glyph library for Linux.

Windows, but yes.

Comment 12

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Sync_Progress.zip

The Sync-busy interaction should be consistent across the UI, which means we will need it for not just the menu panel, but for the tool bar and horizontal bar (beneath the menu panel) as well. 

Updated animation to show the transition between busy and default.
http://people.mozilla.org/~mmaslaney/prototype/Sync_Progress.html

js file to follow.

Comment 13

[Michael Maslaney [:mmaslaney] ([e-mail])]

Attachment: Sync_Progress_edge.js

Comment 14

[Tim Taubert [:ttaubert] (inactive)]

(In reply to :Gijs Kruitbosch from comment #7)
> I'm not sure if this is still going to be used by new sync. Tim?

AFAIK we don't plan to touch the sync toolbar button. We're just replacing the identity provider so the button will still serve its current purpose.

Comment 15

[Justin Dolske [:Dolske]]

Is the screenshot in attachment 8335085 [details] still accurate? IIRC for a while we didn't even have a decent icon for the inactive state, but that seems ok now. So presumably the icon only looks crappy when the button is in the active state (ie, Sync is doing it's syncy stuff)?

Comment 16

[:Gijs (he/him)]

(In reply to Justin Dolske [:Dolske] from comment #15)
> Is the screenshot in attachment 8335085 [details] still accurate? IIRC for a
> while we didn't even have a decent icon for the inactive state, but that
> seems ok now. So presumably the icon only looks crappy when the button is in
> the active state (ie, Sync is doing it's syncy stuff)?

Yes.

Comment 17

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

I'll take this the rest of the way, thanks Michael.

Comment 18

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

https://hg.mozilla.org/integration/fx-team/rev/f8b656efb478 incorrectly landed with the wrong commit message (citing this bug number). It was backed out in https://hg.mozilla.org/integration/fx-team/rev/2305e1d0e8d0.

Comment 19

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

Darrin, do you think you could take this?

Comment 21

[Justin Dolske [:Dolske]]

(The current low-quality image is chrome://browser/skin/sync-throbber.png)

Comment 22

[Stephen Horlander [:shorlander]]

Attachment: Sync Busy Indicator APNGs - 01

This supplies APNG throbbers for:
- Toolbar
- Menu Panel
- Horizontal Menu Panel Sync Button

The existing sync-throbber.png image can be replaced and removed.

Comment 23

[Stephen Horlander [:shorlander]]

Attachment: update-sync-progress-icon.patch

Updates the icon used when Syncing is active.

* Add icons for:
  - Toolbar
  - Toolbar Inverted
  - Menu Panel Grid
  - Sync Footer in Menu Panel
* Updates all syncProgress icons to be blue
* Removes the old sync button rules and moved sync=active rule with the rest of the toolbar button rules

Comment 24

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

Comment on attachment 8393086 [details] [diff] [review]
update-sync-progress-icon.patch

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

::: browser/themes/osx/browser.css
@@ +1106,5 @@
>    toolbarpaletteitem[place="palette"] > #sync-button {
>      -moz-image-region: rect(0px, 768px, 64px, 704px);
>    }
> +  
> +  #sync-button[cui-areatype="menu-panel"][status="active"] {

nit, whitespace

::: browser/themes/osx/jar.mn
@@ +415,5 @@
>    skin/classic/browser/syncQuota.css
>    skin/classic/browser/syncProgress.css
>    skin/classic/browser/syncProgress-horizontalbar.png
>    skin/classic/browser/[e-mail]
> +  skin/classic/browser/syncProgress-menuPanel.png

There is a [e-mail] image added as part of this patch and referenced in the osx/browser.css but it's not in the jar.mn.

::: browser/themes/windows/jar.mn
@@ +328,5 @@
>          skin/classic/browser/syncProgress-horizontalbar-XPVista7.png
> +        skin/classic/browser/syncProgress-menuPanel.png
> +        skin/classic/browser/syncProgress-toolbar.png
> +        skin/classic/browser/syncProgress-toolbar-inverted.png
> +        skin/classic/browser/syncProgress-toolbar-XPVista7.png

Can you please include @2x images for Windows too?

Comment 25

[Stephen Horlander [:shorlander]]

Attachment: update-sync-progress-icon.patch

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #24)
> Comment on attachment 8393086 [details] [diff] [review]
> Can you please include @2x images for Windows too?

I don't think we should add individual hidpi images for now. We can figure out a complete solution for bug 820679.

Comment 26

[:Gijs (he/him)]

This patch doesn't deal with inverting the icon in the menubar on glassy Windows, or with Windows Classic themes. I'll add selectors for that when checking this in.

Comment 27

[Dão Gottwald [:dao]]

(In reply to :Gijs Kruitbosch from comment #26)
> This patch doesn't deal with inverting the icon in the menubar on glassy
> Windows, or with Windows Classic themes. I'll add selectors for that when
> checking this in.

This sounds like a code change that's significant enough that it would be subject to our code review guidelines. Can you please post an updated patch and get it reviewed by e.g. jaws?

Comment 28

[:Gijs (he/him)]

Attachment: Update Sync Progress Icon,

Comment 29

[:Gijs (he/him)]

remote:   https://hg.mozilla.org/integration/fx-team/rev/37d19c0c4411

Comment 30

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Backed out in https://hg.mozilla.org/integration/fx-team/rev/45c0c5427302 for a build failure: https://tbpl.mozilla.org/php/getParsedLog.php?id=36470197&tree=Fx-Team

Comment 31

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

(In reply to Wes Kocher (:KWierso) from comment #30)
> Backed out in https://hg.mozilla.org/integration/fx-team/rev/45c0c5427302
> for a build failure:
> https://tbpl.mozilla.org/php/getParsedLog.php?id=36470197&tree=Fx-Team

Seems to be exclusively a Linux thing.

Comment 32

[:Gijs (he/him)]

Relanded with the missing Linux asset copied from Windows. :-|

remote:   https://hg.mozilla.org/integration/fx-team/rev/20c6f1700ebf

Comment 33

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/20c6f1700ebf

Comment 34

[:Gijs (he/him)]

Comment on attachment 8393708 [details] [diff] [review]
Update Sync Progress Icon,

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Australis
User impact if declined: sync icon looks bad in the menu when you're syncing
Testing completed (on m-c, etc.): on m-c
Risk to taking this patch (and alternatives if risky): low: mostly asset swap and new assets, couple of CSS changes
String or IDL/UUID changes made by this patch: none

Comment 35

[:Gijs (he/him)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/bd3af113d80a
https://hg.mozilla.org/releases/mozilla-beta/rev/08390be84652

Comment 36

[Cornel Ionce [:noni] [Hubs QA]]

Verified that the sync icons are implemented accordingly to design on Windows 7 64bit, Ubuntu 12.04 and Mac OS X 10.9 using:
- Firefox 29 beta 2 (build ID: 20140324101726)
- latest Aurora (build ID: 20140324150430)
- latest Nightly (build ID: 20140324030203).