1472522 - Show image, video, audio, text attachments inline

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, enhancement)

Description

[Kohei Yoshino [:kohei]]

Let’s display attached images and text files on the thread along with the associated comment, like other apps. Regarding the performance:

* Hopefully image thumbnails could be generated to reduce bandwidth, but given that it requires backend and infra changes, we could only show small original images inline for now because we know the size.

* With the Intersection Observer API, attachments can now be displayed once the page is scrolled down and each comment becomes visible in the browser’s content area.

API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

WIP: https://github.com/kyoshino/bmo/compare/inline-attachments

Demo: https://twitter.com/BugzillaUX/status/1012614594878103552

Comment 1

[Kohei Yoshino [:kohei]]

Markdown support should go first to avoid any conflict or regression.

Comment 3

[Kohei Yoshino [:kohei]]

Firefox Screenshots won’t be supported as the upload option will be removed. Users can still copy a screenshot and paste it directly to Bugzilla’s attachment uploader, which is pretty convenient.

Comment 4

[Kohei Yoshino [:kohei]]

The Intersection Observer API support is finally coming to Safari so we don’t have to compromise the UX of WebKit Bugzilla users and Safari users in general 😉 I’ll restart working on this soon.

Comment 6

[Kohei Yoshino [:kohei]]

Will do this soonish.

Comment 7

[Kohei Yoshino [:kohei]]

Attachment: GitHub Pull Request

Comment 8

[Kohei Yoshino [:kohei]]

Merged to master.

Comment 11

[klaus.aengenvoort]

Great feature, but how does it work? I followed the Markdown styling! that is now supported and inserted the following line in this comment:

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

I have expected to see the image of yaktocat in the preview right above this line. But it is not shown there. Perhaps it will be shown after saving the changes?

Comment 12

[klaus.aengenvoort]

No, I cannot see the image of yaktocat in the comment, even after saving my comment.

Comment 13

[Kohei Yoshino [:kohei]]

This only shows attachments = files uploaded to Bugzilla inline, as the bug summary says. See Bug 1555771 for example. The Markdown image syntax is a different story, and it’s not (won’t be) supported.

Comment 14

[klaus.aengenvoort]

Attachment: Test-Picture.jpg

Ok, understood. I am just trying out, wher a picture, that was uploaded as an attachment, will appear in the timeline. Does is show up on the top, or within the list of the comments?

Comment 15

[klaus.aengenvoort]

Ok, great, the pictures is diplayed properly together with the comment. That is nearly the same effect as creating it with the Markdown image syntax.