1773202 - Link preview - enable and polish inline controls

Status: NEW

(Thunderbird :: Message Compose Window, enhancement)

Description

[Magnus Melin [:mkmelin]]

+++ This bug was initially created as a clone of Bug #1572648 +++

Link previews was implemented in bug 1572648. Inline controls per https://app.presentator.io/#/vgfdzj34 are partly implemented but commented out for now, as they need a bit of visual love (at least) yet. This is what this bug should handle.

Comment 1

[George A Danos]

To avoid clipping the edges of the link previews, I suggest adding to the css the text in bold as follows:

<aside xmlns="http://www.w3.org/1999/xhtml"
class="moz-card url-replaced"
style="width:600px; display:flex; align-items:center;
justify-content:center; flex-direction:row; flex-wrap:wrap; border-radius:10px;
border:1px solid silver; overflow: hidden;"
id="card-1234567890123">
<div class="card-pic" style="display:flex; flex-direction:column; flex-basis:100%; flex:1;">
<div style="margin:0 5px;"> <img src="https://www.example.com" style="width:120px;" alt=""> </div>
</div>
<div class="card-content"
style="display:flex; flex-direction:column; flex-basis:100%; flex:3; background-color:#F5F5F5;">
<div style="margin:0 1em;">
<p><small class="site" style="font-weight:lighter;">www.example.com</small></p>
<p> <a href="#" style="font-weight:600; color:black; text-decoration:none;">
<big class="title">Example Text</big></a>
</p>
<p class="description">Example Description text</p>
<p> <a href="https://www.example.com/" class="url"
style="display:inline-block; text-decoration:none; text-indent:-2ch; margin-inline:2ch;"
title="www.example.com">https://www.example.com </a> </p>
</div>
</div>
</aside>

Comment 2

[Taka [:𝔰𝔠𝔞𝔯]]

(In reply to Magnus Melin [:mkmelin] from comment #0)

Inline controls per https://app.presentator.io/#/vgfdzj34 are partly implemented but commented out for now, as they need a bit of visual love (at least) yet. This is what this bug should handle.

Commented out where?  In source and have to build TB myself to use such controls?

What kinds of controls are there?  I think to have ability to select from different images found, different sizes, and different positions of the images (top, bottom, left, right of the text summary) would be nice.

I remember when first added, the link previews hard-coded black text, which, with ThunderHTMLedit add-on, I could edit the underlying HTML code and remove.  Now I see black color has been removed, allowing the recipient user's agent to use their preferred theme colors in the link preview--thanks.

There's still one thing remaining I find strange, the <a href="#"> which makes the title appear like a clickable link complete with hovering underline appearing, but actually does nothing, driving some users mad I'm sure.  I always go and replace the # with another paste from the clipboard, replacing it with the URL I'm sharing.  Shouldn't that be happening?  I don't understand <a href="#">.

Finally, it seems if i paste a link and the preview gets generated, then click the "X" to undo/delete the preview, the URL will never generate a preview again when pasted.  I tried saving the draft and closing/reopening the compose window, but preview was still not generated when pasted the URL.  I even compose a new message and still no preview generated.  Wonder what mechanism controls that?  I had to exit and restart TB completely in order to generate the link preview again.  Maybe a context menu item or toolbar button could be added to force generation of a preview?

Thanks,
Best Regards,