New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement a developer options panel #283

Closed
MortimerGoro opened this Issue Jul 30, 2018 · 26 comments

Comments

Projects
8 participants
@MortimerGoro
Collaborator

MortimerGoro commented Jul 30, 2018

We need some panel in FxR to toggle some develoepr options (e.g. show JS console logs, enable remote debugging, enable environment override for designers, etc)

@MortimerGoro MortimerGoro added the Design label Jul 30, 2018

@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Jul 31, 2018

I've enabled GeckoConsole in Release builds until we have a UI to turn it on.

@avrignaud

This comment has been minimized.

avrignaud commented Jul 31, 2018

Unclear where the design work might be for this? Is it for a "Developer Options" button in Settings, that than opens... what? Or something else? Thanks!

@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Jul 31, 2018

We need to be able to toggle Dev Tools support and toggle sending GeckoConsole to logcat. So two on/off switches basically.

@avrignaud

This comment has been minimized.

avrignaud commented Jul 31, 2018

Right. But I'm not clear if this needs to be designed and explictly user facing? Ie, couldn't we do this in about:config or about:devtools or something else? Also trying to understand if there are other dev-facing toggles that we should be considering?

@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Jul 31, 2018

We don't have the ability to set prefs from custom about: pages. It needs to be done from the app via the GeckoView API. I've verified we only need on/off switches for both right now.

@avrignaud

This comment has been minimized.

avrignaud commented Aug 1, 2018

Dug into this a bit more, and understand. That said, we are under a ton of UI/UX stress right now for 1.0. So, for 1.0 we'll implement a single "Enable Developer Options" option in Settings, and we can revisit something more granular for 1.1 or beyond. @bluemarvin Can you please list exactly which two options we are looking for the ability to toggle for 1.0?

@thenadj I'll work with you to prioritize. But at the highest level, we need a way to enable two developer options in the settings (which Randall will list). One possibility is to have a single "Enable all Developer Options" switch (and we turn on appropriate settings behind the scenes, and link to a SUMO page detailing what we do). Another option is to try and fit the two separate options on a single button/hex. But note that this is just a first step - we will likely have to find a way to allow users to access more developer options in 1.1. (For context, you can look at the Web Developer selections in Desktop Firefox settings.)

@MortimerGoro

This comment has been minimized.

Collaborator

MortimerGoro commented Aug 1, 2018

I'd use a UI that makes it easy to add more items (e.g. a List of items with scroll). We may have 2 options now but 10 in a future release. This will be a panel for developers. Example:

image

Some options that we can add now:

  • Enable Remote Debugger
  • Enable JS Console Output
  • Enable Environment Override
@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Aug 1, 2018

The three options @MortimerGoro list look good to me. We probably want a note in there some place that Firefox 63 is the minimum version required for developer tools (currently nightly).

GeckoView does not support WiFi Developer Tools and that is probably for the best since it requires a QR code reader on the device. So on/off for developer tools is more than adequate for now.

@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Aug 1, 2018

To make things easier for automation, we need to make sure that Dev Tools and GeckoConsole are ON for Debug builds and OFF for Release builds. This isn't a UI issue but something we need to account for when implementing the feature in FxR.

@cvan

This comment has been minimized.

Contributor

cvan commented Aug 1, 2018

