Screencat and screenshots

[rugk]

Follow-up of #20

We need:

One screencast

IMHO, the best to show is how the add-on can transform text.
So just make one with a nice (realistic) example text that could show a good use case for the add-on. (Likely a social media post or so… where I’d prefer Mastodon or so. 😅 )

Well… thinking about it, we can combine both big features by auto-correcting text first and then transforming some text parts.

Some screenshots

• some screenshots of auto-corrected text, maybe so it is obvious that the autocorrection happened … or… if really needed… some “before / after” combined in one screenshot (I’d avoid it, however)
• and a screenshot of all text transform options
• showing the options completely

[tdulcet]

Note that Firefox is getting a new Proton UI in Firefox 89, so we may want to use Firefox 89 Beta (out today) to create the screencast/screenshots. It includes some significant changes, particularly for the context menu (see here).

[rugk]

Do you want to do them, @tdulcet? See the Offline QR Code Generator as an example.

Note a nice Card image to show would also be nice: #39

[tdulcet]

I would be happy to create the screenshots at least, if we can figure out specifically what we want them to be of. (I do not have a Mastodon account to create the screencast.) I am assuming we would want one for Firefox, Thunderbird and Chrome, with both the light and dark themes (six total combinations), for each item we decide to screenshot.

• some screenshots of auto-corrected text, maybe so it is obvious that the autocorrection happened

OK, we would need to figure out some simple text that uses as many autocorrections as possible, without being excessive.

• showing the options completely

Do you mean showing the options page or each combination of options in use?

[rugk]

Yeah the screencast is not that important, it’s only on the GItHub page, but yeah for all supported browsers we’d of course want some screenshots hmm…

OK, we would need to figure out some simple text that uses as many autocorrections as possible, without being excessive.

Well…… does not need to be fancy:

Example: Unicode transformations are 𝓻𝓮𝓪𝓵𝓵𝔂 great! 𝔽𝕦𝕟𝕟𝕪 ˢᵗᵘᶠᶠ 🄲🄰🄽 𝚋𝚎 𝚍𝚘𝚗𝚎 ᴡɪᴛʜ 𝖙𝖍𝖆𝖙…

Just put that in some random text field…

showing the options completely

Just a screenshot of the options page with default settings. Cf. https://github.com/rugk/offline-qr-code/blob/master/assets/screenshots/qrSettings.png

---

Only the "auto preview" and such things could be shown as separate images to show how differently it can look depending on your settings.
In general, the screenshots should show the main features and emphasize one thing per screenshot – the thing you want to show.

Note we'd also want a short description for each image, see https://github.com/rugk/offline-qr-code/blob/master/assets/texts/en/amoScreenshots.csv. So you can already think of what you'd write there when making them.

[rugk]

Also of course use an en_US/en_GB installed browser, we don't want to localize them (I never did for any add-ons, as that's an elaborate task).

[tdulcet]

OK, sounds good. Here then are the four items I will screenshot:

1. Autocorrected text:
   • Example: Autocorrect common Unicode symbols, such as Hyphens: – —, Ellipsis: ‥ …, Fractions: ¼ ⅓ ½, Currencies: €, Math: ≤ ≥ ⩵ ⩶ ≠ ≅ ±, Arrows: → ⟶ ↦ ⟼ ⤇ ⟾ ⇒ ⟹, Shapes: ◇ ◁ ▷, ‘Single quotes’, “Double quotes” and many many more…
2. All text transform options:
   • Example: Unicode font transformations are 𝓻𝓮𝓪𝓵𝓵𝔂 great! 𝔽𝕦𝕟𝕟𝕪 ˢᵗᵘᶠᶠ 🄲🄰🄽 𝚋𝚎 𝚍𝚘𝚗𝚎 ᴡɪᴛʜ 𝖙𝖍𝖊𝖒… 2⁶⁴
     • Without live preview
     • With live preview
3. The options page

With the six combinations per screenshot, that will produce 24 total screenshots. For the first one, I am not sure if we want to work those symbols into more of a sentence instead of the list.

