diff --git a/devtools/client/inspector/layout/test/browser_layout_editablemodel.js b/devtools/client/inspector/layout/test/browser_layout_editablemodel.js index cea92081ad66..a82a2321d735 100644 --- a/devtools/client/inspector/layout/test/browser_layout_editablemodel.js +++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel.js @@ -30,7 +30,7 @@ addTest("Test that editing margin dynamically updates the document, pressing esc function*(inspector, view) { let node = content.document.getElementById("div1"); is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.") - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".margin.top > span"); is(span.textContent, 5, "Should have the right value in the box model."); @@ -56,7 +56,7 @@ addTest("Test that arrow keys work correctly and pressing enter commits the chan function*(inspector, view) { let node = content.document.getElementById("div1"); is(getStyle(node, "margin-left"), "", "Should be no margin-top on the element.") - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".margin.left > span"); is(span.textContent, 10, "Should have the right value in the box model."); @@ -93,7 +93,7 @@ addTest("Test that deleting the value removes the property but escape undoes tha function*(inspector, view) { let node = content.document.getElementById("div1"); is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.") - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".margin.left > span"); is(span.textContent, 20, "Should have the right value in the box model."); @@ -123,7 +123,7 @@ function*(inspector, view) { node.style.marginRight = "15px"; yield waitForUpdate(inspector); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".margin.right > span"); is(span.textContent, 15, "Should have the right value in the box model."); diff --git a/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js b/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js index 3df11773b417..d0ce7459770c 100644 --- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js +++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js @@ -32,7 +32,7 @@ function*(inspector, view) { node.style.padding = "5px"; yield waitForUpdate(inspector); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".padding.bottom > span"); is(span.textContent, 5, "Should have the right value in the box model."); @@ -61,7 +61,7 @@ function*(inspector, view) { node.style.padding = "5px"; yield waitForUpdate(inspector); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".padding.left > span"); is(span.textContent, 5, "Should have the right value in the box model."); @@ -90,7 +90,7 @@ function*(inspector, view) { node.style.padding = "5px"; - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".padding.left > span"); is(span.textContent, 5, "Should have the right value in the box model."); @@ -119,7 +119,7 @@ function*(inspector, view) { node.style.padding = "5px"; yield waitForUpdate(inspector); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".padding.left > span"); is(span.textContent, 5, "Should have the right value in the box model."); diff --git a/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js b/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js index 3d92aa5f0c97..0433890929e2 100644 --- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js +++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js @@ -25,7 +25,7 @@ add_task(function*() { let node = content.document.getElementById("div1"); is(getStyle(node, "border-top-width"), "", "Should have the right border"); is(getStyle(node, "border-top-style"), "", "Should have the right border"); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".border.top > span"); is(span.textContent, 0, "Should have the right value in the box model."); diff --git a/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js b/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js index 44698116df6e..68ab5e073d5e 100644 --- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js +++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js @@ -30,7 +30,7 @@ addTest("Test that entering units works", function*(inspector, view) { let node = content.document.getElementById("div1"); is(getStyle(node, "padding-top"), "", "Should have the right padding"); - yield selectNode(node, inspector); + yield selectNode("#div1", inspector); let span = view.doc.querySelector(".padding.top > span"); is(span.textContent, 3, "Should have the right value in the box model."); @@ -63,7 +63,7 @@ addTest("Test that we pick up the value from a higher style rule", function*(inspector, view) { let node = content.document.getElementById("div2"); is(getStyle(node, "border-bottom-width"), "", "Should have the right border-bottom-width"); - yield selectNode(node, inspector); + yield selectNode("#div2", inspector); let span = view.doc.querySelector(".border.bottom > span"); is(span.textContent, 16, "Should have the right value in the box model."); @@ -89,7 +89,7 @@ addTest("Test that shorthand properties are parsed correctly", function*(inspector, view) { let node = content.document.getElementById("div3"); is(getStyle(node, "padding-right"), "", "Should have the right padding"); - yield selectNode(node, inspector); + yield selectNode("#div3", inspector); let span = view.doc.querySelector(".padding.right > span"); is(span.textContent, 32, "Should have the right value in the box model."); diff --git a/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js b/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js index a217224042e4..046e0cb98a40 100644 --- a/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js +++ b/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js @@ -8,7 +8,7 @@ // it also works after going back add_task(function*() { - yield addTab(TEST_URL_ROOT + "doc_layout_iframe1.html"); + yield addTab(URL_ROOT + "doc_layout_iframe1.html"); let {toolbox, inspector, view} = yield openLayoutView(); yield runTests(inspector, view); }); @@ -34,7 +34,7 @@ function*(inspector, view) { addTest("Navigate to the second page", function*(inspector, view) { - yield navigateTo(TEST_URL_ROOT + "doc_layout_iframe2.html"); + yield navigateTo(URL_ROOT + "doc_layout_iframe2.html"); yield inspector.once("markuploaded"); }); diff --git a/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js b/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js index 8cc450d66c1f..77382f024a41 100644 --- a/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js +++ b/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js @@ -7,7 +7,7 @@ // Test that the layout-view continues to work after the page is reloaded add_task(function*() { - yield addTab(TEST_URL_ROOT + "doc_layout_iframe1.html"); + yield addTab(URL_ROOT + "doc_layout_iframe1.html"); let {toolbox, inspector, view} = yield openLayoutView(); info("Test that the layout-view works on the first page"); diff --git a/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js b/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js index 716467249bdd..7af38f37d771 100644 --- a/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js +++ b/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js @@ -8,7 +8,7 @@ // change add_task(function*() { - yield addTab(TEST_URL_ROOT + "doc_layout_iframe1.html"); + yield addTab(URL_ROOT + "doc_layout_iframe1.html"); let iframe2 = getNode("iframe").contentDocument.querySelector("iframe"); let {toolbox, inspector, view} = yield openLayoutView(); @@ -19,11 +19,11 @@ addTest("Test that resizing an element in an iframe updates its box model", function*(inspector, view, iframe2) { info("Selecting the nested test node"); let node = iframe2.contentDocument.querySelector("div"); - yield selectNode(node, inspector); + yield selectNodeInIframe2("div", inspector); info("Checking that the layout-view shows the right value"); let sizeElt = view.doc.querySelector(".size > span"); - is(sizeElt.textContent, "400x200"); + is(sizeElt.textContent, "400\u00D7200"); info("Listening for layout-view changes and modifying its size"); let onUpdated = waitForUpdate(inspector); @@ -32,7 +32,7 @@ function*(inspector, view, iframe2) { ok(true, "Layout-view got updated"); info("Checking that the layout-view shows the right value after update"); - is(sizeElt.textContent, "200x200"); + is(sizeElt.textContent, "200\u00D7200"); }); addTest("Test reflows are still sent to the layout-view after deleting an iframe", @@ -43,11 +43,11 @@ function*(inspector, view, iframe2) { info("Selecting the test node in iframe1"); let node = getNode("iframe").contentDocument.querySelector("p"); - yield selectNode(node, inspector); + yield selectNodeInIframe1("p", inspector); info("Checking that the layout-view shows the right value"); let sizeElt = view.doc.querySelector(".size > span"); - is(sizeElt.textContent, "100x100"); + is(sizeElt.textContent, "100\u00D7100"); info("Listening for layout-view changes and modifying its size"); let onUpdated = waitForUpdate(inspector); @@ -56,5 +56,18 @@ function*(inspector, view, iframe2) { ok(true, "Layout-view got updated"); info("Checking that the layout-view shows the right value after update"); - is(sizeElt.textContent, "200x100"); + is(sizeElt.textContent, "200\u00D7100"); }); + +function* selectNodeInIframe1(selector, inspector) { + let iframe1 = yield getNodeFront("iframe", inspector); + let node = yield getNodeFrontInFrame(selector, iframe1, inspector); + yield selectNode(node, inspector); +} + +function* selectNodeInIframe2(selector, inspector) { + let iframe1 = yield getNodeFront("iframe", inspector); + let iframe2 = yield getNodeFrontInFrame("iframe", iframe1, inspector); + let node = yield getNodeFrontInFrame(selector, iframe2, inspector); + yield selectNode(node, inspector); +} diff --git a/devtools/client/inspector/layout/test/doc_layout_iframe1.html b/devtools/client/inspector/layout/test/doc_layout_iframe1.html index 5d1bbc3df873..2d188c106d65 100644 --- a/devtools/client/inspector/layout/test/doc_layout_iframe1.html +++ b/devtools/client/inspector/layout/test/doc_layout_iframe1.html @@ -1,3 +1,3 @@

Root page

- \ No newline at end of file + diff --git a/devtools/client/inspector/layout/test/doc_layout_iframe2.html b/devtools/client/inspector/layout/test/doc_layout_iframe2.html index b651f6f1e231..1f1b0463c3d4 100644 --- a/devtools/client/inspector/layout/test/doc_layout_iframe2.html +++ b/devtools/client/inspector/layout/test/doc_layout_iframe2.html @@ -1,3 +1,3 @@

iframe 1

- \ No newline at end of file + diff --git a/devtools/client/inspector/layout/test/head.js b/devtools/client/inspector/layout/test/head.js index 7aa74879cd53..57326d52944d 100644 --- a/devtools/client/inspector/layout/test/head.js +++ b/devtools/client/inspector/layout/test/head.js @@ -1,81 +1,23 @@ /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ /* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ - "use strict"; -var Cu = Components.utils; -var {gDevTools} = Cu.import("resource://devtools/client/framework/gDevTools.jsm", {}); -var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {}); -var {console} = Cu.import("resource://gre/modules/Console.jsm", {}); -var {TargetFactory} = require("devtools/client/framework/target"); -var promise = require("promise"); -var DevToolsUtils = require("devtools/shared/DevToolsUtils"); +// Import the inspector's head.js first (which itself imports shared-head.js). +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js", + this); -// All test are asynchronous -waitForExplicitFinish(); - -const TEST_URL_ROOT = - "http://example.com/browser/devtools/client/inspector/layout/test/"; - -// Uncomment this pref to dump all devtools emitted events to the console. -// Services.prefs.setBoolPref("devtools.dump.emit", true); - -// Services.prefs.setBoolPref("devtools.debugger.log", true); - -// Set the testing flag on DevToolsUtils and reset it when the test ends -DevToolsUtils.testing = true; -registerCleanupFunction(() => DevToolsUtils.testing = false); - -// Clean-up all prefs that might have been changed during a test run -// (safer here because if the test fails, then the pref is never reverted) Services.prefs.setIntPref("devtools.toolbox.footer.height", 350); registerCleanupFunction(() => { - Services.prefs.clearUserPref("devtools.dump.emit"); - Services.prefs.clearUserPref("devtools.debugger.log"); Services.prefs.clearUserPref("devtools.toolbox.footer.height"); - Services.prefs.setCharPref("devtools.inspector.activeSidebar", "ruleview"); }); -registerCleanupFunction(function*() { - let target = TargetFactory.forTab(gBrowser.selectedTab); - yield gDevTools.closeToolbox(target); - - // Move the mouse outside inspector. If the test happened fake a mouse event - // somewhere over inspector the pointer is considered to be there when the - // next test begins. This might cause unexpected events to be emitted when - // another test moves the mouse. - EventUtils.synthesizeMouseAtPoint(1, 1, {type: "mousemove"}, window); - - while (gBrowser.tabs.length > 1) { - gBrowser.removeCurrentTab(); - } -}); - -/** - * Add a new test tab in the browser and load the given url. - * @param {String} url The url to be loaded in the new tab - * @return a promise that resolves to the tab object when the url is loaded - */ -function addTab(url) { - let def = promise.defer(); - - let tab = gBrowser.selectedTab = gBrowser.addTab(); - gBrowser.selectedBrowser.addEventListener("load", function onload() { - gBrowser.selectedBrowser.removeEventListener("load", onload, true); - info("URL " + url + " loading complete into new test tab"); - waitForFocus(() => { - def.resolve(tab); - }, content); - }, true); - content.location = url; - - return def.promise; -} - /** * Simple DOM node accesor function that takes either a node or a string css * selector as argument and returns the corresponding node + * FIXME: Delete this function and use inspector/test/head.js' getNode instead, + * and fix all layout-view tests to use nodeFronts instead of CPOWs. * @param {String|DOMNode} nodeOrSelector * @return {DOMNode} */ @@ -103,92 +45,6 @@ function selectAndHighlightNode(nodeOrSelector, inspector) { return updated; } -/** - * Set the inspector's current selection to a node or to the first match of the - * given css selector. - * @param {String|DOMNode} nodeOrSelector - * @param {InspectorPanel} inspector - * The instance of InspectorPanel currently loaded in the toolbox - * @param {String} reason - * Defaults to "test" which instructs the inspector not to highlight the - * node upon selection - * @return a promise that resolves when the inspector is updated with the new - * node - */ -function selectNode(nodeOrSelector, inspector, reason = "test") { - info("Selecting the node " + nodeOrSelector); - - let node = getNode(nodeOrSelector); - let updated = inspector.once("inspector-updated"); - inspector.selection.setNode(node, reason); - return updated; -} - -/** - * Open the toolbox, with the inspector tool visible. - * @return a promise that resolves when the inspector is ready - */ -var openInspector = Task.async(function*() { - info("Opening the inspector"); - let target = TargetFactory.forTab(gBrowser.selectedTab); - - let inspector, toolbox; - - // The actual highligher show/hide methods are mocked in layoutview tests. - // The highlighter is tested in devtools/inspector/test. - function mockHighlighter({highlighter}) { - highlighter.showBoxModel = function(nodeFront, options) { - return promise.resolve(); - }; - highlighter.hideBoxModel = function() { - return promise.resolve(); - }; - } - - // Checking if the toolbox and the inspector are already loaded - // The inspector-updated event should only be waited for if the inspector - // isn't loaded yet - toolbox = gDevTools.getToolbox(target); - if (toolbox) { - inspector = toolbox.getPanel("inspector"); - if (inspector) { - info("Toolbox and inspector already open"); - mockHighlighter(toolbox); - return { - toolbox: toolbox, - inspector: inspector - }; - } - } - - info("Opening the toolbox"); - toolbox = yield gDevTools.showToolbox(target, "inspector"); - yield waitForToolboxFrameFocus(toolbox); - inspector = toolbox.getPanel("inspector"); - - info("Waiting for the inspector to update"); - yield inspector.once("inspector-updated"); - - mockHighlighter(toolbox); - return { - toolbox: toolbox, - inspector: inspector - }; -}); - -/** - * Wait for the toolbox frame to receive focus after it loads - * @param {Toolbox} toolbox - * @return a promise that resolves when focus has been received - */ -function waitForToolboxFrameFocus(toolbox) { - info("Making sure that the toolbox's frame is focused"); - let def = promise.defer(); - let win = toolbox.frame.contentWindow; - waitForFocus(def.resolve, win); - return def.promise; -} - /** * Checks whether the inspector's sidebar corresponding to the given id already * exists @@ -209,6 +65,18 @@ function hasSideBarTab(inspector, id) { var openLayoutView = Task.async(function*() { let {toolbox, inspector} = yield openInspector(); + // The actual highligher show/hide methods are mocked in layoutview tests. + // The highlighter is tested in devtools/inspector/test. + function mockHighlighter({highlighter}) { + highlighter.showBoxModel = function(nodeFront, options) { + return promise.resolve(); + }; + highlighter.hideBoxModel = function() { + return promise.resolve(); + }; + } + mockHighlighter(toolbox); + if (!hasSideBarTab(inspector, "layoutview")) { info("Waiting for the layoutview sidebar to be ready"); yield inspector.sidebar.once("layoutview-ready"); diff --git a/devtools/client/inspector/test/head.js b/devtools/client/inspector/test/head.js index c773fdf04054..ad5bd321fb86 100644 --- a/devtools/client/inspector/test/head.js +++ b/devtools/client/inspector/test/head.js @@ -6,7 +6,8 @@ // Load the shared-head file first. Services.scriptloader.loadSubScript( - "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", this); + "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", + this); // Services.prefs.setBoolPref("devtools.debugger.log", true); // SimpleTest.registerCleanupFunction(() => { @@ -19,13 +20,14 @@ Services.scriptloader.loadSubScript( var ROOT_TEST_DIR = getRootDirectory(gTestPath); // Import the GCLI test helper -var testDir = gTestPath.substr(0, gTestPath.lastIndexOf("/")); Services.scriptloader.loadSubScript( - testDir + "../../../commandline/test/helpers.js", this); + "chrome://mochitests/content/browser/devtools/client/commandline/test/helpers.js", + this); // Import helpers registering the test-actor in remote targets Services.scriptloader.loadSubScript( - testDir + "../../../shared/test/test-actor-registry.js", this); + "chrome://mochitests/content/browser/devtools/client/shared/test/test-actor-registry.js", + this); DevToolsUtils.testing = true; registerCleanupFunction(() => {