1243329 - Fold the 'Connect…' screen into about:debugging.

Status: RESOLVED WORKSFORME

(DevTools :: about:debugging, defect, P2)

Description

[Jan Keromnes [:janx]]

Because it's a little weird, and it would make more sense in there.

Comment 1

[Patrick Brosset <:pbro>]

Definitely agree on that.
What are the remaining use cases for the "connect" screen though?
I know I used it in the past in several occasions to connect to an older firefox (say from nightly to aurora) in order to test backward compatibility issues. But that use case doesn't seem very important nowadays.

Comment 2

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

The meta bug 1071473 tracks features of the Connect screen that should likely be moved somewhere else before the Connect page can be removed.

Comment 3

[Jan Keromnes [:janx]]

I'll give it a shot.

Comment 4

[Jan Keromnes [:janx]]

Attachment: [WIP] Fold the 'Connect' screen into about:debugging.

Comment 5

[Jan Keromnes [:janx]]

Julian, FYI this is a quick hack of how I imagine Remote Debugging could work:
- Connect panel
- List of remote runtimes you can connect to (in the form of links that open about:debugging?runtime=xyz)
- On load, about:debugging parses the query parameters to determine which runtime to connect to

What works:
- Local runtime by default (the current behavior of about:debugging)
- Host + port debugging (you can debug local Firefox using "localhost:6080", but you have to enable remote debugging, and also open a BrowserToolbox once before it really works)
- Firefox OS simulator (it can start a simulator, but I may have messed up the transport/DebuggerClient code because it never finishes connecting)

Hope this helps! (Sorry for the low-quality hack, please ask me if you need more fleshed-out code or pointers to get you started)

Comment 6

[Alexandre Poirot [:ochameau]]

See bug 1299503 where I'm introducing query parameters to target runtimes.
Feel free to contribute/modify the query parameters based on your need, their definition is not written in stone!

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: bug1243329.cleanup.patch

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: Bug 1243329 - [WIP] Fold the 'Connect' screen into about:debugging.

Review commit: https://reviewboard.mozilla.org/r/84584/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/84584/

Comment 9

[Julian Descottes [:jdescottes]]

Attachment: Bug 1243329 - about:debugging connect screen cleanup

Review commit: https://reviewboard.mozilla.org/r/84586/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/84586/

Comment 10

[Julian Descottes [:jdescottes]]

Attachment: add an icon for the connect screen

Review commit: https://reviewboard.mozilla.org/r/84588/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/84588/

Comment 11

[Julian Descottes [:jdescottes]]

Attachment: support about:debugging#tabs when connected to a remote instance

Review commit: https://reviewboard.mozilla.org/r/84590/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/84590/

Comment 12

[Julian Descottes [:jdescottes]]

Attachment: about-debugging-connect.gif

Here is a GIF showing the first implementation of the connect feature in about:debugging. 

Technically this works fine but I think we need to discuss about the UX a bit.

As you can see in the GIF, when clicking on "Connect", a new tab of about:debugging is opened with the "host" & "port" query parameters, which will start about:debugging in connected mode.

This second tab of about:debugging is connected to whatever is on localhost:6080 and will show addons/tabs/workers for this instance.

As a user it is pretty confusing to see these two tabs of about:debugging, the only visible difference being the URL.

I've been experimenting with a few ways of making the new tab stand out (I'll attach one of my prototypes right after). I think we need to add visual cues so that the user can tell this is not a regular tab of about:debugging (color scheme, top/bottom banned etc...).

On top of that there are other topic we can discuss regarding this flow:
- should we really open another tab or should we modify the current about:debugging tab, and have a "disconnect" button to return the tab to it's normal state
- what should we do with the "Connect" category when we are on a "connected" tab of about:debugging? Hide it? Disable it? Leave it but change the content to say something like "This tab is already connected to ..."

The more I think about it, the more I feel like keeping the same tab would be the best way to go here (but even then I think we still should make sure the UI looks noticeably different in this state).

Comment 13

[Julian Descottes [:jdescottes]]

Attachment: connected-banner-proto1.png

This is one of the prototypes I tried to make a "connected" abotu:debugging tab stand out.

Comment 14

[Julian Descottes [:jdescottes]]

Helen, what is your opinion regarding comment #12 and comment #13 ?

Comment 15

[Alexandre Poirot [:ochameau]]

Saying on the same page/tab sounds like a good option!
It may be also helpful to always explicitely say which target you are debugging, even when it's Firefox itself. What about something in the left menu, a header that stands out? Something that says what target you are debugging and with a link to change to another one (i.e. the connect page you come up with).
Also, I'm really not convinced about have "Connect" entry on the same level than tabs, workers, ...
For me it is something significantly different that impacts all the others (tabs, workers, ...).

Comment 16

[Helen V. Holmes (:helenvholmes) (:✨)]

I think your mockups in Comment 13 are a good suggestion—I agree that it's confusing, and that really helps make it obvious.

> - should we really open another tab or should we modify the current about:debugging tab, and have a "disconnect" button to return the tab to it's normal state

You said below this comment that the more you think about it, the more you feel it should be in one tab. I  agree: the tradeoff is that you get fewer options while debugging, but it also makes it more clear. If you still feel that way and don't have qualms, I think that's a good option.

> - what should we do with the "Connect" category when we are on a "connected" tab of about:debugging? Hide it? Disable it? Leave it but change the content to say something like "This tab is already connected to ..."

That area could become the "Disconnect" area, since if it's all in one tab, I imagine you'll want a way to leave via the UI.

Comment 17

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

(In reply to Julian Descottes [:jdescottes] from comment #12)
> - should we really open another tab or should we modify the current
> about:debugging tab, and have a "disconnect" button to return the tab to
> it's normal state

As long as the URL params are parsed to connect to a runtime (so that it's possible to bookmark a link that connects to a runtime, for example), then I am fine with staying on the same tab when connecting via the UI.

The connection banner in comment 13 seems good overall!

Comment 18

[Julian Descottes [:jdescottes]]

The connect screen is long gone. Remote connection is now done via about:debugging.