1471460 - Adjust the styles of the active markup display badges

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

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

https://bugzilla.mozilla.org/show_bug.cgi?id=1456680#c37

https://mozilla.invisionapp.com/share/FAGU0I48VD7#/screens

Comment 1

[Victoria Wang [:victoria]]

I'm glad you suggested I take a look at this in Nightly — I tested out the colors I suggested before and realized they weren't very good because the selected effect wasn't strong enough. Also I had neglected dark mode.

So now, I think the changes I would make to the current selected badge style is just to tone down the white border a bit and remove the hover state for selected styles (which currently is a white on gray look).

Light mode:  border: 1px solid #ffffffb3;
Dark mode:  border: 1px solid #fff6;

Also, it seems to take a bit too much time for the selected styling to appear after I click the badge, which gets a bit confusing. Is there some way to make it appear instantaneous with the click?

Comment 2

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

Attachment: 1471460.patch

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c09a146819d3
Adjust the styles of the active markup display badges. r=miker

Comment 4

[Eliza Balazs [:ebalazs_]]

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