1594435 - Make remote control UX cue less annoying

Status: RESOLVED FIXED

(Remote Protocol :: Agent, enhancement, P3)

Description

[Andreas Tolfsen ❲:ato❳]

The visual UX cue we use when the remote agent (and Marionette) are
listening is not a great testimony to my great skills as a designer.

We should make it less annoying and more informative, potentially
by exposing a doorhanger with some useful information about where
the remote agent is listening and how many connections there are.

Comment 1

[Henrik Skupin [:whimboo][⌚️UTC+2]]

Note that Chrome shows a tab-wide notification right under the toolbar. The drawback here is that it removes pixels from the real content size, so tests would have to incorporate that.

Comment 2

[juraj.masiar]

Attachment: Screenshot 2021-02-24 10.11.27.png

Since Firefox 87 this now affects users of web-ext tool.
Is there a way to disable it? Ideally with about:config since those can be set when executing web-ext.

I'm developing addons every day and this is a bit ugly to look at. Especially in the Dark theme.
But it's for sure better than that Chrome yellow toolbar that takes space... (please don't do that one)

Comment 3

[juraj.masiar]

Attachment: URL not readable

Additionally the URL is very hard to read in this mode.
Could you at least change the color of those stripes to improve contrast?
Please.

Comment 4

[Henrik Skupin [:whimboo][⌚️UTC+2]]

Yes, any RDP connections like for the multi-process browser toolbox is using the same cue now (since bug 1659129 was fixed) as the remote agent and Marionette. Given that there is an upcoming UX refresh for Firefox it might be a good time to check what can be done to make it less annoying, but still keep it prominent to indicate that the browser is under remote control.

Comment 5

[Murz]

I always use Firefox with remote connections enabled to debug the webpages. Is there any way to force set flat background color via userChrome.css or any other hacky way, to remove this very annoying striped background?

Comment 6

[Henrik Skupin [:whimboo][⌚️UTC+2]]

As it looks like with MR1 (the new Proton design) the Robot icon is no longer present, and we only show the striped location bar and auto-complete popup, whereby both are barely readable with dark mode. To not loose our UX cue we would need an update for it.

Honza, to whom we should speak to get some updated UX design?

Comment 7

[Julian Descottes [:jdescottes]]

(In reply to Murz from comment #5)

I always use Firefox with remote connections enabled to debug the webpages. Is there any way to force set flat background color via userChrome.css or any other hacky way, to remove this very annoying striped background?

I am curious about your workflow here.
Allowing remote connections via --start-debugger-server should only be useful when you need to debug a given Firefox instance remotely.
Do you need to connect to Firefox remotely to debug all your webpages? Are you mostly testing on mobile?

Regarding userChrome.css, you could set a rule such as

:root[remotecontrol] #urlbar-background {
  background: white !important;
}

to override the stripes (obviously you can set whatever color works best for you).

(In reply to juraj.masiar from comment #2)

Created attachment 9205209 [details]
Screenshot 2021-02-24 10.11.27.png

Since Firefox 87 this now affects users of web-ext tool.
Is there a way to disable it? Ideally with about:config since those can be set when executing web-ext.

I'm developing addons every day and this is a bit ugly to look at. Especially in the Dark theme.
But it's for sure better than that Chrome yellow toolbar that takes space... (please don't do that one)

web-ext starts Firefox using https://github.com/mozilla/node-fx-runner and passes --start-debugger-server in order to use DevTools APIs to install & reload the extension. See https://github.com/mozilla/node-fx-runner/blob/master/lib/run.js#L52

The issue here is that nothing differentiates the web-ext client from a potential attacker.

