[DevTools] Option to show device frames in emulation mode

third_party/WebKit/Source/devtools/front_end/emulated_devices/module.json

 {
     "extensions": [
         {
             "type": "emulated-device",
             "device": {
                 "show-by-default": false,
                 "title": "iPhone 4" ,
                 "screen": {
                     "horizontal": {
                         "width": 480,
@@ skipping 26 matching lines @@
             }
         },
         {
             "type": "emulated-device",
             "order": 40,
             "device": {
                 "show-by-default": true,
                 "title": "iPhone 5",
                 "screen": {
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(iPhone5-landscape.svg)",
+                            "insets" : { "left": 115, "top": 25, "right": 115, "bottom": 28 }
+                        },
                         "width": 568,
                         "height": 320
                     },
                     "device-pixel-ratio": 2,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(iPhone5-portrait.svg)",
+                            "insets" : { "left": 29, "top": 105, "right": 25, "bottom": 111 }
+                        },
                         "width": 320,
                         "height": 568
                     }
                 },
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "user-agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1",
                 "type": "phone",
@@ skipping 12 matching lines @@
             }
         },
         {
             "type": "emulated-device",
             "order": 50,
             "device": {
                 "show-by-default": true,
                 "title": "iPhone 6",
                 "screen": {
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(iPhone6-landscape.svg)",
+                            "insets" : { "left": 106, "top": 28, "right": 106, "bottom": 28 }
+                        },
                         "width": 667,
                         "height": 375
                     },
                     "device-pixel-ratio": 2,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(iPhone6-portrait.svg)",
+                            "insets" : { "left": 28, "top": 105, "right": 28, "bottom": 105 }
+                        },
                         "width": 375,
                         "height": 667
                     }
                 },
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "user-agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1",
                 "type": "phone",
@@ skipping 12 matching lines @@
             }
         },
         {
             "type": "emulated-device",
             "order": 60,
             "device": {
                 "show-by-default": true,
                 "title": "iPhone 6 Plus",
                 "screen": {
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(iPhone6Plus-landscape.svg)",
+                            "insets" : { "left": 109, "top": 29, "right": 109, "bottom": 27 }
+                        },
                         "width": 736,
                         "height": 414
                     },
                     "device-pixel-ratio": 3,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(iPhone6Plus-portrait.svg)",
+                            "insets" : { "left": 26, "top": 107, "right": 30, "bottom": 111 }
+                        },
                         "width": 414,
                         "height": 736
                     }
                 },
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "user-agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1",
                 "type": "phone",
@@ skipping 153 matching lines @@
                 "type": "phone",
                 "user-agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36",
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "show-by-default": true,
                 "screen": {
                     "device-pixel-ratio": 2.625,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(Nexus5X-portrait.svg)",
+                            "insets" : { "left": 20, "top": 92, "right": 22, "bottom": 108 }
+                        },
                         "width": 411,
                         "height": 731
                     },
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(Nexus5X-landscape.svg)",
+                            "insets" : { "left": 94, "top": 23, "right": 100, "bottom": 20 }
+                        },
                         "width": 731,
                         "height": 411
                     }
                 },
                 "modes": [
                     {
                         "title": "default",
                         "orientation": "vertical",
                         "insets": { "left": 0, "top": 24, "right": 0, "bottom": 48 },
                         "image": "@url(google-nexus-5x-vertical-default-1x.png) 1x, @url(google-nexus-5x-vertical-default-2x.png) 2x"
@@ skipping 68 matching lines @@
             }
         },
         {
             "type": "emulated-device",
             "order": 30,
             "device": {
                 "show-by-default": true,
                 "title": "Nexus 6P",
                 "screen": {
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(Nexus6P-landscape.svg)",
+                            "insets" : { "left": 94, "top": 48, "right": 97, "bottom": 48 }

[dgozman, 2016/03/21 21:08:38]

Coordinate changes with Paul here: https://codereview.chromium.org/1822573002/

[mmccoy, 2016/03/21 22:03:05]

Merged and adjusted insets.

+                        },
                         "width": 773,
                         "height": 435
                     },
                     "device-pixel-ratio": 3.3,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(Nexus6P-portrait.svg)",
+                            "insets" : { "left": 58, "top": 94, "right": 58, "bottom": 97 }
+                        },
                         "width": 435,
                         "height": 773
                     }
                 },
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "user-agent": "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36",
                 "type": "phone",
@@ skipping 337 matching lines @@
             }
         },
         {
             "type": "emulated-device",
             "order": 70,
             "device": {
                 "show-by-default": true,
                 "title": "iPad",
                 "screen": {
                     "horizontal": {
+                        "outline" : {
+                            "image": "@url(iPad-landscape.svg)",
+                            "insets" : { "left": 112, "top": 56, "right": 116, "bottom": 52 }
+                        },
                         "width": 1024,
                         "height": 768
                     },
                     "device-pixel-ratio": 2,
                     "vertical": {
+                        "outline" : {
+                            "image": "@url(iPad-portrait.svg)",
+                            "insets" : { "left": 52, "top": 114, "right": 55, "bottom": 114 }
+                        },
                         "width": 768,
                         "height": 1024
                     }
                 },
                 "capabilities": [
                     "touch",
                     "mobile"
                 ],
                 "user-agent": "Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1",
                 "type": "tablet",
@@ skipping 279 matching lines @@
         }
     ],
     "dependencies": [
         "emulation"
     ],
     "scripts": [
     ],
     "resources": [
     ]
 }