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

--HG--
extra : rebase_source : 01623eead39ed58ebd07684ca4ccd12b2a343d9e

devtools/client/responsive.html/index.js

@@ -110,9 +110,9 @@ window.getViewportSize = () => {
 };
 
 /**
- * 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) {

devtools/client/responsive.html/manager.js

@@ -172,7 +172,7 @@ const ResponsiveUIManager = exports.ResponsiveUIManager = {
     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 });
@@ -489,11 +489,11 @@ ResponsiveUI.prototype = {
   },
 
   /**
-   * 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);
   }),
 
   /**

devtools/client/responsive.html/reducers/viewports.js

@@ -49,6 +49,13 @@ let reducers = {
         return viewport;
       }
 
+      if (!width) {
+        width = viewport.width;
+      }
+      if (!height) {
+        height = viewport.height;
+      }
+
       return Object.assign({}, viewport, {
         width,
         height,

devtools/client/responsive.html/test/browser/head.js

@@ -142,7 +142,7 @@ var setViewportSize = Task.async(function* (ui, manager, width, 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;
   }
 });

devtools/client/responsivedesign/responsivedesign.jsm

@@ -62,7 +62,7 @@ var Manager = {
     if (this.isActiveForTab(aTab)) {
       ActiveTabs.get(aTab).close();
     } else {
-      this.runIfNeeded(aWindow, aTab);
+      this.openIfNeeded(aWindow, aTab);
     }
   },
 
@@ -73,7 +73,7 @@ var Manager = {
    * @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);
@@ -111,11 +111,11 @@ var Manager = {
   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)) {
@@ -419,7 +419,7 @@ ResponsiveUI.prototype = {
    * 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,
@@ -445,6 +445,10 @@ ResponsiveUI.prototype = {
     }
   },
 
+  getViewportBrowser() {
+    return this.browser;
+  },
+
   /**
    * Check the menu items.
    */
@@ -675,7 +679,10 @@ ResponsiveUI.prototype = {
     let h = this.customPreset.height = parseInt(value[2], 10);
 
     this.saveCustomSize();
-    this.setSize(w, h);
+    this.setViewportSize({
+      width: w,
+      height: h,
+    });
   },
 
   /**
@@ -757,11 +764,9 @@ ResponsiveUI.prototype = {
 
   /**
    * Apply a preset.
-   *
-   * @param aPreset preset to apply.
    */
-  loadPreset: function RUI_loadPreset(aPreset) {
-    this.setSize(aPreset.width, aPreset.height);
+  loadPreset(preset) {
+    this.setViewportSize(preset);
   },
 
   /**
@@ -847,7 +852,10 @@ ResponsiveUI.prototype = {
     this.menulist.selectedItem = menuitem;
     this.currentPresetKey = this.customPreset.key;
 
-    this.setSize(w, h);
+    this.setViewportSize({
+      width: w,
+      height: h,
+    });
 
     this.savePresets();
   },
@@ -860,7 +868,10 @@ ResponsiveUI.prototype = {
     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();
@@ -1001,15 +1012,16 @@ ResponsiveUI.prototype = {
   },
 
   /**
-   * 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) {
@@ -1124,7 +1136,7 @@ ResponsiveUI.prototype = {
       this.lastScreenY = screenY;
     }
 
-    this.setSize(width, height);
+    this.setViewportSize({ width, height });
   },
 
   /**

devtools/client/responsivedesign/test/browser_responsiveui.js

@@ -111,7 +111,7 @@ function* testManualMouseResize(rdm, manager, pressedKey) {
   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;
@@ -138,7 +138,7 @@ function* testResizeUsingCustomInput(rdm, manager) {
   // 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);
 }
@@ -172,7 +172,7 @@ function* testRotate(rdm, manager) {
   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.");

devtools/client/responsivedesign/test/browser_responsiveui_window_close.js

@@ -12,7 +12,7 @@ add_task(function* () {
   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

devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js

@@ -46,10 +46,13 @@ add_task(function* () {
   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();

devtools/client/responsivedesign/test/head.js

@@ -40,7 +40,7 @@ var openRDM = Task.async(function* (tab = gBrowser.selectedTab,
   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 {
@@ -71,7 +71,7 @@ var closeRDM = Task.async(function* (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;
@@ -272,19 +272,19 @@ function waitForResizeTo(manager, width, height) {
       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;
   }
@@ -296,7 +296,7 @@ var setSize = Task.async(function* (rdm, manager, width, 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;
   }
 });

devtools/client/styleeditor/StyleEditorUI.jsm

@@ -961,15 +961,8 @@ StyleEditorUI.prototype = {
     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);
   }),
 
   /**

devtools/client/styleeditor/test/browser.ini

@@ -56,6 +56,7 @@ support-files =
   !/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
 

devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js

@@ -10,9 +10,9 @@ 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();

devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js

@@ -7,6 +7,15 @@
 /* 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";
@@ -21,7 +30,7 @@ add_task(function* () {
   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);
@@ -47,12 +56,13 @@ function* testMediaLink(editor, tab, ui, itemIndex, type, value) {
   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;
@@ -64,14 +74,14 @@ function* testMediaLink(editor, tab, ui, itemIndex, type, value) {
   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),
@@ -89,23 +99,31 @@ function doFinalChecks(editor) {
 }
 
 /* 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,

devtools/client/styleeditor/test/media-rules.css

@@ -22,8 +22,8 @@ div {
   }
 }
 
-@media (min-height: 200px) and (max-height: 250px) {
+@media (min-height: 300px) and (max-height: 320px) {
   div {
     color: orange;
   }
-}
+}