Bug 1296498 - Update style editor RDM usage for new RDM. r=ntim
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 28 Sep 2016 13:49:30 -0500
changeset 315747 f6c5daab390c0772cd67dc624359e50ba539c6b4
parent 315746 e943b4729dceec311c041aa0ccecac3a7cdaeac7
child 315748 e4e13b10667c36eeb0d24ad09f37851504977208
push id20634
push usercbook@mozilla.com
push dateFri, 30 Sep 2016 10:10:13 +0000
treeherderfx-team@afe79b010d13 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1296498
milestone52.0a1
Bug 1296498 - Update style editor RDM usage for new RDM. r=ntim This is done by making the RDM APIs used by the style editor and its test for this feature the same across old and new RDM, so that the test will work with either version. MozReview-Commit-ID: CdM6qeZQqni
devtools/client/responsive.html/index.js
devtools/client/responsive.html/manager.js
devtools/client/responsive.html/reducers/viewports.js
devtools/client/responsive.html/test/browser/head.js
devtools/client/responsivedesign/responsivedesign.jsm
devtools/client/responsivedesign/test/browser_responsiveui.js
devtools/client/responsivedesign/test/browser_responsiveui_window_close.js
devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js
devtools/client/responsivedesign/test/head.js
devtools/client/styleeditor/StyleEditorUI.jsm
devtools/client/styleeditor/test/browser.ini
devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js
devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js
devtools/client/styleeditor/test/media-rules.css
--- 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
+}