Handling Canvas when re-sizing is not really a nice thing. If we had an SVG QR code library, it may be possibly to do that resizing with a lot less JavaScript and without the need to regenerate the QR code.

Also the SVG could (maybe?) be modified by the JS to apply things like colors.

When you delete all text and only input one letter, delete it again, input again, etc. it often happens that the popup window is re-sized 5px or so for each new "showing" of that window. After some "cycles" it seems to end/to be limited though.
The reason seems to be the placeholder, which is shown and hidden by the JS if everything is removed there.

Actually the underlying problem is, that the whole thing (textarea) jumps/resizes itself when it is hidden. Although the element has it's width and height clearly set (otherwise it would also collapse when no element is inside of it.). Here is a GIF where I just hide it (no other change!):

It does not matter whether I hide the SVG placeholder or the Canvas, it's both the same.

It even happens, when only the alt text is displayed:

It is reproducible in Firefox 60 and without JS:

Maybe it is also a Firefox bug?

Again as about:preferences does it, or, as the Photon styling guide states how it should be done.

This may require quite "much" CSS, but it can partically be taken from the linked photon site.

It should be applied to: checkboxes, radio elements, etc.

Note that it my look strange when it is applied to one element, but not all elements. So it needs to be done for all of them.

May be done in conjunction with #43.

It did not work in one of my tests. Maybe I'll just expand the re-try method for selecting the text.

As reported in #37 users may not notice you can enter text there.

Easy steps:

