1173005 - Tweak the button and checkbox options alignment in the pseudolock class options panel

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

I made the following suggestions to shorlander:

(1) Use a button that is highlighted blue similar to the element picker when selected instead of the current blue background.

(2) Left align the options but make each item take equal spacing https://cloudup.com/cefTEeH79Dq

Comment 1

[Stephen Horlander [:shorlander]]

Attachment: devTools-pseudo-class-toggled.svg

Comment 2

[Tim Nguyen :ntim]

(In reply to Gabriel Luong [:gl] from comment #0)
> I made the following suggestions to shorlander:
> 
> (1) Use a button that is highlighted blue similar to the element picker when
> selected instead of the current blue background.
There's an unwanted CSS filter applied there unfortunately, which makes the icon brown when checked.

Bug 1173397 should fix this.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 1173005.patch

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

- Fixed a margin issue appearing beneath the panel when inspecting pseudoelements. See https://cloudup.com/cBBSnEbJzhH
- Made the labels grow to take up the empty space

Comment 5

[Gabriel Luong [:gl] (ΦωΦ)]

@shorlander, just need a quick ui-review for the left alignments of the checkbox options. See https://cloudup.com/cgX0MZyZ_F1

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

No try needed since it is only css changes.

Comment 7

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/e3cc6999546b

Comment 8

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/e3cc6999546b