From 648f6cb254892c9939cd917578d534259e993810 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 28 Sep 2016 13:49:30 -0500 Subject: [PATCH] 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 | 4 +- devtools/client/responsive.html/manager.js | 8 +-- .../responsive.html/reducers/viewports.js | 7 +++ .../responsive.html/test/browser/head.js | 2 +- .../responsivedesign/responsivedesign.jsm | 56 +++++++++++-------- .../test/browser_responsiveui.js | 6 +- .../test/browser_responsiveui_window_close.js | 2 +- .../browser_responsiveuiaddcustompreset.js | 7 ++- devtools/client/responsivedesign/test/head.js | 16 +++--- devtools/client/styleeditor/StyleEditorUI.jsm | 11 +--- devtools/client/styleeditor/test/browser.ini | 1 + .../test/browser_styleeditor_media_sidebar.js | 4 +- ...browser_styleeditor_media_sidebar_links.js | 42 ++++++++++---- .../client/styleeditor/test/media-rules.css | 4 +- 14 files changed, 102 insertions(+), 68 deletions(-) diff --git a/devtools/client/responsive.html/index.js b/devtools/client/responsive.html/index.js index 4f76d6ea82cb..8d8f8a9f64e8 100644 --- a/devtools/client/responsive.html/index.js +++ b/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) { diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js index 5146561011fe..d20d6d539896 100644 --- a/devtools/client/responsive.html/manager.js +++ b/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); }), /** diff --git a/devtools/client/responsive.html/reducers/viewports.js b/devtools/client/responsive.html/reducers/viewports.js index 665e0a93e84c..77b9692e256e 100644 --- a/devtools/client/responsive.html/reducers/viewports.js +++ b/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, diff --git a/devtools/client/responsive.html/test/browser/head.js b/devtools/client/responsive.html/test/browser/head.js index e537e1f12a81..c4c39673ee3e 100644 --- a/devtools/client/responsive.html/test/browser/head.js +++ b/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; } }); diff --git a/devtools/client/responsivedesign/responsivedesign.jsm b/devtools/client/responsivedesign/responsivedesign.jsm index d32928fd19d5..228c5db93492 100644 --- a/devtools/client/responsivedesign/responsivedesign.jsm +++ b/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 }); }, /** diff --git a/devtools/client/responsivedesign/test/browser_responsiveui.js b/devtools/client/responsivedesign/test/browser_responsiveui.js index f9ebf5ae2211..283974d0f802 100644 --- a/devtools/client/responsivedesign/test/browser_responsiveui.js +++ b/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."); diff --git a/devtools/client/responsivedesign/test/browser_responsiveui_window_close.js b/devtools/client/responsivedesign/test/browser_responsiveui_window_close.js index 809de085ca27..a5f890a862c7 100644 --- a/devtools/client/responsivedesign/test/browser_responsiveui_window_close.js +++ b/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 diff --git a/devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js b/devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js index 3970b5ccda67..3ab54b601f03 100644 --- a/devtools/client/responsivedesign/test/browser_responsiveuiaddcustompreset.js +++ b/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(); diff --git a/devtools/client/responsivedesign/test/head.js b/devtools/client/responsivedesign/test/head.js index c6ab7779d34e..3228021f62e1 100644 --- a/devtools/client/responsivedesign/test/head.js +++ b/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; } }); diff --git a/devtools/client/styleeditor/StyleEditorUI.jsm b/devtools/client/styleeditor/StyleEditorUI.jsm index 383cedc7ff02..c2bbc8e15af1 100644 --- a/devtools/client/styleeditor/StyleEditorUI.jsm +++ b/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); }), /** diff --git a/devtools/client/styleeditor/test/browser.ini b/devtools/client/styleeditor/test/browser.ini index 2fec760a7020..1a85546afbb0 100644 --- a/devtools/client/styleeditor/test/browser.ini +++ b/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 diff --git a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js index 31f6e5487fef..15895fac4965 100644 --- a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar.js +++ b/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(); diff --git a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js b/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js index 6483cdb42596..85c41b9dc334 100644 --- a/devtools/client/styleeditor/test/browser_styleeditor_media_sidebar_links.js +++ b/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, diff --git a/devtools/client/styleeditor/test/media-rules.css b/devtools/client/styleeditor/test/media-rules.css index f9ae816d0f8a..5eea7c380a26 100644 --- a/devtools/client/styleeditor/test/media-rules.css +++ b/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; } -} \ No newline at end of file +}