mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1163183 - Show HTML5 Forms pseudo elements in the rule view. r=bgrins

This commit is contained in:
Jennifer Fong 2015-06-05 14:48:00 -04:00
Родитель b86517adca
Коммит f1c41ff68f
4 изменённых файлов: 150 добавлений и 76 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

144
browser/devtools/styleinspector/test/browser_ruleview_user-agent-styles.js
Просмотреть файл

@ -9,12 +9,73 @@
let PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
const { PrefObserver } = devtools.require("devtools/styleeditor/utils");
const TEST_URI = "data:text/html;charset=utf-8," +
"<blockquote type=cite>" +
" <pre _moz_quote=true>" +
" inspect <a href='foo' style='color:orange'>user agent</a> styles" +
" </pre>" +
"</blockquote>";
const TEST_DOC = '<html> \
<head> \
<style> \
pre a { \
color: orange; \
} \
</style> \
</head> \
<body> \
<input type=text placeholder=test></input> \
<input type=color></input> \
<input type=range></input> \
<input type=number></input> \
<progress></progress> \
<blockquote type=cite> \
<pre _moz_quote=true> \
inspect <a href="foo">user agent</a> styles \
</pre> \
</blockquote> \
</body> \
</html>';
const TEST_URI = "data:text/html;charset=utf-8," + encodeURIComponent(TEST_DOC);
const TEST_DATA = [
{
selector: "blockquote",
numUserRules: 1,
numUARules: 0
},
{
selector: "pre",
numUserRules: 1,
numUARules: 0
},
{
selector: "input[type=range]",
numUserRules: 1,
numUARules: 0
},
{
selector: "input[type=number]",
numUserRules: 1,
numUARules: 0
},
{
selector: "input[type=color]",
numUserRules: 1,
numUARules: 0
},
{
selector: "input[type=text]",
numUserRules: 1,
numUARules: 0
},
{
selector: "progress",
numUserRules: 1,
numUARules: 0
},
{
selector: "a",
numUserRules: 2,
numUARules: 0
}
];
add_task(function*() {
info ("Starting the test with the pref set to true before toolbox is opened");
@ -55,66 +116,45 @@ function* setUserAgentStylesPref(val) {
function* userAgentStylesVisible(inspector, view) {
info ("Making sure that user agent styles are currently visible");
yield selectNode("blockquote", inspector);
yield compareAppliedStylesWithUI(inspector, view, "ua");
let userRules;
let uaRules;
let userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
let uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
ok (uaRules.length > 0, "Has UA rules");
for (let data of TEST_DATA) {
yield selectNode(data.selector, inspector);
yield compareAppliedStylesWithUI(inspector, view, "ua");
yield selectNode("pre", inspector);
yield compareAppliedStylesWithUI(inspector, view, "ua");
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, data.numUserRules, "Correct number of user rules");
ok (uaRules.length > data.numUARules, "Has UA rules");
}
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
ok (uaRules.length > 0, "Has UA rules");
yield selectNode("a", inspector);
yield compareAppliedStylesWithUI(inspector, view, "ua");
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
ok (userRules.some(rule=> rule.matchedSelectors.length === 0),
ok (userRules.some(rule=> rule.matchedSelectors.length === 1),
"There is an inline style for element in user styles");
ok (uaRules.some(rule=> rule.matchedSelectors.indexOf(":-moz-any-link")),
"There is a rule for :-moz-any-link");
ok (uaRules.some(rule=> rule.matchedSelectors.indexOf("*|*:link")),
"There is a rule for *|*:link");
ok (!uaRules.some(rule=> rule.matchedSelectors.length === 0),
"No inline styles for ua styles");
ok (uaRules.some(rule=> rule.matchedSelectors.length === 1),
"Inline styles for ua styles");
}
function* userAgentStylesNotVisible(inspector, view) {
info ("Making sure that user agent styles are not currently visible");
yield selectNode("blockquote", inspector);
yield compareAppliedStylesWithUI(inspector, view);
let userRules;
let uaRules;
let userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
let uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
is (uaRules.length, 0, "No UA rules");
for (let data of TEST_DATA) {
yield selectNode(data.selector, inspector);
yield compareAppliedStylesWithUI(inspector, view);
yield selectNode("pre", inspector);
yield compareAppliedStylesWithUI(inspector, view);
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
is (uaRules.length, 0, "No UA rules");
yield selectNode("a", inspector);
yield compareAppliedStylesWithUI(inspector, view);
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, 1, "Correct number of user rules");
is (uaRules.length, 0, "No UA rules");
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is (userRules.length, data.numUserRules, "Correct number of user rules");
is (uaRules.length, data.numUARules, "No UA rules");
}
}
function* compareAppliedStylesWithUI(inspector, view, filter) {
@ -129,6 +169,10 @@ function* compareAppliedStylesWithUI(inspector, view, filter) {
let elementStyle = view._elementStyle;
is(elementStyle.rules.length, entries.length, "Should have correct number of rules (" + entries.length + ")");
entries = entries.sort((a, b) => {
return (a.pseudoElement || "z") > (b.pseudoElement || "z");
});
entries.forEach((entry, i) => {
let elementStyleRule = elementStyle.rules[i];
is (elementStyleRule.inherited, entry.inherited, "Same inherited (" +entry.inherited+ ")" );

34
toolkit/devtools/server/actors/styles.js
Просмотреть файл

@ -13,7 +13,7 @@ const events = require("sdk/event/core");
const object = require("sdk/util/object");
const {Class} = require("sdk/core/heritage");
const {LongStringActor} = require("devtools/server/actors/string");
const {PSEUDO_ELEMENT_SET} = require("devtools/styleinspector/css-logic");
// This will add the "stylesheet" actor type for protocol.js to recognize
require("devtools/server/actors/stylesheets");
@ -27,7 +27,18 @@ loader.lazyGetter(this, "DOMUtils", () => Cc["@mozilla.org/inspector/dom-utils;1
const ELEMENT_STYLE = 100;
exports.ELEMENT_STYLE = ELEMENT_STYLE;
const PSEUDO_ELEMENTS = [":first-line", ":first-letter", ":before", ":after", ":-moz-selection"];
// Not included since these are uneditable by the user.
// See https://hg.mozilla.org/mozilla-central/file/696a4ad5d011/layout/style/nsCSSPseudoElementList.h#l74
PSEUDO_ELEMENT_SET.delete(":-moz-meter-bar");
PSEUDO_ELEMENT_SET.delete(":-moz-list-bullet");
PSEUDO_ELEMENT_SET.delete(":-moz-list-number");
PSEUDO_ELEMENT_SET.delete(":-moz-focus-inner");
PSEUDO_ELEMENT_SET.delete(":-moz-focus-outer");
PSEUDO_ELEMENT_SET.delete(":-moz-math-anonymous");
PSEUDO_ELEMENT_SET.delete(":-moz-math-stretchy");
const PSEUDO_ELEMENTS = Array.from(PSEUDO_ELEMENT_SET);
exports.PSEUDO_ELEMENTS = PSEUDO_ELEMENTS;
// When gathering rules to read for pseudo elements, we will skip
@ -494,7 +505,7 @@ var PageStyleActor = protocol.ActorClass({
* 'ua': Include properties from user and user-agent sheets.
* Default value is 'ua'
* `inherited`: Include styles inherited from parent nodes.
* `matchedSeletors`: Include an array of specific selectors that
* `matchedSelectors`: Include an array of specific selectors that
* caused this rule to match its node.
*/
getApplied: method(function(node, options) {
@ -548,19 +559,22 @@ var PageStyleActor = protocol.ActorClass({
let showElementStyles = !inherited && !pseudo;
let showInheritedStyles = inherited && this._hasInheritedProps(bindingElement.style);
let rule = {
rule: elementStyle,
pseudoElement: null,
isSystem: false,
inherited: false
};
// First any inline styles
if (showElementStyles) {
rules.push({
rule: elementStyle,
});
rules.push(rule);
}
// Now any inherited styles
if (showInheritedStyles) {
rules.push({
rule: elementStyle,
inherited: inherited
});
rule.inherited = inherited;
rules.push(rule);
}
// Add normal rules. Typically this is passing in the node passed into the

2
toolkit/devtools/server/tests/mochitest/test_styles-applied.html
Просмотреть файл

@ -88,7 +88,7 @@ addTest(function inheritedSystemStyles() {
ok(!applied[1].rule.parentStyleSheet.system, "Entry 1 should be a system style");
is(applied[1].rule.type, 1, "Entry 1 should be a rule style");
is(applied.length, 7, "Should have 7 rules.");
is(applied.length, 8, "Should have 8 rules.");
}).then(runNextTest));
});

46
toolkit/devtools/styleinspector/css-logic.js
Просмотреть файл

@ -42,6 +42,36 @@ const { Cc, Ci, Cu } = require("chrome");
const Services = require("Services");
const DevToolsUtils = require("devtools/toolkit/DevToolsUtils");
let pseudos = new Set([
":after",
":before",
":first-letter",
":first-line",
":selection",
":-moz-color-swatch",
":-moz-focus-inner",
":-moz-focus-outer",
":-moz-list-bullet",
":-moz-list-number",
":-moz-math-anonymous",
":-moz-math-stretchy",
":-moz-meter-bar",
":-moz-number-spin-box",
":-moz-number-spin-down",
":-moz-number-spin-up",
":-moz-number-text",
":-moz-number-wrapper",
":-moz-placeholder",
":-moz-progress-bar",
":-moz-range-progress",
":-moz-range-thumb",
":-moz-range-track",
":-moz-selection"
]);
const PSEUDO_ELEMENT_SET = pseudos;
exports.PSEUDO_ELEMENT_SET = PSEUDO_ELEMENT_SET;
// This should be ok because none of the functions that use this should be used
// on the worker thread, where Cu is not available.
if (Cu) {
@ -1655,21 +1685,7 @@ CssSelector.prototype = {
get pseudoElements()
{
if (!CssSelector._pseudoElements) {
let pseudos = CssSelector._pseudoElements = new Set();
pseudos.add("after");
pseudos.add("before");
pseudos.add("first-letter");
pseudos.add("first-line");
pseudos.add("selection");
pseudos.add("-moz-color-swatch");
pseudos.add("-moz-focus-inner");
pseudos.add("-moz-focus-outer");
pseudos.add("-moz-list-bullet");
pseudos.add("-moz-list-number");
pseudos.add("-moz-math-anonymous");
pseudos.add("-moz-math-stretchy");
pseudos.add("-moz-progress-bar");
pseudos.add("-moz-selection");
CssSelector._pseudoElements = PSEUDO_ELEMENT_SET;
}
return CssSelector._pseudoElements;
},