Closed Bug 998328 Opened 6 years ago Closed 5 years ago

[B2G][Status Bar] If ADB is running and/or the Devtools debugger server is running, the status bar should show an icon

Categories

(Firefox OS Graveyard :: Developer Tools, defect)

All
Gonk (Firefox OS)
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: paul, Assigned: janx)

References

(Depends on 1 open bug)

Details

Attachments

(4 files, 3 obsolete files)

Maybe an ADB icon and a Devtools icon.

We can be in these 3 situations:
- no ADB, no DevTools
- ADB, no DevTools
- ADB, DevTools

And soon:
- no ADB, DevTools over wifi
I guess that would be a "Remote debugging" status icon (or maybe just "Debugging", since the Developer HUD uses the "DevTools" part but is not remote).

What about the "ADB, DevTools over wifi" situation? I don't see the point of disabling ADB when debugging over wifi.

I notice that your situations correspond to the current values of the remote debugging pref:
- "disabled" (no ADB, no DevTools)
- "ADB only" (ADB, no DevTools, only needed for tarako because of memory pressure)
- "ADB and Devtools" (ADB, DevTools over USB only)

Maybe we could soon add:
- "ADB and Devtools + Wifi" (ADB, DevTools over USB or wifi)

Alternatively, we could rename "ADB and Devtools" to "USB debugging" (as in Android), and "ADB and Devtools + wifi" to "USB/WiFi debugging".
(In reply to Jan Keromnes [:janx] from comment #1)
> I guess that would be a "Remote debugging" status icon (or maybe just
> "Debugging", since the Developer HUD uses the "DevTools" part but is not
> remote).
> 
> What about the "ADB, DevTools over wifi" situation? I don't see the point of
> disabling ADB when debugging over wifi.

There is no need to disable ADB. But ADB doesn't necessary run.

> I notice that your situations correspond to the current values of the remote
> debugging pref:
> - "disabled" (no ADB, no DevTools)
> - "ADB only" (ADB, no DevTools, only needed for tarako because of memory
> pressure)
> - "ADB and Devtools" (ADB, DevTools over USB only)
> 
> Maybe we could soon add:
> - "ADB and Devtools + Wifi" (ADB, DevTools over USB or wifi)
> 
> Alternatively, we could rename "ADB and Devtools" to "USB debugging" (as in
> Android), and "ADB and Devtools + wifi" to "USB/WiFi debugging".

The goal of this bug is to make sure the user is aware than something on his device is listening for incoming operations.

Basically, we need to show an icon/notification when the *pref* `remote-enabled` is `true` (the debugger server is running), and/or when ADB is running (whatever the reason is (devtools, marionette, …).

To implement this (after bug 942756 has landed):
- adbController.js is the code that controls ADB
- main.js introduces a "debugger-server-started/stopped" notification (observerService)

For Wifi debugging, maybe (to see with jryans) we won't start the debugger server until we managed to pair the phone and the laptop, I don't know.
Attached file github pull request (obsolete) —
Preliminary status icons representing only the state of the `debugger.remote-mode` pref:

- no icon when disabled
- icon for "ADB only"
- different icon for "ADB and Devtools"

We'll ask UX for icons at some point, but for now "ADB only" uses the "tethering" icon, and "ADB and Devtools" the "bluetooth" icon.

Maybe it's a better idea, instead of showing what value the pref has, to show what's actually running (ADB server and/or debugging server), as you suggested Paul?
Attachment #8410278 - Flags: feedback?(paul)
Comment on attachment 8410278 [details] [review]
github pull request

I'm not sure we should trust `debugger.remote-mode`.

For example:
- ADB runs when marionette is enabled, but `debugger.remote-mode` is not set to "ADB only",
- if we start B2G with the command line option "--start-debugger-server 6000", `debugger.remote-mode` is not set, and ADB is not running, but the server is running.
Attachment #8410278 - Flags: feedback?(paul)
While discussing bug 1000407 with jryans and ochameau, it occurred to me that USB remote debugging depends on ADB being active, whereas Wi-Fi remote debugging does not. That is the reason why the controls for ADB and for USB devtools debugging are mingled into the "Remote debugging" dropdown menu.

We found that the best solution was to rename the "Remote debugging" menu to "USB debugging", and to add a separate "Wi-Fi debugging" checkbox when the feature is ready.

I'm not sure if we should also make that distinction in the status icons, e.g. by having a "USB debugging" status icon that indicates if we have "no ADB, no devtools", "ADB, no devtools" or "ADB, devtools" ; and an additional "Wi-Fi debugging" icon to indicate if we're currently accepting remote devtools connections over wifi.
(In reply to Jan Keromnes [:janx] from comment #5)
> While discussing bug 1000407 with jryans and ochameau, it occurred to me
> that USB remote debugging depends on ADB being active, whereas Wi-Fi remote
> debugging does not. That is the reason why the controls for ADB and for USB
> devtools debugging are mingled into the "Remote debugging" dropdown menu.
> 
> We found that the best solution was to rename the "Remote debugging" menu to
> "USB debugging", and to add a separate "Wi-Fi debugging" checkbox when the
> feature is ready.
> 
> I'm not sure if we should also make that distinction in the status icons,
> e.g. by having a "USB debugging" status icon that indicates if we have "no
> ADB, no devtools", "ADB, no devtools" or "ADB, devtools" ; and an additional
> "Wi-Fi debugging" icon to indicate if we're currently accepting remote
> devtools connections over wifi.

It could be tricky to represent all the USB states in one icon, but lots of icons is also annoying.

I agree that a separate icon should (eventually) be used for WiFi.
(In reply to J. Ryan Stinnett [:jryans] from comment #6)
> It could be tricky to represent all the USB states in one icon, but lots of
> icons is also annoying.

Would it really be that tricky?

- "no adb, no devtools" shows no icon
- "adb, no devtools" shows a plain usb debugging icon
- "adb, devtools" shows the same icon with an additional element representing devtools

Maybe the second icon could also be different from the plain one. Let's leave that decision to UX.

> I agree that a separate icon should (eventually) be used for WiFi.

Great!
(In reply to Jan Keromnes [:janx] from comment #7)
> (In reply to J. Ryan Stinnett [:jryans] from comment #6)
> > It could be tricky to represent all the USB states in one icon, but lots of
> > icons is also annoying.
> 
> Would it really be that tricky?
> 
> - "no adb, no devtools" shows no icon
> - "adb, no devtools" shows a plain usb debugging icon

But why does "USB" mean "ADB, no DevTools"?

> - "adb, devtools" shows the same icon with an additional element
> representing devtools

What visual element *means* "DevTools"?

I am sure UX can think of something great! :) I am just saying that to me there's no obvious visual icon that represents those complex phrases.  Hopefully the icon can convey information without always having to look it up since you can't remember which one it is.  Maybe the answer is that someone needs to finally make a DevTools logo. ;)
The goal here is to warn the user that something on his device is listening for incoming operations. No need to be too specific. I would use just one single "debug" icon for adb-only/adb-devtools/wifi.
A small bug icon: (smoething like one of the black and white ones from herehttps://www.google.com/search?q=bug+icon ) seems appropriate
Jan, any interest in pushing this forward?  I am now thinking Paul's one icon for all approach might be best.  See also bug 1037129 based on :pauljt's recommendation that there be just one master switch to control all types of remote debugging.
Flags: needinfo?(janx)
See Also: → 1037129
adb works over wifi or over usb (I use adb debugging over wifi when I'm testing/debugging the usb cable insertion/removal logic).

Personally, I don't think we need to distinguish between wifi or usb, and I don't think we even need to distinguish (at the icon level) between remote debugging versus adb.

I think that if there is an icon in the status bar, then there should be something in the notification area, and that something can have more detailed information about adb versus remote-debug and wifi versus usb (if needed).
(In reply to Dave Hylands [:dhylands] from comment #12)
> adb works over wifi or over usb (I use adb debugging over wifi when I'm
> testing/debugging the usb cable insertion/removal logic).
> 
> Personally, I don't think we need to distinguish between wifi or usb, and I
> don't think we even need to distinguish (at the icon level) between remote
> debugging versus adb.

Yep, one icon seems good enough.

> I think that if there is an icon in the status bar, then there should be
> something in the notification area, and that something can have more
> detailed information about adb versus remote-debug and wifi versus usb (if
> needed).

Yeah, I think that would be good too.  In bug 1037129, :pauljt suggests that such a notification could take you to a Settings submenu for controlling the various permutations of debugging that are currently enabled (which would also make the current status apparent too.)
I'm ok with these suggestions. Here's what I'd like to do:

Part 1: One status icon for any combination of usb / wifi / adb / remote debugging.

Part 2: A sticky notification that stays in the notification area (can't be dismissed), displays info about what is currently happening (e.g. "ADB connected to USB" or "Remote debugging over WiFi"...), and when tapped on, opens Settings > Developer.

About part 2, Vivien, what of the following things we discussed are possible?
- Sticky notification (can't be dismissed).
- Changing the text of a notification to reflect some status.
- Notification that takes you to a particular sub-menu of the Settings app (and even after the tap, stays in the notification area).
Flags: needinfo?(janx) → needinfo?(21)
Attached image fly.svg (obsolete) —
Attached image screenshot.png (obsolete) —
Hi Helen, as you can see in my pull request, I tried making a status icon again but I'm still not very good at it.

My icon is based on the public-domain fly.svg image, but the way I scaled it down doesn't look good in the screenshot.

Could you please help me by making a "bug" status icon? You don't have to use the fly if you think another "bug" icon would look better. Please integrate it into the Gaia status icon sprite.

Thanks!
Flags: needinfo?(hhuang)
Looks like this icon will only be used in status bar, and Eric is working on status bar icons. I'm going to need info Eric to see if he can take care of this.

Hi Eric, can you help to provide this icon in status bar?
Flags: needinfo?(hhuang) → needinfo?(epang)
(In reply to Helen Huang from comment #17)
> Looks like this icon will only be used in status bar, and Eric is working on
> status bar icons. I'm going to need info Eric to see if he can take care of
> this.
> 
> Hi Eric, can you help to provide this icon in status bar?

Hi, thanks Helen, I plan to get around to this next week.  Will leave ni on myself as a reminder.
Attached image Debugging.svg
Looks like we're going to be using svgs for the status bar icons.  Rob, can you add this to the priority list?
Guillaume, can you help add once we know it's priority?  

Thanks!
Flags: needinfo?(rmacdonald)
Flags: needinfo?(gmarty)
Flags: needinfo?(epang)
We're most likely going to use an icon font for that [1].
At the moment we're using PNG images but I'm happy to implement new ones with gaia-icons. Once Bug 1038723 lands, this icon font will be made available to the system app.

As Eric said, I need the priority and the order of this icon in the status bar.

[1] https://github.com/gaia-components/gaia-icons
Flags: needinfo?(gmarty)
(In reply to Guillaume Marty [:gmarty] from comment #20)
> We're most likely going to use an icon font for that [1].
> At the moment we're using PNG images but I'm happy to implement new ones
> with gaia-icons. Once Bug 1038723 lands, this icon font will be made
> available to the system app.
> 
> As Eric said, I need the priority and the order of this icon in the status
> bar.
> 
> [1] https://github.com/gaia-components/gaia-icons

I've also updated the sprites to include the icon in case we don't end up using icon font
https://mozilla.box.com/s/jcx4vwaanew1q3kk7nap
(In reply to Eric Pang [:epang] from comment #19)
> Looks like we're going to be using svgs for the status bar icons.  Rob, can
> you add this to the priority list?
> Guillaume, can you help add once we know it's priority?  

Added. Thanks!
Flags: needinfo?(rmacdonald)
I added the bug glyph to gaia-icons [1], so using it in the status bar will be as easy as doing <div data-icon="bug"></div>.

[1] http://gaia-components.github.io/gaia-icons/#bug
Thanks a lot Guillaume!

Also, decreasing Vivien's red counter. I'll ask comment 14's questions IRL.
Flags: needinfo?(21)
Jan, what do we need to keep this moving?
Flags: needinfo?(janx)
To keep this moving, we need a good way to know when something is listening for / accepting debug connections. This is a two-part question:

- To know if a devtools server is running (USB or WiFi), Paul said in comment #2 that we can trust the `devtools.debugger.remote-enabled` pref. Looks like it's still the case.

- To know if an ADB server is running, we can't really trust the `debugger.remote-mode` pref ("adb-devtools" or "adb-only" versus "disabled"), because ADB could be unavailable/killed with the pref on[1], or worse ADB could be running while the pref is "disabled"[2]. Is there another way to know if an ADB server is accepting connections?

This bug depends on bug 942756 because it was supposed to introduce an `adbController.js` with ADB state information, and `debugger-server-started/stopped` notifications for devtools server state.

[1] when the screen is locked in user mode http://dxr.mozilla.org/mozilla-central/source/b2g/chrome/content/devtools/adb.js#186
[2] when the marionette pref is on http://dxr.mozilla.org/mozilla-central/source/b2g/chrome/content/devtools/adb.js#195
Flags: needinfo?(janx) → needinfo?(jryans)
(In reply to Jan Keromnes [:janx] from comment #26)
> To keep this moving, we need a good way to know when something is listening
> for / accepting debug connections. This is a two-part question:
> 
> - To know if a devtools server is running (USB or WiFi), Paul said in
> comment #2 that we can trust the `devtools.debugger.remote-enabled` pref.
> Looks like it's still the case.

This is still true for now, yes.  I may change this as WiFi work continues to represent USB and WiFi separately, but don't wait for me. :) I'll just have to remember to refactor this.

> - To know if an ADB server is running, we can't really trust the
> `debugger.remote-mode` pref ("adb-devtools" or "adb-only" versus
> "disabled"), because ADB could be unavailable/killed with the pref on[1], or
> worse ADB could be running while the pref is "disabled"[2]. Is there another
> way to know if an ADB server is accepting connections?

Dave Hylands may have a better answer, but looking at adb.js here, I'd suggest adding notifications when the ADB state is toggled[1].

[1]: http://dxr.mozilla.org/mozilla-central/source/b2g/chrome/content/devtools/adb.js#215-225

> This bug depends on bug 942756 because it was supposed to introduce an
> `adbController.js` with ADB state information, and
> `debugger-server-started/stopped` notifications for devtools server state.

It's unlikely that anyone will be completing bug 942756 anytime soon unfortunately.
Flags: needinfo?(jryans)
Assignee: nobody → janx
Component: Gaia → Developer Tools
OS: Mac OS X → Gonk (Firefox OS)
Hardware: x86 → All
Attachment #8467124 - Attachment is obsolete: true
Comment on attachment 8467125 [details]
screenshot.png

I liked the fly though, it had a nice "I'm-on-your-screen" look.
Attachment #8467125 - Attachment is obsolete: true
Depends on: 1091542
New pull request.
Attachment #8410278 - Attachment is obsolete: true
Attached image screenshot.png
Screenshot of new pull request.
Comment on attachment 8516112 [details] [review]
Add a remote debugging status icon.

Michael, I'm adding a status icon to indicate when remote debugging is active. Please have a look.

Note: It's the first icon from a font in the status bar, the others still use the PNG sprite.
Attachment #8516112 - Flags: review?(mhenretty)
Comment on attachment 8516112 [details] [review]
Add a remote debugging status icon.

Great feature, can't wait to see it! I left a couple of questions on github. I'd also like to see an integration test for this, similar to the tests landed in [1].

1.) https://github.com/mozilla-b2g/gaia/commit/8b619f8496adc3e7fafcdd1d7008066d795388c6
Attachment #8516112 - Flags: review?(mhenretty)
Comment on attachment 8516115 [details]
screenshot.png

Eric, please have a look at the screenshot.

I think the icon is hard to read when scaled down to status icon size. :freddyb pointed out to me that the legs and antennas of the bug are hard to see.

Do you think the bug icon can be made more readable for such a small size?

Note: No need to update the PNG sprite, it looks like we'll be using the icon font for this one.
Attachment #8516115 - Flags: feedback?(epang)
I'm not a designer, and happy to be overriden by anyone with a clue, but maybe the details (feet, antennae) could just be a bit bigger.
Comment on attachment 8516112 [details] [review]
Add a remote debugging status icon.

Michael, I replied to your comments and added integration tests. Please have a look again.
Attachment #8516112 - Flags: review?(mhenretty)
Attachment #8516112 - Flags: review?(mhenretty) → review+
Thanks Michael! Landed as https://github.com/mozilla-b2g/gaia/commit/677859d4a0aa.

Marking as fixed, but the icon still needs to be made more readable please.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
I have Devtools and USB debugging enabled and I'm seeing this bug icon all the time in the statusbar. Even when I'm not USB (or wifi) connected to the desktop and/or webIDE Devtools. Is it expected to see this bug icon all them time?
It's expected to have the icon all the time when remote debugging is enabled (not necessarily active).

We were considering showing the icon only when a debugging session is active (WiFi or USB), would that be something you'd find more natural?
Flags: needinfo?(martijn.martijn)
Blocks: 1098345
(I filed bug 1098345 for that, because of IRC feedback. You're already cc/ed.)
Flags: needinfo?(martijn.martijn)
Janx, just to let you know I sent Guillaume a refined icon to try out. Hopefully it works out better, if not I'll keep refining :).
Comment on attachment 8516115 [details]
screenshot.png

Guillaume told me this is done, so removing feedback request.
Attachment #8516115 - Flags: feedback?(epang)
This patch updates gaia-icons to the latest version which includes the new bug icon.
Wilson, can you have a look?
Attachment #8531673 - Flags: review?(wilsonpage)
Attachment #8531673 - Flags: review?(wilsonpage) → review+
Thanks Wilson for the review. gaia-icons update landed in master in https://github.com/mozilla-b2g/gaia/commit/e892da99d144764ea4dfbbb52ce66e276b357698
You need to log in before you can comment on or make changes to this bug.