--- a/devtools/client/inspector/computed/test/head.js
+++ b/devtools/client/inspector/computed/test/head.js
@@ -8,32 +8,16 @@ Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
this);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.defaultColorUnit");
});
/**
- * Open the toolbox, with the inspector tool visible, and the computed-view
- * sidebar tab selected.
- * @return a promise that resolves when the inspector is ready and the computed
- * view is visible and ready
- */
-function openComputedView() {
- return openInspectorSidebarTab("computedview").then(({toolbox, inspector}) => {
- return {
- toolbox,
- inspector,
- view: inspector.computedview.view
- };
- });
-}
-
-/**
* Dispatch the copy event on the given element
*/
function fireCopyEvent(element) {
let evt = element.ownerDocument.createEvent("Event");
evt.initEvent("copy", true, true);
element.dispatchEvent(evt);
}
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -37,34 +37,16 @@ addTab = function(url) {
info("Loading the helper frame script " + FRAME_SCRIPT_URL);
let browser = tab.linkedBrowser;
browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
return tab;
});
};
/**
- * Open the toolbox, with the inspector tool visible, and the rule-view
- * sidebar tab selected.
- *
- * @return a promise that resolves when the inspector is ready and the rule
- * view is visible and ready
- */
-function openRuleView() {
- return openInspectorSidebarTab("ruleview").then(data => {
- return {
- toolbox: data.toolbox,
- inspector: data.inspector,
- testActor: data.testActor,
- view: data.inspector.ruleview.view
- };
- });
-}
-
-/**
* Wait for a content -> chrome message on the message manager (the window
* messagemanager is used).
*
* @param {String} name
* The message name
* @return {Promise} A promise that resolves to the response data when the
* message has been received
*/
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_01.js
@@ -6,41 +6,30 @@
// Test "Copy color" item of the context menu #1: Test _isColorPopup.
const TEST_URI = `
<div style="color: #123ABC; margin: 0px; background: span[data-color];">
Test "Copy color" context menu option
</div>
`;
-const TEST_CASES = [
- {
- viewName: "RuleView",
- initializer: openRuleView
- },
- {
- viewName: "ComputedView",
- initializer: openComputedView
- }
-];
-
add_task(function* () {
// Test is slow on Linux EC2 instances - Bug 1137765
requestLongerTimeout(2);
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-
- for (let test of TEST_CASES) {
- yield testView(test);
- }
+ let {inspector} = yield openInspector();
+ yield testView("ruleview", inspector);
+ yield testView("computedview", inspector);
});
-function* testView({viewName, initializer}) {
- info("Testing " + viewName);
+function* testView(viewId, inspector) {
+ info("Testing " + viewId);
- let {inspector, view} = yield initializer();
+ yield inspector.sidebar.select(viewId);
+ let view = inspector[viewId].view;
yield selectNode("div", inspector);
testIsColorValueNode(view);
testIsColorPopupOnAllNodes(view);
yield clearCurrentNodeSelection(inspector);
}
/**
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-color_02.js
@@ -14,16 +14,17 @@ const TEST_URI = `
</style>
<div>Testing the color picker tooltip!</div>
`;
add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
+
yield testCopyToClipboard(inspector, view);
yield testManualEdit(inspector, view);
yield testColorPickerEdit(inspector, view);
});
function* testCopyToClipboard(inspector, view) {
info("Testing that color is copied to clipboard");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
@@ -34,34 +34,34 @@ add_task(function*() {
yield addTab("data:text/html;charset=utf8," + encodeURIComponent(PAGE_CONTENT));
yield startTest();
});
function* startTest() {
info("Opening rule view");
- let ruleViewData = yield openRuleView();
+ let {inspector, view} = yield openRuleView();
info("Test valid background image URL in rule view");
- yield testCopyUrlToClipboard(ruleViewData, "data-uri", ".valid-background", TEST_DATA_URI);
- yield testCopyUrlToClipboard(ruleViewData, "url", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
info("Test invalid background image URL in rue view");
- yield testCopyUrlToClipboard(ruleViewData, "data-uri", ".invalid-background", ERROR_MESSAGE);
- yield testCopyUrlToClipboard(ruleViewData, "url", ".invalid-background", INVALID_IMAGE_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
+ yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
info("Opening computed view");
- let computedViewData = yield openComputedView();
+ view = selectComputedView(inspector);
info("Test valid background image URL in computed view");
- yield testCopyUrlToClipboard(computedViewData, "data-uri", ".valid-background", TEST_DATA_URI);
- yield testCopyUrlToClipboard(computedViewData, "url", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
info("Test invalid background image URL in computed view");
- yield testCopyUrlToClipboard(computedViewData, "data-uri", ".invalid-background", ERROR_MESSAGE);
- yield testCopyUrlToClipboard(computedViewData, "url", ".invalid-background", INVALID_IMAGE_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
+ yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
}
function* testCopyUrlToClipboard({view, inspector}, type, selector, expected) {
info("Select node in inspector panel");
yield selectNode(selector, inspector);
info("Retrieve background-image link for selected node in current styleinspector view");
let property = getBackgroundImageProperty(view, selector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
@@ -22,36 +22,36 @@ const XUL_PRINCIPAL = ssm.createCodebase
add_task(function*() {
requestLongerTimeout(2);
info("Checking stylesheets on HTML document");
yield addTab(TEST_URI_HTML);
let target = getNode("#target");
- let {inspector} = yield openRuleView();
+ let {inspector} = yield openInspector();
yield selectNode("#target", inspector);
info("Checking stylesheets");
yield checkSheets(target);
info("Checking authored stylesheets");
yield addTab(TEST_URI_AUTHOR);
- ({inspector} = yield openRuleView());
+ ({inspector} = yield openInspector());
target = getNode("#target");
yield selectNode("#target", inspector);
yield checkSheets(target);
info("Checking stylesheets on XUL document");
info("Allowing XUL content");
allowXUL();
yield addTab(TEST_URI_XUL);
- ({inspector} = yield openRuleView());
+ ({inspector} = yield openInspector());
target = getNode("#target");
yield selectNode("#target", inspector);
yield checkSheets(target);
info("Disallowing XUL content");
disallowXUL();
});
--- a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -9,28 +9,29 @@
const TEST_URI = `
<div id="one" style="color:red;">one</div>
<div id="two" style="color:blue;">two</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
+
yield selectNode("#one", inspector);
is(getRuleViewPropertyValue(view, "element", "color"), "red",
"The rule-view shows the properties for test node one");
let cView = inspector.computedview.view;
let prop = getComputedViewProperty(cView, "color");
ok(!prop, "The computed-view doesn't show the properties for test node one");
info("Switching to the computed-view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
- yield openComputedView();
+ selectComputedView(inspector);
yield onComputedViewReady;
ok(getComputedViewPropertyValue(cView, "color"), "#F00",
"The computed-view shows the properties for test node one");
info("Selecting test node two");
yield selectNode("#two", inspector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
@@ -38,17 +38,17 @@ add_task(function*() {
yield testDivRuleView(view);
info("Testing that image preview tooltips show even when there are " +
"fields being edited");
yield testTooltipAppearsEvenInEditMode(view);
info("Switching over to the computed-view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
- ({view} = yield openComputedView());
+ view = selectComputedView(inspector);
yield onComputedViewReady;
info("Testing that the background-image computed style has a tooltip too");
yield testComputedView(view);
});
function* testBodyRuleView(view) {
info("Testing tooltips in the rule view");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -12,17 +12,17 @@ add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode(".one", inspector);
info("Testing rule view tooltip closes on new selection");
yield testRuleView(view, inspector);
info("Testing computed view tooltip closes on new selection");
- ({view} = yield openComputedView());
+ view = selectComputedView(inspector);
yield testComputedView(view, inspector);
});
function* testRuleView(ruleView, inspector) {
info("Showing the tooltip");
let tooltip = ruleView.tooltips.previewTooltip;
tooltip.setTextContent({messages: ["rule-view tooltip"]});
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -20,17 +20,17 @@ const TEST_URI = `
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testElement", inspector);
yield testRuleView(view, inspector.selection.nodeFront);
info("Opening the computed view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
- ({inspector, view} = yield openComputedView());
+ view = selectComputedView(inspector);
yield onComputedViewReady;
yield testComputedView(view, inspector.selection.nodeFront);
yield testExpandedComputedViewProperty(view, inspector.selection.nodeFront);
});
function* testRuleView(ruleView, nodeFront) {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-multiple-background-images.js
@@ -20,35 +20,37 @@ add_task(function* () {
let TEST_STYLE = "h1 {background: url(" + YELLOW_DOT + "), url(" + BLUE_DOT + ");}";
let PAGE_CONTENT = "<style>" + TEST_STYLE + "</style>" +
"<h1>browser_styleinspector_tooltip-multiple-background-images.js</h1>";
yield addTab("data:text/html;charset=utf-8,background image tooltip test");
content.document.body.innerHTML = PAGE_CONTENT;
- yield testRuleViewUrls();
- yield testComputedViewUrls();
+ let {inspector} = yield openInspector();
+ yield testRuleViewUrls(inspector);
+ yield testComputedViewUrls(inspector);
});
-function* testRuleViewUrls() {
+function* testRuleViewUrls(inspector) {
info("Testing tooltips in the rule view");
-
- let {view, inspector} = yield openRuleView();
+ let view = selectRuleView(inspector);
yield selectNode("h1", inspector);
let {valueSpan} = getRuleViewProperty(view, "h1", "background");
yield performChecks(view, valueSpan);
}
-function* testComputedViewUrls() {
+function* testComputedViewUrls(inspector) {
info("Testing tooltips in the computed view");
- let {view, inspector} = yield openComputedView();
- yield inspector.once("computed-view-refreshed");
+ let onComputedViewReady = inspector.once("computed-view-refreshed");
+ let view = selectComputedView(inspector);
+ yield onComputedViewReady;
+
let {valueSpan} = getComputedViewProperty(view, "background-image");
yield performChecks(view, valueSpan);
}
/**
* A helper that checks url() tooltips contain correct images
*/
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -13,16 +13,17 @@ const TEST_URI = `
}
</style>
<div id="testElement">test element</div>
`;
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
+
yield selectNode("#testElement", inspector);
yield testRuleView(view, inspector.selection.nodeFront);
});
function* testRuleView(ruleView, nodeFront) {
info("Testing font-family tooltips in the rule view");
let tooltip = ruleView.tooltips.previewTooltip;
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
@@ -15,29 +15,30 @@ const TEST_URI = `
Test the css transform highlighter
`;
const TYPE = "CssTransformHighlighter";
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
+
let overlay = view.highlighters;
ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
let h = yield overlay._getHighlighter(TYPE);
ok(overlay.highlighters[TYPE],
"The highlighter has been created in the rule-view");
is(h, overlay.highlighters[TYPE], "The right highlighter has been created");
let h2 = yield overlay._getHighlighter(TYPE);
is(h, h2,
"The same instance of highlighter is returned everytime in the rule-view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
- let {view: cView} = yield openComputedView();
+ let cView = selectComputedView(inspector);
yield onComputedViewReady;
overlay = cView.highlighters;
ok(!overlay.highlighters[TYPE], "No highlighter exists in the computed-view");
h = yield overlay._getHighlighter(TYPE);
ok(overlay.highlighters[TYPE],
"The highlighter has been created in the computed-view");
is(h, overlay.highlighters[TYPE], "The right highlighter has been created");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
@@ -33,17 +33,17 @@ add_task(function*() {
info("Faking a mousemove on a transform property");
({valueSpan} = getRuleViewProperty(view, "body", "transform"));
let onHighlighterShown = hs.once("highlighter-shown");
hs._onMouseMove({target: valueSpan});
yield onHighlighterShown;
let onComputedViewReady = inspector.once("computed-view-refreshed");
- let {view: cView} = yield openComputedView();
+ let cView = selectComputedView(inspector);
yield onComputedViewReady;
hs = cView.highlighters;
ok(!hs.highlighters[TYPE], "No highlighter exists in the computed-view (1)");
info("Faking a mousemove on a non-transform property");
({valueSpan} = getComputedViewProperty(cView, "color"));
hs._onMouseMove({target: valueSpan});
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -34,18 +34,19 @@ registerCleanupFunction(() => {
* (the instance of the current toolbox, or inspector panel for instance).
*
* Most of these functions are async too and return promises.
*
* All tests should follow the following pattern:
*
* add_task(function*() {
* yield addTab(TEST_URI);
- * let {toolbox, inspector, view} = yield openComputedView();
- *
+ * let {toolbox, inspector, view} = yield openInspector();
+ * inspector.sidebar.select(viewId);
+ * let view = inspector[viewId].view;
* yield selectNode("#test", inspector);
* yield someAsyncTestFunction(view);
* });
*
* add_task is the way to define the testcase in the test file. It accepts
* a single generator-function argument.
* The generator function should yield any async call.
*
@@ -81,114 +82,16 @@ addTab = function(url) {
info("Loading the helper frame script " + FRAME_SCRIPT_URL);
let browser = tab.linkedBrowser;
browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
return tab;
});
};
/**
- * 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;
-
- // 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");
- 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");
- if (inspector._updateProgress) {
- yield inspector.once("inspector-updated");
- }
-
- 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;
-}
-
-/**
- * Open the toolbox, with the inspector tool visible, and the sidebar that
- * corresponds to the given id selected
- *
- * @return a promise that resolves when the inspector is ready and the sidebar
- * view is visible and ready
- */
-var openInspectorSideBar = Task.async(function*(id) {
- let {toolbox, inspector} = yield openInspector();
-
- info("Selecting the " + id + " sidebar");
- inspector.sidebar.select(id);
-
- return {
- toolbox: toolbox,
- inspector: inspector,
- view: inspector[id].view
- };
-});
-
-/**
- * Open the toolbox, with the inspector tool visible, and the computed-view
- * sidebar tab selected.
- *
- * @return a promise that resolves when the inspector is ready and the computed
- * view is visible and ready
- */
-function openComputedView() {
- return openInspectorSideBar("computedview");
-}
-
-/**
- * Open the toolbox, with the inspector tool visible, and the rule-view
- * sidebar tab selected.
- *
- * @return a promise that resolves when the inspector is ready and the rule
- * view is visible and ready
- */
-function openRuleView() {
- return openInspectorSideBar("ruleview");
-}
-
-/**
* Wait for a content -> chrome message on the message manager (the window
* messagemanager is used).
*
* @param {String} name
* The message name
* @return {Promise} A promise that resolves to the response data when the
* message has been received
*/
--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -219,35 +219,96 @@ var clickOnInspectMenuItem = Task.async(
yield contextClosed;
return getActiveInspector();
});
/**
* Open the toolbox, with the inspector tool visible, and the one of the sidebar
* tabs selected.
- * @param {String} id The ID of the sidebar tab to be opened
- * @param {String} hostType Optional hostType, as defined in Toolbox.HostType
+ *
+ * @param {String} id
+ * The ID of the sidebar tab to be opened
* @return a promise that resolves when the inspector is ready and the tab is
* visible and ready
*/
-var openInspectorSidebarTab = Task.async(function*(id, hostType) {
+var openInspectorSidebarTab = Task.async(function* (id) {
let {toolbox, inspector, testActor} = yield openInspector();
info("Selecting the " + id + " sidebar");
inspector.sidebar.select(id);
return {
toolbox,
inspector,
testActor
};
});
/**
+ * Open the toolbox, with the inspector tool visible, and the rule-view
+ * sidebar tab selected.
+ *
+ * @return a promise that resolves when the inspector is ready and the rule view
+ * is visible and ready
+ */
+function openRuleView() {
+ return openInspectorSidebarTab("ruleview").then(data => {
+ return {
+ toolbox: data.toolbox,
+ inspector: data.inspector,
+ testActor: data.testActor,
+ view: data.inspector.ruleview.view
+ };
+ });
+}
+
+/**
+ * Open the toolbox, with the inspector tool visible, and the computed-view
+ * sidebar tab selected.
+ *
+ * @return a promise that resolves when the inspector is ready and the computed
+ * view is visible and ready
+ */
+function openComputedView() {
+ return openInspectorSidebarTab("computedview").then(data => {
+ return {
+ toolbox: data.toolbox,
+ inspector: data.inspector,
+ testActor: data.testActor,
+ view: data.inspector.computedview.view
+ };
+ });
+}
+
+/**
+ * Select the rule view sidebar tab on an already opened inspector panel.
+ *
+ * @param {InspectorPanel} inspector
+ * The opened inspector panel
+ * @return {CssRuleView} the rule view
+ */
+function selectRuleView(inspector) {
+ inspector.sidebar.select("ruleview");
+ return inspector.ruleview.view;
+}
+
+/**
+ * Select the computed view sidebar tab on an already opened inspector panel.
+ *
+ * @param {InspectorPanel} inspector
+ * The opened inspector panel
+ * @return {CssComputedView} the computed view
+ */
+function selectComputedView(inspector) {
+ inspector.sidebar.select("computedview");
+ return inspector.computedview.view;
+}
+
+/**
* Get the NodeFront for a node that matches a given css selector, via the
* protocol.
* @param {String|NodeFront} selector
* @param {InspectorPanel} inspector The instance of InspectorPanel currently
* loaded in the toolbox
* @return {Promise} Resolves to the NodeFront instance
*/
function getNodeFront(selector, {walker}) {