1258365 - New style for popup previews

Status: NEW

(DevTools :: Shared Components, defect, P3)

Description

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: popup-spec-sheet.png

The preview popups in devtools (image popups and the event popup in the Inspector come to mind) could use a visual refresh. I'm attaching a spec sheet with what I think they should look like.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: popup-spec-sheet.png

Comment 2

[Patrick Brosset <:pbro>]

Making the shadow follow the shape including the triangle arrow will require a css filter (box-shadow won't work), something like this: http://jsbin.com/nopugoqeti/edit?html,css,output

Comment 3

[Brian Grinstead [:bgrins]]

Moving this into Shared Components.  Even though it's not a new component I can't think of a better place to put it

Comment 4

[Lin Clark [:linclark]]

There's a good chance this will be taken care of as part of rewritting, so sooner rather than later, but I'm going to mark it as a P3 for now.

Comment 5

[Jens]

Nitpick: Between number and unit there should always be a space, see https://en.wikipedia.org/wiki/Space_%28punctuation%29#Spaces_and_unit_symbols or http://tex.stackexchange.com/questions/20962/should-i-put-a-space-between-a-number-and-its-unit 

So in the screenshot (and the upcoming implementation) it should be "200 x 600 px" not "200 x 600px"

Comment 6

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: popup-spec-sheet.png

×(In reply to Jens from comment #5)
> Nitpick: Between number and unit there should always be a space, see
> https://en.wikipedia.org/wiki/
> Space_%28punctuation%29#Spaces_and_unit_symbols or
> http://tex.stackexchange.com/questions/20962/should-i-put-a-space-between-a-
> number-and-its-unit 
> 
> So in the screenshot (and the upcoming implementation) it should be "200 x
> 600 px" not "200 x 600px"

Updated the spec sheet to reflect this. Thanks!

Unicode x seen in the mockup: ×