--- a/devtools/client/responsive.html/index.js
+++ b/devtools/client/responsive.html/index.js
@@ -105,19 +105,19 @@ window.addInitialViewport = contentURI =
  * Called by manager.js when tests want to check the viewport size.
  */
 window.getViewportSize = () => {
   let { width, height } = bootstrap.store.getState().viewports[0];
   return { width, height };
 };
 
 /**
- * Called by manager.js to set viewport size from GCLI.
+ * Called by manager.js to set viewport size from tests, GCLI, etc.
  */
-window.setViewportSize = (width, height) => {
+window.setViewportSize = ({ width, height }) => {
   try {
     bootstrap.dispatch(resizeViewport(0, width, height));
   } catch (e) {
     console.error(e);
   }
 };
 
 /**

--- a/devtools/client/responsive.html/manager.js
+++ b/devtools/client/responsive.html/manager.js
@@ -167,17 +167,17 @@ const ResponsiveUIManager = exports.Resp
    * @param args
    *        The GCLI command arguments.
    */
   handleGcliCommand(window, tab, command, args) {
     let completed;
     switch (command) {
       case "resize to":
         completed = this.openIfNeeded(window, tab, { command: true });
-        this.activeTabs.get(tab).setViewportSize(args.width, args.height);
+        this.activeTabs.get(tab).setViewportSize(args);
         break;
       case "resize on":
         completed = this.openIfNeeded(window, tab, { command: true });
         break;
       case "resize off":
         completed = this.closeIfNeeded(window, tab, { command: true });
         break;
       case "resize toggle":
@@ -484,21 +484,21 @@ ResponsiveUI.prototype = {
   /**
    * Helper for tests. Assumes a single viewport for now.
    */
   getViewportSize() {
     return this.toolWindow.getViewportSize();
   },
 
   /**
-   * Helper for tests. Assumes a single viewport for now.
+   * Helper for tests, GCLI, etc. Assumes a single viewport for now.
    */
-  setViewportSize: Task.async(function* (width, height) {
+  setViewportSize: Task.async(function* (size) {
     yield this.inited;
-    this.toolWindow.setViewportSize(width, height);
+    this.toolWindow.setViewportSize(size);
   }),
 
   /**
    * Helper for tests/reloading the viewport. Assumes a single viewport for now.
    */
   getViewportBrowser() {
     return this.toolWindow.getViewportBrowser();
   },

--- a/devtools/client/responsive.html/reducers/viewports.js
+++ b/devtools/client/responsive.html/reducers/viewports.js
@@ -44,16 +44,23 @@ let reducers = {
   },
 
   [RESIZE_VIEWPORT](viewports, { id, width, height }) {
     return viewports.map(viewport => {
       if (viewport.id !== id) {
         return viewport;
       }
 
+      if (!width) {
+        width = viewport.width;
+      }
+      if (!height) {
+        height = viewport.height;
+      }
+
       return Object.assign({}, viewport, {
         width,
         height,
       });
     });
   },
 
   [ROTATE_VIEWPORT](viewports, { id }) {

--- a/devtools/client/responsive.html/test/browser/head.js
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -137,17 +137,17 @@ function waitForViewportResizeTo(ui, wid
 }
 
 var setViewportSize = Task.async(function* (ui, manager, width, height) {
   let size = ui.getViewportSize();
   info(`Current size: ${size.width} x ${size.height}, ` +
        `set to: ${width} x ${height}`);
   if (size.width != width || size.height != height) {
     let resized = waitForViewportResizeTo(ui, width, height);
-    ui.setViewportSize(width, height);
+    ui.setViewportSize({ width, height });
     yield resized;
   }
 });
 
 function getElRect(selector, win) {
   let el = win.document.querySelector(selector);
   return el.getBoundingClientRect();
 }

--- a/devtools/client/responsivedesign/responsivedesign.jsm
+++ b/devtools/client/responsivedesign/responsivedesign.jsm
@@ -57,28 +57,28 @@ var Manager = {
    *
    * @param aWindow the main window.
    * @param aTab the tab targeted.
    */
   toggle: function (aWindow, aTab) {
     if (this.isActiveForTab(aTab)) {
       ActiveTabs.get(aTab).close();
     } else {
-      this.runIfNeeded(aWindow, aTab);
+      this.openIfNeeded(aWindow, aTab);
     }
   },
 
   /**
    * Launches the responsive mode.
    *
    * @param aWindow the main window.
    * @param aTab the tab targeted.
    * @returns {ResponsiveUI} the instance of ResponsiveUI for the current tab.
    */
-  runIfNeeded: Task.async(function* (aWindow, aTab) {
+  openIfNeeded: Task.async(function* (aWindow, aTab) {
     let ui;
     if (!this.isActiveForTab(aTab)) {
       ui = new ResponsiveUI(aWindow, aTab);
       yield ui.inited;
     } else {
       ui = this.getResponsiveUIForTab(aTab);
     }
     return ui;
@@ -106,21 +106,21 @@ var Manager = {
    * @param aWindow the browser window.
    * @param aTab the tab targeted.
    * @param aCommand the command name.
    * @param aArgs command arguments.
    */
   handleGcliCommand: Task.async(function* (aWindow, aTab, aCommand, aArgs) {
     switch (aCommand) {
       case "resize to":
-        let ui = yield this.runIfNeeded(aWindow, aTab);
-        ui.setSize(aArgs.width, aArgs.height);
+        let ui = yield this.openIfNeeded(aWindow, aTab);
+        ui.setViewportSize(aArgs);
         break;
       case "resize on":
-        this.runIfNeeded(aWindow, aTab);
+        this.openIfNeeded(aWindow, aTab);
         break;
       case "resize off":
         if (this.isActiveForTab(aTab)) {
           yield ActiveTabs.get(aTab).close();
         }
         break;
       case "resize toggle":
         this.toggle(aWindow, aTab);
@@ -414,17 +414,17 @@ ResponsiveUI.prototype = {
       this.mm.addMessageListener(message, listener);
     });
   },
 
   /**
    * Emit an event when the content has been resized. Only used in tests.
    */
   onContentResize: function (msg) {
-    ResponsiveUIManager.emit("contentResize", {
+    ResponsiveUIManager.emit("content-resize", {
       tab: this.tab,
       width: msg.data.width,
       height: msg.data.height,
     });
   },
 
   /**
    * Handle events
@@ -440,16 +440,20 @@ ResponsiveUI.prototype = {
           this.checkMenus();
         } else if (!this.mainWindow.gBrowser.selectedTab.responsiveUI) {
           this.unCheckMenus();
         }
         break;
     }
   },
 
+  getViewportBrowser() {
+    return this.browser;
+  },
+
   /**
    * Check the menu items.
    */
   checkMenus: function RUI_checkMenus() {
     this.chromeDoc.getElementById("menu_responsiveUI").setAttribute("checked", "true");
   },
 
   /**
@@ -670,17 +674,20 @@ ResponsiveUI.prototype = {
       this.currentPresetKey = this.customPreset.key;
       this.menulist.selectedItem = menuitem;
     }
 
     let w = this.customPreset.width = parseInt(value[1], 10);
     let h = this.customPreset.height = parseInt(value[2], 10);
 
     this.saveCustomSize();
-    this.setSize(w, h);
+    this.setViewportSize({
+      width: w,
+      height: h,
+    });
   },
 
   /**
    * Build the presets list and append it to the menupopup.
    *
    * @param aParent menupopup.
    */
   registerPresets: function RUI_registerPresets(aParent) {
@@ -752,21 +759,19 @@ ResponsiveUI.prototype = {
         this.addbutton.hidden = true;
         this.removebutton.hidden = false;
       }
     }
   },
 
   /**
    * Apply a preset.
-   *
-   * @param aPreset preset to apply.
    */
-  loadPreset: function RUI_loadPreset(aPreset) {
-    this.setSize(aPreset.width, aPreset.height);
+  loadPreset(preset) {
+    this.setViewportSize(preset);
   },
 
   /**
    * Add a preset to the list and the memory
    */
   addPreset: function RUI_addPreset() {
     let w = this.customPreset.width;
     let h = this.customPreset.height;
@@ -842,30 +847,36 @@ ResponsiveUI.prototype = {
 
     this.customPreset.width = w;
     this.customPreset.height = h;
     let menuitem = this.customMenuitem;
     this.setMenuLabel(menuitem, this.customPreset);
     this.menulist.selectedItem = menuitem;
     this.currentPresetKey = this.customPreset.key;
 
-    this.setSize(w, h);
+    this.setViewportSize({
+      width: w,
+      height: h,
+    });
 
     this.savePresets();
   },
 
   /**
    * Swap width and height.
    */
   rotate: function RUI_rotate() {
     let selectedPreset = this.menuitems.get(this.selectedItem);
     let width = this.rotateValue ? selectedPreset.height : selectedPreset.width;
     let height = this.rotateValue ? selectedPreset.width : selectedPreset.height;
 
-    this.setSize(height, width);
+    this.setViewportSize({
+      width: height,
+      height: width,
+    });
 
     if (selectedPreset.custom) {
       this.saveCustomSize();
     } else {
       this.rotateValue = !this.rotateValue;
       this.saveCurrentPreset();
     }
   },
@@ -996,25 +1007,26 @@ ResponsiveUI.prototype = {
     let height = Number(this.stack.style.minHeight.replace("px", ""));
     return {
       width,
       height,
     };
   },
 
   /**
-   * Change the size of the browser.
-   *
-   * @param aWidth width of the browser.
-   * @param aHeight height of the browser.
+   * Change the size of the viewport.
    */
-  setSize: function RUI_setSize(aWidth, aHeight) {
-    debug(`SET SIZE TO ${aWidth} x ${aHeight}`);
-    this.setWidth(aWidth);
-    this.setHeight(aHeight);
+  setViewportSize({ width, height }) {
+    debug(`SET SIZE TO ${width} x ${height}`);
+    if (width) {
+      this.setWidth(width);
+    }
+    if (height) {
+      this.setHeight(height);
+    }
   },
 
   setWidth: function RUI_setWidth(aWidth) {
     aWidth = Math.min(Math.max(aWidth, MIN_WIDTH), MAX_WIDTH);
     this.stack.style.maxWidth = this.stack.style.minWidth = aWidth + "px";
 
     if (!this.ignoreX)
       this.resizeBarH.setAttribute("left", Math.round(aWidth / 2));
@@ -1119,17 +1131,17 @@ ResponsiveUI.prototype = {
     }
 
     if (height < MIN_HEIGHT) {
       height = MIN_HEIGHT;
     } else {
       this.lastScreenY = screenY;
     }
 
-    this.setSize(width, height);
+    this.setViewportSize({ width, height });
   },
 
   /**
    * Stop End resizing
    */
   stopResizing: function RUI_stopResizing() {
     this.container.style.pointerEvents = "auto";
 

--- a/devtools/client/responsivedesign/test/browser_responsiveui.js
+++ b/devtools/client/responsivedesign/test/browser_responsiveui.js
@@ -106,17 +106,17 @@ function* testManualMouseResize(rdm, man
     mouseMoveParams.ctrlKey = true;
   } else {
     x += 20; y += 10;
   }
 
   EventUtils.synthesizeMouse(rdm.resizer, x, y, mouseMoveParams, window);
   EventUtils.synthesizeMouse(rdm.resizer, x, y, {type: "mouseup"}, window);
 
-  yield once(manager, "contentResize");
+  yield once(manager, "content-resize");
 
   let expectedWidth = initialWidth + 20;
   let expectedHeight = initialHeight + 10;
   info("initial width: " + initialWidth);
   info("initial height: " + initialHeight);
 
   yield verifyResize(rdm, expectedWidth, expectedHeight);
 }
@@ -133,17 +133,17 @@ function* testResizeUsingCustomInput(rdm
   // While typing, the size should not change
   let currentSize = yield getSizing();
   is(currentSize.width, initialWidth, "Typing shouldn't change the width");
   is(currentSize.height, initialHeight, "Typing shouldn't change the height");
 
   // Only the `change` event must change the size
   EventUtils.synthesizeKey("VK_RETURN", {});
 
-  yield once(manager, "contentResize");
+  yield once(manager, "content-resize");
 
   yield verifyResize(rdm, expectedWidth, expectedHeight);
 }
 
 function* testInvalidUserInput(rdm) {
   let {width: initialWidth, height: initialHeight} = yield getSizing();
   let index = rdm.menulist.selectedIndex;
   let expectedValue = initialWidth + "\u00D7" + initialHeight;
@@ -167,17 +167,17 @@ function* testInvalidUserInput(rdm) {
 }
 
 function* testRotate(rdm, manager) {
   yield setSize(rdm, manager, 100, 200);
 
   let {width: initialWidth, height: initialHeight} = yield getSizing();
   rdm.rotate();
 
-  yield once(manager, "contentResize");
+  yield once(manager, "content-resize");
 
   let newSize = yield getSizing();
   is(newSize.width, initialHeight, "The width should now be the height.");
   is(newSize.height, initialWidth, "The height should now be the width.");
 
   let label = rdm.menulist.firstChild.firstChild.getAttribute("label");
   let [width, height] = extractSizeFromString(label);
   is(width, initialHeight, "Width in label should be updated");

--- a/devtools/client/responsivedesign/test/browser_responsiveui_window_close.js
+++ b/devtools/client/responsivedesign/test/browser_responsiveui_window_close.js
@@ -7,17 +7,17 @@ add_task(function* () {
   let newWindowPromise = BrowserTestUtils.waitForNewWindow();
   window.open("about:blank", "_blank");
   let newWindow = yield newWindowPromise;
 
   newWindow.focus();
   yield once(newWindow.gBrowser, "load", true);
 
   let tab = newWindow.gBrowser.selectedTab;
-  yield ResponsiveUIManager.runIfNeeded(newWindow, tab);
+  yield ResponsiveUIManager.openIfNeeded(newWindow, tab);
 
   // Close the window on a tab with an active responsive design UI and
   // wait for the UI to gracefully shutdown.  This has leaked the window
   // in the past.
   ok(ResponsiveUIManager.isActiveForTab(tab),
      "ResponsiveUI should be active for tab when the window is closed");
   let offPromise = once(ResponsiveUIManager, "off");
   yield BrowserTestUtils.closeWindow(newWindow);

--- a/devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js
+++ b/devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js
@@ -41,20 +41,23 @@ add_task(function* () {
      "selected item shouldn't change after add preset and cancel");
   is(presetCount, rdm.presets.length,
      "number of presets shouldn't change after add preset and cancel");
 
   // Adds the custom preset with "Testing preset"
   Services.prompt.value = "Testing preset";
   Services.prompt.returnBool = true;
 
-  let resized = once(manager, "contentResize");
+  let resized = once(manager, "content-resize");
   let customHeight = 123, customWidth = 456;
   rdm.startResizing({});
-  rdm.setSize(customWidth, customHeight);
+  rdm.setViewportSize({
+    width: customWidth,
+    height: customHeight,
+  });
   rdm.stopResizing({});
 
   rdm.addbutton.doCommand();
   yield resized;
 
   yield closeRDM(rdm);
 
   ({rdm} = yield openRDM(tab));

--- a/devtools/client/responsivedesign/test/head.js
+++ b/devtools/client/responsivedesign/test/head.js
@@ -35,17 +35,17 @@ const { ResponsiveUIManager } = Cu.impor
  * @param {method} The method to use to open the RDM (values: menu, keyboard)
  * @return {rdm, manager} Returns the RUI instance and the manager
  */
 var openRDM = Task.async(function* (tab = gBrowser.selectedTab,
                                    method = "menu") {
   let manager = ResponsiveUIManager;
 
   let opened = once(manager, "on");
-  let resized = once(manager, "contentResize");
+  let resized = once(manager, "content-resize");
   if (method == "menu") {
     document.getElementById("menu_responsiveUI").doCommand();
   } else {
     synthesizeKeyFromKeyTag(document.getElementById("key_responsiveUI"));
   }
   yield opened;
 
   let rdm = manager.getResponsiveUIForTab(tab);
@@ -66,17 +66,17 @@ var openRDM = Task.async(function* (tab 
  * @param {rdm} ResponsiveUI instance for the tab
  */
 var closeRDM = Task.async(function* (rdm) {
   let manager = ResponsiveUIManager;
   if (!rdm) {
     rdm = manager.getResponsiveUIForTab(gBrowser.selectedTab);
   }
   let closed = once(manager, "off");
-  let resized = once(manager, "contentResize");
+  let resized = once(manager, "content-resize");
   rdm.close();
   yield resized;
   yield closed;
 });
 
 /**
  * Open the toolbox, with the inspector tool visible.
  * @return a promise that resolves when the inspector is ready
@@ -267,36 +267,36 @@ var selectNode = Task.async(function* (s
 });
 
 function waitForResizeTo(manager, width, height) {
   return new Promise(resolve => {
     let onResize = (_, data) => {
       if (data.width != width || data.height != height) {
         return;
       }
-      manager.off("contentResize", onResize);
-      info(`Got contentResize to ${width} x ${height}`);
+      manager.off("content-resize", onResize);
+      info(`Got content-resize to ${width} x ${height}`);
       resolve();
     };
-    info(`Waiting for contentResize to ${width} x ${height}`);
-    manager.on("contentResize", onResize);
+    info(`Waiting for content-resize to ${width} x ${height}`);
+    manager.on("content-resize", onResize);
   });
 }
 
 var setPresetIndex = Task.async(function* (rdm, manager, index) {
   info(`Current preset: ${rdm.menulist.selectedIndex}, change to: ${index}`);
   if (rdm.menulist.selectedIndex != index) {
-    let resized = once(manager, "contentResize");
+    let resized = once(manager, "content-resize");
     rdm.menulist.selectedIndex = index;
     yield resized;
   }
 });
 
 var setSize = Task.async(function* (rdm, manager, width, height) {
   let size = rdm.getSize();
   info(`Current size: ${size.width} x ${size.height}, ` +
        `set to: ${width} x ${height}`);
   if (size.width != width || size.height != height) {
     let resized = waitForResizeTo(manager, width, height);
-    rdm.setSize(width, height);
+    rdm.setViewportSize({ width, height });
     yield resized;
   }
 });

--- a/devtools/client/styleeditor/StyleEditorUI.jsm
+++ b/devtools/client/styleeditor/StyleEditorUI.jsm
@@ -956,25 +956,18 @@ StyleEditorUI.prototype = {
    *
    * @param  {object} options
    *         Object with width or/and height properties.
    */
   _launchResponsiveMode: Task.async(function* (options = {}) {
     let tab = this._target.tab;
     let win = this._target.tab.ownerDocument.defaultView;
 
-    yield ResponsiveUIManager.runIfNeeded(win, tab);
-    if (options.width && options.height) {
-      ResponsiveUIManager.getResponsiveUIForTab(tab).setSize(options.width,
-                                                             options.height);
-    } else if (options.width) {
-      ResponsiveUIManager.getResponsiveUIForTab(tab).setWidth(options.width);
-    } else if (options.height) {
-      ResponsiveUIManager.getResponsiveUIForTab(tab).setHeight(options.height);
-    }
+    yield ResponsiveUIManager.openIfNeeded(win, tab);
+    ResponsiveUIManager.getResponsiveUIForTab(tab).setViewportSize(options);
   }),
 
   /**
    * Jump cursor to the editor for a stylesheet and line number for a rule.
    *
    * @param  {object} location
    *         Location object with 'line', 'column', and 'source' properties.
    */

--- a/devtools/client/styleeditor/test/browser.ini
+++ b/devtools/client/styleeditor/test/browser.ini
@@ -51,16 +51,17 @@ support-files =
   doc_xulpage.xul
   sync.html
   utf-16.css
   !/devtools/client/commandline/test/helpers.js
   !/devtools/client/framework/test/shared-head.js
   !/devtools/client/inspector/shared/test/head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
+  !/devtools/client/responsive.html/test/browser/devices.json
   !/devtools/client/shared/test/test-actor-registry.js
   !/devtools/client/shared/test/test-actor.js
 
 [browser_styleeditor_autocomplete.js]
 [browser_styleeditor_autocomplete-disabled.js]
 [browser_styleeditor_bom.js]
 [browser_styleeditor_bug_740541_iframes.js]
 [browser_styleeditor_bug_851132_middle_click.js]

--- a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
@@ -5,19 +5,19 @@
 "use strict";
 
 // https rather than chrome to improve coverage
 const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
 const MEDIA_PREF = "devtools.styleeditor.showMediaSidebar";
 
 const RESIZE = 300;
 const LABELS = ["not all", "all", "(max-width: 400px)",
-                "(min-height: 200px) and (max-height: 250px)",
+                "(min-height: 300px) and (max-height: 320px)",
                 "(max-width: 600px)"];
-const LINE_NOS = [1, 7, 19, 25, 30];
+const LINE_NOS = [1, 7, 19, 25, 31];
 const NEW_RULE = "\n@media (max-width: 600px) { div { color: blue; } }";
 
 waitForExplicitFinish();
 
 add_task(function* () {
   let { ui } = yield openStyleEditorForURL(TESTCASE_URI);
 
   is(ui.editors.length, 2, "correct number of editors");

--- a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
@@ -2,31 +2,40 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 /* Tests responsive mode links for
  * @media sidebar width and height related conditions */
 
+const asyncStorage = require("devtools/shared/async-storage");
+Services.prefs.setCharPref("devtools.devices.url",
+  "http://example.com/browser/devtools/client/responsive.html/test/browser/devices.json");
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.devices.url");
+  asyncStorage.removeItem("devtools.devices.url_cache");
+});
+
 const mgr = "resource://devtools/client/responsivedesign/responsivedesign.jsm";
 const {ResponsiveUIManager} = Cu.import(mgr, {});
 const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";
 const responsiveModeToggleClass = ".media-responsive-mode-toggle";
 
 add_task(function* () {
   let {ui} = yield openStyleEditorForURL(TESTCASE_URI);
 
   let editor = ui.editors[1];
   yield openEditor(editor);
 
   let tab = gBrowser.selectedTab;
   testNumberOfLinks(editor);
   yield testMediaLink(editor, tab, ui, 2, "width", 400);
-  yield testMediaLink(editor, tab, ui, 3, "height", 200);
+  yield testMediaLink(editor, tab, ui, 3, "height", 300);
 
   yield closeRDM(tab, ui);
   doFinalChecks(editor);
 });
 
 function testNumberOfLinks(editor) {
   let sidebar = editor.details.querySelector(".stylesheet-sidebar");
   let conditions = sidebar.querySelectorAll(".media-rule-condition");
@@ -42,41 +51,42 @@ function testNumberOfLinks(editor) {
        "There should be 2 responsive mode links in the media rule");
 }
 
 function* testMediaLink(editor, tab, ui, itemIndex, type, value) {
   let sidebar = editor.details.querySelector(".stylesheet-sidebar");
   let conditions = sidebar.querySelectorAll(".media-rule-condition");
 
   let onMediaChange = once(ui, "media-list-changed");
-  let onContentResize = waitForResizeTo(ResponsiveUIManager, type, value);
 
   info("Launching responsive mode");
   conditions[itemIndex].querySelector(responsiveModeToggleClass).click();
 
-  ResponsiveUIManager.getResponsiveUIForTab(tab).transitionsEnabled = false;
+  let rdmUI = ResponsiveUIManager.getResponsiveUIForTab(tab);
+  let onContentResize = waitForResizeTo(rdmUI, type, value);
+  rdmUI.transitionsEnabled = false;
 
   info("Waiting for the @media list to update");
   yield onMediaChange;
   yield onContentResize;
 
   ok(ResponsiveUIManager.isActiveForTab(tab),
     "Responsive mode should be active.");
   conditions = sidebar.querySelectorAll(".media-rule-condition");
   ok(!conditions[itemIndex].classList.contains("media-condition-unmatched"),
      "media rule should now be matched after responsive mode is active");
 
-  let dimension = (yield getSizing())[type];
+  let dimension = (yield getSizing(rdmUI))[type];
   is(dimension, value, `${type} should be properly set.`);
 }
 
 function* closeRDM(tab, ui) {
   info("Closing responsive mode");
   ResponsiveUIManager.toggle(window, tab);
-  let onMediaChange = once(ui, "media-list-changed");
+  let onMediaChange = waitForNEvents(ui, "media-list-changed", 2);
   yield once(ResponsiveUIManager, "off");
   yield onMediaChange;
   ok(!ResponsiveUIManager.isActiveForTab(tab),
      "Responsive mode should no longer be active.");
 }
 
 function doFinalChecks(editor) {
   let sidebar = editor.details.querySelector(".stylesheet-sidebar");
@@ -84,33 +94,41 @@ function doFinalChecks(editor) {
   conditions = sidebar.querySelectorAll(".media-rule-condition");
   ok(conditions[2].classList.contains("media-condition-unmatched"),
      "The width condition should now be unmatched");
   ok(conditions[3].classList.contains("media-condition-unmatched"),
      "The height condition should now be unmatched");
 }
 
 /* Helpers */
-function waitForResizeTo(manager, type, value) {
+function waitForResizeTo(rdmUI, type, value) {
   return new Promise(resolve => {
     let onResize = (_, data) => {
       if (data[type] != value) {
         return;
       }
-      manager.off("contentResize", onResize);
-      info(`Got contentResize to a ${type} of ${value}`);
+      ResponsiveUIManager.off("content-resize", onResize);
+      if (rdmUI.off) {
+        rdmUI.off("content-resize", onResize);
+      }
+      info(`Got content-resize to a ${type} of ${value}`);
       resolve();
     };
-    info(`Waiting for contentResize to a ${type} of ${value}`);
-    manager.on("contentResize", onResize);
+    info(`Waiting for content-resize to a ${type} of ${value}`);
+    // Old RDM emits on manager
+    ResponsiveUIManager.on("content-resize", onResize);
+    // New RDM emits on ui
+    if (rdmUI.on) {
+      rdmUI.on("content-resize", onResize);
+    }
   });
 }
 
-function* getSizing() {
-  let browser = gBrowser.selectedBrowser;
+function* getSizing(rdmUI) {
+  let browser = rdmUI.getViewportBrowser();
   let sizing = yield ContentTask.spawn(browser, {}, function* () {
     return {
       width: content.innerWidth,
       height: content.innerHeight
     };
   });
   return sizing;
 }

--- a/devtools/client/styleeditor/test/media-rules.css
+++ b/devtools/client/styleeditor/test/media-rules.css
@@ -17,13 +17,13 @@ div {
 }
 
 @media (max-width: 400px) {
   div {
     color: green;
   }
 }
 
-@media (min-height: 200px) and (max-height: 250px) {
+@media (min-height: 300px) and (max-height: 320px) {
   div {
     color: orange;
   }
-}
\ No newline at end of file
+}