I will create a PR with the screenshots in the next few days. For the middle two, I may have to do the Thunderbird screenshots in a follow up PR, as I have not yet gotten the Thunderbird 89 Beta autoupdate, which includes the needed fix for bug 1656506.

[rugk]

For the first one, I am not sure if we want to work those symbols into more of a sentence instead of the list.

Yeah, definitively, one group of symbols per line.

Unicode font transformations are 𝓻𝓮𝓪𝓵𝓵𝔂 great! 𝔽𝕦𝕟𝕟𝕪 ˢᵗᵘᶠᶠ 🄲🄰🄽 𝚋𝚎 𝚍𝚘𝚗𝚎 ᴡɪᴛʜ 𝖙𝖍𝖊𝖒… 2⁶⁴

Good point with that last 2^64 – maybe phrase it as another sentence, i.e.:

Unicode font transformations are 𝓻𝓮𝓪𝓵𝓵𝔂 great! 𝔽𝕦𝕟𝕟𝕪 ˢᵗᵘᶠᶠ 🄲🄰🄽 𝚋𝚎 𝚍𝚘𝚗𝚎 ᴡɪᴛʜ 𝖙𝖍𝖊𝖒…
Or you can use it to type 2 to the power of 64: 2⁶⁴.

With the six combinations per screenshot, that will produce 24 total screenshots.

Okay, yeah:

1 (Autocorrected text) + 2 (All text transform options: live preview and no live preview) + 1 (options) = 4
and 4 * 3 supported platforms * 2 themes

However, we could reduce the load:

with both the light and dark themes (six total combinations),

IMHO, this is not necessary and I've never done so. At least on AMO one cannot show the dark or light mode based on the browser setting or so. And showing both images always is IMHO not needed.
Maybe the context menu would be the (only) useful one to show in dark and light mode, because that looks really different, but the rest hardly matters, just use the light mode then.

So this makes it only 12 images then.

I will create a PR with the screenshots in the next few days. For the middle two, I may have to do the Thunderbird screenshots in a follow up PR

Great! Yeah fine! 😃

[tdulcet]

Good point with that last 2^64 – maybe phrase it as another sentence, i.e.:

I am not sure if it warrants another sentence, I just thought the superscript was more useful with numbers or maybe when writing mathematical formulas, so I wanted to show that.

IMHO, this is not necessary and I've never done so. At least on AMO one cannot show the dark or light mode based on the browser setting or so. And showing both images always is IMHO not needed.

OK, sounds good.

Based on all your above suggestions, here then are the four items I will screenshot:

1. Autocorrected text:
   • Example: Autocorrect common Unicode symbols, such as:
     Hyphens: – —
     Ellipsis: ‥ …
     Fractions: ⅒ ⅑ ⅛ ⅐ ⅙ ⅕ ¼ ⅓ ½
     Math/Logic: ≤ ≥ ⩵ ⩶ ≠ ≅ ≔ ± π e
     Arrows: → ⟶ ↦ ⟼ ⤇ ⟾ ⇒ ⟹
     Geometric Shapes: ◇ ◁ ▷
     ‘Single quotes’ and “Double quotes”
     and many many more…
2. All text transform options:
   • Example: Unicode font transformations are 𝓻𝓮𝓪𝓵𝓵𝔂 great! 𝔽𝕦𝕟𝕟𝕪 ˢᵗᵘᶠᶠ 🄲🄰🄽 𝚋𝚎 𝚍𝚘𝚗𝚎 ᴡɪᴛʜ 𝖙𝖍𝖊𝖒…
     Type superscript: 2⁶⁴ 10²⁰
     Change casing: UPPERCASE, lowercase, tOGGLE cASE, Capitalize Each Word
     and much much more…
     • Without live preview
     • With live preview
3. The options page

Hopefully the first one is not too long. I deleted one of the items to help shorten it. There is room now for more examples, although I do not want to overwhelm the user with too many.

[rugk]

I am not sure if it warrants another sentence, I just thought the superscript was more useful with numbers or maybe when writing mathematical formulas, so I wanted to show that.

