rugk / offline-qr-code Goto Github PK
View Code? Open in Web Editor NEW📱 Browser add-on allowing you to quickly generate a QR code offline with the URL of the open tab or other text!
License: Other
📱 Browser add-on allowing you to quickly generate a QR code offline with the URL of the open tab or other text!
License: Other
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.
Using about:preferences
as a template, the aim should be to have something simlar from a grouping perspective.
This also means to drop fieldset
s (the border around the radio options as a "radio group").
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?
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:
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?
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:
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.
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.
When you use the default settings, the background may actually be not white.
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
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.
STR:
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.
It did not work in one of my tests. Maybe I'll just expand the re-try method for selecting the text.
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.
Currently in the settings dialog the thing works like this:
It would be better if it could do it the other way around:
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.
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.
See subject.
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.
So maybe other devs can use it too?
Would need some adjustments, e.g.:
i18n
prefixed attributes (so the i18n
does not need to be added in addition to that)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…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
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.
Works, but needs multiple (deisgn) adjustments…
E.g.:
Also useful: #3
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
:
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?)There should be a setting for the default size:
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.
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.
I should have done that earlier… 😉 Of course, that is not intended for non-development versions. 😃
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:
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).
https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines
Currently the icon is e.g. shown in the middle anyway.
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
Currently I regenerate the QR code with kjua.
Maybe we can just re-size the Canvas instead?
Use case: #37
How it should behave:
What should not happen:
Firefox allowed to insert a button at the right of location bar, so you can try to do it anyway.
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)
Are different icons possible?
If not, needs a solution for light & dark design. 😃
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?
setErrorHook
so it can set hooks for all message types.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.
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. 😃
to translate WebExtension JSONs…
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…
There are also many JS libraries for just scanning a QR code:
So maybe we could integrate that, too.
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.
As reported in #37 users may not notice you can enter text there.
Easy steps:
More:
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.