├── .babelrc
├── .npmignore
├── assets
    └── screenshot.png
├── .storybook
    ├── config.js
    ├── addons.js
    └── devices.json
├── stories
    └── index.js
├── .gitignore
├── package.json
├── README.md
└── src
    ├── Select.js
    ├── register.js
    └── main.css


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["env", "stage-1", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .babelrc
2 | .storybook
3 | stories
4 | src
5 | assets
6 | .gitignore
7 | 


--------------------------------------------------------------------------------
/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PeterPanen/storybook-addon-scissors/HEAD/assets/screenshot.png


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react';
2 | 
3 | function loadStories() {
4 |   require('../stories/index.js');
5 | }
6 | 
7 | configure(loadStories, module);
8 | 


--------------------------------------------------------------------------------
/stories/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { action } from '@storybook/addon-actions';
 4 | 
 5 | storiesOf('Button', module)
 6 |   .add('with text', () => (
 7 |     <button onClick={action('clicked')}>Hello Button</button>
 8 |   ))
 9 |   .add('with some emoji', () => (
10 |     <button onClick={action('clicked')}>😀 😎 👍 💯</button>
11 |   ));
12 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
 1 | import "@storybook/addon-actions/register";
 2 | import registerScissors from "../src/register";
 3 | import devicesJSON from "./devices.json";
 4 | 
 5 | const devices = devicesJSON.extensions.map(({ device }) => ({
 6 |   uid: device.title,
 7 |   title: device.title,
 8 |   width: device.screen.vertical.width,
 9 |   height: device.screen.vertical.height
10 | }));
11 | 
12 | registerScissors(devices);
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | *.pid.lock
11 | 
12 | # Directory for instrumented libs generated by jscoverage/JSCover
13 | lib-cov
14 | 
15 | # Coverage directory used by tools like istanbul
16 | coverage
17 | 
18 | # nyc test coverage
19 | .nyc_output
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 | 
30 | # Dependency directories
31 | node_modules
32 | jspm_packages
33 | 
34 | # Optional npm cache directory
35 | .npm
36 | 
37 | # Optional eslint cache
38 | .eslintcache
39 | 
40 | # Optional REPL history
41 | .node_repl_history
42 | 
43 | # Output of 'npm pack'
44 | *.tgz
45 | 
46 | # Yarn Integrity file
47 | .yarn-integrity
48 | 
49 | # Build folder
50 | build
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "storybook-addon-scissors",
 3 |   "version": "4.0.2",
 4 |   "description": "Addon for React Storybook providing responsive containers for stories",
 5 |   "main": "build/register.js",
 6 |   "scripts": {
 7 |     "prepublishOnly": "npm run build",
 8 |     "start": "start-storybook -p 9001 -c .storybook",
 9 |     "prebuild": "rimraf build/*",
10 |     "build": "babel src --out-dir build --copy-files"
11 |   },
12 |   "keywords": [
13 |     "React",
14 |     "Storybook",
15 |     "Responsive",
16 |     "Scissors",
17 |     "Devices"
18 |   ],
19 |   "author": "Rasmus Knudsen",
20 |   "license": "ISC",
21 |   "repository": "https://github.com/PeterPanen/storybook-addon-scissors.git",
22 |   "devDependencies": {
23 |     "@storybook/react": "^3.4.11",
24 |     "babel-cli": "^6.26.0",
25 |     "babel-preset-env": "^1.7.0",
26 |     "babel-preset-react": "^6.24.1",
27 |     "babel-preset-stage-1": "^6.24.1",
28 |     "css-loader": "^1.0.0",
29 |     "react": "^16.5.1",
30 |     "react-dom": "^16.5.1",
31 |     "rimraf": "^2.6.2",
32 |     "style-loader": "^0.23.0"
33 |   },
34 |   "dependencies": {
35 |     "react-toggle": "^4.0.2",
36 |     "react-virtualized-select": "^3.1.3"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | **:warning: WARNING: This repo is no longer maintained!:warning:**
 2 | 
 3 | # Storybook Addon Scissors
 4 | 
 5 | ![alt text](https://raw.githubusercontent.com/PeterPanen/storybook-addon-scissors/master/assets/screenshot.png 'screenshot')
 6 | 
 7 | > Requires storybook version 3+
 8 | 
 9 | ### Install
10 | 
11 | ```javascript
12 | npm i -D storybook-addon-scissors
13 | ```
14 | 
15 | ### Usage
16 | 
17 | * Download and import device list from [ChromeDevTools devices](https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/emulated_devices/module.json) (or bring your own with instructions below)
18 | * Create or open `.storybook/addons.js` and register the addon like below.
19 | 
20 | ```javascript
21 | // addons.js
22 | import '@storybook/addon-actions/register';
23 | import registerScissors from 'storybook-addon-scissors';
24 | import devicesJSON from './devices.json';
25 | 
26 | // registerScissors() takes an array of device objects with the following signature:
27 | // [{
28 | //   uid: String (must be unique)
29 | //   title: String
30 | //   width: Number
31 | //   height: Number
32 | // }]
33 | // In the case of using the device list from ChromeDevTools,
34 | // we can map them the following way.
35 | const devices = devicesJSON.extensions.map(({ device }) => ({
36 |   uid: device.title,
37 |   title: device.title,
38 |   width: device.screen.vertical.width,
39 |   height: device.screen.vertical.height,
40 | }));
41 | 
42 | registerScissors(devices);
43 | ```
44 | 


--------------------------------------------------------------------------------
/src/Select.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import VirtualizedSelect from 'react-virtualized-select';
 3 | import '!style-loader!css-loader!react-select/dist/react-select.css';
 4 | 
 5 | const optionRenderer = ({ option, style, selectValue, focusedOption }) => {
 6 |   const focusedClass = focusedOption.uid === option.uid ? 'focused' : '';
 7 |   return (
 8 |     <div
 9 |       className={`storybook-addon-scissors option ${focusedClass}`}
10 |       onClick={() => selectValue(option)}
11 |       style={style}
12 |       key={option.uid}
13 |     >
14 |       <span className="storybook-addon-scissors col name">{option.title}</span>
15 |       <span className="storybook-addon-scissors col width">
16 |         {option.width} W
17 |       </span>
18 |       <span className="storybook-addon-scissors col height">
19 |         {option.height} H
20 |       </span>
21 |     </div>
22 |   );
23 | };
24 | 
25 | const valueRenderer = option => (
26 |   <div className="storybook-addon-scissors value">
27 |     <span className="storybook-addon-scissors col name">{option.title}</span>
28 |     <span className="storybook-addon-scissors col width">{option.width} W</span>
29 |     <span className="storybook-addon-scissors col height">
30 |       {option.height} H
31 |     </span>
32 |   </div>
33 | );
34 | 
35 | export default ({ selectedDevice, devices, onChange }) => (
36 |   <VirtualizedSelect
37 |     value={selectedDevice}
38 |     options={devices}
39 |     onChange={onChange}
40 |     valueKey="title"
41 |     optionRenderer={optionRenderer}
42 |     valueRenderer={valueRenderer}
43 |   />
44 | );
45 | 


--------------------------------------------------------------------------------
/src/register.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import addons from '@storybook/addons';
 3 | import Toggle from 'react-toggle';
 4 | import Select from './Select';
 5 | import '!style-loader!css-loader!./main.css';
 6 | 
 7 | class Scissors extends Component {
 8 |   constructor(props) {
 9 |     super(props);
10 |     this.state = {
11 |       selectedDevice: null,
12 |       rotated: false,
13 |     };
14 |   }
15 | 
16 |   onSelectDevice = device => {
17 |     this.setState({ selectedDevice: device });
18 |   };
19 | 
20 |   toggleRotate = () => this.setState(state => ({ rotated: !state.rotated }));
21 | 
22 |   render() {
23 |     const { selectedDevice, rotated } = this.state;
24 |     const { devices } = this.props;
25 | 
26 |     const isEnabled = selectedDevice !== null;
27 |     const deviceWidth = selectedDevice
28 |       ? rotated
29 |         ? Number.parseInt(selectedDevice.height)
30 |         : Number.parseInt(selectedDevice.width)
31 |       : 0;
32 |     const deviceHeight = selectedDevice
33 |       ? rotated
34 |         ? Number.parseInt(selectedDevice.width)
35 |         : Number.parseInt(selectedDevice.height)
36 |       : 0;
37 | 
38 |     return (
39 |       <div className="storybook-addon-scissors scissors-panel">
40 |         <label>Device</label>
41 |         <Select
42 |           selectedDevice={selectedDevice}
43 |           devices={devices}
44 |           onChange={this.onSelectDevice}
45 |         />
46 |         <div className="storybook-addon-scissors-rotate">
47 |           <label htmlFor="storybook-addon-scissors-rotate-toggle">Rotate</label>
48 |           <Toggle
49 |             id="storybook-addon-scissors-rotate-toggle"
50 |             defaultChecked={rotated}
51 |             onChange={this.toggleRotate}
52 |             disabled={!isEnabled}
53 |           />
54 |         </div>
55 |         {isEnabled && (
56 |           <style
57 |             dangerouslySetInnerHTML={{
58 |               __html: `
59 |             #storybook-preview-iframe {
60 |               display: block !important;
61 |               background: #fff !important;
62 |               margin: 40px auto !important;
63 |               width: ${deviceWidth}px !important;
64 |               height: ${deviceHeight}px !important;
65 |               box-shadow: 0 2px 6px 0px #cccccc;
66 |               transition: all 200ms !important;
67 |             }
68 |             .Pane.horizontal.Pane1 > div > div, .Pane.vertical.Pane2 .SplitPane .Pane.vertical.Pane1 > div > div {
69 |               overflow: auto !important;
70 |               background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAF0lEQVR4AWP4CQf/4WBoCyKYCOkhLQgAFBGJ0NmZHwYAAAAASUVORK5CYII=) !important;
71 |             }
72 |           `,
73 |             }}
74 |           />
75 |         )}
76 |       </div>
77 |     );
78 |   }
79 | }
80 | 
81 | export default devices => {
82 |   addons.register('PeterPanen/storybook-addon-scissors', () => {
83 |     // Add panel with unique name.
84 |     addons.addPanel('PeterPanen/storybook-addon-scissors/panel', {
85 |       title: 'Scissors',
86 |       render: () => (
87 |         <Scissors devices={devices} channel={addons.getChannel()} />
88 |       ),
89 |     });
90 |   });
91 | };
92 | 


--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
  1 | /* Panel */
  2 | .storybook-addon-scissors.scissors-panel {
  3 |   display: flex;
  4 |   flex-direction: column;
  5 |   margin: 10px;
  6 |   font-family: Arial;
  7 |   font-size: 14px;
  8 |   color: rgb(68, 68, 68);
  9 |   width: 100%;
 10 |   overflow: auto;
 11 |   padding: 4px;
 12 | }
 13 | .storybook-addon-scissors.scissors-panel label {
 14 |   margin-bottom: 4px;
 15 | }
 16 | 
 17 | /* Select Option */
 18 | .storybook-addon-scissors.col {
 19 |   flex: 1 1 auto;
 20 | }
 21 | .storybook-addon-scissors.option {
 22 |   padding: 0 1em;
 23 |   display: flex;
 24 |   align-items: center;
 25 | }
 26 | .storybook-addon-scissors.option:hover {
 27 |   cursor: pointer;
 28 |   background-color: rgba(0, 126, 255, 0.1);
 29 | }
 30 | .storybook-addon-scissors.option.focused {
 31 |   outline: 1px dashed rgba(0, 126, 255, 1);
 32 | }
 33 | .storybook-addon-scissors.option .width {
 34 |   flex: 0 1 60px;
 35 |   padding-right: 8px;
 36 |   text-align: right;
 37 | }
 38 | .storybook-addon-scissors.option .height {
 39 |   flex: 0 1 50px;
 40 |   text-align: right;
 41 |   border-left: 1px solid #ccc;
 42 | }
 43 | 
 44 | /* Select Value */
 45 | .storybook-addon-scissors.value {
 46 |   padding-right: 0px;
 47 |   display: flex;
 48 |   align-items: center;
 49 | }
 50 | .storybook-addon-scissors.value .width {
 51 |   flex: 0 1 60px;
 52 |   padding-right: 8px;
 53 |   text-align: right;
 54 | }
 55 | .storybook-addon-scissors.value .height {
 56 |   flex: 0 1 50px;
 57 |   text-align: right;
 58 |   border-left: 1px solid #ccc;
 59 | }
 60 | 
 61 | /* React Toggle */
 62 | .storybook-addon-scissors-rotate {
 63 |   margin-top: 16px;
 64 |   display: flex;
 65 |   flex-wrap: nowrap;
 66 |   justify-content: flex-start;
 67 |   align-items: flex-start;
 68 |   flex-direction: column;
 69 | }
 70 | .react-toggle {
 71 |   touch-action: pan-x;
 72 | 
 73 |   display: inline-block;
 74 |   position: relative;
 75 |   cursor: pointer;
 76 |   background-color: transparent;
 77 |   border: 0;
 78 |   padding: 0;
 79 | 
 80 |   -webkit-touch-callout: none;
 81 |   -webkit-user-select: none;
 82 |   -khtml-user-select: none;
 83 |   -moz-user-select: none;
 84 |   -ms-user-select: none;
 85 |   user-select: none;
 86 | 
 87 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 88 |   -webkit-tap-highlight-color: transparent;
 89 | }
 90 | 
 91 | .react-toggle-screenreader-only {
 92 |   border: 0;
 93 |   clip: rect(0 0 0 0);
 94 |   height: 1px;
 95 |   margin: -1px;
 96 |   overflow: hidden;
 97 |   padding: 0;
 98 |   position: absolute;
 99 |   width: 1px;
100 | }
101 | 
102 | .react-toggle--disabled {
103 |   cursor: not-allowed;
104 |   opacity: 0.5;
105 |   -webkit-transition: opacity 0.25s;
106 |   transition: opacity 0.25s;
107 | }
108 | 
109 | .react-toggle-track {
110 |   width: 50px;
111 |   height: 24px;
112 |   padding: 0;
113 |   border-radius: 30px;
114 |   background-color: #4d4d4d;
115 |   -webkit-transition: all 0.2s ease;
116 |   -moz-transition: all 0.2s ease;
117 |   transition: all 0.2s ease;
118 | }
119 | 
120 | .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
121 |   background-color: #000000;
122 | }
123 | 
124 | .react-toggle--checked .react-toggle-track {
125 |   background-color: #19ab27;
126 | }
127 | 
128 | .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
129 |   background-color: #128d15;
130 | }
131 | 
132 | .react-toggle-track-check {
133 |   position: absolute;
134 |   width: 14px;
135 |   height: 10px;
136 |   top: 0px;
137 |   bottom: 0px;
138 |   margin-top: auto;
139 |   margin-bottom: auto;
140 |   line-height: 0;
141 |   left: 8px;
142 |   opacity: 0;
143 |   -webkit-transition: opacity 0.25s ease;
144 |   -moz-transition: opacity 0.25s ease;
145 |   transition: opacity 0.25s ease;
146 | }
147 | 
148 | .react-toggle--checked .react-toggle-track-check {
149 |   opacity: 1;
150 |   -webkit-transition: opacity 0.25s ease;
151 |   -moz-transition: opacity 0.25s ease;
152 |   transition: opacity 0.25s ease;
153 | }
154 | 
155 | .react-toggle-track-x {
156 |   position: absolute;
157 |   width: 10px;
158 |   height: 10px;
159 |   top: 0px;
160 |   bottom: 0px;
161 |   margin-top: auto;
162 |   margin-bottom: auto;
163 |   line-height: 0;
164 |   right: 10px;
165 |   opacity: 1;
166 |   -webkit-transition: opacity 0.25s ease;
167 |   -moz-transition: opacity 0.25s ease;
168 |   transition: opacity 0.25s ease;
169 | }
170 | 
171 | .react-toggle--checked .react-toggle-track-x {
172 |   opacity: 0;
173 | }
174 | 
175 | .react-toggle-thumb {
176 |   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
177 |   position: absolute;
178 |   top: 1px;
179 |   left: 1px;
180 |   width: 22px;
181 |   height: 22px;
182 |   border: 1px solid #4d4d4d;
183 |   border-radius: 50%;
184 |   background-color: #fafafa;
185 | 
186 |   -webkit-box-sizing: border-box;
187 |   -moz-box-sizing: border-box;
188 |   box-sizing: border-box;
189 | 
190 |   -webkit-transition: all 0.25s ease;
191 |   -moz-transition: all 0.25s ease;
192 |   transition: all 0.25s ease;
193 | }
194 | 
195 | .react-toggle--checked .react-toggle-thumb {
196 |   left: 27px;
197 |   border-color: #19ab27;
198 | }
199 | 
200 | .react-toggle--focus .react-toggle-thumb {
201 |   -webkit-box-shadow: 0px 0px 3px 2px #0099e0;
202 |   -moz-box-shadow: 0px 0px 3px 2px #0099e0;
203 |   box-shadow: 0px 0px 2px 3px #0099e0;
204 | }
205 | 
206 | .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
207 |   -webkit-box-shadow: 0px 0px 5px 5px #0099e0;
208 |   -moz-box-shadow: 0px 0px 5px 5px #0099e0;
209 |   box-shadow: 0px 0px 5px 5px #0099e0;
210 | }
211 | 


