зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Nicolas Chevobbe
Родитель
6f03357c88
Коммит
72371f4a72
|
|
@ -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(`
|
||||
<html>
|
||||
<head>
|
||||
<title>Rule view style editor link test</title>
|
||||
<style type="text/css">
|
||||
html { color: #000000; }
|
||||
div { font-variant: small-caps; color: #000000; }
|
||||
.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
|
||||
font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
|
||||
</style>
|
||||
<style>
|
||||
div { font-weight: bold; }
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="${STYLESHEET_DATA_URL}">
|
||||
<link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Some header text</h1>
|
||||
<p id="salutation" style="font-size: 12pt">hi.</p>
|
||||
<p id="body" style="font-size: 12pt">I am a test-case. This text exists
|
||||
solely to provide some things to
|
||||
<span style="color: yellow" class="highlight">
|
||||
highlight</span> and <span style="font-weight: bold">count</span>
|
||||
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.
|
||||
<span style="font-style: italic">some text</span></p>
|
||||
<p id="closing">more text</p>
|
||||
<p>even more text</p>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<title>Rule view style editor link test</title>
|
||||
<style type="text/css">
|
||||
html { color: #000000; }
|
||||
div { font-variant: small-caps; color: #000000; }
|
||||
.nomatches {color: #ff0000;}
|
||||
</style>
|
||||
<style>
|
||||
div { font-weight: bold; }
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="${STYLESHEET_DATA_URL}">
|
||||
<link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="first" style="margin: 10em;font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
|
||||
<h1>Some header text</h1>
|
||||
<p id="salutation" style="font-size: 12pt">hi.</p>
|
||||
<p id="body" style="font-size: 12pt">I am a test-case. This text exists
|
||||
solely to provide some things to
|
||||
<span style="color: yellow" class="highlight">
|
||||
highlight</span> and <span style="font-weight: bold">count</span>
|
||||
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.
|
||||
<span style="font-style: italic">some text</span></p>
|
||||
<p id="closing">more text</p>
|
||||
<p>even more text</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
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;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче