1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that only minified sheets are automatically prettified,
// and that the pretty print button behaves as expected.
const TESTCASE_URI = TEST_BASE_HTTP + "minified.html";
const PRETTIFIED_CSS_TEXT = `
body {
background:white;
}
div {
font-size:4em;
color:red
}
span {
color:green;
@media screen {
background: blue;
&>.myClass {
padding: 1em
}
}
}
`.trimStart();
const INLINE_STYLESHEET_ORIGINAL_CSS_TEXT = `
body { background: red; }
div {
font-size: 5em;
color: red;
}`.trimStart();
const INLINE_STYLESHEET_PRETTIFIED_CSS_TEXT = `
body {
background: red;
}
div {
font-size: 5em;
color: red;
}
`.trimStart();
add_task(async function () {
// Use 2 spaces for indent
await pushPref("devtools.editor.expandtab", true);
await pushPref("devtools.editor.tabsize", 2);
const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
is(ui.editors.length, 3, "Three sheets present.");
info("Testing minified style sheet.");
const minifiedEditor = await ui.editors[0].getSourceEditor();
is(
minifiedEditor.sourceEditor.getText(),
PRETTIFIED_CSS_TEXT,
"minified source has been prettified automatically"
);
info("Selecting second, non-minified style sheet.");
await ui.selectStyleSheet(ui.editors[1].styleSheet);
const inlineEditor = ui.editors[1];
is(
inlineEditor.sourceEditor.getText(),
INLINE_STYLESHEET_ORIGINAL_CSS_TEXT,
"non-minified source has been left untouched"
);
const prettyPrintButton = panel.panelWindow.document.querySelector(
".style-editor-prettyPrintButton"
);
ok(prettyPrintButton, "Pretty print button is displayed");
ok(
!prettyPrintButton.hasAttribute("disabled"),
"Pretty print button is enabled"
);
is(
prettyPrintButton.getAttribute("title"),
"Pretty print style sheet",
"Pretty print button has the expected title attribute"
);
const onEditorChange = inlineEditor.sourceEditor.once("changes");
EventUtils.synthesizeMouseAtCenter(prettyPrintButton, {}, panel.panelWindow);
await onEditorChange;
is(
inlineEditor.sourceEditor.getText(),
INLINE_STYLESHEET_PRETTIFIED_CSS_TEXT,
"inline stylesheet was prettified as expected when clicking on pretty print button"
);
info("Selecting original style sheet.");
await ui.selectStyleSheet(ui.editors[2].styleSheet);
ok(
prettyPrintButton.hasAttribute("disabled"),
"Pretty print button is disabled when selecting an original file"
);
await waitFor(
() =>
prettyPrintButton.getAttribute("title") ===
"Can only pretty print CSS files"
);
ok(
true,
"Pretty print button has the expected title attribute when it's disabled"
);
});
|