Yeah, a sentence is just more ”realistic” to write and does not look so posed… I mean you can also use “and…” or so it present it, my sentence was just an example.
It’s just better than just attaching it to the end that explains you can do funny things –… after all, this is a “serious” use case. 😜

[tdulcet]

Yeah, a sentence is just more ”realistic” to write and does not look so posed… I mean you can also use “and…” or so it present it, my sentence was just an example.

True. I just meant that I am not sure if it deserves its own line, since it is just one of the 22 supported Unicode fonts. I definitely agree that a sentence would be better, I am just not sure how to integrate it into a “realistically” looking one.

It’s just better than just attaching it to the end that explains you can do funny things –… after all, this is a “serious” use case. 😜

True. I could be wrong, but I think most people will be using this extension for serious use cases. I think the main purpose of this text transform feature is to allow users to change the font and text formatting on websites, particularly social networking websites, that do not support that. A friend of mine, @Danc2050, who has been helping me test this feature, primarily uses it to add bold text to his LinkedIn posts.

[rugk]

Yeah, maybe… though some text conversions are 🅽🅾🆃 🆁🅴🅰🅻🅻🆈 serious in ⓐⓝⓨ ⓒⓐⓢⓔ. 😜

So feel free to show some more “realistic” or serious examples

[tdulcet]

For the middle two, I may have to do the Thunderbird screenshots in a follow up PR, as I have not yet gotten the Thunderbird 89 Beta autoupdate, which includes the needed fix for bug 1656506.

I got the autoupdate to TB 89, although it looks like bug 1656506 was not completely fixed (see my comment: https://bugzilla.mozilla.org/show_bug.cgi?id=1656506#c14). 😢 I may need to create another bug. In the meantime, I could use the subject line for these two screenshots (this is with the live preview):

Although that is somewhat deceptive since the text transformation does not actually work in the subject (the text is inserted into the message body). Therefore, I think I will do the two Thunderbird screenshots in a follow up PR once they finally fix the issue.

Anyway, besides the subject issue, is the above example what you had in mind for the screenshots? I was not sure what in your example text you wanted me to select for the live preview. As you can see, I also installed my development copy of the Awesome Emoji Picker, so it would be visible.

[rugk]

Although that is somewhat deceptive since the text transformation does not actually work in the subject (the text is inserted into the message body). Therefore, I think I will do the two Thunderbird screenshots in a follow up PR once they finally fix the issue.

Well… yeah… we cannot show a screenshot if it does not really work like that.

Otherwise I would have said, very nice and it’s very fun to actually see the window title changes, too. 😉

[rugk]

Anyway, besides the subject issue, is the above example what you had in mind for the screenshots? I was not sure what in your example text you wanted me to select for the live preview.

Yeha, it looks very good!

Except for the height, which is quite a lot for such a screenshot, but this is of course out of your control – the context menu has so many entries and of course we also want to show all of them.

As you can see, I also installed my development copy of the Awesome Emoji Picker, so it would be visible.

Hehe, yeah, covert advertisement… 😜 👍

[tdulcet]

Well… yeah… we cannot show a screenshot if it does not really work like that.

If you recall from rugk/awesome-emoji-picker#49 (comment), I filed bug 1641575, but they marked it as WONTFIX… Users can still do the transformations in the subject, but they would have to manually cut the transformed text from the message body and paste it back into the subject. 😒 This is actually one of the reasons I opened TinyWebEx/RandomTips#9, as I thought we could potentially show the user a notification in this case.

Otherwise I would have said, very nice and it’s very fun to actually see the window title changes, too. 😉

Yeah, that is why I decided to show the whole compose window and not crop just the context menu.

Except for the height, which is quite a lot for such a screenshot, but this is of course out of your control – the context menu has so many entries and of course we also want to show all of them.

We could always create a nested menu, but that would of course be harder for the user to use and we would then not be able to show all the options in a single screenshot.

[rugk]

We could always create a nested menu, but that would of course be harder for the user to use and we would then not be able to show all the options in a single screenshot.

Oh indeed, we could. As an optional option I however would very much like it. I’m getting lost in that many options, actually, already…

Opened issue #44 for that.

[rugk]

Reopening for screencast…