Paul Rouget [:paul] Reporter
	Description • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 1 • 10 years ago

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

	Paul Rouget [:paul] Reporter
	Comment 2 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 3 • 10 years ago

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?

	Paul Rouget [:paul] Reporter
	Comment 4 • 10 years ago

Comment on attachment 8410278 [details]
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.

	Jan Keromnes [:janx] Assignee
	Comment 5 • 10 years ago

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.

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 6 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 7 • 10 years ago

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

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 8 • 10 years ago

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

	Paul Rouget [:paul] Reporter
	Comment 9 • 10 years ago

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.

	Dave Hylands [:dhylands]
	Comment 10 • 10 years ago

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

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 11 • 10 years ago

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.

	Dave Hylands [:dhylands]
	Comment 12 • 10 years ago

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

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 13 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 14 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 16 • 10 years ago

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!

	Helen Huang [:HHuang]
	Comment 17 • 10 years ago

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?

	Eric Pang [:epang] UX
	Comment 18 • 10 years ago

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

	Eric Pang [:epang] UX
	Comment 19 • 10 years ago

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!

	Guillaume Marty [:gmarty]
	Comment 20 • 10 years ago

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

	Eric Pang [:epang] UX
	Comment 21 • 10 years ago

(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

	Rob MacDonald [:robmac]
	Comment 22 • 10 years ago

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

	Guillaume Marty [:gmarty]
	Comment 23 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 24 • 10 years ago

Thanks a lot Guillaume!

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

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 25 • 10 years ago

Jan, what do we need to keep this moving?

	Jan Keromnes [:janx] Assignee
	Comment 26 • 10 years ago

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

	J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)
	Comment 27 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 28 • 10 years ago

Comment on attachment 8467125 [details]
screenshot.png

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

	Jan Keromnes [:janx] Assignee
	Comment 29 • 10 years ago

New pull request.

	Jan Keromnes [:janx] Assignee
	Comment 30 • 10 years ago

Screenshot of new pull request.

	Jan Keromnes [:janx] Assignee
	Comment 31 • 10 years ago

Comment on attachment 8516112 [details]
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.

	Michael Henretty [:mikehenrty][:mhenretty]
	Comment 32 • 10 years ago

Comment on attachment 8516112 [details]
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

	Jan Keromnes [:janx] Assignee
	Comment 33 • 10 years ago

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.

	Frederik Braun [:freddy]
	Comment 34 • 10 years ago

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.

	Jan Keromnes [:janx] Assignee
	Comment 35 • 10 years ago

Comment on attachment 8516112 [details]
Add a remote debugging status icon.

Michael, I replied to your comments and added integration tests. Please have a look again.

	Jan Keromnes [:janx] Assignee
	Comment 36 • 10 years ago

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.

	Martijn Wargers (dead)
	Comment 37 • 10 years ago

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?

	Jan Keromnes [:janx] Assignee
	Comment 38 • 10 years ago

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?

	Jan Keromnes [:janx] Assignee
	Comment 39 • 10 years ago

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

	Eric Pang [:epang] UX
	Comment 40 • 10 years ago

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

	Jan Keromnes [:janx] Assignee
	Comment 41 • 10 years ago

Comment on attachment 8516115 [details]
screenshot.png

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

	Guillaume Marty [:gmarty]
	Comment 42 • 10 years ago

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

	Guillaume Marty [:gmarty]
	Comment 43 • 10 years ago

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