Bug 1222737 - Fix missing colons and semi-colons in renders of pasted computed rules; r?pbro
MozReview-Commit-ID: DIjiKKwhvCJ
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -736,48 +736,24 @@ CssComputedView.prototype = {
/**
* Copy the current selection to the clipboard
*/
copySelection: function () {
try {
let win = this.styleWindow;
let text = win.getSelection().toString().trim();
- // isPropertyPresent is set when a property name is spotted and
- // we assume that the next line will be a property value.
- let isPropertyPresent = false;
- // Tidy up block headings by moving CSS property names and their
- // values onto the same line and inserting a colon between them.
let textArray = text.split(/[\r\n]+/);
- let result = "";
- // Parse text array to output string.
- if (textArray.length > 1) {
- for (let prop of textArray) {
- if (CssComputedView.propertyNames.indexOf(prop) !== -1) {
- // Property name found so setting isPropertyPresent to true
- isPropertyPresent = true;
- // Property name
- result += prop;
- } else if (isPropertyPresent === true) {
- // Since isPropertyPresent is true so we assume that this is
- // a property value and we append it to result preceeded by
- // a :.
- result += ": " + prop + ";\n";
- isPropertyPresent = false;
- } else {
- // since isPropertyPresent is not set, we assume this is
- // normal text and we append it to result without any :.
- result += prop + "\n";
- }
- }
- } else {
- // Short text fragment.
- result = textArray[0];
- }
+ // Strip extra line breaks and format them correctly
+ let result = textArray.reduce(function (acc, curr, i) {
+ return ((i + 1) % 3 == 0 && i < textArray.length - 1)
+ ? acc + curr + "\n"
+ : acc + curr;
+ }, "");
clipboardHelper.copyString(result);
} catch (e) {
console.error(e);
}
},
/**
@@ -1025,32 +1001,46 @@ PropertyView.prototype = {
this.nameNode.setAttribute("tabindex", "");
// Avoid english text (css properties) from being altered
// by RTL mode
this.nameNode.setAttribute("dir", "ltr");
this.nameNode.textContent = this.nameNode.title = this.name;
// Make it hand over the focus to the container
this.onFocus = () => this.element.focus();
this.nameNode.addEventListener("click", this.onFocus);
+
+ // Build the style name ":" separator
+ let nameSeparator = doc.createElementNS(HTML_NS, "span");
+ nameSeparator.setAttribute("class", "visually-hidden");
+ nameSeparator.textContent = ":";
+ this.nameNode.appendChild(nameSeparator);
+
nameContainer.appendChild(this.nameNode);
let valueContainer = doc.createElementNS(HTML_NS, "div");
valueContainer.className = "property-value-container";
this.element.appendChild(valueContainer);
// Build the style value element
this.valueNode = doc.createElementNS(HTML_NS, "div");
this.valueNode.setAttribute("class", "property-value theme-fg-color1");
// Reset its tabindex attribute otherwise, if an ellipsis is applied
// it will be reachable via TABing
this.valueNode.setAttribute("tabindex", "");
this.valueNode.setAttribute("dir", "ltr");
// Make it hand over the focus to the container
this.valueNode.addEventListener("click", this.onFocus);
+
+ // Build the style value ";" separator
+ let valueSeparator = doc.createElementNS(HTML_NS, "span");
+ valueSeparator.setAttribute("class", "visually-hidden");
+ valueSeparator.textContent = ";";
+
valueContainer.appendChild(this.valueNode);
+ valueContainer.appendChild(valueSeparator);
return this.element;
},
buildSelectorContainer: function () {
let doc = this.tree.styleDocument;
let element = doc.createElementNS(HTML_NS, "div");
element.setAttribute("class", this.propertyContentClassName);