--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel.js
@@ -25,17 +25,17 @@ add_task(function*() {
yield runTests(inspector, view);
});
addTest("Test that editing margin dynamically updates the document, pressing escape cancels the changes",
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
@@ -51,17 +51,17 @@ function*(inspector, view) {
is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
is(span.textContent, 5, "Should have the right value in the box model.");
});
addTest("Test that arrow keys work correctly and pressing enter commits the changes",
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "10px", "Should have the right value in the editor.");
@@ -88,17 +88,17 @@ function*(inspector, view) {
is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
is(span.textContent, 20, "Should have the right value in the box model.");
});
addTest("Test that deleting the value removes the property but escape undoes that",
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "20px", "Should have the right value in the editor.");
@@ -118,17 +118,17 @@ function*(inspector, view) {
addTest("Test that deleting the value removes the property",
function*(inspector, view) {
let node = content.document.getElementById("div1");
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "15px", "Should have the right value in the editor.");
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
@@ -27,17 +27,17 @@ add_task(function*() {
addTest("When all properties are set on the node editing one should work",
function*(inspector, view) {
let node = content.document.getElementById("div1");
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
@@ -56,17 +56,17 @@ function*(inspector, view) {
addTest("When all properties are set on the node editing one should work",
function*(inspector, view) {
let node = content.document.getElementById("div1");
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
@@ -85,17 +85,17 @@ function*(inspector, view) {
});
addTest("When all properties are set on the node deleting one should work",
function*(inspector, view) {
let node = content.document.getElementById("div1");
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
@@ -114,17 +114,17 @@ function*(inspector, view) {
addTest("When all properties are set on the node deleting one then cancelling should work",
function*(inspector, view) {
let node = content.document.getElementById("div1");
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "5px", "Should have the right value in the editor.");
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
@@ -20,17 +20,17 @@ function getStyle(node, property) {
add_task(function*() {
yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
let {toolbox, inspector, view} = yield openLayoutView();
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "0", "Should have the right value in the editor.");
--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
@@ -25,17 +25,17 @@ add_task(function*() {
yield runTests(inspector, view);
});
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "3px", "Should have the right value in the editor.");
@@ -58,17 +58,17 @@ function*(inspector, view) {
is(getStyle(node, "padding-top"), "1em", "Should be the right padding.")
is(span.textContent, 16, "Should have the right value in the box model.");
});
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "1em", "Should have the right value in the editor.");
@@ -84,17 +84,17 @@ function*(inspector, view) {
is(getStyle(node, "border-bottom-width"), "0px", "Should be the right border-bottom-width.")
is(span.textContent, 0, "Should have the right value in the box model.");
});
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.");
EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
let editor = view.doc.querySelector(".styleinspector-propertyeditor");
ok(editor, "Should have opened the editor.");
is(editor.value, "2em", "Should have the right value in the editor.");
--- a/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
@@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the layout-view continues to work after a page navigation and that
// 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);
});
addTest("Test that the layout-view works on the first page",
function*(inspector, view) {
info("Selecting the test node");
yield selectNode("p", inspector);
@@ -29,17 +29,17 @@ function*(inspector, view) {
ok(true, "Layout-view got updated");
info("Checking that the layout-view shows the right value after update");
is(paddingElt.textContent, "20");
});
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");
});
addTest("Test that the layout-view works on the second page",
function*(inspector, view) {
info("Selecting the test node");
yield selectNode("p", inspector);
--- a/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
@@ -2,17 +2,17 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// 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");
yield assertLayoutView(inspector, view);
info("Reload the page");
content.location.reload();
yield inspector.once("markuploaded");
--- a/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
@@ -3,28 +3,28 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the layout-view for elements within iframes also updates when they
// 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();
yield runTests(inspector, view, iframe2);
});
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");
info("Listening for layout-view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
node.style.width = "200px";
@@ -38,23 +38,30 @@ function*(inspector, view, iframe2) {
addTest("Test reflows are still sent to the layout-view after deleting an iframe",
function*(inspector, view, iframe2) {
info("Deleting the iframe2");
iframe2.remove();
yield inspector.once("inspector-updated");
info("Selecting the test node in iframe1");
let node = getNode("iframe").contentDocument.querySelector("p");
- yield selectNode(node, inspector);
+ yield selectNodeInIframe2("p", inspector);
info("Checking that the layout-view shows the right value");
let sizeElt = view.doc.querySelector(".size > span");
is(sizeElt.textContent, "100x100");
info("Listening for layout-view changes and modifying its size");
let onUpdated = waitForUpdate(inspector);
node.style.width = "200px";
yield onUpdated;
ok(true, "Layout-view got updated");
info("Checking that the layout-view shows the right value after update");
is(sizeElt.textContent, "200x100");
});
+
+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);
+}
--- a/devtools/client/inspector/layout/test/head.js
+++ b/devtools/client/inspector/layout/test/head.js
@@ -1,86 +1,28 @@
/* 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");
-
-// All test are asynchronous
-waitForExplicitFinish();
+// 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);
-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}
*/
function getNode(nodeOrSelector) {
return typeof nodeOrSelector === "string" ?
content.document.querySelector(nodeOrSelector) :
nodeOrSelector;
}
@@ -99,102 +41,16 @@ function selectAndHighlightNode(nodeOrSe
let node = getNode(nodeOrSelector);
let updated = inspector.toolbox.once("highlighter-ready");
inspector.selection.setNode(node, "test-highlight");
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
* @param {InspectorPanel}
* @param {String}
* @return {Boolean}
*/
function hasSideBarTab(inspector, id) {
return !!inspector.sidebar.getWindowForTab(id);
@@ -204,16 +60,28 @@ function hasSideBarTab(inspector, id) {
* Open the toolbox, with the inspector tool visible, and the layout-view
* sidebar tab selected.
* @return a promise that resolves when the inspector is ready and the layout
* view is visible and ready
*/
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");
}
info("Selecting the layoutview sidebar");
inspector.sidebar.select("layoutview");
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -1,36 +1,38 @@
/* vim: set ts=2 et sw=2 tw=80: */
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
// 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(() => {
// Services.prefs.clearUserPref("devtools.debugger.log");
// });
// Uncomment this pref to dump all devtools emitted events to the console.
// Services.prefs.setBoolPref("devtools.dump.emit", true);
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(() => {
DevToolsUtils.testing = false;
});
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.dump.emit");