1494894 - Review CSS of sidebar

Status: RESOLVED FIXED

(DevTools :: about:debugging, enhancement, P1)

Description

[Belén [:ladybenko]]

- Polish CSS of the Sidebar
- Make sure that the styles conform to spec (like about:preferences)

Comment 1

[Julian Descottes [:jdescottes]]

Currently, non-selectable sidebar items have opacity: 0.5 set on the whole container. Consequently the connect button looks disabled.

I don't think it's worth filing a dedicated bug for it, so I am just commenting here.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: image.png

first button is the current design, second button is without applying opacity: 0.5 on the button.

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: device_inconsistency.png

network location devices have a smaller height and the icon is smaller so it looks off.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1494894 - connect page CSS: fix classname for Enable USB button;r=ladybenko

Not related to Sidebar CSS fixes but I don't think it is worth its own
bug.

Comment 5

[Julian Descottes [:jdescottes]]

Attachment: Bug 1494894 - sidebar CSS: use color instead of opacity for unselectable items;r=ladybenko

Depends on D9652

This allows the Connect button to no longer look disabled. However we could maybe mutualize
colors a bit more, either with a --color-disabled variable or with a class.

Comment 6

[Julian Descottes [:jdescottes]]

Attachment: Bug 1494894 - sidebar CSS: use constant sidebar item height;r=ladybenko

Depends on D9653

Comment 7

[Julian Descottes [:jdescottes]]

Attachment: Bug 1494894 - sidebar CSS: remove duplicated padding on FixedSidebarItem;r=ladybenko

Depends on D9654

This padding is already set on SidebarItem so I think we can skip it here?

Comment 8

[Julian Descottes [:jdescottes]]

Attachment: Bug 1494894 - sidebar CSS: keep USB and network runtime icons aligned;r=ladybenko

Depends on D9655

Comment 9

[Julian Descottes [:jdescottes]]

Attachment: UI_with_current_patches.png

Comment 10

[Julian Descottes [:jdescottes]]

Attachment: UI_before_current_patches.png

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2812a46d115d
sidebar CSS: use color instead of opacity for unselectable items;r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/385fec55c19a
sidebar CSS: use constant sidebar item height;r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/b695f0e14d61
sidebar CSS: remove duplicated padding on FixedSidebarItem;r=ladybenko
https://hg.mozilla.org/integration/autoland/rev/37b458c3e91e
sidebar CSS: keep USB and network runtime icons aligned;r=ladybenko

Comment 12

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/2812a46d115d
https://hg.mozilla.org/mozilla-central/rev/385fec55c19a
https://hg.mozilla.org/mozilla-central/rev/b695f0e14d61
https://hg.mozilla.org/mozilla-central/rev/37b458c3e91e