_populateComputed: function () {
if (this._populatedComputed) {
return;
}
this._populatedComputed = true;
for (let computed of this.prop.computed) {
// Don't bother to duplicate information already
// shown in the text property.
if (computed.name === this.prop.name) {
continue;
}
let li = createChild(this.computed, "li", {
class: "ruleview-computed"
});
if (computed.overridden) {
li.classList.add("ruleview-overridden");
}
createChild(li, "span", {
class: "ruleview-propertyname theme-fg-color5",
textContent: computed.name
});
appendText(li, ": ");
let outputParser = this.ruleView._outputParser;
let frag = outputParser.parseCssProperty(
computed.name, computed.value, {
colorSwatchClass: "ruleview-swatch ruleview-colorswatch",
urlClass: "theme-link",
baseURI: this.sheetHref
}
);
// Store the computed property value that was parsed for output
computed.parsedValue = frag.textContent;
createChild(li, "span", {
class: "ruleview-propertyvalue theme-fg-color1",
child: frag
});
appendText(li, ";");
// Store the computed style element for easy access when highlighting
// styles
computed.element = li;
}
},
_createComputedListItem: function(parentEl, computed, className) {
const li = createChild(parentEl, "li", {
class: className
});
if (computed.overridden) {
li.classList.add("ruleview-overridden");
}
const nameContainer = createChild(li, "span", {
class: "ruleview-namecontainer"
});
createChild(nameContainer, "span", {
class: "ruleview-propertyname theme-fg-color5",
textContent: computed.name
});
appendText(nameContainer, ": ");
const outputParser = this.ruleView._outputParser;
const frag = outputParser.parseCssProperty(
computed.name, computed.value, {
colorSwatchClass: "ruleview-swatch ruleview-colorswatch",
urlClass: "theme-link",
baseURI: this.sheetHref,
fontFamilyClass: "ruleview-font-family"
}
);
// Store the computed property value that was parsed for output
computed.parsedValue = frag.textContent;
const propertyContainer = createChild(li, "span", {
class: "ruleview-propertyvaluecontainer"
});
createChild(propertyContainer, "span", {
class: "ruleview-propertyvalue theme-fg-color1",
child: frag
});
appendText(propertyContainer, ";");
return li;
},
_create: function () {
this.element = this.doc.createElementNS(HTML_NS, "li");
this.element.classList.add("ruleview-property");
this.element._textPropertyEditor = this;
this.container = createChild(this.element, "div", {
class: "ruleview-propertycontainer"
});
// The enable checkbox will disable or enable the rule.
this.enable = createChild(this.container, "div", {
class: "ruleview-enableproperty theme-checkbox",
tabindex: "-1"
});
// Click to expand the computed properties of the text property.
this.expander = createChild(this.container, "span", {
class: "ruleview-expander theme-twisty"
});
this.expander.addEventListener("click", this._onExpandClicked, true);
this.nameContainer = createChild(this.container, "span", {
class: "ruleview-namecontainer"
});
// Property name, editable when focused. Property name
// is committed when the editor is unfocused.
this.nameSpan = createChild(this.nameContainer, "span", {
class: "ruleview-propertyname theme-fg-color5",
tabindex: this.ruleEditor.isEditable ? "0" : "-1",
});
appendText(this.nameContainer, ": ");
// Create a span that will hold the property and semicolon.
// Use this span to create a slightly larger click target
// for the value.
this.valueContainer = createChild(this.container, "span", {
class: "ruleview-propertyvaluecontainer"
});
// Property value, editable when focused. Changes to the
// property value are applied as they are typed, and reverted
// if the user presses escape.
this.valueSpan = createChild(this.valueContainer, "span", {
class: "ruleview-propertyvalue theme-fg-color1",
tabindex: this.ruleEditor.isEditable ? "0" : "-1",
});
// Storing the TextProperty on the elements for easy access
// (for instance by the tooltip)
this.valueSpan.textProperty = this.prop;
this.nameSpan.textProperty = this.prop;
// If the value is a color property we need to put it through the parser
// so that colors can be coerced into the default color type. This prevents
// us from thinking that when colors are coerced they have been changed by
// the user.
let outputParser = this.ruleView._outputParser;
let frag = outputParser.parseCssProperty(this.prop.name, this.prop.value);
let parsedValue = frag.textContent;
// Save the initial value as the last committed value,
// for restoring after pressing escape.
this.committed = { name: this.prop.name,
value: parsedValue,
priority: this.prop.priority };
appendText(this.valueContainer, ";");
this.warning = createChild(this.container, "div", {
class: "ruleview-warning",
hidden: "",
title: CssLogic.l10n("rule.warning.title"),
});
// Filter button that filters for the current property name and is
// displayed when the property is overridden by another rule.
this.filterProperty = createChild(this.container, "div", {
class: "ruleview-overridden-rule-filter",
hidden: "",
title: CssLogic.l10n("rule.filterProperty.title"),
});
this.filterProperty.addEventListener("click", event => {
this.ruleEditor.ruleView.setFilterStyles("`" + this.prop.name + "`");
event.stopPropagation();
}, false);
// Holds the viewers for the computed properties.
// will be populated in |_updateComputed|.
this.computed = createChild(this.element, "ul", {
class: "ruleview-computedlist",
});
// Only bind event handlers if the rule is editable.
if (this.ruleEditor.isEditable) {
this.enable.addEventListener("click", this._onEnableClicked, true);
this.nameContainer.addEventListener("click", (event) => {
// Clicks within the name shouldn't propagate any further.
event.stopPropagation();
// Forward clicks on nameContainer to the editable nameSpan
if (event.target === this.nameContainer) {
this.nameSpan.click();
}
}, false);
editableField({
start: this._onStartEditing,
element: this.nameSpan,
done: this._onNameDone,
destroy: this.update,
advanceChars: ":",
contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
popup: this.popup
});
// Auto blur name field on multiple CSS rules get pasted in.
this.nameContainer.addEventListener("paste",
blurOnMultipleProperties(this.cssProperties), false);
this.valueContainer.addEventListener("click", (event) => {
// Clicks within the value shouldn't propagate any further.
event.stopPropagation();
// Forward clicks on valueContainer to the editable valueSpan
if (event.target === this.valueContainer) {
this.valueSpan.click();
}
}, false);
this.valueSpan.addEventListener("click", (event) => {
let target = event.target;
if (target.nodeName === "a") {
event.stopPropagation();
event.preventDefault();
this.browserWindow.openUILinkIn(target.href, "tab");
}
}, false);
editableField({
start: this._onStartEditing,
element: this.valueSpan,
done: this._onValueDone,
destroy: this.update,
validate: this._onValidate,
advanceChars: advanceValidate,
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
property: this.prop,
popup: this.popup,
multiline: true,
maxWidth: () => this.container.getBoundingClientRect().width
});
}
},
_create: function() {
this.element = this.doc.createElementNS(HTML_NS, "li");
this.element.classList.add("ruleview-property");
this.element._textPropertyEditor = this;
this.container = createChild(this.element, "div", {
class: "ruleview-propertycontainer inline-tooltip-container"
});
// The enable checkbox will disable or enable the rule.
this.enable = createChild(this.container, "div", {
class: "ruleview-enableproperty theme-checkbox",
tabindex: "-1"
});
this.nameContainer = createChild(this.container, "span", {
class: "ruleview-namecontainer"
});
// Property name, editable when focused. Property name
// is committed when the editor is unfocused.
this.nameSpan = createChild(this.nameContainer, "span", {
class: "ruleview-propertyname theme-fg-color5",
tabindex: this.ruleEditor.isEditable ? "0" : "-1",
});
appendText(this.nameContainer, ": ");
// Click to expand the computed properties of the text property.
this.expander = createChild(this.container, "span", {
class: "ruleview-expander theme-twisty"
});
this.expander.addEventListener("click", this._onExpandClicked, true);
// Create a span that will hold the property and semicolon.
// Use this span to create a slightly larger click target
// for the value.
this.valueContainer = createChild(this.container, "span", {
class: "ruleview-propertyvaluecontainer"
});
// Property value, editable when focused. Changes to the
// property value are applied as they are typed, and reverted
// if the user presses escape.
this.valueSpan = createChild(this.valueContainer, "span", {
class: "ruleview-propertyvalue theme-fg-color1",
tabindex: this.ruleEditor.isEditable ? "0" : "-1",
});
// Storing the TextProperty on the elements for easy access
// (for instance by the tooltip)
this.valueSpan.textProperty = this.prop;
this.nameSpan.textProperty = this.prop;
appendText(this.valueContainer, ";");
this.warning = createChild(this.container, "div", {
class: "ruleview-warning",
hidden: "",
title: l10n("rule.warning.title"),
});
// Filter button that filters for the current property name and is
// displayed when the property is overridden by another rule.
this.filterProperty = createChild(this.container, "div", {
class: "ruleview-overridden-rule-filter",
hidden: "",
title: l10n("rule.filterProperty.title"),
});
this.filterProperty.addEventListener("click", event => {
this.ruleEditor.ruleView.setFilterStyles("`" + this.prop.name + "`");
event.stopPropagation();
});
// Holds the viewers for the computed properties.
// will be populated in |_updateComputed|.
this.computed = createChild(this.element, "ul", {
class: "ruleview-computedlist",
});
// Holds the viewers for the overridden shorthand properties.
// will be populated in |_updateShorthandOverridden|.
this.shorthandOverridden = createChild(this.element, "ul", {
class: "ruleview-overridden-items",
});
// Only bind event handlers if the rule is editable.
if (this.ruleEditor.isEditable) {
this.enable.addEventListener("click", this._onEnableClicked, true);
this.nameContainer.addEventListener("click", (event) => {
// Clicks within the name shouldn't propagate any further.
event.stopPropagation();
// Forward clicks on nameContainer to the editable nameSpan
if (event.target === this.nameContainer) {
this.nameSpan.click();
}
});
editableField({
start: this._onStartEditing,
element: this.nameSpan,
done: this._onNameDone,
destroy: this.updatePropertyState,
advanceChars: ":",
contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
popup: this.popup,
cssProperties: this.cssProperties,
});
// Auto blur name field on multiple CSS rules get pasted in.
this.nameContainer.addEventListener("paste",
blurOnMultipleProperties(this.cssProperties));
this.valueContainer.addEventListener("click", (event) => {
// Clicks within the value shouldn't propagate any further.
event.stopPropagation();
// Forward clicks on valueContainer to the editable valueSpan
if (event.target === this.valueContainer) {
this.valueSpan.click();
}
});
// The mousedown event could trigger a blur event on nameContainer, which
// will trigger a call to the update function. The update function clears
// valueSpan's markup. Thus the regular click event does not bubble up, and
// listener's callbacks are not called.
// So we need to remember where the user clicks in order to re-trigger the click
// after the valueSpan's markup is re-populated. We only need to track this for
// valueSpan's child elements, because direct click on valueSpan will always
// trigger a click event.
this.valueSpan.addEventListener("mousedown", (event) => {
const clickedEl = event.target;
if (clickedEl === this.valueSpan) {
return;
}
this._hasPendingClick = true;
const matchedSelector = ACTIONABLE_ELEMENTS_SELECTORS.find(
(selector) => clickedEl.matches(selector));
if (matchedSelector) {
const similarElements = [...this.valueSpan.querySelectorAll(matchedSelector)];
this._clickedElementOptions = {
selector: matchedSelector,
index: similarElements.indexOf(clickedEl)
};
}
});
this.valueSpan.addEventListener("mouseup", (event) => {
this._clickedElementOptions = null;
this._hasPendingClick = false;
});
this.valueSpan.addEventListener("click", (event) => {
const target = event.target;
if (target.nodeName === "a") {
event.stopPropagation();
event.preventDefault();
openContentLink(target.href);
}
});
editableField({
start: this._onStartEditing,
element: this.valueSpan,
done: this._onValueDone,
destroy: this.update,
validate: this._onValidate,
advanceChars: advanceValidate,
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
property: this.prop,
defaultIncrement: this.prop.name === "opacity" ? 0.1 : 1,
popup: this.popup,
multiline: true,
maxWidth: () => this.container.getBoundingClientRect().width,
cssProperties: this.cssProperties,
cssVariables: this.rule.elementStyle.variables,
getGridLineNames: this.getGridlineNames,
});
}
},