From 72371f4a725d7152f2bd65497776c0284ecd7641 Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Tue, 16 Feb 2021 16:34:18 +0000 Subject: [PATCH] Bug 1692992 - [devtools] Add a test to assert rule view location links after navigating to a different origin. r=jdescottes. This test highlights the issue reported in Bug 1673829, where the location links in the rule view are incorrect after navigating, when `devtools.testing.enableServerWatcherSupport` is true. At the moment, this test fails when we try to enable the stylesheet resource watcher support (Bug 1685268). Differential Revision: https://phabricator.services.mozilla.com/D105286 --- .../test/browser_rules_style-editor-link.js | 145 ++++++++++-------- 1 file changed, 82 insertions(+), 63 deletions(-) diff --git a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js index 284c2bc5598d..948045911faa 100644 --- a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js +++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js @@ -5,9 +5,9 @@ // Test the links from the rule-view to the styleeditor -const STYLESHEET_DATA_URL_CONTENTS = ["#first {", "color: blue", "}"].join( - "\n" -); +const STYLESHEET_DATA_URL_CONTENTS = `#first { +color: blue +}`; const STYLESHEET_DATA_URL = `data:text/css,${encodeURIComponent( STYLESHEET_DATA_URL_CONTENTS )}`; @@ -15,53 +15,67 @@ const STYLESHEET_DATA_URL = `data:text/css,${encodeURIComponent( const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css"; const EXTERNAL_STYLESHEET_URL = URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME; -const DOCUMENT_URL = - "data:text/html;charset=utf-8," + - encodeURIComponent(` +const DOCUMENT_HTML = encodeURIComponent(` - - Rule view style editor link test -
- - - - - - -

Some header text

-

hi.

-

I am a test-case. This text exists - solely to provide some things to - - highlight and count - style list-items in the box at right. If you are reading this, - you should go do something else instead. Maybe read a book. Or better - yet, write some test-cases for another bit of code. - some text

-

more text

-

even more text

-
- + + Rule view style editor link test + + + + + + +
+

Some header text

+

hi.

+

I am a test-case. This text exists + solely to provide some things to + + highlight and count + style list-items in the box at right. If you are reading this, + you should go do something else instead. Maybe read a book. Or better + yet, write some test-cases for another bit of code. + some text

+

more text

+

even more text

+
+ `); -add_task(async function() { - await addTab(DOCUMENT_URL); - const { toolbox, inspector, view, testActor } = await openRuleView(); - await selectNode("div", inspector); +const DOCUMENT_DATA_URL = "data:text/html;charset=utf-8," + DOCUMENT_HTML; +const EXAMPLE_ORG_DOCUMENT_URL = + "http://example.org/document-builder.sjs?html=" + DOCUMENT_HTML; - testRuleViewLinkLabel(view); +add_task(async function() { + await addTab(DOCUMENT_DATA_URL); + let { toolbox, inspector, view, testActor } = await openRuleView(); + + await testAllStylesheets(inspector, view, toolbox, testActor); + + info("Navigate to the example.org document"); + await navigateTo(EXAMPLE_ORG_DOCUMENT_URL); + testActor = await getTestActor(toolbox); + await testAllStylesheets(inspector, view, toolbox, testActor); +}); + +async function testAllStylesheets(inspector, view, toolbox, testActor) { + await selectNode("div", inspector); + await testRuleViewLinkLabel(view); + await testDisabledStyleEditor(view, toolbox); await testFirstInlineStyleSheet(view, toolbox, testActor); await testSecondInlineStyleSheet(view, toolbox, testActor); await testExternalStyleSheet(view, toolbox, testActor); - await testDisabledStyleEditor(view, toolbox); -}); + + info("Switch back to the inspector panel"); + await toolbox.selectTool("inspector"); +} async function testFirstInlineStyleSheet(view, toolbox, testActor) { info("Testing inline stylesheet"); @@ -75,54 +89,64 @@ async function testFirstInlineStyleSheet(view, toolbox, testActor) { ok(true, "Switched to the style-editor panel in the toolbox"); - await validateStyleEditorSheet(editor, 0, testActor); + await validateStyleEditorSheet(toolbox, editor, 0, testActor); } async function testSecondInlineStyleSheet(view, toolbox, testActor) { info("Testing second inline stylesheet"); - info("Waiting for the stylesheet editor to be selected"); - const panel = toolbox.getCurrentPanel(); - const onSelected = panel.UI.once("editor-selected"); + const styleEditorPanel = toolbox.getCurrentPanel(); + const onEditorSelected = styleEditorPanel.UI.once("editor-selected"); info("Switching back to the inspector panel in the toolbox"); await toolbox.selectTool("inspector"); + const onToolSelected = toolbox.once("styleeditor-selected"); info("Clicking on second inline stylesheet link"); clickLinkByIndex(view, 3); - const editor = await onSelected; + + info("Wait for the stylesheet editor to be selected"); + const editor = await onEditorSelected; + await onToolSelected; is( toolbox.currentToolId, "styleeditor", "The style editor is selected again" ); - await validateStyleEditorSheet(editor, 1, testActor); + await validateStyleEditorSheet(toolbox, editor, 1, testActor); } async function testExternalStyleSheet(view, toolbox, testActor) { info("Testing external stylesheet"); - - info("Waiting for the stylesheet editor to be selected"); - const panel = toolbox.getCurrentPanel(); - const onSelected = panel.UI.once("editor-selected"); + const styleEditorPanel = toolbox.getCurrentPanel(); + const onEditorSelected = styleEditorPanel.UI.once("editor-selected"); info("Switching back to the inspector panel in the toolbox"); await toolbox.selectTool("inspector"); + const onToolSelected = toolbox.once("styleeditor-selected"); info("Clicking on an external stylesheet link"); clickLinkByIndex(view, 1); - const editor = await onSelected; + + info("Wait for the stylesheet editor to be selected"); + const editor = await onEditorSelected; + await onToolSelected; is( toolbox.currentToolId, "styleeditor", "The style editor is selected again" ); - await validateStyleEditorSheet(editor, 2, testActor); + await validateStyleEditorSheet(toolbox, editor, 2, testActor); } -async function validateStyleEditorSheet(editor, expectedSheetIndex, testActor) { +async function validateStyleEditorSheet( + toolbox, + editor, + expectedSheetIndex, + testActor +) { info("validating style editor stylesheet"); is( editor.styleSheet.styleSheetIndex, @@ -153,6 +177,8 @@ async function testDisabledStyleEditor(view, toolbox) { info("Clicking on a link"); testUnselectableRuleViewLink(view, 1); clickLinkByIndex(view, 1); + // Wait for a bit just to make sure the click didn't had an impact + await wait(2000); is(toolbox.currentToolId, "inspector", "The click should have no effect"); @@ -160,18 +186,11 @@ async function testDisabledStyleEditor(view, toolbox) { Services.prefs.setBoolPref("devtools.styleeditor.enabled", true); gDevTools.emit("tool-registered", "styleeditor"); - info("Clicking on a link"); - const onStyleEditorSelected = toolbox.once("styleeditor-selected"); - clickLinkByIndex(view, 1); - await onStyleEditorSelected; - is(toolbox.currentToolId, "styleeditor", "Style Editor should be selected"); - Services.prefs.clearUserPref("devtools.styleeditor.enabled"); } -function testRuleViewLinkLabel(view) { +async function testRuleViewLinkLabel(view) { info("Checking the data URL link label"); - let link = getRuleViewLinkByIndex(view, 1); let labelElem = link.querySelector(".ruleview-rule-source-label"); let value = labelElem.textContent;