1209417 - The QR code dialog should hint at zooming the dialog in case it's too small

Status: RESOLVED FIXED

(DevTools Graveyard :: WebIDE, defect)

Description

[Panos Astithas (he/him) [:past] (please ni?)]

In some systems (usually Linux, high resolution) the QR code can appear too small for a good scan by the phone. An easy workaround is to zoom in on the page that displays the dialog or perhaps resize it (if the QR code is sized as a percentage of the window). We could mention that possibility in the dialog text, with something like "If the QR code appears too small for the connection to be successfully established, try zooming or enlarging the window". Someone should probably verify which approach works best and only mention that one.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Hmm, is there a CSS change we make to improve it by default?  Or the window is just too small?  I'm not sure I follow what high res has to do with it yet.

I don't know if I can create a HiDPI Linux easily from within a VM...

Comment 2

[Panos Astithas (he/him) [:past] (please ni?)]

I'm mostly guessing from my recollection of that person's screen at the time. I *think* he was running Fedora on a seemingly high-res screen, so I assume that had something to do with it.

The fact that I don't know more details is what actually led me to suggest a textual hint instead of ensuring the QR code was bigger, which would naturally be the best thing to do.

Comment 3

[Joshpal Sahota]

Hi, would it be okay to work on this bug as my first bug?
How should I get started? I have downloaded the Mozilla build and managed to get the nightly build running.

Thanks

Comment 4

[Alice]

Hi! I would to work on this bug.

I have been able to open WebIDE but not sure how to get a QR code or which file to use?

Comment 5

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Thanks for the interest in contributing here!  Sorry for the delay, I was out on PTO for a bit.  Either of you are welcome to give it a try.  I'll assign the bug to whoever attaches a patch.

See the DevTools hacking page[1] if you need help getting started with the code base.

The dialog is displayed as part of connecting to a Firefox OS[2] or Firefox for Android[3] device via WiFi.  However, I bet you could still work on this bug even without those devices.

While the actual dialog appears attached to the WebIDE window, it's possible to display a basic version of its content at chrome://webide/content/wifi-auth.xhtml in a new tab.  (The blank space is where the QR code is shown during the real workflow.)

At the moment, I'm guessing we'd like to add a text hint as mentioned in comment 0, probably near the bottom of the page.

[1]: https://wiki.mozilla.org/DevTools/Hacking
[2]: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi
[3]: https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi

Comment 6

[obongofon]

Hello, I will start working on this bug.

Comment 7

[simplyblue24]

Attachment: 1209417.patch

Hi,please review the patch. Thanks !!

Comment 8

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8712605 [details] [diff] [review]
1209417.patch

Review of attachment 8712605 [details] [diff] [review]:
-----------------------------------------------------------------

Great, thanks for working on it!  Let's move it to a DTD file, and it should be ready.

Also, please add "r=jryans" at the end of your commit message.

::: devtools/client/webide/content/wifi-auth.xhtml
@@ +38,5 @@
>        <a id="yes-scanner" class="toggle-scanner">&wifi_auth_yes_scanner;</a>
>      </div>
>  
> +    <div>
> +      <h5>If the QR code appears too small for the connection to be successfully established, try zooming or enlarging the window</h5>

Add a period at the end of the sentence.

Also, we should move this to a DTD file so it can be translated.  Add a new entity[1] to webide.dtd, such as "wifi_auth_qr_size_note" or something.  Then you can refer to it here with "&wifi_auth_qr_size_note;" like others above.

[1]: https://dxr.mozilla.org/mozilla-central/source/devtools/client/locales/en-US/webide.dtd

Comment 9

[simplyblue24]

Attachment: 1209417.patch

Hope this is looking good now :)

Comment 10

[simplyblue24]

Attachment: 1209417.patch

Please review.Thanks.

Comment 11

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8713043 [details] [diff] [review]
1209417.patch

Review of attachment 8713043 [details] [diff] [review]:
-----------------------------------------------------------------

Just a few more tweaks I think we should make.

Let's center the note.  Give the new <div> some ID, and use CSS in wifi-auth.css to set "text-align: center" or similar.  (For easier debugging, you can open "chrome://webide/content/wifi-auth.xhtml" in a Firefox tab and use the DevTools.)

Also, we have the "No QR scanner prompt?" link, which hides the QR code.  In JS, we set the attribute "token" on the body when the token is displayed (instead of the QR code).  We should add additional CSS so that the new note is hidden when body[token] matches.

Comment 12

[simplyblue24]

Attachment: 1209417.patch

Hi, I have made the changes,Hope they look good.

Comment 13

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Comment on attachment 8713980 [details] [diff] [review]
1209417.patch

Review of attachment 8713980 [details] [diff] [review]:
-----------------------------------------------------------------

Great, I think that works well!  I'll push this to try to ensure all tests are still passing.

Thanks for working on this!

Comment 14

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=98717f9144eb

Comment 15

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/3ea568ea22f6

Comment 16

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/3ea568ea22f6