[remote-dbg-next] UX-implementation: Show a notification when we expect a connection prompt on the device

RESOLVED FIXED in Firefox 68

Status

enhancement
P1
normal
RESOLVED FIXED
9 months ago
4 months ago

People

(Reporter: jdescottes, Assigned: daisuke)

Tracking

(Blocks 1 bug)

unspecified
Firefox 68
Dependency tree / graph

Firefox Tracking Flags

(firefox68 fixed)

Details

(Whiteboard: [remote-debugging-reserve])

Attachments

(6 attachments, 3 obsolete attachments)

It is very easy for users to miss connection prompts on the device if they are only looking at about:debugging.

We should have a modal/banner/??? to tell users to accept the connection prompt on the device.

This currently impacts both about:debugging and about:devtools-toolbox, but if we manage to share clients after establishing the initial connection, we might be able to do this only from about:debugging.
Priority: P2 → P3
Duplicate of this bug: 1497453
Assignee: nobody → dakatsuka
Status: NEW → ASSIGNED
Priority: P3 → P1
Whiteboard: [remote-debugging-reserve]

Hi Victoria,

In case you have some time for remote debugging, we are trying to add a feature that definitely needs UX guidance.
You can read https://phabricator.services.mozilla.com/D24478#718989 for more context.

When a user clicks on the "Connect" button in the Sidebar of about:debugging, we will try to connect to the remote Firefox. By default, a connection prompt will be displayed on the device, and if the user doesn't accept the prompt, the connection will never succeed.

If the connection has not resolved after some time, we want to show a notification in about:debugging "Connection still pending, there is probably a prompt you need to accept on the target browser". Do you have any suggestion on what would be a good way to show this information to the user?

Edit: adding a screenshot of the current patch below for reference.

Flags: needinfo?(victoria)

Hi, since I have made a second prototype, I attach the screenshot.
If I get agree from all, I'll add a test and fix a test failure of browser/base/content/test/static/browser_misused_characters_in_strings.js which :flod told me at slack.
Thanks!

I really like this second prototype, the flow feels very nice! My only remaining concern is the size of the messages. Also knowing that when the close icon lands, we will lose 32px more on the right of the container :)

Let's try shorter texts:

  • for the error message, what about simply "Connection failed" for now?
  • for the warning message, it's difficult because we want to convey more information. "Connection still pending, check messages on your device" or "Connection still pending, please check your device"? Other suggestions welcome :)

In follow ups I think we could discuss about reducing the font size for those messages, maybe adding the technical error as a collapsible content in the error message.

I would really like to get Victoria's feedback on this one. Maybe we can land a first version without localization while we wait for UX input? Will review the code now.

"Connection still pending, check messages on your device" or "Connection still pending, please check your device"

Well the message might also be displayed on remote desktop browsers... so device is misleading "Connection still pending, check for messages on the target browser" ?

Daisuke I found an issue with the current patch queue, can you verify the following STRs:

Prerequisite

  • add a network location that will not match anything (eg "blablabla:1234")
  • connect a phone via USB, start a debuggable with connection prompt enabled

STRs:

  • open about:debugging, enable USB debugging if needed
  • in the sidebar, click on connect for blablabla:1234
  • (it should show the error message)
  • in the sidebar, click on connect for the USB runtime

ER: it should show the warning after 1s
AR: it shows the a connection failed error, same message as for the network runtime. If you click on connect again then you get a connection prompt on the device and the flow resumes as expected.

Maybe this is specific to my local setup, can you verify?

Flags: needinfo?(dakatsuka)
Attachment #9052796 - Attachment is obsolete: true
Attachment #9052797 - Attachment is obsolete: true
Attachment #9052799 - Attachment is obsolete: true

(In reply to Julian Descottes [:jdescottes] from comment #13)

Daisuke I found an issue with the current patch queue, can you verify the following STRs:

Prerequisite

  • add a network location that will not match anything (eg "blablabla:1234")
  • connect a phone via USB, start a debuggable with connection prompt enabled

STRs:

  • open about:debugging, enable USB debugging if needed
  • in the sidebar, click on connect for blablabla:1234
  • (it should show the error message)
  • in the sidebar, click on connect for the USB runtime

ER: it should show the warning after 1s
AR: it shows the a connection failed error, same message as for the network runtime. If you click on connect again then you get a connection prompt on the device and the flow resumes as expected.

Maybe this is specific to my local setup, can you verify?

Thanks Julian!
Yes, I could reproduce this issue. (However, it seems the caused error is happening even without my patch.)
I have investigated a bit, the error occurs from https://searchfox.org/mozilla-central/source/devtools/shared/security/socket.js#328
So, we might need to investigate more around https://searchfox.org/mozilla-central/source/devtools/shared/security/socket.js#253 ?
I want to fix this in followup since I am not sure how long time will it take to resolve.

Flags: needinfo?(dakatsuka)

Sure, can you file a follow up bug?

Pushed by dakatsuka@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e72444917015
Change the label and status of connection button when start to connect. r=jdescottes,flod
https://hg.mozilla.org/integration/autoland/rev/67c4c04fe27c
Show error message when the connecting was failed. r=jdescottes,flod
https://hg.mozilla.org/integration/autoland/rev/1fc7cb841027
Show warning when the connecting is taking time. r=jdescottes,flod
https://hg.mozilla.org/integration/autoland/rev/3737b3b3acb0
Add a test for connection state on sidebar. r=jdescottes
See Also: → 1540931

The version of this I saw in Nightly, with shorter error message, looks great :). Small spacing tweaks recommendations in the other bug.

Flags: needinfo?(victoria)
You need to log in before you can comment on or make changes to this bug.