On 06/17/2014 06:51 PM, Jonathan Kew wrote:
On 17/6/14 17:02, Vivien Nicolas wrote:

On 06/17/2014 06:01 PM, Wilson Page wrote:
Just to clarify: I am in favor of icon-fonts, but less baking them into the system. Do we have perf figures comparing normal @font-face loading (external or inlined) compared to the baked in solution?

Yeah, looked at comment 37 of bug 948856. Between not baking it, and baking it, there is a 500ms diff :/

If I'm reading bug 948856 correctly, the difference may have been somewhat less (150ms? comment 17) when the font was inlined in the CSS using a data URI, rather than loaded from a separate file.

The 150ms is going from gif -> icon font if I read correctly too. And moving it into moztt was 10 ms better.

It seems somewhat different than what is state in comment 37, which says:

3- Replacing gif with icon font with the font in shared/style (median: 1595)
4- Replacing gif with icon font with the font in system/fonts (median: 1010)


It worth double checking the time here.


If we can't afford that, then we still need some other solution here.

But jburke said that we're generally "downgrading" apps from certified to privileged as much as possible. If the system-installed icon font were available only to certified apps, would this adequately address the issue? Any Gaia apps that go from certified to privileged would need to adopt a separate (lower-perf) approach at that point.


That's true. Actually there are many other hacks that depends on the fact that application are certified. So even if I would like to have more apps as privileged apps just for the principle, it's not that simple. And we may need to reconsider the |privileged| status of the email app based on some of the use case on some low end devices for now.

So one of the only reason the email app has been made |privileged| is for some CSP compliance things, and because it does not needs APIs that are certified-only. But we may need to keep it certified for perf reasons if needed. It will depends on the impact of icon font there.

This could be solved by roc's suggestion of providing the font through @font-face with a public mozilla URL, which the platform then recognizes and special-cases to use a locally preinstalled copy instead, but I'm not really comfortable with making all this dependent on a public URL (which we're then obligated to maintain forever, so as not to break other people's apps that may start to depend on it). I'd prefer a solution that is purely an internal optimization in the FxOS device, and not exposed to the Web at all.

For certified apps, we could do that; but if it needs to be available to non-certified Gaia apps as well, it's less clear how we can handle this. We could extend use of the "private" font to privileged as well as certified apps, but does that make it too "public" to be healthy? It still wouldn't be leaking to the general Web, but we might find that a lot of 3rd-party apps start to depend on it, and thus risk breaking any time we want to revise it for Gaia (or switch Gaia to some completely different solution such as SVG images).


For the moment, I think we should just consider |certified| app.

JK



------------------------------------------------------------------------
*From: *"Vivien Nicolas" <vnico...@mozilla.com>
*To: *"Wilson Page" <wilsonp...@mozilla.com>, "Jonathan Kew" <j...@mozilla.com> *Cc: *"Jet Villegas" <j...@mozilla.com>, "Patryk Adamczyk" <padamc...@mozilla.com>, "John Daggett" <jdagg...@mozilla.com>, "b2g-internal" <b2g-inter...@mozilla.org>, "Cameron McCormack" <hey...@gmail.com>, "Jonathan Watt" <jw...@mozilla.com>, "L. David Baron" <dba...@mozilla.com>, "Jaime Chen" <jac...@mozilla.com>, "sicking" <sick...@mozilla.com>, "Robert O'Callahan" <rocalla...@mozilla.com>, "mozilla.dev.platform group" <dev-platform@lists.mozilla.org>
*Sent: *Tuesday, June 17, 2014 4:48:19 PM
*Subject: *Re: Icon fonts in FxOS

Just want to make sure that there is no misunderstanding here: based on the data from https://bugzilla.mozilla.org/show_bug.cgi?id=948856#c37, some experience with loading icon fonts versus images versus svg that has been described on dev-gaia, *preloading the font is needed*.

On 06/17/2014 12:52 PM, Wilson Page wrote:

    I'm inlining to minimise cross-origin issues and to reduce
    requests. The entire asset is <12k so I'm really not concerned
    with performance here, especially considering the number of PNG
    assets this replaces. We've been using a similar approach in
    Camera for quite some time and all has been well. I think there
    are better areas we can focus performance efforts.


Performance is not always related to the size of the asset. For example last time I found that we consume 2.4mb of memory all the time in the System app because we were loading 4 times an image asset of 3k. Every time this asset was rendered it was consuming 600k of memory. This asset was a gradient and it was expensive to render it.

When you consider the size of the asset in this case, you should also consider at which time it is read, if is it going to trigger some invalidations because the image will arrive after the app is rendered, how long will it take for the font subsystem to render those glyphs, can we save some memory by using some system features, instead of having a local copy in all apps, etc...

    I'm not exactly sure if glyphs are still assigned to code points
    within the generated font, is that an issue?

    IMO we should just treat icon assets in the same way we do
    images assets.


Image assets may be slow. We run into this issue multiple times in the Settings app. Replacing our current image assets icons with an icon font baked into the platform shave ~300ms of load time.

    Baking them into the platform seems like it could cause
    unnecessary complications further down the line, for negligible
    perf gains.


