Provide one-click control for user agent mode

[philip-lamb]

From @cvan in #19: "To get many sites to work, I have had to manually toggle the UA from the Developer Options. given that the other VR browsers expose a Request Desktop Site option in obvious spots in the browser chrome UI, could we get a design spec for this."

For @thenadj When considering the browser meta-options under redesigned of the functions currently in the tray, we should add a button to toggle the UA mode. I.e. If they user has the default (mobile) UA selected in display settings, the button would switch to desktop UA for that page, and vice-versa.

[thenadj]

@philip-lamb We can add a button to the tray to toggle the UA mode. If that sounds like an ok solution to you let us know and we'll update the UI Spec for the tray.

[thenadj]

@philip-lamb @cvan We added the UA mode toggle to the mini tray. See UIS-26 for details. Hope that works.
UIS-26 Mini Tray_008.pdf

[philip-lamb]

Since at present the tray is always visible, I think placing occasionally-required options like this at the top level of the tray risks crowding the user's attention. So perhaps we need to work on the UI for a second-tier of tray-like meta options. Desktop Firefox has this kind of UI:

[MortimerGoro]

+1 for the second-tier menu

[cvan]

Oculus Browser has it in the URL bar. Outside-but-next to the URL bar (or a hamburger menu) could be an option.

[thenadj]

@cvan @philip-lamb @avrignaud
DE-34 Switching User Agent_001.pdf
Attached are some options. What was the original reason for moving this out of Settings? Unless we add it to the tray (which I don't think is the best solution), we have the exact same amount of steps to access it. See attached.

[MortimerGoro]

@thenadj my favorite is option B with the hamburger menu. That menu can scale in the future. I miss having resize on 1 click though.

Another alternative is to implement it on a long press on the reload button, I use that gesture a lot on Safari iOS. But discoverability may be a problem. Related same longpress gestures could be used on the back button to see the list back pages in the current session.

I think the use case is to only switch between desktop/mobile. We can consider "VR" and "Mobile" on the same category for the switch. So it can be clicked in one step less.

What was the original reason for moving this out of Settings?

Users want to temporarily toggle this only for specific page, and not change the default for all. We are not moving it away for settings (that's the default for all webpages)

[thenadj]

@MortimerGoro

Option B is mostly in alignment with our latest thinking to get rid of the tray all together and move it into the sidebar. We still have to think through some scenarios where it might be hard to access like for example when the user resizes the window really large. One option would be to have two arrangements for the sidebar. In normal window sizes it could be vertically aligned to the side of the window but when the window gets really large it could be horizontally arranged to the right of the URL bar. We'll put some Sketchbox prototypes together to better illustrate this.

The reason for the FxR logo instead of a hamburger menu is mostly branding. There might be an option to add a down arrow next to the FxR logo (or some other visualization) to make it more clear that the logo is an affordance. Also by default the sidebar would be open and on close the icons might animate into the logo to show their place of origin.

Long press on reload is an option but I'd be concerned about discoverability. It could be an extra place to add it but then again, why have two places. I do like the long press option for back button, that might be a helpful way to navigate back.

Yeah, it could be a toggle to switch between Desktop and Mobile, that would reduce one step.

And thanks for explaining the one-off user interaction for specific pages. That makes sense. And glad we're leaving it in Settings.

[jvonitter]

This design is done and ready for implementation. See https://trello.com/c/iHTtOpuk/372-uis-79-switching-user-agent

[keianhzo]

@jvonitter @thenadj Continuing here the conversation stared in #1372. There is a build with the spec implementation, you can get in here: https://send.firefox.com/download/56f8b89f1b39add9/#Zz0--lve_J2P5qvO1LXDDw

The current implementation changes the UA for the current Gecko Session only, same as Firefox Android does it just for the current tab. In case a new session or window is opened, the global setting applies. If the settings UA switch is changed it updates the current session and the navigation bar switch but changing the navigation bar switch just applies to the current session and it doens't alter the current UA global setting.

[thenadj]

@keianhzo Attached is a document with some small tweaks for visual alignment of the icons in the URL bar. Hope this makes sense.
BUG-26 UA icon alignment_002.pdf

[keianhzo]

@thenadj You can test the latest updates here: https://send.firefox.com/download/270d7f3dba6b0023/#XaF-OIlj5LvLjrXLM5HB3w

[thenadj]

@keianhzo Thx for the updated APK. There is a small change we'd like you to make. Adjust the size of the search icon to match the rest of the icons. See attached document for details. Thx much!
BUG-27 History & Bookmarks in Awesomebar_001.pdf

[thenadj]

@keianhzo Thx for the updated APK. There is a small change we'd like you to make. Adjust the size of the search icon to match the rest of the icons. See attached document for details. Thx much!
BUG-27 History & Bookmarks in Awesomebar_001.pdf

[jvonitter]

@keianhzo I believe this is just waiting for the updated icons and then we can close.

[keianhzo]

@jvonitter this has been addressed here: #1449

Also this issue was referenced in the settings PR but for some reason it wasn't automatically closed. Closing it now.

[jvonitter]

👍