To pile on feature requests for the design exploration:

  • It would be nice to expose the buildID by double-clicking on the version timestamp. (Filed as issue #289.)
  • It would be nice to add an auto-update mechanism for automatically checking, downloading, and installing the latest APK for the installed flavour. (This is quite a bit of work to add, so I have filed issue #295 for that.)
@nancyhang

This comment has been minimized.

Collaborator

nancyhang commented Aug 2, 2018

@nancyhang nancyhang added the P0 label Aug 2, 2018

@nancyhang nancyhang added this to To do in v1.0 via automation Aug 2, 2018

@thenadj

This comment has been minimized.

thenadj commented Aug 3, 2018

We're on it!

@avrignaud

This comment has been minimized.

avrignaud commented Aug 3, 2018

Additional fields required for Desktop site functionality testing:

  • Dev Options: Toggle between mouse/touch events, toggle between desktop/mobile site rendering, set pixel ratio for window

@larsbergstrom larsbergstrom added this to the V1.0 milestone Aug 3, 2018

@cvan

This comment has been minimized.

Contributor

cvan commented Aug 7, 2018

  • Dev Options: Toggle between mouse/touch events

@avrignaud: Gecko should be already synthesising click events from touch* events. Is something amiss here?

@cvan

This comment has been minimized.

Contributor

cvan commented Aug 7, 2018

toggle between desktop/mobile site rendering

👍 @larsbergstrom filed this as issue #19


set pixel ratio for window

👍 @bluemarvin filed this as issue #318

@avrignaud

This comment has been minimized.

avrignaud commented Aug 10, 2018

Working on clarifying developer options. Please review the list below and give feedback. Thanks!

Enable Remote Debugging (toggle box)
Show JS Console Logs (toggle box)
Enable Environment Override (toggle box)
Request Desktop Version of web pages (toggle box)
Select Mouse or Touch Events (toggle between "Mouse"/"Touch" values - Default Touch to start)
Set Display Density (enter in value greater than 1 - 1.0, 1.5. 2, etc) - RESTART REQUIRED, so will need prompt to confirm or cancel
Set Window Size (enter in desired resolution value - 1024x768)

@cvan

This comment has been minimized.

Contributor

cvan commented Aug 13, 2018

what does Show JS Console Logs do? redirect console logs to adb logcat?

Remote Debugging enables a lot of this: logging JS, debugging JS, inspecting network requests, etc. so that's great to have.

which of these are enabled by default - and for the non-boolean fields, what are the text defaults or field placeholder text?

@thenadj

This comment has been minimized.

thenadj commented Aug 14, 2018

We got a design and it's attached. Please note that the settings dialog has an an entry button into the dev options dialog. Also the settings dialog can scale and we took it out of it's container. @keianhzo Slack me if you have specific questions, happy to go over any details with you.
UIS-39 Developer Options Panel_002.pdf

@thenadj

This comment has been minimized.

thenadj commented Aug 14, 2018

Updates to settings UIS which is related to this.
UIS-16 Settings_011.pdf
@nancy Not sure if Settings needs a separate ticket. They are related and should be addressed at the same time.

@keianhzo

This comment has been minimized.

Collaborator

keianhzo commented Aug 14, 2018

@thenadj I'll need SVGs for the radio button (selected/not selected) and the developer options settings icon.

@nancyhang

This comment has been minimized.

Collaborator

nancyhang commented Aug 14, 2018

@thenadj The settings panel was completed sprints ago, https://mozillaresearch.atlassian.net/browse/CXB-179?jql=text%20~%20%22settings%20panel%22

What specific changes are being made to the settings panel?

@keianhzo

This comment has been minimized.

Collaborator

keianhzo commented Aug 14, 2018

@nancyhang There is a new button to open the Developer options panel.

@nancyhang

This comment has been minimized.

Collaborator

nancyhang commented Aug 14, 2018

Ok, lets leave that in this ticket. @keianhzo @thenadj

@thenadj

This comment has been minimized.

thenadj commented Aug 14, 2018

@keianhzo Attached are the SVGs for the design.
SVGs.zip

@bluemarvin

This comment has been minimized.

Collaborator

bluemarvin commented Aug 15, 2018

In addition to Display density, it turns out there is one and possibly two other settings we will need in the developer panel:

Display DPI. This will be an integer. It should probably default to 96
Screen size. It might be okay to just set screen size to be the same as window size.
If we want the default values to match the oculus, the window size should be 800x450 and the display density should be 1.0. They make their screen size match the window size.

@keianhzo keianhzo removed the blocked label Aug 15, 2018

@thenadj

This comment has been minimized.

thenadj commented Aug 18, 2018

@keianhzo
During our last design review we learned that we can't darken the browser window in v1 as per our last settings dialog design. So here is a new design with an alpha channel background behind the settings dialog buttons.
UIS-16 Settings_012.pdf

v1.0 automation moved this from To do to Done Aug 23, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment