1501794 - support the img.decode() API

Status: RESOLVED FIXED

(Core :: Graphics: ImageLib, enhancement, P3)

Description

[Daniel Holbert [:dholbert]]

Filing this bug to track the img.decode() API.

Apparently Google Images uses it (or wants to) to swap seamlessly from the low-res to high-res image -- right now, that can trigger a flash (in Firefox at least) due to the high res image not being fully decoded when they swap it in. More info in https://twitter.com/jaffathecake/status/925702096300707842 .

(See also bug 1416328 for the decoding attribute, which addresses similar use-cases more declaratively.)

Spec link:
https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-decode

Chrome's intent-to-implement a while back (they've shipped it now, perhaps WebKit has as well, not sure):
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/LMV9dBG_1-I

GitHub issue where it was specced:
https://github.com/whatwg/html/issues/2037

Comment 1

[Daniel Holbert [:dholbert]]

Also: there's a good overview of the difference between the use-cases for <img decoding="..."> attribute vs. the img.decode() API in this github comment: https://github.com/whatwg/html/issues/1920#issuecomment-256114499

Comment 2

[Andrew Osmond [:aosmond] (he/him)]

I looked into what needed to be done on another bug around the time I implemented the attribute, but as I recall I just never got around to implementing it.

Comment 3

[Andrew Osmond [:aosmond] (he/him)]

First implementation pass:

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=2dfbf7f3637aa397f1160dcfe2824153280ce8e1

Looks like it wasn't put behind a secure context in WebKit:

https://github.com/WebKit/webkit/commit/5dd19bfca6d603344914633e21db61b038032ea1#diff-5d3129a3412e339516f06e23f221ed36

Nor in Chrome:

https://chromium.googlesource.com/chromium/src/+/a840c6a20c62e5ad20ec4e3419370173566b2850%5E%21/
https://chromium.googlesource.com/chromium/src/+/32a4a668e4e287c99a3917f1fc16e58a66215ef2%5E%21/

Comment 4

[Andrew Osmond [:aosmond] (he/him)]

Still one test failing (locally) but most of the way there now:

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=1ceedbd18674054ceee009fc296db9a3043aa64a

Comment 5

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Andrew Osmond [:aosmond] from comment #4)
> Still one test failing (locally) but most of the way there now:
> 
> try:
> https://treeherder.mozilla.org/#/
> jobs?repo=try&revision=1ceedbd18674054ceee009fc296db9a3043aa64a

The last failure is weird. The promise is indeed rejected, but it doesn't bubble up to the test framework.

Comment 6

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Andrew Osmond [:aosmond] from comment #5)
> (In reply to Andrew Osmond [:aosmond] from comment #4)
> > Still one test failing (locally) but most of the way there now:
> > 
> > try:
> > https://treeherder.mozilla.org/#/
> > jobs?repo=try&revision=1ceedbd18674054ceee009fc296db9a3043aa64a
> 
> The last failure is weird. The promise is indeed rejected, but it doesn't
> bubble up to the test framework.

Spoke with arai on IRC about this, it looks like we kill the global object when the iframe is removed, so the promises are dropped on the floor, despite me issuing the rejection. I'll leave the test case failing for now.

Comment 7

[Andrew Osmond [:aosmond] (he/him)]

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=e7b4ae32b697cf8dd9ff5759cd03d7e8d7be6bb7

Comment 8

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Bug 1501794 - Implement img decode API.

The img decode API allows a web author to request that an image be
decoded at its intrinsic size and be notified when it has been
completed. This is useful to ensure an image is ready to display before
adding it to the DOM tree -- this will help reduce flickering.

Comment 9

[Andrew Osmond [:aosmond] (he/him)]

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=031dbae59ef3d891e85f19904223aaebfeb43fa8

Comment 10

[Eric Shepherd [:sheppy]]

Documentation updated:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement/decode
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement

Submitted BCD PR https://github.com/mdn/browser-compat-data/pull/3331 to update compatibility tables

Added to Firefox 65 for developers

Comment 11

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Eric Shepherd [:sheppy] from comment #10)

Documentation updated:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement/decode
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
https://developer.mozilla.org/en-US/docs/Web/API/SVGImageElement

Submitted BCD PR https://github.com/mdn/browser-compat-data/pull/3331 to update compatibility tables

Added to Firefox 65 for developers

Eric, this didn't land, and won't in time for 66 either since I have not been able to prioritize this work since. 67 is my new target.

Comment 12

[Eric Shepherd [:sheppy]]

@:aosmond -- Thanks for the reply; that's helpful. I'll update our schedule for documenting this, and will revise my PR to indicate we don't support this yet (instead of "no data").

Comment 13

[Timothy Nikkel (:tnikkel)]

Bug 1522288 is about potentially changing how we do image loads, in which case we probably also want to change how the decode api is implemented. See https://bugzilla.mozilla.org/show_bug.cgi?id=1522288#c8

Comment 14

[Andrew Osmond [:aosmond] (he/him)]

I restarted rebasing/cleaning this up. Let's get this in 68 finally...

Comment 15

[Andrew Osmond [:aosmond] (he/him)]

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=49e577b79a30d8062af24889bc0c84854ff08bba&selectedJob=234171669

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/5a7f8303d682
Implement img decode API. r=bzbarsky,tnikkel

Comment 17

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/5a7f8303d682

Comment 18

[Eric Shepherd [:sheppy]]

Submitted BCD PR 4345 to note this was added to Firefox 68.