How to toggle Firefox responsive design view resolution through code

Question

I am switching on the firefox responsive design view from my xul based addon with the following code.

var mytmp = {};
Cu.import("resource://gre/modules/Services.jsm");
Services.prefs.setCharPref("devtools.responsiveUI.presets", JSON.stringify([{name:'tmp1', key: "234x899", width:300,height:300}]));
Cu.import("resource:///modules/devtools/responsivedesign.jsm", mytmp);
var win = window.bridge.myWindow;

mytmp.ResponsiveUIManager.toggle(win, win.gBrowser.tabContainer.childNodes[0]);

Following is the code which toggles the resolution

this.menulist.addEventListener("select", this.bound_presetSelected, true);

/**
* When a preset is selected, apply it.
*/
presetSelected: function RUI_presetSelected() {
 if (this.menulist.selectedItem.getAttribute("ispreset") === "true") {
   this.selectedItem = this.menulist.selectedItem;

   this.rotateValue = false;
   let selectedPreset = this.menuitems.get(this.selectedItem);
   this.loadPreset(selectedPreset);
   this.currentPresetKey = selectedPreset.key;
   this.saveCurrentPreset();

   // Update the buttons hidden status according to the new selected preset
   if (selectedPreset == this.customPreset) {
     this.addbutton.hidden = false;
     this.removebutton.hidden = true;
   } else {
     this.addbutton.hidden = true;
     this.removebutton.hidden = false;
   }
 }
},

I tried to access the menulist and do a event trigger myself but couldn't access it. How do I select the dropdown?

Answer 1

Assuming the responsive UI is turned on

gBrowser.selectedTab.__responsiveUI.setSize(320,480);

update:

I took as granted that you want to set an arbitrary size, but you actually ask about the presets. Is this still a valid answer?

Answer 2

paa's answer does work but it creates a new custom entry in the screen presets but doesnt select an existing one. You can do so by triggering a click event on the preset select ui.

Like this

var win = window.bridge.myWindow;
var i = 3 // index of the preset to be selected
var responsiveUI= win.gBrowser.selectedTab.__responsiveUI;
$(responsiveUI.menulist.children[0].children[i]).trigger('click');