--------------------------------------------------------------------------------
/.storybook/devices.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "extensions": [
   3 |     {
   4 |       "type": "emulated-device",
   5 |       "device": {
   6 |         "show-by-default": false,
   7 |         "title": "iPhone 4",
   8 |         "screen": {
   9 |           "horizontal": {
  10 |             "width": 480,
  11 |             "height": 320
  12 |           },
  13 |           "device-pixel-ratio": 2,
  14 |           "vertical": {
  15 |             "width": 320,
  16 |             "height": 480
  17 |           }
  18 |         },
  19 |         "capabilities": ["touch", "mobile"],
  20 |         "user-agent":
  21 |           "Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53",
  22 |         "type": "phone",
  23 |         "modes": [
  24 |           {
  25 |             "title": "default",
  26 |             "orientation": "vertical",
  27 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
  28 |           },
  29 |           {
  30 |             "title": "default",
  31 |             "orientation": "horizontal",
  32 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
  33 |           }
  34 |         ]
  35 |       }
  36 |     },
  37 |     {
  38 |       "type": "emulated-device",
  39 |       "order": 30,
  40 |       "device": {
  41 |         "show-by-default": true,
  42 |         "title": "iPhone 5/SE",
  43 |         "screen": {
  44 |           "horizontal": {
  45 |             "outline": {
  46 |               "image": "@url(iPhone5-landscape.svg)",
  47 |               "insets": { "left": 115, "top": 25, "right": 115, "bottom": 28 }
  48 |             },
  49 |             "width": 568,
  50 |             "height": 320
  51 |           },
  52 |           "device-pixel-ratio": 2,
  53 |           "vertical": {
  54 |             "outline": {
  55 |               "image": "@url(iPhone5-portrait.svg)",
  56 |               "insets": { "left": 29, "top": 105, "right": 25, "bottom": 111 }
  57 |             },
  58 |             "width": 320,
  59 |             "height": 568
  60 |           }
  61 |         },
  62 |         "capabilities": ["touch", "mobile"],
  63 |         "user-agent":
  64 |           "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1",
  65 |         "type": "phone",
  66 |         "modes": [
  67 |           {
  68 |             "title": "default",
  69 |             "orientation": "vertical",
  70 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
  71 |           },
  72 |           {
  73 |             "title": "default",
  74 |             "orientation": "horizontal",
  75 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
  76 |           }
  77 |         ]
  78 |       }
  79 |     },
  80 |     {
  81 |       "type": "emulated-device",
  82 |       "order": 31,
  83 |       "device": {
  84 |         "show-by-default": true,
  85 |         "title": "iPhone 6/7/8",
  86 |         "screen": {
  87 |           "horizontal": {
  88 |             "outline": {
  89 |               "image": "@url(iPhone6-landscape.svg)",
  90 |               "insets": { "left": 106, "top": 28, "right": 106, "bottom": 28 }
  91 |             },
  92 |             "width": 667,
  93 |             "height": 375
  94 |           },
  95 |           "device-pixel-ratio": 2,
  96 |           "vertical": {
  97 |             "outline": {
  98 |               "image": "@url(iPhone6-portrait.svg)",
  99 |               "insets": { "left": 28, "top": 105, "right": 28, "bottom": 105 }
 100 |             },
 101 |             "width": 375,
 102 |             "height": 667
 103 |           }
 104 |         },
 105 |         "capabilities": ["touch", "mobile"],
 106 |         "user-agent":
 107 |           "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
 108 |         "type": "phone",
 109 |         "modes": [
 110 |           {
 111 |             "title": "default",
 112 |             "orientation": "vertical",
 113 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 114 |           },
 115 |           {
 116 |             "title": "default",
 117 |             "orientation": "horizontal",
 118 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 119 |           }
 120 |         ]
 121 |       }
 122 |     },
 123 |     {
 124 |       "type": "emulated-device",
 125 |       "order": 32,
 126 |       "device": {
 127 |         "show-by-default": true,
 128 |         "title": "iPhone 6/7/8 Plus",
 129 |         "screen": {
 130 |           "horizontal": {
 131 |             "outline": {
 132 |               "image": "@url(iPhone6Plus-landscape.svg)",
 133 |               "insets": { "left": 109, "top": 29, "right": 109, "bottom": 27 }
 134 |             },
 135 |             "width": 736,
 136 |             "height": 414
 137 |           },
 138 |           "device-pixel-ratio": 3,
 139 |           "vertical": {
 140 |             "outline": {
 141 |               "image": "@url(iPhone6Plus-portrait.svg)",
 142 |               "insets": { "left": 26, "top": 107, "right": 30, "bottom": 111 }
 143 |             },
 144 |             "width": 414,
 145 |             "height": 736
 146 |           }
 147 |         },
 148 |         "capabilities": ["touch", "mobile"],
 149 |         "user-agent":
 150 |           "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
 151 |         "type": "phone",
 152 |         "modes": [
 153 |           {
 154 |             "title": "default",
 155 |             "orientation": "vertical",
 156 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 157 |           },
 158 |           {
 159 |             "title": "default",
 160 |             "orientation": "horizontal",
 161 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 162 |           }
 163 |         ]
 164 |       }
 165 |     },
 166 |     {
 167 |       "type": "emulated-device",
 168 |       "order": 33,
 169 |       "device": {
 170 |         "show-by-default": true,
 171 |         "title": "iPhone X",
 172 |         "screen": {
 173 |           "horizontal": {
 174 |             "width": 812,
 175 |             "height": 375
 176 |           },
 177 |           "device-pixel-ratio": 3,
 178 |           "vertical": {
 179 |             "width": 375,
 180 |             "height": 812
 181 |           }
 182 |         },
 183 |         "capabilities": ["touch", "mobile"],
 184 |         "user-agent":
 185 |           "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
 186 |         "type": "phone",
 187 |         "modes": [
 188 |           {
 189 |             "title": "default",
 190 |             "orientation": "vertical",
 191 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 192 |           },
 193 |           {
 194 |             "title": "default",
 195 |             "orientation": "horizontal",
 196 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 197 |           }
 198 |         ]
 199 |       }
 200 |     },
 201 |     {
 202 |       "type": "emulated-device",
 203 |       "device": {
 204 |         "show-by-default": false,
 205 |         "title": "BlackBerry Z30",
 206 |         "screen": {
 207 |           "horizontal": {
 208 |             "width": 640,
 209 |             "height": 360
 210 |           },
 211 |           "device-pixel-ratio": 2,
 212 |           "vertical": {
 213 |             "width": 360,
 214 |             "height": 640
 215 |           }
 216 |         },
 217 |         "capabilities": ["touch", "mobile"],
 218 |         "user-agent":
 219 |           "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
 220 |         "type": "phone",
 221 |         "modes": [
 222 |           {
 223 |             "title": "default",
 224 |             "orientation": "vertical",
 225 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 226 |           },
 227 |           {
 228 |             "title": "default",
 229 |             "orientation": "horizontal",
 230 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 231 |           }
 232 |         ]
 233 |       }
 234 |     },
 235 |     {
 236 |       "type": "emulated-device",
 237 |       "device": {
 238 |         "show-by-default": false,
 239 |         "title": "Nexus 4",
 240 |         "screen": {
 241 |           "horizontal": {
 242 |             "width": 640,
 243 |             "height": 384
 244 |           },
 245 |           "device-pixel-ratio": 2,
 246 |           "vertical": {
 247 |             "width": 384,
 248 |             "height": 640
 249 |           }
 250 |         },
 251 |         "capabilities": ["touch", "mobile"],
 252 |         "user-agent":
 253 |           "Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 254 |         "type": "phone",
 255 |         "modes": [
 256 |           {
 257 |             "title": "default",
 258 |             "orientation": "vertical",
 259 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 260 |           },
 261 |           {
 262 |             "title": "default",
 263 |             "orientation": "horizontal",
 264 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 265 |           }
 266 |         ]
 267 |       }
 268 |     },
 269 |     {
 270 |       "type": "emulated-device",
 271 |       "device": {
 272 |         "title": "Nexus 5",
 273 |         "type": "phone",
 274 |         "user-agent":
 275 |           "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 276 |         "capabilities": ["touch", "mobile"],
 277 |         "show-by-default": false,
 278 |         "screen": {
 279 |           "device-pixel-ratio": 3,
 280 |           "vertical": {
 281 |             "width": 360,
 282 |             "height": 640
 283 |           },
 284 |           "horizontal": {
 285 |             "width": 640,
 286 |             "height": 360
 287 |           }
 288 |         },
 289 |         "modes": [
 290 |           {
 291 |             "title": "default",
 292 |             "orientation": "vertical",
 293 |             "insets": { "left": 0, "top": 25, "right": 0, "bottom": 48 },
 294 |             "image":
 295 |               "@url(google-nexus-5-vertical-default-1x.png) 1x, @url(google-nexus-5-vertical-default-2x.png) 2x"
 296 |           },
 297 |           {
 298 |             "title": "navigation bar",
 299 |             "orientation": "vertical",
 300 |             "insets": { "left": 0, "top": 80, "right": 0, "bottom": 48 },
 301 |             "image":
 302 |               "@url(google-nexus-5-vertical-navigation-1x.png) 1x, @url(google-nexus-5-vertical-navigation-2x.png) 2x"
 303 |           },
 304 |           {
 305 |             "title": "keyboard",
 306 |             "orientation": "vertical",
 307 |             "insets": { "left": 0, "top": 80, "right": 0, "bottom": 312 },
 308 |             "image":
 309 |               "@url(google-nexus-5-vertical-keyboard-1x.png) 1x, @url(google-nexus-5-vertical-keyboard-2x.png) 2x"
 310 |           },
 311 |           {
 312 |             "title": "default",
 313 |             "orientation": "horizontal",
 314 |             "insets": { "left": 0, "top": 25, "right": 42, "bottom": 0 },
 315 |             "image":
 316 |               "@url(google-nexus-5-horizontal-default-1x.png) 1x, @url(google-nexus-5-horizontal-default-2x.png) 2x"
 317 |           },
 318 |           {
 319 |             "title": "navigation bar",
 320 |             "orientation": "horizontal",
 321 |             "insets": { "left": 0, "top": 80, "right": 42, "bottom": 0 },
 322 |             "image":
 323 |               "@url(google-nexus-5-horizontal-navigation-1x.png) 1x, @url(google-nexus-5-horizontal-navigation-2x.png) 2x"
 324 |           },
 325 |           {
 326 |             "title": "keyboard",
 327 |             "orientation": "horizontal",
 328 |             "insets": { "left": 0, "top": 80, "right": 42, "bottom": 202 },
 329 |             "image":
 330 |               "@url(google-nexus-5-horizontal-keyboard-1x.png) 1x, @url(google-nexus-5-horizontal-keyboard-2x.png) 2x"
 331 |           }
 332 |         ]
 333 |       }
 334 |     },
 335 |     {
 336 |       "type": "emulated-device",
 337 |       "device": {
 338 |         "title": "Nexus 5X",
 339 |         "type": "phone",
 340 |         "user-agent":
 341 |           "Mozilla/5.0 (Linux; Android 8.0.0; Nexus 5X Build/OPR4.170623.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 342 |         "capabilities": ["touch", "mobile"],
 343 |         "show-by-default": false,
 344 |         "screen": {
 345 |           "device-pixel-ratio": 2.625,
 346 |           "vertical": {
 347 |             "outline": {
 348 |               "image": "@url(Nexus5X-portrait.svg)",
 349 |               "insets": { "left": 18, "top": 88, "right": 22, "bottom": 98 }
 350 |             },
 351 |             "width": 412,
 352 |             "height": 732
 353 |           },
 354 |           "horizontal": {
 355 |             "outline": {
 356 |               "image": "@url(Nexus5X-landscape.svg)",
 357 |               "insets": { "left": 88, "top": 21, "right": 98, "bottom": 19 }
 358 |             },
 359 |             "width": 732,
 360 |             "height": 412
 361 |           }
 362 |         },
 363 |         "modes": [
 364 |           {
 365 |             "title": "default",
 366 |             "orientation": "vertical",
 367 |             "insets": { "left": 0, "top": 24, "right": 0, "bottom": 48 },
 368 |             "image":
 369 |               "@url(google-nexus-5x-vertical-default-1x.png) 1x, @url(google-nexus-5x-vertical-default-2x.png) 2x"
 370 |           },
 371 |           {
 372 |             "title": "navigation bar",
 373 |             "orientation": "vertical",
 374 |             "insets": { "left": 0, "top": 80, "right": 0, "bottom": 48 },
 375 |             "image":
 376 |               "@url(google-nexus-5x-vertical-navigation-1x.png) 1x, @url(google-nexus-5x-vertical-navigation-2x.png) 2x"
 377 |           },
 378 |           {
 379 |             "title": "keyboard",
 380 |             "orientation": "vertical",
 381 |             "insets": { "left": 0, "top": 80, "right": 0, "bottom": 342 },
 382 |             "image":
 383 |               "@url(google-nexus-5x-vertical-keyboard-1x.png) 1x, @url(google-nexus-5x-vertical-keyboard-2x.png) 2x"
 384 |           },
 385 |           {
 386 |             "title": "default",
 387 |             "orientation": "horizontal",
 388 |             "insets": { "left": 0, "top": 24, "right": 48, "bottom": 0 },
 389 |             "image":
 390 |               "@url(google-nexus-5x-horizontal-default-1x.png) 1x, @url(google-nexus-5x-horizontal-default-2x.png) 2x"
 391 |           },
 392 |           {
 393 |             "title": "navigation bar",
 394 |             "orientation": "horizontal",
 395 |             "insets": { "left": 0, "top": 80, "right": 48, "bottom": 0 },
 396 |             "image":
 397 |               "@url(google-nexus-5x-horizontal-navigation-1x.png) 1x, @url(google-nexus-5x-horizontal-navigation-2x.png) 2x"
 398 |           },
 399 |           {
 400 |             "title": "keyboard",
 401 |             "orientation": "horizontal",
 402 |             "insets": { "left": 0, "top": 80, "right": 48, "bottom": 222 },
 403 |             "image":
 404 |               "@url(google-nexus-5x-horizontal-keyboard-1x.png) 1x, @url(google-nexus-5x-horizontal-keyboard-2x.png) 2x"
 405 |           }
 406 |         ]
 407 |       }
 408 |     },
 409 |     {
 410 |       "type": "emulated-device",
 411 |       "device": {
 412 |         "show-by-default": false,
 413 |         "title": "Nexus 6",
 414 |         "screen": {
 415 |           "horizontal": {
 416 |             "width": 732,
 417 |             "height": 412
 418 |           },
 419 |           "device-pixel-ratio": 3.5,
 420 |           "vertical": {
 421 |             "width": 412,
 422 |             "height": 732
 423 |           }
 424 |         },
 425 |         "capabilities": ["touch", "mobile"],
 426 |         "user-agent":
 427 |           "Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 428 |         "type": "phone",
 429 |         "modes": [
 430 |           {
 431 |             "title": "default",
 432 |             "orientation": "vertical",
 433 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 434 |           },
 435 |           {
 436 |             "title": "default",
 437 |             "orientation": "horizontal",
 438 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 439 |           }
 440 |         ]
 441 |       }
 442 |     },
 443 |     {
 444 |       "type": "emulated-device",
 445 |       "device": {
 446 |         "show-by-default": false,
 447 |         "title": "Nexus 6P",
 448 |         "screen": {
 449 |           "horizontal": {
 450 |             "outline": {
 451 |               "image": "@url(Nexus6P-landscape.svg)",
 452 |               "insets": { "left": 94, "top": 17, "right": 88, "bottom": 17 }
 453 |             },
 454 |             "width": 732,
 455 |             "height": 412
 456 |           },
 457 |           "device-pixel-ratio": 3.5,
 458 |           "vertical": {
 459 |             "outline": {
 460 |               "image": "@url(Nexus6P-portrait.svg)",
 461 |               "insets": { "left": 16, "top": 94, "right": 16, "bottom": 88 }
 462 |             },
 463 |             "width": 412,
 464 |             "height": 732
 465 |           }
 466 |         },
 467 |         "capabilities": ["touch", "mobile"],
 468 |         "user-agent":
 469 |           "Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 470 |         "type": "phone",
 471 |         "modes": [
 472 |           {
 473 |             "title": "default",
 474 |             "orientation": "vertical",
 475 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 476 |           },
 477 |           {
 478 |             "title": "default",
 479 |             "orientation": "horizontal",
 480 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 481 |           }
 482 |         ]
 483 |       }
 484 |     },
 485 |     {
 486 |       "type": "emulated-device",
 487 |       "order": 20,
 488 |       "device": {
 489 |         "show-by-default": true,
 490 |         "title": "Pixel 2",
 491 |         "screen": {
 492 |           "horizontal": {
 493 |             "width": 731,
 494 |             "height": 411
 495 |           },
 496 |           "device-pixel-ratio": 2.625,
 497 |           "vertical": {
 498 |             "width": 411,
 499 |             "height": 731
 500 |           }
 501 |         },
 502 |         "capabilities": ["touch", "mobile"],
 503 |         "user-agent":
 504 |           "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 505 |         "type": "phone",
 506 |         "modes": [
 507 |           {
 508 |             "title": "default",
 509 |             "orientation": "vertical",
 510 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 511 |           },
 512 |           {
 513 |             "title": "default",
 514 |             "orientation": "horizontal",
 515 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 516 |           }
 517 |         ]
 518 |       }
 519 |     },
 520 |     {
 521 |       "type": "emulated-device",
 522 |       "order": 21,
 523 |       "device": {
 524 |         "show-by-default": true,
 525 |         "title": "Pixel 2 XL",
 526 |         "screen": {
 527 |           "horizontal": {
 528 |             "width": 823,
 529 |             "height": 411
 530 |           },
 531 |           "device-pixel-ratio": 3.5,
 532 |           "vertical": {
 533 |             "width": 411,
 534 |             "height": 823
 535 |           }
 536 |         },
 537 |         "capabilities": ["touch", "mobile"],
 538 |         "user-agent":
 539 |           "Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 540 |         "type": "phone",
 541 |         "modes": [
 542 |           {
 543 |             "title": "default",
 544 |             "orientation": "vertical",
 545 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 546 |           },
 547 |           {
 548 |             "title": "default",
 549 |             "orientation": "horizontal",
 550 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 551 |           }
 552 |         ]
 553 |       }
 554 |     },
 555 |     {
 556 |       "type": "emulated-device",
 557 |       "device": {
 558 |         "show-by-default": false,
 559 |         "title": "LG Optimus L70",
 560 |         "screen": {
 561 |           "horizontal": {
 562 |             "width": 640,
 563 |             "height": 384
 564 |           },
 565 |           "device-pixel-ratio": 1.25,
 566 |           "vertical": {
 567 |             "width": 384,
 568 |             "height": 640
 569 |           }
 570 |         },
 571 |         "capabilities": ["touch", "mobile"],
 572 |         "user-agent":
 573 |           "Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/%s Mobile Safari/537.36",
 574 |         "type": "phone",
 575 |         "modes": [
 576 |           {
 577 |             "title": "default",
 578 |             "orientation": "vertical",
 579 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 580 |           },
 581 |           {
 582 |             "title": "default",
 583 |             "orientation": "horizontal",
 584 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 585 |           }
 586 |         ]
 587 |       }
 588 |     },
 589 |     {
 590 |       "type": "emulated-device",
 591 |       "device": {
 592 |         "show-by-default": false,
 593 |         "title": "Nokia N9",
 594 |         "screen": {
 595 |           "horizontal": {
 596 |             "width": 854,
 597 |             "height": 480
 598 |           },
 599 |           "device-pixel-ratio": 1,
 600 |           "vertical": {
 601 |             "width": 480,
 602 |             "height": 854
 603 |           }
 604 |         },
 605 |         "capabilities": ["touch", "mobile"],
 606 |         "user-agent":
 607 |           "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13",
 608 |         "type": "phone",
 609 |         "modes": [
 610 |           {
 611 |             "title": "default",
 612 |             "orientation": "vertical",
 613 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 614 |           },
 615 |           {
 616 |             "title": "default",
 617 |             "orientation": "horizontal",
 618 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 619 |           }
 620 |         ]
 621 |       }
 622 |     },
 623 |     {
 624 |       "type": "emulated-device",
 625 |       "device": {
 626 |         "show-by-default": false,
 627 |         "title": "Nokia Lumia 520",
 628 |         "screen": {
 629 |           "horizontal": {
 630 |             "width": 533,
 631 |             "height": 320
 632 |           },
 633 |           "device-pixel-ratio": 1.5,
 634 |           "vertical": {
 635 |             "width": 320,
 636 |             "height": 533
 637 |           }
 638 |         },
 639 |         "capabilities": ["touch", "mobile"],
 640 |         "user-agent":
 641 |           "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)",
 642 |         "type": "phone",
 643 |         "modes": [
 644 |           {
 645 |             "title": "default",
 646 |             "orientation": "vertical",
 647 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 648 |           },
 649 |           {
 650 |             "title": "default",
 651 |             "orientation": "horizontal",
 652 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 653 |           }
 654 |         ]
 655 |       }
 656 |     },
 657 |     {
 658 |       "type": "emulated-device",
 659 |       "device": {
 660 |         "show-by-default": false,
 661 |         "title": "Microsoft Lumia 550",
 662 |         "screen": {
 663 |           "horizontal": {
 664 |             "width": 640,
 665 |             "height": 360
 666 |           },
 667 |           "device-pixel-ratio": 2,
 668 |           "vertical": {
 669 |             "width": 640,
 670 |             "height": 360
 671 |           }
 672 |         },
 673 |         "capabilities": ["touch", "mobile"],
 674 |         "user-agent":
 675 |           "Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263",
 676 |         "type": "phone",
 677 |         "modes": [
 678 |           {
 679 |             "title": "default",
 680 |             "orientation": "vertical",
 681 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 682 |           },
 683 |           {
 684 |             "title": "default",
 685 |             "orientation": "horizontal",
 686 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 687 |           }
 688 |         ]
 689 |       }
 690 |     },
 691 |     {
 692 |       "type": "emulated-device",
 693 |       "device": {
 694 |         "show-by-default": false,
 695 |         "title": "Microsoft Lumia 950",
 696 |         "screen": {
 697 |           "horizontal": {
 698 |             "width": 640,
 699 |             "height": 360
 700 |           },
 701 |           "device-pixel-ratio": 4,
 702 |           "vertical": {
 703 |             "width": 360,
 704 |             "height": 640
 705 |           }
 706 |         },
 707 |         "capabilities": ["touch", "mobile"],
 708 |         "user-agent":
 709 |           "Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263",
 710 |         "type": "phone",
 711 |         "modes": [
 712 |           {
 713 |             "title": "default",
 714 |             "orientation": "vertical",
 715 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 716 |           },
 717 |           {
 718 |             "title": "default",
 719 |             "orientation": "horizontal",
 720 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 721 |           }
 722 |         ]
 723 |       }
 724 |     },
 725 |     {
 726 |       "type": "emulated-device",
 727 |       "device": {
 728 |         "show-by-default": false,
 729 |         "title": "Galaxy S III",
 730 |         "screen": {
 731 |           "horizontal": {
 732 |             "width": 640,
 733 |             "height": 360
 734 |           },
 735 |           "device-pixel-ratio": 2,
 736 |           "vertical": {
 737 |             "width": 360,
 738 |             "height": 640
 739 |           }
 740 |         },
 741 |         "capabilities": ["touch", "mobile"],
 742 |         "user-agent":
 743 |           "Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
 744 |         "type": "phone",
 745 |         "modes": [
 746 |           {
 747 |             "title": "default",
 748 |             "orientation": "vertical",
 749 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 750 |           },
 751 |           {
 752 |             "title": "default",
 753 |             "orientation": "horizontal",
 754 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 755 |           }
 756 |         ]
 757 |       }
 758 |     },
 759 |     {
 760 |       "type": "emulated-device",
 761 |       "order": 10,
 762 |       "device": {
 763 |         "show-by-default": true,
 764 |         "title": "Galaxy S5",
 765 |         "screen": {
 766 |           "horizontal": {
 767 |             "width": 640,
 768 |             "height": 360
 769 |           },
 770 |           "device-pixel-ratio": 3,
 771 |           "vertical": {
 772 |             "width": 360,
 773 |             "height": 640
 774 |           }
 775 |         },
 776 |         "capabilities": ["touch", "mobile"],
 777 |         "user-agent":
 778 |           "Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36",
 779 |         "type": "phone",
 780 |         "modes": [
 781 |           {
 782 |             "title": "default",
 783 |             "orientation": "vertical",
 784 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 785 |           },
 786 |           {
 787 |             "title": "default",
 788 |             "orientation": "horizontal",
 789 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 790 |           }
 791 |         ]
 792 |       }
 793 |     },
 794 |     {
 795 |       "type": "emulated-device",
 796 |       "device": {
 797 |         "show-by-default": false,
 798 |         "title": "Kindle Fire HDX",
 799 |         "screen": {
 800 |           "horizontal": {
 801 |             "width": 1280,
 802 |             "height": 800
 803 |           },
 804 |           "device-pixel-ratio": 2,
 805 |           "vertical": {
 806 |             "width": 800,
 807 |             "height": 1280
 808 |           }
 809 |         },
 810 |         "capabilities": ["touch", "mobile"],
 811 |         "user-agent":
 812 |           "Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true",
 813 |         "type": "tablet",
 814 |         "modes": [
 815 |           {
 816 |             "title": "default",
 817 |             "orientation": "vertical",
 818 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 819 |           },
 820 |           {
 821 |             "title": "default",
 822 |             "orientation": "horizontal",
 823 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 824 |           }
 825 |         ]
 826 |       }
 827 |     },
 828 |     {
 829 |       "type": "emulated-device",
 830 |       "device": {
 831 |         "show-by-default": false,
 832 |         "title": "iPad Mini",
 833 |         "screen": {
 834 |           "horizontal": {
 835 |             "width": 1024,
 836 |             "height": 768
 837 |           },
 838 |           "device-pixel-ratio": 2,
 839 |           "vertical": {
 840 |             "width": 768,
 841 |             "height": 1024
 842 |           }
 843 |         },
 844 |         "capabilities": ["touch", "mobile"],
 845 |         "user-agent":
 846 |           "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
 847 |         "type": "tablet",
 848 |         "modes": [
 849 |           {
 850 |             "title": "default",
 851 |             "orientation": "vertical",
 852 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 853 |           },
 854 |           {
 855 |             "title": "default",
 856 |             "orientation": "horizontal",
 857 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 858 |           }
 859 |         ]
 860 |       }
 861 |     },
 862 |     {
 863 |       "type": "emulated-device",
 864 |       "order": 40,
 865 |       "device": {
 866 |         "show-by-default": true,
 867 |         "title": "iPad",
 868 |         "screen": {
 869 |           "horizontal": {
 870 |             "outline": {
 871 |               "image": "@url(iPad-landscape.svg)",
 872 |               "insets": { "left": 112, "top": 56, "right": 116, "bottom": 52 }
 873 |             },
 874 |             "width": 1024,
 875 |             "height": 768
 876 |           },
 877 |           "device-pixel-ratio": 2,
 878 |           "vertical": {
 879 |             "outline": {
 880 |               "image": "@url(iPad-portrait.svg)",
 881 |               "insets": { "left": 52, "top": 114, "right": 55, "bottom": 114 }
 882 |             },
 883 |             "width": 768,
 884 |             "height": 1024
 885 |           }
 886 |         },
 887 |         "capabilities": ["touch", "mobile"],
 888 |         "user-agent":
 889 |           "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
 890 |         "type": "tablet",
 891 |         "modes": [
 892 |           {
 893 |             "title": "default",
 894 |             "orientation": "vertical",
 895 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 896 |           },
 897 |           {
 898 |             "title": "default",
 899 |             "orientation": "horizontal",
 900 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 901 |           }
 902 |         ]
 903 |       }
 904 |     },
 905 |     {
 906 |       "type": "emulated-device",
 907 |       "order": 41,
 908 |       "device": {
 909 |         "show-by-default": true,
 910 |         "title": "iPad Pro",
 911 |         "screen": {
 912 |           "horizontal": {
 913 |             "width": 1366,
 914 |             "height": 1024
 915 |           },
 916 |           "device-pixel-ratio": 2,
 917 |           "vertical": {
 918 |             "width": 1024,
 919 |             "height": 1366
 920 |           }
 921 |         },
 922 |         "capabilities": ["touch", "mobile"],
 923 |         "user-agent":
 924 |           "Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1",
 925 |         "type": "tablet",
 926 |         "modes": [
 927 |           {
 928 |             "title": "default",
 929 |             "orientation": "vertical",
 930 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 931 |           },
 932 |           {
 933 |             "title": "default",
 934 |             "orientation": "horizontal",
 935 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 936 |           }
 937 |         ]
 938 |       }
 939 |     },
 940 |     {
 941 |       "type": "emulated-device",
 942 |       "device": {
 943 |         "show-by-default": false,
 944 |         "title": "Blackberry PlayBook",
 945 |         "screen": {
 946 |           "horizontal": {
 947 |             "width": 1024,
 948 |             "height": 600
 949 |           },
 950 |           "device-pixel-ratio": 1,
 951 |           "vertical": {
 952 |             "width": 600,
 953 |             "height": 1024
 954 |           }
 955 |         },
 956 |         "capabilities": ["touch", "mobile"],
 957 |         "user-agent":
 958 |           "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+",
 959 |         "type": "tablet",
 960 |         "modes": [
 961 |           {
 962 |             "title": "default",
 963 |             "orientation": "vertical",
 964 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 965 |           },
 966 |           {
 967 |             "title": "default",
 968 |             "orientation": "horizontal",
 969 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 970 |           }
 971 |         ]
 972 |       }
 973 |     },
 974 |     {
 975 |       "type": "emulated-device",
 976 |       "device": {
 977 |         "show-by-default": false,
 978 |         "title": "Nexus 10",
 979 |         "screen": {
 980 |           "horizontal": {
 981 |             "width": 1280,
 982 |             "height": 800
 983 |           },
 984 |           "device-pixel-ratio": 2,
 985 |           "vertical": {
 986 |             "width": 800,
 987 |             "height": 1280
 988 |           }
 989 |         },
 990 |         "capabilities": ["touch", "mobile"],
 991 |         "user-agent":
 992 |           "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 10 Build/MOB31T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36",
 993 |         "type": "tablet",
 994 |         "modes": [
 995 |           {
 996 |             "title": "default",
 997 |             "orientation": "vertical",
 998 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
 999 |           },
1000 |           {
1001 |             "title": "default",
1002 |             "orientation": "horizontal",
1003 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1004 |           }
1005 |         ]
1006 |       }
1007 |     },
1008 |     {
1009 |       "type": "emulated-device",
1010 |       "device": {
1011 |         "show-by-default": false,
1012 |         "title": "Nexus 7",
1013 |         "screen": {
1014 |           "horizontal": {
1015 |             "width": 960,
1016 |             "height": 600
1017 |           },
1018 |           "device-pixel-ratio": 2,
1019 |           "vertical": {
1020 |             "width": 600,
1021 |             "height": 960
1022 |           }
1023 |         },
1024 |         "capabilities": ["touch", "mobile"],
1025 |         "user-agent":
1026 |           "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36",
1027 |         "type": "tablet",
1028 |         "modes": [
1029 |           {
1030 |             "title": "default",
1031 |             "orientation": "vertical",
1032 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1033 |           },
1034 |           {
1035 |             "title": "default",
1036 |             "orientation": "horizontal",
1037 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1038 |           }
1039 |         ]
1040 |       }
1041 |     },
1042 |     {
1043 |       "type": "emulated-device",
1044 |       "device": {
1045 |         "show-by-default": false,
1046 |         "title": "Galaxy Note 3",
1047 |         "screen": {
1048 |           "horizontal": {
1049 |             "width": 640,
1050 |             "height": 360
1051 |           },
1052 |           "device-pixel-ratio": 3,
1053 |           "vertical": {
1054 |             "width": 360,
1055 |             "height": 640
1056 |           }
1057 |         },
1058 |         "capabilities": ["touch", "mobile"],
1059 |         "user-agent":
1060 |           "Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
1061 |         "type": "phone",
1062 |         "modes": [
1063 |           {
1064 |             "title": "default",
1065 |             "orientation": "vertical",
1066 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1067 |           },
1068 |           {
1069 |             "title": "default",
1070 |             "orientation": "horizontal",
1071 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1072 |           }
1073 |         ]
1074 |       }
1075 |     },
1076 |     {
1077 |       "type": "emulated-device",
1078 |       "device": {
1079 |         "show-by-default": false,
1080 |         "title": "Galaxy Note II",
1081 |         "screen": {
1082 |           "horizontal": {
1083 |             "width": 640,
1084 |             "height": 360
1085 |           },
1086 |           "device-pixel-ratio": 2,
1087 |           "vertical": {
1088 |             "width": 360,
1089 |             "height": 640
1090 |           }
1091 |         },
1092 |         "capabilities": ["touch", "mobile"],
1093 |         "user-agent":
1094 |           "Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
1095 |         "type": "phone",
1096 |         "modes": [
1097 |           {
1098 |             "title": "default",
1099 |             "orientation": "vertical",
1100 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1101 |           },
1102 |           {
1103 |             "title": "default",
1104 |             "orientation": "horizontal",
1105 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1106 |           }
1107 |         ]
1108 |       }
1109 |     },
1110 |     {
1111 |       "type": "emulated-device",
1112 |       "device": {
1113 |         "show-by-default": false,
1114 |         "title": "Laptop with touch",
1115 |         "screen": {
1116 |           "horizontal": {
1117 |             "width": 1280,
1118 |             "height": 950
1119 |           },
1120 |           "device-pixel-ratio": 1,
1121 |           "vertical": {
1122 |             "width": 950,
1123 |             "height": 1280
1124 |           }
1125 |         },
1126 |         "capabilities": ["touch"],
1127 |         "user-agent": "",
1128 |         "type": "notebook",
1129 |         "modes": [
1130 |           {
1131 |             "title": "default",
1132 |             "orientation": "horizontal",
1133 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1134 |           }
1135 |         ]
1136 |       }
1137 |     },
1138 |     {
1139 |       "type": "emulated-device",
1140 |       "device": {
1141 |         "show-by-default": false,
1142 |         "title": "Laptop with HiDPI screen",
1143 |         "screen": {
1144 |           "horizontal": {
1145 |             "width": 1440,
1146 |             "height": 900
1147 |           },
1148 |           "device-pixel-ratio": 2,
1149 |           "vertical": {
1150 |             "width": 900,
1151 |             "height": 1440
1152 |           }
1153 |         },
1154 |         "capabilities": [],
1155 |         "user-agent": "",
1156 |         "type": "notebook",
1157 |         "modes": [
1158 |           {
1159 |             "title": "default",
1160 |             "orientation": "horizontal",
1161 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1162 |           }
1163 |         ]
1164 |       }
1165 |     },
1166 |     {
1167 |       "type": "emulated-device",
1168 |       "device": {
1169 |         "show-by-default": false,
1170 |         "title": "Laptop with MDPI screen",
1171 |         "screen": {
1172 |           "horizontal": {
1173 |             "width": 1280,
1174 |             "height": 800
1175 |           },
1176 |           "device-pixel-ratio": 1,
1177 |           "vertical": {
1178 |             "width": 800,
1179 |             "height": 1280
1180 |           }
1181 |         },
1182 |         "capabilities": [],
1183 |         "user-agent": "",
1184 |         "type": "notebook",
1185 |         "modes": [
1186 |           {
1187 |             "title": "default",
1188 |             "orientation": "horizontal",
1189 |             "insets": { "left": 0, "top": 0, "right": 0, "bottom": 0 }
1190 |           }
1191 |         ]
1192 |       }
1193 |     }
1194 |   ],
1195 |   "dependencies": ["emulation"],
1196 |   "scripts": [],
1197 |   "resources": []
1198 | }
1199 | 


--------------------------------------------------------------------------------