1278131 - Allow taking screenshot with device frame

Status: NEW

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[Tim Nguyen :ntim]

See: https://twitter.com/ChromeDevTools/status/738864794497753088

Not necessarily the frame of the right device, but a generic frame for the device type.

Comment 1

[Tim Nguyen :ntim]

Chrome has a special frame for iPad/iPhones and Nexus phones. Other devices are not supported it seems.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Interesting idea!  Reminds of some design tools that offer a similar device frame option.

Comment 3

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

Facebook has a list of design files for popular devices that would be helpful for this: http://facebook.design/devices.html

Comment 4

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Chrome DevTools recently added device frames, so we could investigate their approach as well.

Comment 5

[Matteo Ferretti [:zer0] [:matteo]]

So, it seems that Google Chrome adds the device's frame only when the design mode is set on "mobile" and it has an actual phone selected from the device list – basically, it loads the phone's specific frame, not a generic one.
(Note also that the viewport can't be resized if it has a device selected)

Comment 6

[roni]

So I just moved to Firefox Developer Edition from Google Chrome and I'd love to have this feature as I was used to it on Chrome. Sad to see it is missing, it really adds certain feel to it while developing and the screenshots look better when showcasing your work. Please consider adding it.

Comment 7

[Serg]

This issue has been open for 6 years. Is it only other priorities holding back this enhancement or is there something else wrong with the proposal?