• Put the GIF showing this feature in a more prominent location.
• Solve autofocus on Windows (#21), possibly?

More:

• improve the UI, this needs some ideas (see below)

Ideas

• changing highlight color?
• some hint/note even when URL is put into it?
• some tip on the top?
• some popup directly near the input field in the form of a speech bubble? (also only shown once after the first starts or so?)
  Problem: This cannot go outside of the actual popup for technical reasons, so it could look a bit strange
• …?

Currently when used in the popup, most settings are fetched one-by-one, but maybe it would be better to fetch needed ones together and then use them?

This may also need some other changes:

• they AddonSettings module needs to be adjusted to also be able to accept the syntax the actual sync/managed* fetchers accept, so we can e.g. fetch all settings beginning with "qr" or so. 😃
• to improve performance maybe fetch the synced settings and the managed ones at the same time, so it does not need to start after the managed setting failed.

Currently I regenerate the QR code with kjua.

Maybe we can just re-size the Canvas instead?

Depends on #11.

Maybe in the options and/or popup add a (dissmisable) message bar (info or so) at the top, which shows the user some helpful things or so.

• It should be displayed randomly, but only 1-3 times or so!
• Coded in an extensible way, so we can show more "Did you know?" things in the future
• I'd prefer if it can both be shown in the options and the popup. One does not know what the user actually uses more often.

Maybe it is possible to add a context menu item on the icon, so when you right-click on it, you can open the settings of the add-on.

Currently in the settings dialog the thing works like this:

• It queries the elements by ID, for which a setting needs to be added, and queries each setting for that element.

It would be better if it could do it the other way around:

• It should get all settings and then look in the DOM for which element it needs to apply it.

BTW saving settings is fine as it is, as they are saved on-demand when a setting is changed, so they need to be saved one-by-one anyway.

Sometimes I have the need to convert a part of the screen into a QR code. Perhaps you can add this.

At the moment I use the method of http://www.jsqr.de/encode.html and his Bookmarklet http://www.jsqr.de/bookmarklet.html (though you have to trust the fetched code in the bookmarklet).

Detect whether a thing to be logged is an object and then log it properly automatically.

This should be done in the Logger of course.

I should have done that earlier… 😉 Of course, that is not intended for non-development versions. 😃

When the size of the QR code is manually set or remembered, it would be good to show a warning when the maximum size (especially width, as that is fixed) of a popup window there is exceeded.

Otherwise this happens:

Maybe we can also provide the new icon as a style in addition to the light/dark selection.

Of course, it is the small icon, which has to be adjusted with the same colors laid above it. 😃

So maybe other devs can use it too?

Would need some adjustments, e.g.:

• detect elements with i18n prefixed attributes (so the i18n does not need to be added in addition to that)
• maybe fall back to the element itself (e.g. placeholder) when the prefixed version is not used in the source (data-i18n-placeholder). This would make it possible to use the module without these non-JS fallbacks for attributes that are not visible anyway or so…
• do not hardcode attributes to be searched/replaced
• maybe a way to add placeholders in the translation?

This (gif from Firefox 60, because Firefox 59 has a min-height or so in that popup, which looks silly):

Solution: Remove the height prevention in CSS (.preventScrollbar).

Problem: This is not a good way to do it, because the height prevention has a purpose: If you do have the button as a usual "popup" (i..e not in the overflow menu) we want a maximum height, because if we do not restrict that a scrollbar is shown at some point, which is silly.

https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines

Currently the icon is e.g. shown in the middle anyway.

Use case: #37

How it should behave:

1. User selects text.
2. User right clicks.
3. User selects "Create QR code from text".
4. Popup is opened and QR code is shown.

What should not happen:

• When no text is selected, no context menu entry should be shown. Even an entry "Generate from URL" would be unnecessary as there is the button for that already, which is far easier to be used (as it is only one click away in contrast to a context menu item, which is two clicks away.).

When you use the default settings, the background may actually be not white.

When re-sizing the height of the popup, it should not display a scrollbar, it should just limit the height.

I have no idea why that does not work like expected. As you can also see in the GIF, when re-sizing the width it does not behave like that.

I think an easy thing to do, would be to adjust the MessageHandler to not only allow showing messages by types, but also setting hooks, which are currently only possible for errors.

What needs to be done?

• Generalize setErrorHook so it can set hooks for all message types.
• The function, which is called as the hook, should of course get information about the message type.

With the default settings (black qr, white background) when you re-size the QR code, it sometimes does not correctly display the whole thing (background looks disturbed).

A workaround is to change the colors of the QR code.

See subject.

If you open a page in reader mode, it always mangles with the url and uses the I "internally displayed" one.
I think nobody wants these URLs actually, so we could rewrite them to the "original" URL.

Depends on #61

There should be a setting for the default size:

• fixed size: (default:) 200px
• auto-adjust size (automatically choose highest size, e.g. when popup is opened in the overflow menu)
• remember last size (save size when it is changed in the UI)

If the last setting is selected the value, which can be entered in the "fixed size" setting, should be disabled (of course), but should still show the currently saved value, so when the setting is changed, one directly has the current value.

Are different icons possible?

If not, needs a solution for light & dark design. 😃

It may be a good idea to show a warning and ask the user before the settings are reset to the default ones.

I think it may just be implemented with confirm. That's a good easy issue.

Maybe in the options and/or popup add a (dissmisable) message bar (info or so) at the top, which points the user to some helpful thing about QR codes.

• It should be displayed randomly, but only 1-3 times or so!, requirement moved to #39
• Point to https://support.mozilla.org/kb/scan-qr-codes-firefox-android for details.
• Check platform. (only FF for Android)
• Coded generally, so we can show more "Did you know?" things in the future requirement moved to #39
• I'd prefer if it can both be shown in the options and the popup. One does not know what the user actually uses more often. requirement moved to #39

When the QR code is shown it should display a loading message instead of an error. I think, that looks a bit strange when you e.g. use it on a low-power device, where JS loading takes a few seconds. (#2)

Firefox allowed to insert a button at the right of location bar, so you can try to do it anyway.

Using about:preferences as a template, the aim should be to have something simlar from a grouping perspective.

This also means to drop fieldsets (the border around the radio options as a "radio group").

See https://design.firefox.com/photon/visuals/grid.html

Similar to #19 there should be warning. But this time, it should just say that you can only scan such inverted Qr codes with some QR code readers (e.g. Android "Barcode reader" with a special option).

Maybe also create a wiki page (or FAQ?), for such a thing and explain how to scan it.

Depends on #19

There are also many JS libraries for just scanning a QR code:

• https://github.com/schmich/instascan
• https://serratus.github.io/quaggaJS/
• https://github.com/dwa012/html5-qrcode
• https://github.com/edi9999/jsqrcode
• https://github.com/schmich/instascan

So maybe we could integrate that, too.

to translate WebExtension JSONs…

That's hard to do, but it would be better if the icon dynamically adapts to the theme, instead of requiring the user to manually select a version.

When the settings are opened, all options are loaded via plain(-old 😉) browser methods.

However, as we have AddonSettings in the commons.js and we use it in the code anyway, it would be better if we used it here, too. Especially as AddonSettings caches the options and e.g. also the "managed options", which always fail again and again otherwise.

That, however, needs some adjustments in AddonSettings:

• either a special method or an indicator when returning a setting, whether that setting was a managed option or a "usual" one. (Maybe yet again re-switch to returning an object and store information there?)
  This is needed, because the options page needs to differentiate between these twos.
• a reset or clearCache method to refetch credentials. Or maybe we can just use the existing loadOptions for that? (I think no, because we better invalidate the existing Promises?)

It would be nice to be able to press Ctrl+R or so (preferably customizable) and get the popup open.

In such a case, it should be determinated, whether some text is selected. If it is, it should use that text for the QR code, otherwise just the URL.

If such a thing is possible…

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://jakearchibald.com/2017/es-modules-in-browsers/
https://stackoverflow.com/questions/42237388/syntaxerror-import-declarations-may-only-appear-at-top-level-of-a-module

This requires raising the version to Firefox 60.

STR:

1. Resize to a bigger size.
2. Remove all text from input field.

Currently MessageHandler can only show one message.

In the future, it could be necessary to show multiple messages, so these have to be created.

What has to be done?

• dynamically clone HTML elements
• maybe get away from IDs in these, as when they are cloned they are not unique anymore, maybe a class may be better

Next to the error correction level there should probably be a link to Wikipedia, which explains what that is, as it is not obvious for the general user.

Maybe an icon, or even better, a helper as they are called in Firefox' design. A small text descripting it in one sentence and link to Wikipedia would be a good thing.

• improve icon (something QR code, but also a bit fancy…)
• descriptions, also translatable
• screenshots
• privacy policy

Background: http://alistapart.com/article/neveruseawarning

So instead of the current modal, we'd be better of by adding a "Undo" button to the confirmation message that the settings were reset.

That button should be the "call to action" button of Firefox' Photons design: https://design.firefox.com/photon/components/message-bars.html#call-to-action

This requires:

• the settings must be temporarily saved (quite easy, just a "module variable")
• note that the action button still needs to be implemented

Depends on #39

That QR codes can be saved by right-clicking on them, is not really obvious for the user. On the other hand, I want to avoid to having to add code/complexity and a button to the UI to support that feature, which is actually just built-in into Firefox:

It would be great to be able to dismiss a message, e.g. the "success" message shown when the settings are reset to defaults.

Follow the Firefox design: https://design.firefox.com/photon/components/message-bars.html#dismissible

Works, but needs multiple (deisgn) adjustments…

E.g.:

• correct QR code/page width on mobile
• correct text size in options
• performance optimization (do not constantly regenerate QR code when entering)
• hide useless settings in options

Also useful: #3

There should be a warning setting when the contrast of the background/foreground colors is too low. It should say that scanning QR codes with such a low contrast may not be possible.

I guess as one needs to use some color comparison, this issue could be a bit complicated and maybe a new library needs to be introduced. So sharing your ideas before making a PR would be appreciated.

Requires:

• the warning error message is not completely, so this would need. As with the others, use FF Photon icons.
• warning message should be shown immediately, but should not block saving the information; i.e. just show it, but
• warning message may be dismissable or not (I'd rather prefer not, as the warning is obviously always applicable.) If not, it must be shown again when the settings are opened another time, of course.
  Or you could save the dismissable status, but that would be some more work.