1547987 - [remote-dbg-next] Replace the Connect button in the Sidebar by an icon-button

Status: NEW

(DevTools :: about:debugging, defect, P3)

Description

[Julian Descottes [:jdescottes]]

The connect button displayed in the sidebar takes a lot of the width available to display the runtimes. It makes it difficult to device on a good sidebar width for the application: see Bug 1547984.

If the sidebar width is big enough to show Runtime/Device names + button, then there is a lot of empty space when the devices are connected, since the button disappears.

The goal of this bug is to reduce the impact of the button.
One proposed solution could be to use a smaller icon-button.

I think we should also discuss more drastic approaches: eg, remove the button completely, and connect when users click on the whole sidebar item.

Comment 1

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Matt and I had a few discussions around this a few weeks back and the idea was to create a plug icon.
connect = power plug and power socket not plugged in
disconnect = power plug and power socket plugged in

As creating icons might take some time, an alternative could be to use the fullscreen and fullscreen exit icon, rotated by 45°. https://design.firefox.com/icons/viewer/#

Comment 2

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: connect

Comment 3

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: disconnect

Comment 4

[Ola Gasidlo [:ogasidlo] [:ola] OOO - please ping :ladybenko:]

Attachment: plug - connect : disconnect

This is just a quick visualization of the initial idea and definitely needs to be designed by a designer.

Comment 5

[Julian Descottes [:jdescottes]]

As mentioned on slack, we let's wait until 69 cycle if we want to address this. It is late in the cycle and I don't want to risk replacing a critical action such as connect with an icon button that might not be easy to understand for users.