924942 - SVG filter effects decrease the performance during the panning

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Homescreen, defect)

Description

[Cristian Rodriguez (:crdlc)]

Some effects implemented in the homescreen should be re-visited by UX guys according to Andreas bug 920921,comment 54

Comment 1

[Cristian Rodriguez (:crdlc)]

Basically we have 3 effects already implemented right now:

1) Truncate app names on the grid (bug 805977)

In order to implement the visual I needed to include a SVG mask to apply the correct effect

2) Homescreen icons give no visual feedback when tapped (bug 815152)

Here a SVG filter was applied to achieve the blur effect

3) Offline app styles (bug 870419)

Francisco applied a grayscale with a SVG filter as well

-------------

I guess that the second one shouldn't affect the performance because it is applied when users tap icons no during scrolling. I think that the problem is due to the points 1 and 3. 

Some suggestion from UX to implement them with opacity effects? To achieve the first one with opacity is impossible as far as I know although the third could be easy to provide a similar feedback changing the opacity

FYI text overflow effect https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Comment 2

[Cristian Rodriguez (:crdlc)]

Andreas, is this bug for all devices or just Flatfish?

Comment 3

[Francisco Jordano [:arcturus] [:francisco]]

Perhaps for the point 3, we could try a different approach.

Rather than applying the filter we could create a new icon during installation time (or the first time that we render the icon, right now we have or use to have a cache for this icons).

But that means we will need to add some logic on applications updates to be sure we are always displaying the correct icon.

Cheers,
F.

Comment 5

[Cristian Rodriguez (:crdlc)]

Attachment: 924942.patch

Hi Andreas,

   I've just created this exploratory patch in order to check if removing SVG effects the performance is better. Perhaps if it is not very significant, people from UX don't need to re-think anything.

   Stuffs implemented: 

1) Deleted mask for app names
2) Deleted filter for offline apps (only opacity is defined)
3) Active icons define a background like BB buttons instead of an SVG filter
4) Removed visibility properties added for accessibility

Thanks

Comment 6

[Jerry Shih[:jerry] (UTC+8) (inactive)]

Hi Cristian,
I have applied this patch but I think I have no significant performance boost.
In bug 925616, the buffer allocation wastes a lot of time.
Could we prerender all pages when we start scrolling? Use these prerendered textures in scrolling state.

Comment 7

[Andreas Gal :gal]

It seems that its desired to have text fade out instead of ... as another overflow handling. Lets file a bug and get this into CSS properly.

Comment 8

[Cristian Rodriguez (:crdlc)]

The blurring effect when an icon is clicked quickly has been removed in bug 926446, I mean, the SVG mask for icons won't be applied during scrolling

Comment 9

[Francis Lee [:frlee]]

this issue blocks 920921, according to triage result, mark it koi+

Comment 10

[Benoit Girard (:BenWa)]

I profiled with this patch but don't see any sizable improvement:
http://people.mozilla.org/~bgirard/cleopatra/#report=b9736d7c48092c0ad41d9788732f4cec9a75761d

We're spending a lot of time blurring the text.

Comment 11

[Cristian Rodriguez (:crdlc)]

We modified the blurring effect in master (bug 926446)

Comment 12

[Mike Lee [:mlee]]

Updating Target Milestone for FxOS Perf koi+'s.

Comment 13

[Mason Chang [Inactive] [:mchang]]

Hi Cristian, we were going through our triage. Just wondering if we can assign this bug to you, otherwise do you know who the right person would be?

Comment 14

[Cristian Rodriguez (:crdlc)]

Hi all,

   I really think that this bug is almost implemented. 

   * The blurring effect when an icon is clicked quickly has been removed in bug 926446, I mean, the SVG mask for icons won't be applied during scrolling. 

   * I also removed the greyed effect for icons in offline mode in bug 927599. Then the greyscale mask has been already removed. 

   The only pending work here is about truncating app names but this decision depends on UX side thought. If the SVG effect for truncating app names have be removed, we need other alternative regarding to text-overflow.

Many thanks

Comment 15

[Mike Lee [:mlee]]

(In reply to Cristian Rodriguez (:crdlc) from comment #14)
> ...
> 
>    The only pending work here is about truncating app names but this
> decision depends on UX side thought. If the SVG effect for truncating app
> names have be removed, we need other alternative regarding to text-overflow.
> 

UX Team please reply to Cristian's comment. Do you agree with truncating app names?

Comment 16

[Stephany Wilkes]

None of the existing style guides state any rules about truncating app names, but we generally try to avoid truncation wherever it can be avoided. We are doing a lot of work with building blocks to avoid this, to this end.

By "app names" do you mean the header/title bar or something else?

Where is the original UX design/direction on this? It would be helpful to refer to that. Cristian, did you work with anyone on our team on this earlier?

Comment 17

[Mike Lee [:mlee]]

Cristian,

Please reply to Stephany's questions in comment #16:

> 
> By "app names" do you mean the header/title bar or something else?
> 
> Where is the original UX design/direction on this? It would be helpful to
> refer to that. Cristian, did you work with anyone on our team on this
> earlier?

Comment 18

[Andreas Gal :gal]

Does this regress phones as well? If not, we have improvements coming for 1.3 or 1.4 the latest that might fix this.

Comment 19

[Cristian Rodriguez (:crdlc)]

Here you are bug 805977

Comment 20

[Jason Smith [:jsmith]]

Flatfish has been moved to 1.4, so moving to 1.4?

Comment 21

[Andreas Gal :gal]

Lets aim for 1.3 since any higher resolution phone will be hit by this as well.

Comment 22

[Mike Lee [:mlee]]

Christian,

Per bug 805977, which you referenced in comment 19, truncated app names landed back in March, 2013 with UX approval. Does this mean we should resolve this bug 924942 as fixed since per your comment 14, truncated app names was the only work left?

Thanks,
Mike

Comment 23

[Cristian Rodriguez (:crdlc)]

Yep, I think so Mike, 10x