1547661 - [remote-dbg-next] Improve visuals for the Sidebar empty state

Status: NEW

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

Description

[Julian Descottes [:jdescottes]]

After the last UI changes from Bug 1505126, the empty state of the sidebar looks odd.

• "USB Enabled" message is aligned to the left
• "No devices discovered" message is centered
• "Refresh devices" button is centered

This was already the case before, but the "USB Enabled" used to have a background that was as wide as the sidebar, and the width of the sidebar was smaller, which made the issue less visible.

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: empty_state.png

Comment 2

[Julian Descottes [:jdescottes]]

The text color for No devices discovered should also be gray 50

Comment 3

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

Attachment: Screenshot 2019-04-29 at 11.24.41.png

What might help would be to align the notification in the middle same as the refresh devices button and the No devices detected info.

Changing the order and moving the notification down would support the grouping of the state & tasks related to support devices.

Comment 4

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

Attachment: Screenshot 2019-04-29 at 11.25.21.png

When we move the notification below (not seen in screenshot), it will be still visible when we do not have any devices visible. But will be pushed down the more devices we have in the list.

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: no_devices_left_aligned.png

Another option, reusing IconLabel for the "no devices" message.