Hi,

Have now worked out how to do this. You first need to create an entry called "devtools.responsive.UI.presets" in the config file then add in the preset string:

So steps are:

1)Open a new Firefox tab or window, and type about:config

2)(If a warning message comes up, just click OK.)

3)create a new entry devtools.responsive.UI.presets - right click and chose 'new' then 'string' - under enter the preference name type "devtools.responsive.UI.presets" then hit OK. When the enter string box appears simply add the folllowing

[{"key": "CGA: 320x200", "width": 320, "height": 200}, {"key": "QVGA: 320x240", "width": 320, "height": 240}, {"key": "CIF: 352x288", "width": 352, "height": 288}, {"key": "SIF: 384x288", "width": 384, "height": 288}, {"key": "HVGA: 480x320", "width": 480, "height": 320}, {"key": "VGA (NTSC): 640x480", "width": 640, "height": 480}, {"key": "PAL: 768x576", "width": 768, "height": 576}, {"key": "WVGA: 800x480", "width": 800, "height": 480}, {"key": "SVGA: 800x600", "width": 800, "height": 600}, {"key": "WVGA (NTSC): 854x480", "width": 854, "height": 480}, {"key": "PAL: 1024x576", "width": 1024, "height": 576}, {"key": "WSVGA", "width": 1024, "height": 600}, {"key": "XGA: 1024x768", "width": 1024, "height": 768}, {"key": "1152x768", "width": 1152, "height": 768}, {"key": "XGA: 1152x864", "width": 1152, "height": 864}, { "key": "WXGA: 1280x600", "width": 1280, "height": 600}, {"key": "HD 720: 1280x720", "width": 1280, "height": 720}, {"key": "WXGA: 1280x768", "width": 1280, "height": 768}, { "key": "WXGA: 1280x800", "width": 1280, "height": 800}, { "key": "SXGA: 1280x1024", "width": 1280, "height": 1024}, { "key": "980x1280", "width": 980, "height": 1280}, {"key": "Microsoft Surface RT: 320x240", "width": 1366, "height": 768}, { "key": "1400x900", "width": 1400, "height": 900}, { "key": "1400x960", "width": 1400, "height": 960}, { "key": "SXGA+: 1400x1050", "width": 1400, "height": 1050}, { "key": "1400x1080", "width": 1400, "height": 1080}, { "key": "1600x900", "width": 1600, "height": 900}, { "key": "UXGA: 1600x1200", "width": 1600, "height": 1200}, { "key": "WSXGA+: 1680x1050", "width": 1680, "height": 1050}, { "key": "1920x900", "width": 1920, "height": 900}, { "key": "HD 1080: 1920x1080", "width": 1920, "height": 1080}, { "key": "WUXGA: 1920x1200", "width": 1920, "height": 1200}, { "key": "2K: 2048x1080", "width": 2048, "height": 1080}, { "key": "QXGA: 2048x1536", "width": 2048, "height": 1536}, { "key": "WQHD: 2560x1440", "width": 2560, "height": 1440}, { "key": "WQXGA: 2560x1600", "width": 2560, "height": 1600}, { "key": "QSXGA: 2560x2048", "width": 2560, "height": 2048}, { "key": "2160p: 3840x2160", "width": 3840, "height": 2160}, { "key": "4k: 4096x2160", "width": 4096, "height": 2160}, { "key": "4320p: 7680x4320", "width": 7680, "height": 4320}, { "key": "8k: 8192x4608", "width": 8192, "height": 4608}, { "key": "8640p: 15360x8340", "width": 15360, "height": 8640} ]

then hit OK

All of the new presets should now be in the responsive design view.

Worked for me!

In FF26, at least, the entry should be "devtools.responsiveUI.presets"... and in addition to the "key" property you should add a "name" property with maybe the same value. The former is for Firefox to remember the last preset selected while the latter is to identify the preset.

You can also do the opposite and create custom settings in the responsive design mode window. You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset. This will add the preset to the devtools.responsiveUI.presets pref.

See also my post here for a bookmarklet.

• [/questions/957590]

You can paste the current value of the pref in the prompt to see a list of currently defined presets.
You can add a new preset by entering the width,height,name values in the prompt.
Copy the new preset list to the pref.

javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()