mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Backed out changeset a1778d8e2e38 (bug 1030889) for mochitest-oth orange
This commit is contained in:
Wes Kocher
parent
f2c5ab31cd
commit
5ad2a8b000
@ -302,13 +302,10 @@ ElementStyle.prototype = {
|
||||
*/
|
||||
markOverridden: function(pseudo="") {
|
||||
// Gather all the text properties applied by these rules, ordered
|
||||
// from more- to less-specific. Text properties from keyframes rule are
|
||||
// excluded from being marked as overridden since a number of criteria such
|
||||
// as time, and animation overlay are required to be check in order to
|
||||
// determine if the property is overridden.
|
||||
// from more- to less-specific.
|
||||
let textProps = [];
|
||||
for (let rule of this.rules) {
|
||||
if (rule.pseudoElement == pseudo && !rule.keyframes) {
|
||||
if (rule.pseudoElement == pseudo) {
|
||||
textProps = textProps.concat(rule.textProps.slice(0).reverse());
|
||||
}
|
||||
}
|
||||
@ -422,7 +419,6 @@ function Rule(aElementStyle, aOptions) {
|
||||
|
||||
this.isSystem = aOptions.isSystem;
|
||||
this.inherited = aOptions.inherited || null;
|
||||
this.keyframes = aOptions.keyframes || null;
|
||||
this._modificationDepth = 0;
|
||||
|
||||
if (this.domRule) {
|
||||
@ -470,18 +466,6 @@ Rule.prototype = {
|
||||
return this._inheritedSource;
|
||||
},
|
||||
|
||||
get keyframesName() {
|
||||
if (this._keyframesName) {
|
||||
return this._keyframesName;
|
||||
}
|
||||
this._keyframesName = "";
|
||||
if (this.keyframes) {
|
||||
this._keyframesName =
|
||||
CssLogic._strings.formatStringFromName("rule.keyframe", [this.keyframes.name], 1);
|
||||
}
|
||||
return this._keyframesName;
|
||||
},
|
||||
|
||||
get selectorText() {
|
||||
return this.domRule.selectors ? this.domRule.selectors.join(", ") : CssLogic.l10n("rule.sourceElement");
|
||||
},
|
||||
@ -1643,6 +1627,25 @@ CssRuleView.prototype = {
|
||||
return this._pseudoElementLabel;
|
||||
},
|
||||
|
||||
togglePseudoElementVisibility: function(value) {
|
||||
this._showPseudoElements = !!value;
|
||||
let isOpen = this.showPseudoElements;
|
||||
|
||||
Services.prefs.setBoolPref("devtools.inspector.show_pseudo_elements",
|
||||
isOpen);
|
||||
|
||||
this.element.classList.toggle("show-pseudo-elements", isOpen);
|
||||
|
||||
if (this.pseudoElementTwisty) {
|
||||
if (isOpen) {
|
||||
this.pseudoElementTwisty.setAttribute("open", "true");
|
||||
}
|
||||
else {
|
||||
this.pseudoElementTwisty.removeAttribute("open");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
get showPseudoElements() {
|
||||
if (this._showPseudoElements === undefined) {
|
||||
this._showPseudoElements =
|
||||
@ -1651,68 +1654,6 @@ CssRuleView.prototype = {
|
||||
return this._showPseudoElements;
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates an expandable container in the rule view
|
||||
* @param {String} aLabel The label for the container header
|
||||
* @param {Boolean} isPseudo Whether or not the container will hold
|
||||
* pseudo element rules
|
||||
* @return {DOMNode} The container element
|
||||
*/
|
||||
createExpandableContainer: function(aLabel, isPseudo = false) {
|
||||
let header = this.doc.createElementNS(HTML_NS, "div");
|
||||
header.className = this._getRuleViewHeaderClassName(true);
|
||||
header.classList.add("show-expandable-container");
|
||||
header.textContent = aLabel;
|
||||
|
||||
let twisty = this.doc.createElementNS(HTML_NS, "span");
|
||||
twisty.className = "ruleview-expander theme-twisty";
|
||||
twisty.setAttribute("open", "true");
|
||||
|
||||
header.insertBefore(twisty, header.firstChild);
|
||||
this.element.appendChild(header);
|
||||
|
||||
let container = this.doc.createElementNS(HTML_NS, "div");
|
||||
container.classList.add("ruleview-expandable-container");
|
||||
this.element.appendChild(container);
|
||||
|
||||
let toggleContainerVisibility = (isPseudo, showPseudo) => {
|
||||
let isOpen = twisty.getAttribute("open");
|
||||
|
||||
if (isPseudo) {
|
||||
this._showPseudoElements = !!showPseudo;
|
||||
|
||||
Services.prefs.setBoolPref("devtools.inspector.show_pseudo_elements",
|
||||
this.showPseudoElements);
|
||||
|
||||
header.classList.toggle("show-expandable-container",
|
||||
this.showPseudoElements);
|
||||
|
||||
isOpen = !this.showPseudoElements;
|
||||
} else {
|
||||
header.classList.toggle("show-expandable-container");
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
twisty.removeAttribute("open");
|
||||
} else {
|
||||
twisty.setAttribute("open", "true");
|
||||
}
|
||||
};
|
||||
|
||||
header.addEventListener("dblclick", () => {
|
||||
toggleContainerVisibility(isPseudo, !this.showPseudoElements);
|
||||
}, false);
|
||||
twisty.addEventListener("click", () => {
|
||||
toggleContainerVisibility(isPseudo, !this.showPseudoElements);
|
||||
}, false);
|
||||
|
||||
if (isPseudo) {
|
||||
toggleContainerVisibility(isPseudo, this.showPseudoElements);
|
||||
}
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
_getRuleViewHeaderClassName: function(isPseudo) {
|
||||
let baseClassName = "theme-gutter ruleview-header";
|
||||
return isPseudo ? baseClassName + " ruleview-expandable-header" : baseClassName;
|
||||
@ -1725,10 +1666,8 @@ CssRuleView.prototype = {
|
||||
// Run through the current list of rules, attaching
|
||||
// their editors in order. Create editors if needed.
|
||||
let lastInheritedSource = "";
|
||||
let lastKeyframes = null;
|
||||
let seenPseudoElement = false;
|
||||
let seenNormalElement = false;
|
||||
let container = null;
|
||||
|
||||
if (!this._elementStyle.rules) {
|
||||
return;
|
||||
@ -1749,7 +1688,7 @@ CssRuleView.prototype = {
|
||||
}
|
||||
|
||||
let inheritedSource = rule.inheritedSource;
|
||||
if (inheritedSource && inheritedSource != lastInheritedSource) {
|
||||
if (inheritedSource != lastInheritedSource) {
|
||||
let div = this.doc.createElementNS(HTML_NS, "div");
|
||||
div.className = this._getRuleViewHeaderClassName();
|
||||
div.textContent = inheritedSource;
|
||||
@ -1759,25 +1698,33 @@ CssRuleView.prototype = {
|
||||
|
||||
if (!seenPseudoElement && rule.pseudoElement) {
|
||||
seenPseudoElement = true;
|
||||
container = this.createExpandableContainer(this.pseudoElementLabel, true);
|
||||
}
|
||||
|
||||
let keyframes = rule.keyframes;
|
||||
if (keyframes && keyframes != lastKeyframes) {
|
||||
lastKeyframes = keyframes;
|
||||
container = this.createExpandableContainer(rule.keyframesName);
|
||||
let div = this.doc.createElementNS(HTML_NS, "div");
|
||||
div.className = this._getRuleViewHeaderClassName(true);
|
||||
div.textContent = this.pseudoElementLabel;
|
||||
div.addEventListener("dblclick", () => {
|
||||
this.togglePseudoElementVisibility(!this.showPseudoElements);
|
||||
}, false);
|
||||
|
||||
let twisty = this.pseudoElementTwisty =
|
||||
this.doc.createElementNS(HTML_NS, "span");
|
||||
twisty.className = "ruleview-expander theme-twisty";
|
||||
twisty.addEventListener("click", () => {
|
||||
this.togglePseudoElementVisibility(!this.showPseudoElements);
|
||||
}, false);
|
||||
|
||||
div.insertBefore(twisty, div.firstChild);
|
||||
this.element.appendChild(div);
|
||||
}
|
||||
|
||||
if (!rule.editor) {
|
||||
rule.editor = new RuleEditor(this, rule);
|
||||
}
|
||||
|
||||
if (container && (rule.pseudoElement || keyframes)) {
|
||||
container.appendChild(rule.editor.element);
|
||||
} else {
|
||||
this.element.appendChild(rule.editor.element);
|
||||
}
|
||||
this.element.appendChild(rule.editor.element);
|
||||
}
|
||||
|
||||
this.togglePseudoElementVisibility(this.showPseudoElements);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1809,10 +1756,7 @@ function RuleEditor(aRuleView, aRule) {
|
||||
RuleEditor.prototype = {
|
||||
get isSelectorEditable() {
|
||||
let toolbox = this.ruleView.inspector.toolbox;
|
||||
return this.isEditable &&
|
||||
toolbox.target.client.traits.selectorEditable &&
|
||||
this.rule.domRule.type !== ELEMENT_STYLE &&
|
||||
this.rule.domRule.type !== Ci.nsIDOMCSSRule.KEYFRAME_RULE
|
||||
return toolbox.target.client.traits.selectorEditable;
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
@ -1820,6 +1764,9 @@ RuleEditor.prototype = {
|
||||
this.element.className = "ruleview-rule theme-separator";
|
||||
this.element.setAttribute("uneditable", !this.isEditable);
|
||||
this.element._ruleEditor = this;
|
||||
if (this.rule.pseudoElement) {
|
||||
this.element.classList.add("ruleview-rule-pseudo-element");
|
||||
}
|
||||
|
||||
// Give a relative position for the inplace editor's measurement
|
||||
// span to be placed absolutely against.
|
||||
@ -1861,7 +1808,8 @@ RuleEditor.prototype = {
|
||||
class: "ruleview-selector theme-fg-color3"
|
||||
});
|
||||
|
||||
if (this.isSelectorEditable) {
|
||||
if (this.isEditable && this.rule.domRule.type !== ELEMENT_STYLE &&
|
||||
this.isSelectorEditable) {
|
||||
this.selectorContainer.addEventListener("click", aEvent => {
|
||||
// Clicks within the selector shouldn't propagate any further.
|
||||
aEvent.stopPropagation();
|
||||
@ -1977,8 +1925,6 @@ RuleEditor.prototype = {
|
||||
// style, just show the text directly.
|
||||
if (this.rule.domRule.type === ELEMENT_STYLE) {
|
||||
this.selectorText.textContent = this.rule.selectorText;
|
||||
} else if (this.rule.domRule.type === Ci.nsIDOMCSSRule.KEYFRAME_RULE) {
|
||||
this.selectorText.textContent = this.rule.domRule.keyText;
|
||||
} else {
|
||||
this.rule.domRule.selectors.forEach((selector, i) => {
|
||||
if (i != 0) {
|
||||
|
||||
@ -38,11 +38,11 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ruleview-expandable-container {
|
||||
.ruleview-rule-pseudo-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-expandable-container + .ruleview-expandable-container {
|
||||
.show-pseudo-elements .ruleview-rule-pseudo-element {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -9,8 +9,6 @@ support-files =
|
||||
doc_content_stylesheet_linked.css
|
||||
doc_content_stylesheet_script.css
|
||||
doc_content_stylesheet_xul.css
|
||||
doc_keyframeanimation.html
|
||||
doc_keyframeanimation.css
|
||||
doc_matched_selectors.html
|
||||
doc_media_queries.html
|
||||
doc_pseudoelement.html
|
||||
@ -77,8 +75,6 @@ support-files =
|
||||
skip-if = os == "win" && debug # bug 963492
|
||||
[browser_ruleview_inherit.js]
|
||||
[browser_ruleview_keybindings.js]
|
||||
[browser_ruleview_keyframes-rule_01.js]
|
||||
[browser_ruleview_keyframes-rule_02.js]
|
||||
[browser_ruleview_livepreview.js]
|
||||
[browser_ruleview_mathml-element.js]
|
||||
[browser_ruleview_media-queries.js]
|
||||
|
||||
@ -51,8 +51,7 @@ let test = asyncTest(function*() {
|
||||
function* testEditSelector(view, name) {
|
||||
info("Test editing existing selector fields");
|
||||
|
||||
let idRuleEditor = getRuleViewRuleEditor(view, 1) ||
|
||||
getRuleViewRuleEditor(view, 1, 0);
|
||||
let idRuleEditor = getRuleViewRuleEditor(view, 1);
|
||||
|
||||
info("Focusing an existing selector name in the rule-view");
|
||||
let editor = yield focusEditableField(idRuleEditor.selectorText);
|
||||
|
||||
@ -1,127 +0,0 @@
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that keyframe rules and gutters are displayed correctly in the rule view
|
||||
|
||||
const TEST_URI = TEST_URL_ROOT + "doc_keyframeanimation.html";
|
||||
|
||||
let test = asyncTest(function*() {
|
||||
yield addTab(TEST_URI);
|
||||
|
||||
let {toolbox, inspector, view} = yield openRuleView();
|
||||
|
||||
yield testPacman(inspector, view);
|
||||
yield testBoxy(inspector, view);
|
||||
yield testMoxy(inspector, view);
|
||||
});
|
||||
|
||||
function* testPacman(inspector, view) {
|
||||
info("Test content and gutter in the keyframes rule of #pacman");
|
||||
|
||||
let {
|
||||
rules,
|
||||
element,
|
||||
elementStyle
|
||||
} = yield assertKeyframeRules("#pacman", inspector, view, {
|
||||
elementRulesNb: 2,
|
||||
keyframeRulesNb: 2,
|
||||
keyframesRules: ["pacman", "pacman"],
|
||||
keyframeRules: ["100%", "100%"]
|
||||
});
|
||||
|
||||
let gutters = assertGutters(view, {
|
||||
guttersNbs: 2,
|
||||
gutterHeading: ["Keyframes pacman", "Keyframes pacman"]
|
||||
});
|
||||
}
|
||||
|
||||
function* testBoxy(inspector, view) {
|
||||
info("Test content and gutter in the keyframes rule of #boxy");
|
||||
|
||||
let {
|
||||
rules,
|
||||
element,
|
||||
elementStyle
|
||||
} = yield assertKeyframeRules("#boxy", inspector, view, {
|
||||
elementRulesNb: 3,
|
||||
keyframeRulesNb: 3,
|
||||
keyframesRules: ["boxy", "boxy", "boxy"],
|
||||
keyframeRules: ["10%", "20%", "100%"]
|
||||
});
|
||||
|
||||
let gutters = assertGutters(view, {
|
||||
guttersNbs: 1,
|
||||
gutterHeading: ["Keyframes boxy"]
|
||||
});
|
||||
}
|
||||
|
||||
function testMoxy(inspector, view) {
|
||||
info("Test content and gutter in the keyframes rule of #moxy");
|
||||
|
||||
let {
|
||||
rules,
|
||||
element,
|
||||
elementStyle
|
||||
} = yield assertKeyframeRules("#moxy", inspector, view, {
|
||||
elementRulesNb: 3,
|
||||
keyframeRulesNb: 4,
|
||||
keyframesRules: ["boxy", "boxy", "boxy", "moxy"],
|
||||
keyframeRules: ["10%", "20%", "100%", "100%"]
|
||||
});
|
||||
|
||||
let gutters = assertGutters(view, {
|
||||
guttersNbs: 2,
|
||||
gutterHeading: ["Keyframes boxy", "Keyframes moxy"]
|
||||
});
|
||||
}
|
||||
|
||||
function* testNode(selector, inspector, view) {
|
||||
let element = getNode(selector);
|
||||
yield selectNode(element, inspector);
|
||||
let elementStyle = view._elementStyle;
|
||||
return {element, elementStyle};
|
||||
}
|
||||
|
||||
function* assertKeyframeRules(selector, inspector, view, expected) {
|
||||
let {element, elementStyle} = yield testNode(selector, inspector, view);
|
||||
|
||||
let rules = {
|
||||
elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
|
||||
keyframeRules: elementStyle.rules.filter(rule => rule.keyframes)
|
||||
};
|
||||
|
||||
is(rules.elementRules.length, expected.elementRulesNb, selector +
|
||||
" has the correct number of non keyframe element rules");
|
||||
is(rules.keyframeRules.length, expected.keyframeRulesNb, selector +
|
||||
" has the correct number of keyframe rules");
|
||||
|
||||
let i = 0;
|
||||
for (let keyframeRule of rules.keyframeRules) {
|
||||
ok(keyframeRule.keyframes.name == expected.keyframesRules[i],
|
||||
keyframeRule.keyframes.name + " has the correct keyframes name");
|
||||
ok(keyframeRule.domRule.keyText == expected.keyframeRules[i],
|
||||
keyframeRule.domRule.keyText + " selector heading is correct");
|
||||
i++;
|
||||
}
|
||||
|
||||
return {rules, element, elementStyle};
|
||||
}
|
||||
|
||||
function assertGutters(view, expected) {
|
||||
let gutters = view.element.querySelectorAll(".theme-gutter");
|
||||
|
||||
is(gutters.length, expected.guttersNbs,
|
||||
"There are " + gutters.length + " gutter headings");
|
||||
|
||||
let i = 0;
|
||||
for (let gutter of gutters) {
|
||||
is(gutter.textContent, expected.gutterHeading[i],
|
||||
"Correct " + gutter.textContent + " gutter headings");
|
||||
i++;
|
||||
}
|
||||
|
||||
return gutters;
|
||||
}
|
||||
@ -1,111 +0,0 @@
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that verifies the content of the keyframes rule and property changes
|
||||
// to keyframe rules
|
||||
|
||||
const TEST_URI = TEST_URL_ROOT + "doc_keyframeanimation.html";
|
||||
|
||||
let test = asyncTest(function*() {
|
||||
yield addTab(TEST_URI);
|
||||
|
||||
let {toolbox, inspector, view} = yield openRuleView();
|
||||
|
||||
yield testPacman(inspector, view);
|
||||
yield testBoxy(inspector, view);
|
||||
});
|
||||
|
||||
function* testPacman(inspector, view) {
|
||||
info("Test content in the keyframes rule of #pacman");
|
||||
|
||||
let {
|
||||
rules,
|
||||
element,
|
||||
elementStyle
|
||||
} = yield getKeyframeRules("#pacman", inspector, view);
|
||||
|
||||
info("Test text properties for Keyframes #pacman");
|
||||
|
||||
is
|
||||
(
|
||||
convertTextPropsToString(rules.keyframeRules[0].textProps),
|
||||
"left: 750px",
|
||||
"Keyframe pacman (100%) property is correct"
|
||||
);
|
||||
|
||||
info("Test dynamic changes to keyframe rule for #pacman");
|
||||
|
||||
let defaultView = element.ownerDocument.defaultView;
|
||||
let ruleEditor = view.element.children[5].childNodes[0]._ruleEditor;
|
||||
ruleEditor.addProperty("opacity", "0");
|
||||
ruleEditor.addProperty("top", "750px");
|
||||
|
||||
yield ruleEditor._applyingModifications;
|
||||
yield once(element, "animationend");
|
||||
|
||||
is
|
||||
(
|
||||
convertTextPropsToString(rules.keyframeRules[1].textProps),
|
||||
"left: 750px; opacity: 0; top: 750px",
|
||||
"Keyframe pacman (100%) property is correct"
|
||||
);
|
||||
|
||||
is(defaultView.getComputedStyle(element).getPropertyValue("opacity"), "0",
|
||||
"Added opacity property should have been used.");
|
||||
is(defaultView.getComputedStyle(element).getPropertyValue("top"), "750px",
|
||||
"Added top property should have been used.");
|
||||
}
|
||||
|
||||
function* testBoxy(inspector, view) {
|
||||
info("Test content in the keyframes rule of #boxy");
|
||||
|
||||
let {
|
||||
rules,
|
||||
element,
|
||||
elementStyle
|
||||
} = yield getKeyframeRules("#boxy", inspector, view);
|
||||
|
||||
info("Test text properties for Keyframes #boxy");
|
||||
|
||||
is
|
||||
(
|
||||
convertTextPropsToString(rules.keyframeRules[0].textProps),
|
||||
"background-color: blue",
|
||||
"Keyframe boxy (10%) property is correct"
|
||||
);
|
||||
|
||||
is
|
||||
(
|
||||
convertTextPropsToString(rules.keyframeRules[1].textProps),
|
||||
"background-color: green",
|
||||
"Keyframe boxy (20%) property is correct"
|
||||
);
|
||||
|
||||
is
|
||||
(
|
||||
convertTextPropsToString(rules.keyframeRules[2].textProps),
|
||||
"opacity: 0",
|
||||
"Keyframe boxy (100%) property is correct"
|
||||
);
|
||||
}
|
||||
|
||||
function convertTextPropsToString(textProps) {
|
||||
return textProps.map(t => t.name + ": " + t.value).join("; ");
|
||||
}
|
||||
|
||||
function* getKeyframeRules(selector, inspector, view) {
|
||||
let element = getNode(selector);
|
||||
|
||||
yield selectNode(element, inspector);
|
||||
let elementStyle = view._elementStyle;
|
||||
|
||||
let rules = {
|
||||
elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
|
||||
keyframeRules: elementStyle.rules.filter(rule => rule.keyframes)
|
||||
};
|
||||
|
||||
return {rules, element, elementStyle};
|
||||
}
|
||||
@ -38,22 +38,24 @@ function* testTopLeft(inspector, view) {
|
||||
|
||||
// Make sure that clicking on the twisty hides pseudo elements
|
||||
let expander = gutters[0].querySelector(".ruleview-expander");
|
||||
ok (view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements are expanded");
|
||||
ok (view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are expanded");
|
||||
expander.click();
|
||||
ok (!view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements are collapsed by twisty");
|
||||
ok (!view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are collapsed by twisty");
|
||||
expander.click();
|
||||
ok (view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements are expanded again");
|
||||
ok (view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are expanded again");
|
||||
|
||||
// Make sure that dblclicking on the header container also toggles the pseudo elements
|
||||
EventUtils.synthesizeMouseAtCenter(gutters[0], {clickCount: 2}, inspector.sidebar.getWindowForTab("ruleview"));
|
||||
ok (!view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements are collapsed by dblclicking");
|
||||
ok (!view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are collapsed by dblclicking");
|
||||
|
||||
let defaultView = element.ownerDocument.defaultView;
|
||||
let elementRule = rules.elementRules[0];
|
||||
let elementRuleView = getRuleViewRuleEditor(view, 3);
|
||||
let elementRuleView = [].filter.call(view.element.children, e => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
let elementAfterRule = rules.afterRules[0];
|
||||
let elementAfterRuleView = [].filter.call(view.element.children[1].children, (e) => {
|
||||
let elementAfterRuleView = [].filter.call(view.element.children, (e) => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementAfterRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
@ -66,7 +68,7 @@ function* testTopLeft(inspector, view) {
|
||||
);
|
||||
|
||||
let elementBeforeRule = rules.beforeRules[0];
|
||||
let elementBeforeRuleView = [].filter.call(view.element.children[1].children, (e) => {
|
||||
let elementBeforeRuleView = [].filter.call(view.element.children, (e) => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementBeforeRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
@ -136,10 +138,10 @@ function* testTopRight(inspector, view) {
|
||||
let gutters = assertGutters(view);
|
||||
|
||||
let expander = gutters[0].querySelector(".ruleview-expander");
|
||||
ok (!view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements remain collapsed after switching element");
|
||||
ok (!view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements remain collapsed after switching element");
|
||||
expander.scrollIntoView();
|
||||
expander.click();
|
||||
ok (view.element.firstChild.classList.contains("show-expandable-container"), "Pseudo Elements are shown again after clicking twisty");
|
||||
ok (view.element.classList.contains("show-pseudo-elements"), "Pseudo Elements are shown again after clicking twisty");
|
||||
}
|
||||
|
||||
function* testBottomRight(inspector, view) {
|
||||
@ -181,7 +183,7 @@ function* testParagraph(inspector, view) {
|
||||
let gutters = assertGutters(view);
|
||||
|
||||
let elementFirstLineRule = rules.firstLineRules[0];
|
||||
let elementFirstLineRuleView = [].filter.call(view.element.children[1].children, (e) => {
|
||||
let elementFirstLineRuleView = [].filter.call(view.element.children, (e) => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
@ -193,7 +195,7 @@ function* testParagraph(inspector, view) {
|
||||
);
|
||||
|
||||
let elementFirstLetterRule = rules.firstLetterRules[0];
|
||||
let elementFirstLetterRuleView = [].filter.call(view.element.children[1].children, (e) => {
|
||||
let elementFirstLetterRuleView = [].filter.call(view.element.children, (e) => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementFirstLetterRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
@ -205,7 +207,7 @@ function* testParagraph(inspector, view) {
|
||||
);
|
||||
|
||||
let elementSelectionRule = rules.selectionRules[0];
|
||||
let elementSelectionRuleView = [].filter.call(view.element.children[1].children, (e) => {
|
||||
let elementSelectionRuleView = [].filter.call(view.element.children, (e) => {
|
||||
return e._ruleEditor && e._ruleEditor.rule === elementSelectionRule;
|
||||
})[0]._ruleEditor;
|
||||
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
.box {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #FFCB01;
|
||||
}
|
||||
|
||||
#pacman {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-right: 60px solid transparent;
|
||||
border-top: 60px solid #FFCB01;
|
||||
border-left: 60px solid #FFCB01;
|
||||
border-bottom: 60px solid #FFCB01;
|
||||
border-top-left-radius: 60px;
|
||||
border-bottom-left-radius: 60px;
|
||||
border-top-right-radius: 60px;
|
||||
border-bottom-right-radius: 60px;
|
||||
top: 120px;
|
||||
left: 150px;
|
||||
position: absolute;
|
||||
animation-name: pacman;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: linear;
|
||||
animation-duration: 15s;
|
||||
}
|
||||
|
||||
#boxy {
|
||||
top: 170px;
|
||||
left: 450px;
|
||||
position: absolute;
|
||||
animation: 4s linear 0s normal none infinite boxy;
|
||||
}
|
||||
|
||||
|
||||
#moxy {
|
||||
animation-name: moxy, boxy;
|
||||
animation-delay: 3.5s;
|
||||
animation-duration: 2s;
|
||||
top: 170px;
|
||||
left: 650px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-moz-keyframes pacman {
|
||||
100% {
|
||||
left: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pacman {
|
||||
100% {
|
||||
left: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes boxy {
|
||||
10% {
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
20% {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moxy {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<html>
|
||||
<head>
|
||||
<title>test case for keyframes rule in rule-view</title>
|
||||
<link rel="stylesheet" type="text/css" href="doc_keyframeanimation.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="pacman"></div>
|
||||
<div id="boxy" class="circle"></div>
|
||||
<div id="moxy" class="circle"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -619,14 +619,11 @@ function getRuleViewLinkByIndex(view, index) {
|
||||
/**
|
||||
* Get the rule editor from the rule-view given its index
|
||||
* @param {CssRuleView} view The instance of the rule-view panel
|
||||
* @param {Number} childrenIndex The children index of the element to get
|
||||
* @param {Number} nodeIndex The child node index of the element to get
|
||||
* @param {Number} index The index of the link to get
|
||||
* @return {DOMNode} The rule editor if any at this index
|
||||
*/
|
||||
function getRuleViewRuleEditor(view, childrenIndex, nodeIndex) {
|
||||
return nodeIndex !== undefined ?
|
||||
view.element.children[childrenIndex].childNodes[nodeIndex]._ruleEditor :
|
||||
view.element.children[childrenIndex]._ruleEditor;
|
||||
function getRuleViewRuleEditor(view, index) {
|
||||
return view.element.children[index]._ruleEditor;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -45,8 +45,7 @@ types.addLifetime("walker", "walker");
|
||||
*/
|
||||
types.addDictType("appliedstyle", {
|
||||
rule: "domstylerule#actorid",
|
||||
inherited: "nullable:domnode#actorid",
|
||||
keyframes: "nullable:domstylerule#actorid"
|
||||
inherited: "nullable:domnode#actorid"
|
||||
});
|
||||
|
||||
types.addDictType("matchedselector", {
|
||||
@ -155,7 +154,7 @@ var PageStyleActor = protocol.ActorClass({
|
||||
|
||||
this.cssLogic.sourceFilter = options.filter || CssLogic.FILTER.UA;
|
||||
this.cssLogic.highlight(node.rawNode);
|
||||
let computed = this.cssLogic.computedStyle || [];
|
||||
let computed = this.cssLogic._computedStyle || [];
|
||||
|
||||
Array.prototype.forEach.call(computed, name => {
|
||||
let matched = undefined;
|
||||
@ -325,7 +324,8 @@ var PageStyleActor = protocol.ActorClass({
|
||||
* Helper function for getApplied, adds all the rules from a given
|
||||
* element.
|
||||
*/
|
||||
addElementRules: function(element, inherited, options, rules) {
|
||||
addElementRules: function(element, inherited, options, rules)
|
||||
{
|
||||
if (!element.style) {
|
||||
return;
|
||||
}
|
||||
@ -379,6 +379,7 @@ var PageStyleActor = protocol.ActorClass({
|
||||
isSystem: isSystem
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@ -430,24 +431,6 @@ var PageStyleActor = protocol.ActorClass({
|
||||
}
|
||||
}
|
||||
|
||||
// Add all the keyframes rule associated with the element
|
||||
let animationNames = this.cssLogic.computedStyle.animationName.split(",");
|
||||
animationNames = animationNames.map(name => name.trim())
|
||||
if (animationNames) {
|
||||
// Traverse through all the available keyframes rule and add
|
||||
// the keyframes rule that matches the computed animation name
|
||||
for (let keyframesRule of this.cssLogic.keyframesRules) {
|
||||
if (animationNames.indexOf(keyframesRule.name) > -1) {
|
||||
for (let rule of keyframesRule.cssRules) {
|
||||
entries.push({
|
||||
rule: this._styleRef(rule),
|
||||
keyframes: this._styleRef(keyframesRule)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let rules = new Set;
|
||||
let sheets = new Set;
|
||||
entries.forEach(entry => rules.add(entry.rule));
|
||||
@ -678,9 +661,7 @@ var StyleRuleActor = protocol.ActorClass({
|
||||
if (item instanceof (Ci.nsIDOMCSSRule)) {
|
||||
this.type = item.type;
|
||||
this.rawRule = item;
|
||||
if ((this.rawRule instanceof Ci.nsIDOMCSSStyleRule ||
|
||||
this.rawRule instanceof Ci.nsIDOMMozCSSKeyframeRule) &&
|
||||
this.rawRule.parentStyleSheet) {
|
||||
if (this.rawRule instanceof Ci.nsIDOMCSSStyleRule && this.rawRule.parentStyleSheet) {
|
||||
this.line = DOMUtils.getRuleLine(this.rawRule);
|
||||
this.column = DOMUtils.getRuleColumn(this.rawRule);
|
||||
}
|
||||
@ -758,14 +739,6 @@ var StyleRuleActor = protocol.ActorClass({
|
||||
form.media.push(this.rawRule.media.item(i));
|
||||
}
|
||||
break;
|
||||
case Ci.nsIDOMCSSRule.KEYFRAMES_RULE:
|
||||
form.cssText = this.rawRule.cssText;
|
||||
form.name = this.rawRule.name;
|
||||
break;
|
||||
case Ci.nsIDOMCSSRule.KEYFRAME_RULE:
|
||||
form.cssText = this.rawStyle.cssText || "";
|
||||
form.keyText = this.rawRule.keyText || "";
|
||||
break;
|
||||
}
|
||||
|
||||
return form;
|
||||
@ -911,7 +884,7 @@ var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
|
||||
* Return a new RuleModificationList for this node.
|
||||
*/
|
||||
startModifyingProperties: function() {
|
||||
return new RuleModificationList(this);
|
||||
return new RuleModificationList(this);
|
||||
},
|
||||
|
||||
get type() this._form.type,
|
||||
@ -920,12 +893,6 @@ var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
|
||||
get cssText() {
|
||||
return this._form.cssText;
|
||||
},
|
||||
get keyText() {
|
||||
return this._form.keyText;
|
||||
},
|
||||
get name() {
|
||||
return this._form.name;
|
||||
},
|
||||
get selectors() {
|
||||
return this._form.selectors;
|
||||
},
|
||||
|
||||
@ -129,9 +129,6 @@ CssLogic.prototype = {
|
||||
_matchedRules: null,
|
||||
_matchedSelectors: null,
|
||||
|
||||
// Cached keyframes rules in all stylesheets
|
||||
_keyframesRules: null,
|
||||
|
||||
/**
|
||||
* Reset various properties
|
||||
*/
|
||||
@ -144,7 +141,6 @@ CssLogic.prototype = {
|
||||
this._sheetsCached = false;
|
||||
this._matchedRules = null;
|
||||
this._matchedSelectors = null;
|
||||
this._keyframesRules = [];
|
||||
},
|
||||
|
||||
/**
|
||||
@ -183,15 +179,6 @@ CssLogic.prototype = {
|
||||
this._computedStyle = win.getComputedStyle(this.viewedElement, "");
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the values of all the computed CSS properties for the highlighted
|
||||
* element.
|
||||
* @returns {object} The computed CSS properties for a selected element
|
||||
*/
|
||||
get computedStyle() {
|
||||
return this._computedStyle;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the source filter.
|
||||
* @returns {string} The source filter being used.
|
||||
@ -283,7 +270,7 @@ CssLogic.prototype = {
|
||||
* Cache a stylesheet if it falls within the requirements: if it's enabled,
|
||||
* and if the @media is allowed. This method also walks through the stylesheet
|
||||
* cssRules to find @imported rules, to cache the stylesheets of those rules
|
||||
* as well. In addition, the @keyframes rules in the stylesheet are cached.
|
||||
* as well.
|
||||
*
|
||||
* @private
|
||||
* @param {CSSStyleSheet} aDomSheet the CSSStyleSheet object to cache.
|
||||
@ -304,15 +291,13 @@ CssLogic.prototype = {
|
||||
if (cssSheet._passId != this._passId) {
|
||||
cssSheet._passId = this._passId;
|
||||
|
||||
// Find import and keyframes rules.
|
||||
for (let aDomRule of aDomSheet.cssRules) {
|
||||
// Find import rules.
|
||||
Array.prototype.forEach.call(aDomSheet.cssRules, function(aDomRule) {
|
||||
if (aDomRule.type == Ci.nsIDOMCSSRule.IMPORT_RULE && aDomRule.styleSheet &&
|
||||
this.mediaMatches(aDomRule)) {
|
||||
this._cacheSheet(aDomRule.styleSheet);
|
||||
} else if (aDomRule.type == Ci.nsIDOMCSSRule.KEYFRAMES_RULE) {
|
||||
this._keyframesRules.push(aDomRule);
|
||||
}
|
||||
}
|
||||
}, this);
|
||||
}
|
||||
},
|
||||
|
||||
@ -337,19 +322,6 @@ CssLogic.prototype = {
|
||||
return sheets;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieve the list of keyframes rules in the document.
|
||||
*
|
||||
* @ return {array} the list of keyframes rules in the document.
|
||||
*/
|
||||
get keyframesRules()
|
||||
{
|
||||
if (!this._sheetsCached) {
|
||||
this._cacheSheets();
|
||||
}
|
||||
return this._keyframesRules;
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieve a CssSheet object for a given a CSSStyleSheet object. If the
|
||||
* stylesheet is already cached, you get the existing CssSheet object,
|
||||
@ -648,6 +620,7 @@ CssLogic.prototype = {
|
||||
this._matchedRules.push([rule, status]);
|
||||
}
|
||||
|
||||
|
||||
// Add element.style information.
|
||||
if (element.style && element.style.length > 0) {
|
||||
let rule = new CssRule(null, { style: element.style }, element);
|
||||
@ -671,7 +644,7 @@ CssLogic.prototype = {
|
||||
let mediaText = aDomObject.media.mediaText;
|
||||
return !mediaText || this.viewedDocument.defaultView.
|
||||
matchMedia(mediaText).matches;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
@ -1562,9 +1535,9 @@ CssPropertyInfo.prototype = {
|
||||
*/
|
||||
get value()
|
||||
{
|
||||
if (!this._value && this._cssLogic.computedStyle) {
|
||||
if (!this._value && this._cssLogic._computedStyle) {
|
||||
try {
|
||||
this._value = this._cssLogic.computedStyle.getPropertyValue(this.property);
|
||||
this._value = this._cssLogic._computedStyle.getPropertyValue(this.property);
|
||||
} catch (ex) {
|
||||
Services.console.logStringMessage('Error reading computed style for ' +
|
||||
this.property);
|
||||
|
||||
@ -35,10 +35,6 @@ rule.sourceElement=element
|
||||
# e.g "Inherited from body#bodyID"
|
||||
rule.inheritedFrom=Inherited from %S
|
||||
|
||||
# LOCALIZATION NOTE (rule.keyframe): Shown for CSS Rules keyframe header.
|
||||
# Will be passed an identifier of the keyframe animation name.
|
||||
rule.keyframe=Keyframes %S
|
||||
|
||||
# LOCALIZATION NOTE (rule.userAgentStyles): Shown next to the style sheet
|
||||
# link for CSS rules that were loaded from a user agent style sheet.
|
||||
# These styles will not be editable, and will only be visible if the
|
||||
|
||||
Loading…
Reference in New Issue
Block a user