Obviously 300ms is not negligible :)

Also in terms of memory there is an impact too, and since we're targeting very low end devices, I expect this to be useful too. The current mechanism used by Gecko to discard images help us to reduce the memory overhead here for background apps, but it has the side effect that the image needs to be re-decoded when the app goes to foreground and it takes time (you see images flashes when the images are re-decoded / repainted).

So icon font would make some apps to load faster, consume less memory, and avoid some glitches when the app goes from background to foreground. Definitively not negligible.

    At the end of the day we're a collection of web-apps, the more
    we exploit our platform power, the further we distance ourselves
    from the real web platform.


What you say here is true. And we would all like to use only simple web features, and that's definitively the goal. But while we are heading up to this goal, we sometimes needs to do some trade-offs, and using icon fonts is one of them. It does not mean there is more distance from the real web platform, as I believe that while Gaia use icon fonts, a lot of efforts will be done on the svg side in order to replace the icon font with SVG when it will be time to do so.

So you should see that as: it makes us more competitive in this extremely competitive area, and offers us a bit more time to fix the real issue, which is that SVG does not fit yet, and beside that, to fix the web platform to make it becomes reals on mobile.

Vivien.

    W.

    ------------------------------------------------------------------------
    *From: *"Jonathan Kew" <j...@mozilla.com>
    *To: *"Wilson Page" <wilsonp...@mozilla.com>, "Jet Villegas"
    <j...@mozilla.com>
    *Cc: *"Patryk Adamczyk" <padamc...@mozilla.com>, "John Daggett"
    <jdagg...@mozilla.com>, "b2g-internal"
    <b2g-inter...@mozilla.org>, "Cameron McCormack"
    <hey...@gmail.com>, "Jonathan Watt" <jw...@mozilla.com>, "L.
    David Baron" <dba...@mozilla.com>, "Jaime Chen"
    <jac...@mozilla.com>, "Vivien" <vnico...@mozilla.com>, "sicking"
    <sick...@mozilla.com>, "Robert O'Callahan"
    <rocalla...@mozilla.com>, "mozilla.dev.platform group"
    <dev-platform@lists.mozilla.org>
    *Sent: *Tuesday, June 17, 2014 11:31:18 AM
    *Subject: *Re: Icon fonts in FxOS

    On 17/6/14 11:10, Wilson Page wrote:

        The gaia-icons font currently uses ligatures to place icons,
        see here
        
<https://github.com/gaia-components/gaia-icons/blob/master/style.css#L32>.
        The ligature character sequence is derived from the original
        filename of the SVG source file in `images/`.

        Is this what you were referring to?


    OK, so if you're using ligatures to access the icon glyphs, can
    you modify the script that generates this font so that it does
    NOT assign PUA codepoints to the glyphs at all? It should be
    possible to leave them unencoded (i.e. with no entry in the
    font's cmap), so that the only way they can be accessed is via
    the ligature sequence.

    I see you're embedding the generated font directly in a CSS file
    as a data-URL. How's the performance of this approach? It won't
    be quite as efficient as installing the font in the base OS,
    because each app that uses it will be instantiating its own
    separate copy, so there must be a memory and perf cost. But
    maybe it's good enough?

    JK

        ------------------------------------------------------------------------
        *From: *"Jet Villegas" <j...@mozilla.com>
        *To: *"Wilson Page" <wilsonp...@mozilla.com>
        *Cc: *"Patryk Adamczyk" <padamc...@mozilla.com>, "John
        Daggett" <jdagg...@mozilla.com>, "b2g-internal"
        <b2g-inter...@mozilla.org>, "Cameron McCormack"
        <hey...@gmail.com>, "Jonathan Watt" <jw...@mozilla.com>, "L.
        David Baron" <dba...@mozilla.com>, "Jaime Chen"
        <jac...@mozilla.com>, "Vivien" <vnico...@mozilla.com>,
        "sicking" <sick...@mozilla.com>, "Robert O'Callahan"
        <rocalla...@mozilla.com>, "Jonathan Kew" <j...@mozilla.com>,
        "mozilla.dev.platform group" <dev-platform@lists.mozilla.org>
        *Sent: *Tuesday, June 17, 2014 12:54:57 AM
        *Subject: *Re: Icon fonts in FxOS

        Wilson:

        How difficult would it be to have your grunt script add a
        dlig table to your font?
        https://www.microsoft.com/typography/otspec/features_ae.htm#dlig
        https://bugzilla.mozilla.org/show_bug.cgi?id=1008458#c22

        --Jet

        ----- Original Message -----
        From: "Wilson Page" <wilsonp...@mozilla.com>

        We are using icon-fonts in some of the new web-component
        based building-blocks examples. I have created a gaia-icons
        repo so that our components can explicitly depend on these
        icons. Inside this repo we have all the source SVGs inside
        `images/`. A grunt task called grunt-webfont converts all
        these SVGs into a single icon-font. To add new icons, you
        simple have to drop new SVGs into the `images/` directory.








_______________________________________________
dev-platform mailing list
dev-platform@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-platform

Reply via email to