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

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Developer Tools, defect)

Description

[Paul Rouget [:paul]]

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

Comment 1

[Jan Keromnes [:janx]]

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".

Comment 2

[Paul Rouget [:paul]]

(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.

Comment 3

[Jan Keromnes [:janx]]

Attachment: github pull request

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?

Comment 4

[Paul Rouget [: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.

Comment 5

[Jan Keromnes [:janx]]

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.

Comment 6

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

(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.

Comment 7

[Jan Keromnes [:janx]]

(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!

Comment 8

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

(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. ;)

Comment 9

[Paul Rouget [:paul]]

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.

Comment 10

[Dave Hylands [:dhylands]]

A small bug icon: (smoething like one of the black and white ones from herehttps://www.google.com/search?q=bug+icon ) seems appropriate

Comment 11

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

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.

Comment 12

[Dave Hylands [:dhylands]]

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).

Comment 13

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

(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.)

Comment 14

[Jan Keromnes [:janx]]

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).

Comment 15

[Jan Keromnes [:janx]]

Attachment: fly.svg

Comment 16

[Jan Keromnes [:janx]]

Attachment: screenshot.png

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!

Comment 17

[Helen Huang [: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?

Comment 18

[Eric Pang [:epang] UX]

(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.

Comment 19

[Eric Pang [:epang] UX]

Attachment: 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!

Comment 20

[Guillaume Marty [:gmarty]]

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

Comment 21

[Eric Pang [:epang] UX]

(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

Comment 22

[Rob MacDonald [:robmac]]

(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!

Comment 23

[Guillaume Marty [:gmarty]]

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

Comment 24

[Jan Keromnes [:janx]]

Thanks a lot Guillaume!

Also, decreasing Vivien's red counter. I'll ask comment 14's questions IRL.

Comment 25

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

Jan, what do we need to keep this moving?

Comment 26

[Jan Keromnes [: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

Comment 27

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

(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.

Comment 28

[Jan Keromnes [:janx]]

Comment on attachment 8467125 [details]
screenshot.png

I liked the fly though, it had a nice "I'm-on-your-screen" look.

Comment 29

[Jan Keromnes [:janx]]

Attachment: Add a remote debugging status icon.

New pull request.

Comment 30

[Jan Keromnes [:janx]]

Attachment: screenshot.png

Screenshot of new pull request.

Comment 31

[Jan Keromnes [:janx]]

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.

Comment 32

[Michael Henretty [:mikehenrty][: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

Comment 33

[Jan Keromnes [:janx]]

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.

Comment 34

[Frederik Braun [:freddy]]

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 35

[Jan Keromnes [:janx]]

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.

Comment 36

[Jan Keromnes [:janx]]

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.

Comment 37

[Martijn Wargers (dead)]

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?

Comment 38

[Jan Keromnes [:janx]]

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?

Comment 39

[Jan Keromnes [:janx]]

(I filed bug 1098345 for that, because of IRC feedback. You're already cc/ed.)

Comment 40

[Eric Pang [:epang] UX]

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 41

[Jan Keromnes [:janx]]

Comment on attachment 8516115 [details]
screenshot.png

Guillaume told me this is done, so removing feedback request.

Comment 42

[Guillaume Marty [:gmarty]]

Attachment: Github PR to update gaia-icons

This patch updates gaia-icons to the latest version which includes the new bug icon.
Wilson, can you have a look?

Comment 43

[Guillaume Marty [:gmarty]]

Thanks Wilson for the review. gaia-icons update landed in master in https://github.com/mozilla-b2g/gaia/commit/e892da99d144764ea4dfbbb52ce66e276b357698