1551174 - Inactive CSS - visual polish

Status: VERIFIED FIXED

(DevTools :: Inspector: Rules, enhancement)

Description

[Victoria Wang [:victoria]]

HOORAY for this feature landing! Here are additional design details I have now that I'm looking at the implementation.

The new grayscale inactive colors is the most important part, but I'm hoping we can fit in these others as well.

• Extra margin between paragraphs (about 14px, or whatever 1em is)
• Same amount of padding on all sides - match left spacing. Looks like we need 4px less on the side with the arrow, 2px less on the other side.
• Whole tooltip 1px to the right and 2px lower
• Fully opaque, white-colored background
• Drop shadow should be half as dark (I think this is the MacOS doubled dropshadow issue - it should match the meatball menu's shadow)
• Less space between ending icons and CSS - seems like we can just remove margin-inline-start: 5px
• I think florens may have a better info icon that will be more legible at this small size
• Warning icon should be smaller now to match the size of the info icon :)
• Seems like it would be helpful if you could select the tooltip text

Comment 1

[Victoria Wang [:victoria]]

Same mockup as before shows how this should look https://mozilla.invisionapp.com/share/UQRBDJ8WCTH#/screens

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1551174 - Inactive CSS - visual polish r?pbro!

Summary

• [ ] Extra margin between paragraphs (about 14px, or whatever 1em is)
• [ ] Same amount of padding on all sides - match left spacing. Looks like we need 4px less on the side with the arrow, 2px less on the other side.
• [ ] Whole tooltip 1px to the right and 2px lower
• [X] Fully opaque, white-colored background
• [ ] Drop shadow should be half as dark (I think this is the MacOS doubled dropshadow issue - it should match the meatball menu's shadow)
• [X] Less space between ending icons and CSS - seems like we can just remove margin-inline-start: 5px
• [X] I think florens may have a better info icon that will be more legible at this small size !!I just created a new one!!
• [ ] Warning icon should be smaller now to match the size of the info icon :)
• [ ] Seems like it would be helpful if you could select the tooltip text

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Icons are the same size.png

Warning icon should be smaller now to match the size of the info icon :)

It's just an illusion... see the zoomed version above with a red outline around the divs ;)

I will make it slightly smaller and change the background position as it is slightly higher up and that could be adding to the illusion.

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Padding.png

Same amount of padding on all sides - match left spacing. Looks like we need 4px less on the side with the arrow, 2px less on the other side.

Done... I have added a red outline around the paragraphs here so you can see that the padding is now even. Don't worry about the border... that is just my mac ;)

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: shadow.png

Drop shadow should be half as dark (I think this is the MacOS doubled dropshadow issue - it should match the meatball menu's shadow)

It looks right to me... here is a comparison.

Comment 6

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

• Whole tooltip 1px to the right and 2px lower

I have moved this out to bug 1552146.

Comment 7

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: After changes

After changes.

@Victoria sent you a .dmg in Slack including the changes you asked for.

Comment 8

[Victoria Wang [:victoria]]

Regarding the doorhanger drop shadow: I realized this is a bug that affects most door hangers. According to #firefox on slack this is unreported so I will file a separate bug for this issue.

Comment 9

[Victoria Wang [:victoria]]

(In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #4)

Created attachment 9065339 [details]
Padding.png

Same amount of padding on all sides - match left spacing. Looks like we need 4px less on the side with the arrow, 2px less on the other side.

Done... I have added a red outline around the paragraphs here so you can see that the padding is now even. Don't worry about the border... that is just my mac ;)

I was having trouble downloading the build (on a bus right now :)) but based on your screenshot: Top and padding look good, but the left padding looks too small. I know the padding is the same based on actual pixel numbers and based on the paragraph borders, but I was thinking more about the visual size of the white space. (Sorry this was unclear.) Could you try the equivalent of 13px for the side paddings?

(Edit: was able to download the build tonight and looked at this again. Yep, it should be about 13px between each edge of the text to the edge of the tooltip (same as mockup).)

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9580f1df7a53
Inactive CSS - visual polish r=pbro

Comment 11

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/9580f1df7a53

Comment 12

[Cristian Fogel [:cfogel]]

Verified as well with 69.0b3.