(In reply to Henrik Skupin (:whimboo) [⌚️UTC+1] from comment #6)

As it looks like with MR1 (the new Proton design) the Robot icon is no longer present, and we only show the striped location bar and auto-complete popup, whereby both are barely readable with dark mode. To not loose our UX cue we would need an update for it.

Honza, to whom we should speak to get some updated UX design?

I still see the robot when navigating to web pages, although it's missing from about: pages (eg about:newtab). Can you check if you see the same?

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Henrik Skupin (:whimboo) [⌚️UTC+1] from comment #6)

As it looks like with MR1 (the new Proton design) the Robot icon is no longer present, and we only show the striped location bar and auto-complete popup, whereby both are barely readable with dark mode. To not loose our UX cue we would need an update for it.

Honza, to whom we should speak to get some updated UX design?

As we discussed offline, we don't have a dedicated designer atm, but we can ask Victoria for review of whatever we put together. So, let's try to come up with new design ourselves and ask for review.

Comment 9

[Murz]

(In reply to Julian Descottes [:jdescottes] from comment #7)

(In reply to Murz from comment #5)

I always use Firefox with remote connections enabled to debug the webpages. Is there any way to force set flat background color via userChrome.css or any other hacky way, to remove this very annoying striped background?

I am curious about your workflow here.
Allowing remote connections via --start-debugger-server should only be useful when you need to debug a given Firefox instance remotely.
Do you need to connect to Firefox remotely to debug all your webpages? Are you mostly testing on mobile?

I simply need the ability to instantly connect to any currently opened tab on my main Firefox instance via debugger, instead of loading new Firefox instance (with --start-debugger-server argument) each time when I need to debug something, and reopen needed page in this new instance.

Seems --start-debugger-server didn't add so much overhead to main Firefox process, this is much more comfortable than debugging webpages in separate Firefox window (and sync tabs, extensions, password manager, history, etc between them).

If you can recommend some other method to toggle the "start-debugger-server" mode in working Firefox instance (without restarting and reloading tabs) - this will be great!

Comment 10

[Murz]

(In reply to Julian Descottes [:jdescottes] from comment #7)

Regarding userChrome.css, you could set a rule such as

:root[remotecontrol] #urlbar-background {
  background: white !important;
}

to override the stripes (obviously you can set whatever color works best for you).

Many thanks, this works well!

Comment 11

[juraj.masiar]

Attachment: old VS Proton

In the new Proton design the light stripes are slightly darker so the readability is better. But it's still bad, it needs to be darker.
I'm using web-ext with temp profiles so I don't think I can use userChrome.css to fix this.

Comment 12

[Julian Descottes [:jdescottes]]

Will try to propose something less jarring for dark theme.

Comment 13

[Julian Descottes [:jdescottes]]

I propose to use 2 sets of colors for light and dark toolbars. We can use a media query to pick the colors. Will push a patch with a proposal, we can fine tune the chosen colors.

Comment 14

[Julian Descottes [:jdescottes]]

Attachment: dark_toolbar_change.png

Comment 15

[Julian Descottes [:jdescottes]]

Attachment: image.png

Comment 16

[Julian Descottes [:jdescottes]]

Attachment: Bug 1594435 - [remote] Update stripe colors for remotecontrol visual cue to fit light & dark themes

Comment 17

[Julian Descottes [:jdescottes]]

Attachment: light_toolbar_change.png

almost identical, but removed transparency

Comment 18

[Julian Descottes [:jdescottes]]

Attachment: image.png

Comment 19

[juraj.masiar]

I like it! So much better with the red :)
To be consistent, don't forget the "Alpenglow" theme (it has a transparency as well).
Thank you!

Comment 20

[Julian Descottes [:jdescottes]]

Thanks for the feedback!

Alpenglow is "interesting" :)
It has both a light and a dark urlbar. It's light when it's unfocused and dark when it's focused.
Our media query considers it as a "light toolbar" but consequently the colors don't work so well when the urlbar gets focused.

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9cdefd7a1aaa
[remote] Update stripe colors for remotecontrol visual cue to fit light & dark themes r=desktop-theme-reviewers,harry

Comment 22

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/9cdefd7a1aaa